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; | 
