From 2652fe4d5ee4451a0c9b52996844d90c66dfdfe0 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Fri, 29 Apr 2022 18:35:41 +0200
Subject: chore: add a Column component

---
 src/components/atoms/layout/column.stories.tsx | 29 ++++++++++++++++++++++++++
 src/components/atoms/layout/column.test.tsx    | 12 +++++++++++
 src/components/atoms/layout/column.tsx         | 16 ++++++++++++++
 3 files changed, 57 insertions(+)
 create mode 100644 src/components/atoms/layout/column.stories.tsx
 create mode 100644 src/components/atoms/layout/column.test.tsx
 create mode 100644 src/components/atoms/layout/column.tsx

(limited to 'src')

diff --git a/src/components/atoms/layout/column.stories.tsx b/src/components/atoms/layout/column.stories.tsx
new file mode 100644
index 0000000..a03c462
--- /dev/null
+++ b/src/components/atoms/layout/column.stories.tsx
@@ -0,0 +1,29 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import 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
new file mode 100644
index 0000000..c5c6554
--- /dev/null
+++ b/src/components/atoms/layout/column.test.tsx
@@ -0,0 +1,12 @@
+import { render, screen } from '@test-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
new file mode 100644
index 0000000..ec6440d
--- /dev/null
+++ b/src/components/atoms/layout/column.tsx
@@ -0,0 +1,16 @@
+import { FC, ReactNode } from 'react';
+
+export type ColumnProps = {
+  children: ReactNode | ReactNode[];
+};
+
+/**
+ * Column component.
+ *
+ * Render the body as a column.
+ */
+const Column: FC<ColumnProps> = ({ children }) => {
+  return <div>{children}</div>;
+};
+
+export default Column;
-- 
cgit v1.2.3