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.

20 files changed, 60 insertions, 197 deletions

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>;
-};
diff --git a/src/components/molecules/layout/columns.stories.tsx b/src/components/molecules/layout/columns.stories.tsx
index 4745dbf..43d0629 100644
--- a/src/components/molecules/layout/columns.stories.tsx
+++ b/src/components/molecules/layout/columns.stories.tsx
@@ -1,6 +1,5 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { Column } from '../../atoms';
-import { Columns } from './columns';
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import { Column, Columns } from './columns';
 
 export default {
   title: 'Molecules/Layout/Columns',
@@ -66,7 +65,7 @@ const column1 =
   '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.';
 
 const column2 =
-  'Occaecati consectetur ad similique itaque rem doloremque commodi voluptate porro. Nam quo voluptas commodi qui rerum qui. Explicabo quis adipisci rerum. Culpa alias laboriosam temporibus iusto harum at placeat.';
+  'Quaerat eum dignissimos tempore ab enim. Iusto inventore nemo. Veritatis voluptas quod maxime earum soluta illo atque vel. Nam et corrupti. Dolorem qui cum dolorem. Aut ut nobis. Mollitia qui voluptas rerum et quibusdam.';
 
 const column3 =
   'Libero aut ab neque voluptatem commodi. Quam quia voluptatem iusto dolorum. Enim ipsa totam corrupti qui cum quidem ea. Eos sed aliquam porro consequatur officia sed.';
diff --git a/src/components/molecules/layout/columns.test.tsx b/src/components/molecules/layout/columns.test.tsx
index d63e477..2b016e7 100644
--- a/src/components/molecules/layout/columns.test.tsx
+++ b/src/components/molecules/layout/columns.test.tsx
@@ -1,7 +1,6 @@
 import { describe, expect, it } from '@jest/globals';
-import { render, screen } from '../../../../tests/utils';
-import { Column } from '../../atoms';
-import { Columns } from './columns';
+import { render, screen as rtlScreen } from '../../../../tests/utils';
+import { Column, Columns } from './columns';
 
 const column1 =
   '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.';
@@ -26,10 +25,10 @@ describe('Columns', () => {
       </Columns>
     );
 
-    expect(screen.getByText(column1)).toBeInTheDocument();
-    expect(screen.getByText(column2)).toBeInTheDocument();
-    expect(screen.getByText(column3)).toBeInTheDocument();
-    expect(screen.getByText(column4)).toBeInTheDocument();
+    expect(rtlScreen.getByText(column1)).toBeInTheDocument();
+    expect(rtlScreen.getByText(column2)).toBeInTheDocument();
+    expect(rtlScreen.getByText(column3)).toBeInTheDocument();
+    expect(rtlScreen.getByText(column4)).toBeInTheDocument();
   });
 
   it('renders the right number of columns', () => {
@@ -42,7 +41,7 @@ describe('Columns', () => {
       </Columns>
     );
 
-    const container = screen.getByText(column1).parentElement;
+    const container = rtlScreen.getByText(column1).parentElement;
 
     expect(container).toHaveClass('wrapper--3-columns');
   });
diff --git a/src/components/molecules/layout/columns.tsx b/src/components/molecules/layout/columns.tsx
index b5bd9b5..56cd1a1 100644
--- a/src/components/molecules/layout/columns.tsx
+++ b/src/components/molecules/layout/columns.tsx
@@ -1,7 +1,27 @@
-import { FC, ReactComponentElement } from 'react';
-import { Column } from '../../atoms';
+import type {
+  FC,
+  HTMLAttributes,
+  ReactComponentElement,
+  ReactNode,
+} from 'react';
 import styles from './columns.module.scss';
 
+export type ColumnProps = HTMLAttributes<HTMLDivElement> & {
+  children: ReactNode;
+};
+
+/**
+ * Column component.
+ *
+ * Render the body as a column.
+ */
+export const Column: FC<ColumnProps> = ({ children, ...props }) => (
+  <div {...props}>{children}</div>
+);
+
+// eslint-disable-next-line @typescript-eslint/no-magic-numbers
+type ColumnsNumber = 2 | 3 | 4;
+
 export type ColumnsProps = {
   /**
    * The columns.
@@ -14,7 +34,7 @@ export type ColumnsProps = {
   /**
    * The number of columns.
    */
-  count: 2 | 3 | 4;
+  count: ColumnsNumber;
   /**
    * Should the columns be stacked on small devices? Default: true.
    */
diff --git a/src/components/organisms/layout/site-footer.stories.tsx b/src/components/organisms/layout/site-footer.stories.tsx
index 59a378f..77cc183 100644
--- a/src/components/organisms/layout/site-footer.stories.tsx
+++ b/src/components/organisms/layout/site-footer.stories.tsx
@@ -1,4 +1,5 @@
 import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import { Icon } from '../../atoms';
 import { SiteFooter as SiteFooterComponent } from './site-footer';
 
 /**
@@ -74,7 +75,7 @@ const Template: ComponentStory<typeof SiteFooterComponent> = (args) => (
 const copyright = {
   dates: { start: '2017', end: '2022' },
   owner: 'Lorem ipsum',
-  icon: 'CC',
+  icon: <Icon shape="cc-by-sa" />,
 };
 
 const navItems = [{ id: 'legal-notice', href: '#', label: 'Legal notice' }];
diff --git a/src/components/organisms/layout/site-footer.test.tsx b/src/components/organisms/layout/site-footer.test.tsx
index ffdeb7a..0d2cec2 100644
--- a/src/components/organisms/layout/site-footer.test.tsx
+++ b/src/components/organisms/layout/site-footer.test.tsx
@@ -16,6 +16,7 @@ describe('SiteFooter', () => {
   it('renders the website copyright', () => {
     render(<SiteFooter copyright={copyright} topId="top" />);
     expect(rtlScreen.getByText(copyright.owner)).toBeInTheDocument();
+    expect(rtlScreen.getByText(copyright.dates.start)).toBeInTheDocument();
   });
 
   it('renders a back to top link', () => {
diff --git a/src/components/organisms/layout/site-footer.tsx b/src/components/organisms/layout/site-footer.tsx
index c1fe9d0..d767a4d 100644
--- a/src/components/organisms/layout/site-footer.tsx
+++ b/src/components/organisms/layout/site-footer.tsx
@@ -1,6 +1,6 @@
 import type { FC } from 'react';
 import { useIntl } from 'react-intl';
-import { Copyright, Footer, type CopyrightProps } from '../../atoms';
+import { Copyright, type CopyrightProps, Footer } from '../../atoms';
 import {
   BackToTop,
   type BackToTopProps,
diff --git a/src/components/templates/layout/layout.module.scss b/src/components/templates/layout/layout.module.scss
index 5b89341..d86340f 100644
--- a/src/components/templates/layout/layout.module.scss
+++ b/src/components/templates/layout/layout.module.scss
@@ -41,6 +41,21 @@
   }
 }
 
+.noscript {
+  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);
+  color: var(--color-primary-darker);
+  font-size: var(--font-size-sm);
+  font-weight: 600;
+  text-align: center;
+}
+
 .noscript-spacing {
   width: 100%;
   height: fun.convert-px(75);
diff --git a/src/components/templates/layout/layout.tsx b/src/components/templates/layout/layout.tsx
index c994469..444b170 100644
--- a/src/components/templates/layout/layout.tsx
+++ b/src/components/templates/layout/layout.tsx
@@ -16,7 +16,7 @@ import {
   useScrollPosition,
   useSettings,
 } from '../../../utils/hooks';
-import { ButtonLink, Icon, Main, NoScript } from '../../atoms';
+import { ButtonLink, Icon, Main } from '../../atoms';
 import {
   SiteFooter,
   type SiteFooterProps,
@@ -264,8 +264,7 @@ export const Layout: FC<LayoutProps> = ({
         topId="top"
       />
       <noscript>
-        {/*eslint-disable-next-line react/jsx-no-literals -- Position allowed*/}
-        <NoScript message={noScript} position="top" />
+        <div className={styles.noscript}>{noScript}</div>
       </noscript>
     </>
   );