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.
---
 .../molecules/layout/columns.stories.tsx           |  7 +++---
 src/components/molecules/layout/columns.test.tsx   | 15 ++++++-------
 src/components/molecules/layout/columns.tsx        | 26 +++++++++++++++++++---
 3 files changed, 33 insertions(+), 15 deletions(-)

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

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.
    */
-- 
cgit v1.2.3