1 | import React from 'react';
|
2 | import cx from 'classnames';
|
3 |
|
4 | interface CloseIconProps {
|
5 | id?: string;
|
6 | closeIcon?: React.ReactNode;
|
7 | styles?: {
|
8 | closeButton?: React.CSSProperties;
|
9 | closeIcon?: React.CSSProperties;
|
10 | };
|
11 | classNames?: {
|
12 | closeButton?: string;
|
13 | closeIcon?: string;
|
14 | };
|
15 | classes: {
|
16 | closeButton?: string;
|
17 | };
|
18 | onClickCloseIcon: () => void;
|
19 | }
|
20 |
|
21 | const CloseIcon = ({
|
22 | classes,
|
23 | classNames,
|
24 | styles,
|
25 | id,
|
26 | closeIcon,
|
27 | onClickCloseIcon,
|
28 | }: CloseIconProps) => (
|
29 | <button
|
30 | id={id}
|
31 | className={cx(classes.closeButton, classNames?.closeButton)}
|
32 | style={styles?.closeButton}
|
33 | onClick={onClickCloseIcon}
|
34 | data-testid="close-button"
|
35 | >
|
36 | {closeIcon ? (
|
37 | closeIcon
|
38 | ) : (
|
39 | <svg
|
40 | className={classNames?.closeIcon}
|
41 | style={styles?.closeIcon}
|
42 | xmlns="http://www.w3.org/2000/svg"
|
43 | width={28}
|
44 | height={28}
|
45 | viewBox="0 0 36 36"
|
46 | data-testid="close-icon"
|
47 | >
|
48 | <path d="M28.5 9.62L26.38 7.5 18 15.88 9.62 7.5 7.5 9.62 15.88 18 7.5 26.38l2.12 2.12L18 20.12l8.38 8.38 2.12-2.12L20.12 18z" />
|
49 | </svg>
|
50 | )}
|
51 | </button>
|
52 | );
|
53 |
|
54 | export default CloseIcon;
|