From 5d3e8a4d0c2ce2ad8f22df857ab3ce54fcfc38ac Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Fri, 3 Nov 2023 12:22:47 +0100
Subject: refactor(components): replace Toolbar with Navbar component

* remove SearchModal and SettingsModal components
* add a generic NavbarItem component (instead of the previous toolbar
items to avoid unreadable styles...)
* move FlippingLabel component logic into NavbarItem since it is only
used here
---
 .../flipping-label/flipping-label.module.scss      | 17 ----
 .../flipping-label/flipping-label.stories.tsx      | 98 ----------------------
 .../forms/flipping-label/flipping-label.test.tsx   | 18 ----
 .../forms/flipping-label/flipping-label.tsx        | 54 ------------
 .../molecules/forms/flipping-label/index.ts        |  1 -
 src/components/molecules/forms/index.ts            |  1 -
 6 files changed, 189 deletions(-)
 delete mode 100644 src/components/molecules/forms/flipping-label/flipping-label.module.scss
 delete mode 100644 src/components/molecules/forms/flipping-label/flipping-label.stories.tsx
 delete mode 100644 src/components/molecules/forms/flipping-label/flipping-label.test.tsx
 delete mode 100644 src/components/molecules/forms/flipping-label/flipping-label.tsx
 delete mode 100644 src/components/molecules/forms/flipping-label/index.ts

(limited to 'src/components/molecules/forms')

diff --git a/src/components/molecules/forms/flipping-label/flipping-label.module.scss b/src/components/molecules/forms/flipping-label/flipping-label.module.scss
deleted file mode 100644
index 169bde3..0000000
--- a/src/components/molecules/forms/flipping-label/flipping-label.module.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-@use "../../../../styles/abstracts/functions" as fun;
-
-.wrapper {
-  --size: var(--btn-size, #{fun.convert-px(60)});
-  --flipper-speed: 0.5s;
-
-  width: var(--size);
-  height: var(--size);
-}
-
-.wrapper,
-.front,
-.back {
-  display: flex;
-  place-content: center;
-  place-items: center;
-}
diff --git a/src/components/molecules/forms/flipping-label/flipping-label.stories.tsx b/src/components/molecules/forms/flipping-label/flipping-label.stories.tsx
deleted file mode 100644
index 906a488..0000000
--- a/src/components/molecules/forms/flipping-label/flipping-label.stories.tsx
+++ /dev/null
@@ -1,98 +0,0 @@
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-import { useToggle } from '../../../../utils/hooks';
-import { Button, Icon } from '../../../atoms';
-import { FlippingLabel } from './flipping-label';
-
-export default {
-  title: 'Molecules/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, toggle] = useToggle(isActive);
-
-  return (
-    <Button kind="neutral" onClick={toggle} shape="initial" type="button">
-      <FlippingLabel {...args} isActive={active} />
-    </Button>
-  );
-};
-
-export const Active = Template.bind({});
-Active.args = {
-  icon: <Icon shape="magnifying-glass" />,
-  isActive: true,
-  label: 'Close the search',
-};
-
-export const Inactive = Template.bind({});
-Inactive.args = {
-  icon: <Icon shape="magnifying-glass" />,
-  isActive: false,
-  label: 'Open the search',
-};
diff --git a/src/components/molecules/forms/flipping-label/flipping-label.test.tsx b/src/components/molecules/forms/flipping-label/flipping-label.test.tsx
deleted file mode 100644
index d59c5f3..0000000
--- a/src/components/molecules/forms/flipping-label/flipping-label.test.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { describe, expect, it } from '@jest/globals';
-import { render, screen as rtlScreen } from '@testing-library/react';
-import { Icon } from '../../../atoms';
-import { FlippingLabel } from './flipping-label';
-
-describe('FlippingLabel', () => {
-  it('renders a label', () => {
-    const label = 'vero quo inventore';
-    render(
-      <FlippingLabel
-        icon={<Icon shape="arrow" />}
-        isActive={false}
-        label={label}
-      />
-    );
-    expect(rtlScreen.getByText(label)).toBeInTheDocument();
-  });
-});
diff --git a/src/components/molecules/forms/flipping-label/flipping-label.tsx b/src/components/molecules/forms/flipping-label/flipping-label.tsx
deleted file mode 100644
index 586301f..0000000
--- a/src/components/molecules/forms/flipping-label/flipping-label.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import type { FC, ReactNode } from 'react';
-import {
-  Icon,
-  Label,
-  VisuallyHidden,
-  type LabelProps,
-  Flip,
-  FlipSide,
-} from '../../../atoms';
-import styles from './flipping-label.module.scss';
-
-export type FlippingLabelProps = Omit<
-  LabelProps,
-  'children' | 'isHidden' | 'isRequired'
-> & {
-  /**
-   * The front icon.
-   */
-  icon: ReactNode;
-  /**
-   * Which side of the label should be displayed? True for the close icon.
-   */
-  isActive: boolean;
-  /**
-   * An accessible name for the label.
-   */
-  label: string;
-};
-
-export const FlippingLabel: FC<FlippingLabelProps> = ({
-  className = '',
-  icon,
-  isActive,
-  label,
-  ...props
-}) => {
-  const wrapperClass = `${styles.wrapper} ${className}`;
-
-  return (
-    <Label {...props} className={wrapperClass}>
-      <VisuallyHidden>{label}</VisuallyHidden>
-      <Flip
-        aria-hidden
-        // eslint-disable-next-line react/jsx-no-literals -- Shape allowed
-        showBack={isActive}
-      >
-        <FlipSide className={styles.front}>{icon}</FlipSide>
-        <FlipSide className={styles.back} isBack>
-          <Icon aria-hidden shape="cross" />
-        </FlipSide>
-      </Flip>
-    </Label>
-  );
-};
diff --git a/src/components/molecules/forms/flipping-label/index.ts b/src/components/molecules/forms/flipping-label/index.ts
deleted file mode 100644
index 7b50c75..0000000
--- a/src/components/molecules/forms/flipping-label/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './flipping-label';
diff --git a/src/components/molecules/forms/index.ts b/src/components/molecules/forms/index.ts
index 883a033..073f97d 100644
--- a/src/components/molecules/forms/index.ts
+++ b/src/components/molecules/forms/index.ts
@@ -1,4 +1,3 @@
-export * from './flipping-label';
 export * from './labelled-field';
 export * from './radio-group';
 export * from './switch';
-- 
cgit v1.2.3