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

10 files changed, 254 insertions, 20 deletions

diff --git a/src/components/atoms/forms/label.stories.tsx b/src/components/atoms/forms/label.stories.tsx
index 79f1a34..f66aa13 100644
--- a/src/components/atoms/forms/label.stories.tsx
+++ b/src/components/atoms/forms/label.stories.tsx
@@ -12,6 +12,19 @@ export default {
     size: 'small',
   },
   argTypes: {
+    'aria-label': {
+      control: {
+        type: 'text',
+      },
+      description: 'Define an accessible name.',
+      table: {
+        category: 'Accessibility',
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
     className: {
       control: {
         type: 'text',
diff --git a/src/components/atoms/forms/label.tsx b/src/components/atoms/forms/label.tsx
index ce4c70f..2ec614f 100644
--- a/src/components/atoms/forms/label.tsx
+++ b/src/components/atoms/forms/label.tsx
@@ -3,6 +3,10 @@ import styles from './label.module.scss';
 
 export type LabelProps = {
   /**
+   * An accessible name for the label.
+   */
+  'aria-label'?: string;
+  /**
    * The label body.
    */
   children: ReactNode;
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;
diff --git a/src/components/organisms/toolbar/main-nav.module.scss b/src/components/organisms/toolbar/main-nav.module.scss
index 76af935..24abc43 100644
--- a/src/components/organisms/toolbar/main-nav.module.scss
+++ b/src/components/organisms/toolbar/main-nav.module.scss
@@ -86,3 +86,11 @@
     }
   }
 }
+
+.label {
+  display: flex;
+  place-content: center;
+  place-items: center;
+  width: var(--btn-size, #{fun.convert-px(60)});
+  height: var(--btn-size, #{fun.convert-px(60)});
+}
diff --git a/src/components/organisms/toolbar/search.tsx b/src/components/organisms/toolbar/search.tsx
index 5695348..dc71c49 100644
--- a/src/components/organisms/toolbar/search.tsx
+++ b/src/components/organisms/toolbar/search.tsx
@@ -1,6 +1,6 @@
 import Checkbox, { type CheckboxProps } from '@components/atoms/forms/checkbox';
-import Label from '@components/atoms/forms/label';
 import MagnifyingGlass from '@components/atoms/icons/magnifying-glass';
+import FlippingLabel from '@components/molecules/forms/flipping-label';
 import { forwardRef, ForwardRefRenderFunction } from 'react';
 import { useIntl } from 'react-intl';
 import SearchModal, { type SearchModalProps } from '../modals/search-modal';
@@ -52,13 +52,14 @@ const Search: ForwardRefRenderFunction<HTMLDivElement, SearchProps> = (
         setValue={setIsActive}
         className={`${sharedStyles.checkbox} ${searchStyles.checkbox}`}
       />
-      <Label
+      <FlippingLabel
+        className={sharedStyles.label}
         htmlFor="search-button"
         aria-label={label}
-        className={`${sharedStyles.label} ${searchStyles.label}`}
+        isActive={isActive}
       >
         <MagnifyingGlass />
-      </Label>
+      </FlippingLabel>
       <SearchModal
         searchPage={searchPage}
         className={`${sharedStyles.modal} ${searchStyles.modal} ${className}`}
diff --git a/src/components/organisms/toolbar/settings.tsx b/src/components/organisms/toolbar/settings.tsx
index f558eb7..ceb6db4 100644
--- a/src/components/organisms/toolbar/settings.tsx
+++ b/src/components/organisms/toolbar/settings.tsx
@@ -1,6 +1,6 @@
 import Checkbox, { type CheckboxProps } from '@components/atoms/forms/checkbox';
-import Label from '@components/atoms/forms/label';
 import Cog from '@components/atoms/icons/cog';
+import FlippingLabel from '@components/molecules/forms/flipping-label';
 import { forwardRef, ForwardRefRenderFunction } from 'react';
 import { useIntl } from 'react-intl';
 import SettingsModal, {
@@ -53,13 +53,14 @@ const Settings: ForwardRefRenderFunction<HTMLDivElement, SettingsProps> = (
         setValue={setIsActive}
         className={`${sharedStyles.checkbox} ${settingsStyles.checkbox}`}
       />
-      <Label
+      <FlippingLabel
+        className={sharedStyles.label}
         htmlFor="settings-button"
         aria-label={label}
-        className={`${sharedStyles.label} ${settingsStyles.label}`}
+        isActive={isActive}
       >
         <Cog />
-      </Label>
+      </FlippingLabel>
       <SettingsModal
         ackeeStorageKey={ackeeStorageKey}
         className={`${sharedStyles.modal} ${settingsStyles.modal} ${className}`}
diff --git a/src/components/organisms/toolbar/toolbar-items.module.scss b/src/components/organisms/toolbar/toolbar-items.module.scss
index 20abe01..86b4924 100644
--- a/src/components/organisms/toolbar/toolbar-items.module.scss
+++ b/src/components/organisms/toolbar/toolbar-items.module.scss
@@ -38,20 +38,14 @@
   --draw-border-color1: var(--color-primary-light);
   --draw-border-color2: var(--color-primary-lighter);
 
-  display: flex;
-  place-content: center;
-  place-items: center;
-  width: var(--btn-size);
-  height: var(--btn-size);
-  padding: var(--spacing-2xs);
-
-  &:hover,
-  &:focus {
-    @extend %draw-borders;
+  @include mix.media("screen") {
+    @include mix.dimensions("sm") {
+      border-radius: fun.convert-px(5);
+    }
   }
 
-  &:focus {
-    color: var(--color-primary-light);
+  &:hover {
+    @extend %draw-borders;
   }
 
   &:active {