diff options
Diffstat (limited to 'src/components/atoms/icons/plus-minus.tsx')
| -rw-r--r-- | src/components/atoms/icons/plus-minus.tsx | 45 |
1 files changed, 45 insertions, 0 deletions
diff --git a/src/components/atoms/icons/plus-minus.tsx b/src/components/atoms/icons/plus-minus.tsx new file mode 100644 index 0000000..1a6f7b0 --- /dev/null +++ b/src/components/atoms/icons/plus-minus.tsx @@ -0,0 +1,45 @@ +import { FC } from 'react'; +import styles from './plus-minus.module.scss'; + +type PlusMinusProps = { + /** + * Adds additional classes. + */ + additionalClasses?: string; + /** + * An accessible name. + */ + ariaLabel?: string; + /** + * Should be hidden for accessibility. Default: true. + */ + ariaHidden?: boolean; + /** + * Which state should be displayed. + */ + state: 'plus' | 'minus'; +}; + +/** + * PlusMinus component + * + * Render a plus or a minus icon. + */ +const PlusMinus: FC<PlusMinusProps> = ({ + additionalClasses, + ariaHidden = true, + ariaLabel, + state, +}) => { + const stateClass = `icon--${state}`; + + return ( + <div + className={`${styles.icon} ${styles[stateClass]} ${additionalClasses}`} + aria-label={ariaLabel} + aria-hidden={ariaHidden} + ></div> + ); +}; + +export default PlusMinus; |
