From 6221fa82e41915702d8139cade5c25e9d61e619f Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Mon, 2 Oct 2023 17:39:16 +0200
Subject: refactor(components): remove Column and NoScript from atoms

* Column is a simple div meant to be used inside Columns component so
they should live together.
* NoScript is only used in Layout component and its name does not
make sense since it needs to be used inside a `noscript` element.
---
 src/components/atoms/layout/column.stories.tsx    | 29 -----------
 src/components/atoms/layout/column.test.tsx       | 13 -----
 src/components/atoms/layout/column.tsx            | 14 -----
 src/components/atoms/layout/copyright.module.scss |  2 +
 src/components/atoms/layout/copyright.stories.tsx |  2 +-
 src/components/atoms/layout/copyright.test.tsx    |  4 +-
 src/components/atoms/layout/copyright.tsx         |  2 +-
 src/components/atoms/layout/index.ts              |  2 -
 src/components/atoms/layout/no-script.module.scss | 19 -------
 src/components/atoms/layout/no-script.stories.tsx | 62 -----------------------
 src/components/atoms/layout/no-script.test.tsx    | 12 -----
 src/components/atoms/layout/no-script.tsx         | 22 --------
 12 files changed, 6 insertions(+), 177 deletions(-)
 delete mode 100644 src/components/atoms/layout/column.stories.tsx
 delete mode 100644 src/components/atoms/layout/column.test.tsx
 delete mode 100644 src/components/atoms/layout/column.tsx
 delete mode 100644 src/components/atoms/layout/no-script.module.scss
 delete mode 100644 src/components/atoms/layout/no-script.stories.tsx
 delete mode 100644 src/components/atoms/layout/no-script.test.tsx
 delete mode 100644 src/components/atoms/layout/no-script.tsx

(limited to 'src/components/atoms/layout')

