diff options
Diffstat (limited to 'src/components/molecules/forms/flipping-label.tsx')
| -rw-r--r-- | src/components/molecules/forms/flipping-label.tsx | 37 |
1 files changed, 0 insertions, 37 deletions
diff --git a/src/components/molecules/forms/flipping-label.tsx b/src/components/molecules/forms/flipping-label.tsx deleted file mode 100644 index c85642b..0000000 --- a/src/components/molecules/forms/flipping-label.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import { FC } from 'react'; -import { Close, Label, type LabelProps } from '../../atoms'; -import styles from './flipping-label.module.scss'; - -export type FlippingLabelProps = Pick< - LabelProps, - 'aria-label' | 'className' | 'htmlFor' -> & { - /** - * The front icon. - */ - children: JSX.Element; - /** - * Which side of the label should be displayed? True for the close icon. - */ - isActive: boolean; -}; - -export const FlippingLabel: FC<FlippingLabelProps> = ({ - children, - className = '', - isActive, - ...props -}) => { - const wrapperModifier = isActive ? 'wrapper--active' : 'wrapper--inactive'; - - return ( - <Label {...props} className={`${styles.label} ${className}`}> - <span className={`${styles.wrapper} ${styles[wrapperModifier]}`}> - <span className={styles.front}>{children}</span> - <span className={styles.back}> - <Close aria-hidden={true} /> - </span> - </span> - </Label> - ); -}; |
