From a6ff5eee45215effb3344cb5d631a27a7c0369aa Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Fri, 22 Sep 2023 19:34:01 +0200
Subject: refactor(components): rewrite form components

---
 .../forms/flipping-label/flipping-label.tsx        | 37 ++++++++++++++++++++++
 1 file changed, 37 insertions(+)
 create mode 100644 src/components/molecules/forms/flipping-label/flipping-label.tsx

(limited to 'src/components/molecules/forms/flipping-label/flipping-label.tsx')

diff --git a/src/components/molecules/forms/flipping-label/flipping-label.tsx b/src/components/molecules/forms/flipping-label/flipping-label.tsx
new file mode 100644
index 0000000..3e23915
--- /dev/null
+++ b/src/components/molecules/forms/flipping-label/flipping-label.tsx
@@ -0,0 +1,37 @@
+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>
+  );
+};
-- 
cgit v1.2.3