src/components/molecules/forms/flipping-label.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

import Label, { LabelProps } from '@components/atoms/forms/label';
import Close from '@components/atoms/icons/close';
import { FC } from 'react';
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;
};

const FlippingLabel: FC<FlippingLabelProps> = ({
  children,
  className = '',
  isActive,
  ...props
}) => {
  const wrapperModifier = isActive ? 'wrapper--active' : 'wrapper--inactive';

  return (
    <Label className={`${styles.label} ${className}`} {...props}>
      <span className={`${styles.wrapper} ${styles[wrapperModifier]}`}>
        <span className={styles.front}>{children}</span>
        <span className={styles.back}>
          <Close />
        </span>
      </span>
    </Label>
  );
};

export default FlippingLabel;