chore(toolbar): change icons to close button when activated

4 files changed, 213 insertions, 0 deletions

diff --git a/src/components/molecules/forms/flipping-label.module.scss b/src/components/molecules/forms/flipping-label.module.scss
new file mode 100644
index 0000000..e650ebe
--- /dev/null
+++ b/src/components/molecules/forms/flipping-label.module.scss
@@ -0,0 +1,63 @@
+@use "@styles/abstracts/functions" as fun;
+
+.label {
+  display: block;
+  width: var(--btn-size, #{fun.convert-px(60)});
+  height: var(--btn-size, #{fun.convert-px(60)});
+}
+
+.front,
+.back {
+  display: flex;
+  place-content: center;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  right: 0;
+  backface-visibility: hidden;
+  transition: all 0.6s ease-in 0s;
+}
+
+.front {
+  z-index: 20;
+}
+
+.back {
+  z-index: 10;
+}
+
+.wrapper {
+  --icon-size: 60%;
+
+  display: flex;
+  place-content: center;
+  place-items: center;
+  width: 100%;
+  height: 100%;
+  position: relative;
+  transition: all 0.5s ease-in-out 0s;
+  transform-style: preserve-3d;
+
+  &--active {
+    transform: rotateY(180deg);
+
+    .front {
+      transform: scale(0.2);
+    }
+
+    .back {
+      transform: scale(1) rotateY(180deg);
+    }
+  }
+
+  &--inactive {
+    .front {
+      transform: scale(1);
+    }
+
+    .back {
+      transform: scale(0.2) rotateY(180deg);
+    }
+  }
+}
diff --git a/src/components/molecules/forms/flipping-label.stories.tsx b/src/components/molecules/forms/flipping-label.stories.tsx
new file mode 100644
index 0000000..b8d17ec
--- /dev/null
+++ b/src/components/molecules/forms/flipping-label.stories.tsx
@@ -0,0 +1,96 @@
+import MagnifyingGlass from '@components/atoms/icons/magnifying-glass';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { useState } from 'react';
+import FlippingLabel from './flipping-label';
+
+export default {
+  title: 'Organisms/Forms/FlippingLabel',
+  component: FlippingLabel,
+  argTypes: {
+    'aria-label': {
+      control: {
+        type: 'text',
+      },
+      description: 'An accessible name for the label.',
+      table: {
+        category: 'Accessibility',
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
+    children: {
+      control: {
+        type: null,
+      },
+      description: 'An icon for the label front face.',
+      type: {
+        name: 'function',
+        required: true,
+      },
+    },
+    className: {
+      control: {
+        type: 'text',
+      },
+      description: 'Set additional classnames to the label.',
+      table: {
+        category: 'Styles',
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
+    htmlFor: {
+      control: {
+        type: null,
+      },
+      description: 'Bind the label to a field by id.',
+      table: {
+        category: 'Options',
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
+    isActive: {
+      control: {
+        type: 'boolean',
+      },
+      description:
+        'Which side of the label should be displayed? True for the close icon.',
+      type: {
+        name: 'boolean',
+        required: true,
+      },
+    },
+  },
+} as ComponentMeta<typeof FlippingLabel>;
+
+const Template: ComponentStory<typeof FlippingLabel> = ({
+  isActive,
+  ...args
+}) => {
+  const [active, setActive] = useState<boolean>(isActive);
+
+  return (
+    <div onClick={() => setActive(!active)}>
+      <FlippingLabel isActive={active} {...args} />
+    </div>
+  );
+};
+
+export const Active = Template.bind({});
+Active.args = {
+  children: <MagnifyingGlass />,
+  isActive: true,
+};
+
+export const Inactive = Template.bind({});
+Inactive.args = {
+  children: <MagnifyingGlass />,
+  isActive: false,
+};
diff --git a/src/components/molecules/forms/flipping-label.test.tsx b/src/components/molecules/forms/flipping-label.test.tsx
new file mode 100644
index 0000000..9a7aa22
--- /dev/null
+++ b/src/components/molecules/forms/flipping-label.test.tsx
@@ -0,0 +1,14 @@
+import { render, screen } from '@test-utils';
+import FlippingLabel from './flipping-label';
+
+describe('FlippingLabel', () => {
+  it('renders a label', () => {
+    const ariaLabel = 'vero quo inventore';
+    render(
+      <FlippingLabel aria-label={ariaLabel} isActive={false}>
+        <>Test</>
+      </FlippingLabel>
+    );
+    expect(screen.getByLabelText(ariaLabel)).toBeInTheDocument();
+  });
+});
diff --git a/src/components/molecules/forms/flipping-label.tsx b/src/components/molecules/forms/flipping-label.tsx
new file mode 100644
index 0000000..c874369
--- /dev/null
+++ b/src/components/molecules/forms/flipping-label.tsx
@@ -0,0 +1,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;