diff --git a/src/components/atoms/layout/column.stories.tsx b/src/components/atoms/layout/column.stories.tsx
deleted file mode 100644
index a8d43bf..0000000
--- a/src/components/atoms/layout/column.stories.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { Column as ColumnComponent } from './column';
-
-export default {
-  title: 'Atoms/Layout/Column',
-  component: ColumnComponent,
-  argTypes: {
-    children: {
-      description: 'The column body.',
-      type: {
-        name: 'array',
-        required: true,
-        value: {},
-      },
-    },
-  },
-} as ComponentMeta<typeof ColumnComponent>;
-
-const Template: ComponentStory<typeof ColumnComponent> = (args) => (
-  <ColumnComponent {...args} />
-);
-
-const body =
-  'Non praesentium voluptas quisquam ex est. Distinctio accusamus facilis libero in aut. Et veritatis quo impedit fugit amet sit accusantium. Ut est rerum asperiores sint libero eveniet. Molestias placeat recusandae suscipit eligendi sunt hic.';
-
-export const Column = Template.bind({});
-Column.args = {
-  children: body,
-};
diff --git a/src/components/atoms/layout/column.test.tsx b/src/components/atoms/layout/column.test.tsx
deleted file mode 100644
index 7e747c6..0000000
--- a/src/components/atoms/layout/column.test.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { describe, expect, it } from '@jest/globals';
-import { render, screen } from '../../../../tests/utils';
-import { Column } from './column';
-
-const body =
-  'Non praesentium voluptas quisquam ex est. Distinctio accusamus facilis libero in aut. Et veritatis quo impedit fugit amet sit accusantium. Ut est rerum asperiores sint libero eveniet. Molestias placeat recusandae suscipit eligendi sunt hic.';
-
-describe('Column', () => {
-  it('renders the column body', () => {
-    render(<Column>{body}</Column>);
-    expect(screen.getByText(body)).toBeInTheDocument();
-  });
-});
diff --git a/src/components/atoms/layout/column.tsx b/src/components/atoms/layout/column.tsx
deleted file mode 100644
index 632799c..0000000
--- a/src/components/atoms/layout/column.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import { FC, HTMLAttributes, ReactNode } from 'react';
-
-export type ColumnProps = HTMLAttributes<HTMLDivElement> & {
-  children: ReactNode;
-};
-
-/**
- * Column component.
- *
- * Render the body as a column.
- */
-export const Column: FC<ColumnProps> = ({ children, ...props }) => {
-  return <div {...props}>{children}</div>;
-};
diff --git a/src/components/atoms/layout/copyright.module.scss b/src/components/atoms/layout/copyright.module.scss
index ffde516..5d5435c 100644
--- a/src/components/atoms/layout/copyright.module.scss
+++ b/src/components/atoms/layout/copyright.module.scss
@@ -2,6 +2,8 @@
 @use "../../../styles/abstracts/mixins" as mix;
 
 .wrapper {
+  --icon-size: #{fun.convert-px(70)};
+
   display: flex;
   flex-flow: row wrap;
   align-items: center;
diff --git a/src/components/atoms/layout/copyright.stories.tsx b/src/components/atoms/layout/copyright.stories.tsx
index a21fdfb..58d1b1e 100644
--- a/src/components/atoms/layout/copyright.stories.tsx
+++ b/src/components/atoms/layout/copyright.stories.tsx
@@ -1,5 +1,5 @@
 import type { ComponentMeta, ComponentStory } from '@storybook/react';
-import { Icon } from '../images';
+import { Icon } from '../images/icons';
 import { Copyright as CopyrightComponent } from './copyright';
 
 /**
diff --git a/src/components/atoms/layout/copyright.test.tsx b/src/components/atoms/layout/copyright.test.tsx
index 3aa04d0..cdff292 100644
--- a/src/components/atoms/layout/copyright.test.tsx
+++ b/src/components/atoms/layout/copyright.test.tsx
@@ -1,6 +1,6 @@
 import { describe, expect, it } from '@jest/globals';
 import { render, screen as rtlScreen } from '../../../../tests/utils';
-import { Icon } from '../images';
+import { Icon } from '../images/icons';
 import { Copyright } from './copyright';
 
 const dates = {
@@ -29,6 +29,6 @@ describe('Copyright', () => {
 
   it('renders the copyright icon', () => {
     render(<Copyright dates={dates} icon={icon} owner={owner} />);
-    expect(rtlScreen.getByTitle(iconHeading)).toBeInTheDocument();
+    expect(rtlScreen.getByTitle('CC BY SA')).toBeInTheDocument();
   });
 });
diff --git a/src/components/atoms/layout/copyright.tsx b/src/components/atoms/layout/copyright.tsx
index 1e4af5e..c60ff8b 100644
--- a/src/components/atoms/layout/copyright.tsx
+++ b/src/components/atoms/layout/copyright.tsx
@@ -1,4 +1,4 @@
-import { FC, ReactNode } from 'react';
+import type { FC, ReactNode } from 'react';
 import styles from './copyright.module.scss';
 
 export type CopyrightDates = {
diff --git a/src/components/atoms/layout/index.ts b/src/components/atoms/layout/index.ts
index c53671a..9f467dc 100644
--- a/src/components/atoms/layout/index.ts
+++ b/src/components/atoms/layout/index.ts
@@ -1,11 +1,9 @@
 export * from './article';
 export * from './aside';
-export * from './column';
 export * from './copyright';
 export * from './footer';
 export * from './header';
 export * from './main';
 export * from './nav';
-export * from './no-script';
 export * from './notice';
 export * from './section';
diff --git a/src/components/atoms/layout/no-script.module.scss b/src/components/atoms/layout/no-script.module.scss
deleted file mode 100644
index b64edb9..0000000
--- a/src/components/atoms/layout/no-script.module.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-@use "../../../styles/abstracts/functions" as fun;
-
-.noscript {
-  color: var(--color-primary-darker);
-
-  &--top {
-    padding: var(--spacing-xs) var(--spacing-sm);
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    z-index: 10;
-    background: var(--color-bg);
-    border-bottom: fun.convert-px(3) solid var(--color-border);
-    font-size: var(--font-size-sm);
-    font-weight: 600;
-    text-align: center;
-  }
-}
diff --git a/src/components/atoms/layout/no-script.stories.tsx b/src/components/atoms/layout/no-script.stories.tsx
deleted file mode 100644
index 79548a1..0000000
--- a/src/components/atoms/layout/no-script.stories.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { NoScript } from './no-script';
-
-/**
- * NoScript - Storybook Meta
- */
-export default {
-  title: 'Atoms/Layout/NoScript',
-  component: NoScript,
-  args: {
-    position: 'initial',
-  },
-  argTypes: {
-    message: {
-      control: {
-        type: 'text',
-      },
-      description: 'A message to display when Javascript is disabled.',
-      type: {
-        name: 'string',
-        required: true,
-      },
-    },
-    position: {
-      control: {
-        type: 'select',
-      },
-      description: 'The message position.',
-      options: ['initial', 'top'],
-      table: {
-        category: 'Options',
-        defaultValue: 'initial',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-  },
-} as ComponentMeta<typeof NoScript>;
-
-const Template: ComponentStory<typeof NoScript> = (args) => (
-  <NoScript {...args} />
-);
-
-/**
- * NoScript Stories - Default
- */
-export const Default = Template.bind({});
-Default.args = {
-  message: 'A noscript only message.',
-  position: 'initial',
-};
-
-/**
- * NoScript Stories - Top
- */
-export const Top = Template.bind({});
-Top.args = {
-  message: 'A noscript only message.',
-  position: 'top',
-};
diff --git a/src/components/atoms/layout/no-script.test.tsx b/src/components/atoms/layout/no-script.test.tsx
deleted file mode 100644
index b737d7e..0000000
--- a/src/components/atoms/layout/no-script.test.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { describe, expect, it } from '@jest/globals';
-import { render, screen } from '../../../../tests/utils';
-import { NoScript } from './no-script';
-
-const message = 'A noscript message.';
-
-describe('NoScript', () => {
-  it('renders a message', () => {
-    render(<NoScript message={message} />);
-    expect(screen.getByText(message)).toBeInTheDocument();
-  });
-});
diff --git a/src/components/atoms/layout/no-script.tsx b/src/components/atoms/layout/no-script.tsx
deleted file mode 100644
index a79feaf..0000000
--- a/src/components/atoms/layout/no-script.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { FC } from 'react';
-import styles from './no-script.module.scss';
-
-export type NoScriptProps = {
-  /**
-   * The noscript message.
-   */
-  message: string;
-  /**
-   * The message position. Default: initial.
-   */
-  position?: 'initial' | 'top';
-};
-
-export const NoScript: FC<NoScriptProps> = ({
-  message,
-  position = 'initial',
-}) => {
-  const positionClass = styles[`noscript--${position}`];
-
-  return <div className={`${styles.noscript} ${positionClass}`}>{message}</div>;
-};
-- 
cgit v1.2.3