feat(components): add a generic Grid component

* merge Columns, Gallery and CardsList into Grid component
* add more options to control the grid

5 files changed, 0 insertions, 248 deletions

diff --git a/src/components/molecules/layout/columns.module.scss b/src/components/molecules/layout/columns.module.scss
deleted file mode 100644
index 0d383e7..0000000
--- a/src/components/molecules/layout/columns.module.scss
+++ /dev/null
@@ -1,30 +0,0 @@
-@use "../../../styles/abstracts/mixins" as mix;
-
-.wrapper {
-  display: grid;
-  gap: var(--spacing-md);
-
-  &--responsive#{&} {
-    @for $i from 2 through 4 {
-      &--#{$i}-columns {
-        @include mix.media("screen") {
-          @include mix.dimensions("sm") {
-            grid-template-columns: repeat(2, minmax(0, 1fr));
-          }
-
-          @include mix.dimensions("md") {
-            grid-template-columns: repeat($i, minmax(0, 1fr));
-          }
-        }
-      }
-    }
-  }
-
-  &--no-responsive#{&} {
-    @for $i from 2 through 4 {
-      &--#{$i}-columns {
-        grid-template-columns: repeat($i, minmax(0, 1fr));
-      }
-    }
-  }
-}
diff --git a/src/components/molecules/layout/columns.stories.tsx b/src/components/molecules/layout/columns.stories.tsx
deleted file mode 100644
index 43d0629..0000000
--- a/src/components/molecules/layout/columns.stories.tsx
+++ /dev/null
@@ -1,107 +0,0 @@
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-import { Column, Columns } from './columns';
-
-export default {
-  title: 'Molecules/Layout/Columns',
-  args: {
-    responsive: true,
-  },
-  component: Columns,
-  argTypes: {
-    children: {
-      description: 'The columns.',
-      type: {
-        name: 'function',
-        required: true,
-      },
-    },
-    className: {
-      control: {
-        type: 'text',
-      },
-      description: 'Set additional classnames to the columns wrapper.',
-      table: {
-        category: 'Styles',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-    count: {
-      control: {
-        type: 'number',
-        min: 2,
-        max: 4,
-      },
-      description: 'The number of columns.',
-      type: {
-        name: 'number',
-        required: true,
-      },
-    },
-    responsive: {
-      control: {
-        type: 'boolean',
-      },
-      description: 'Should the columns be stacked on small devices?',
-      table: {
-        category: 'Options',
-        defaultValue: { summary: true },
-      },
-      type: {
-        name: 'boolean',
-        required: false,
-      },
-    },
-  },
-} as ComponentMeta<typeof Columns>;
-
-const Template: ComponentStory<typeof Columns> = (args) => (
-  <Columns {...args} />
-);
-
-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 =
-  '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.';
-
-const column4 =
-  'Ratione placeat ea ea. Explicabo rem eaque voluptatibus. Nihil nulla culpa et dolor numquam omnis est. Quis quas excepturi est dignissimos ducimus et ad quis quis. Eos enim et nam delectus.';
-
-export const TwoColumns = Template.bind({});
-TwoColumns.args = {
-  children: [
-    <Column key="column-1">{column1}</Column>,
-    <Column key="column-2">{column2}</Column>,
-    <Column key="column-3">{column3}</Column>,
-    <Column key="column-4">{column4}</Column>,
-  ],
-  count: 2,
-};
-
-export const ThreeColumns = Template.bind({});
-ThreeColumns.args = {
-  children: [
-    <Column key="column-1">{column1}</Column>,
-    <Column key="column-2">{column2}</Column>,
-    <Column key="column-3">{column3}</Column>,
-    <Column key="column-4">{column4}</Column>,
-  ],
-  count: 3,
-};
-
-export const FourColumns = Template.bind({});
-FourColumns.args = {
-  children: [
-    <Column key="column-1">{column1}</Column>,
-    <Column key="column-2">{column2}</Column>,
-    <Column key="column-3">{column3}</Column>,
-    <Column key="column-4">{column4}</Column>,
-  ],
-  count: 4,
-};
diff --git a/src/components/molecules/layout/columns.test.tsx b/src/components/molecules/layout/columns.test.tsx
deleted file mode 100644
index 2b016e7..0000000
--- a/src/components/molecules/layout/columns.test.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import { describe, expect, it } from '@jest/globals';
-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.';
-
-const column2 =
-  'Quo perspiciatis mollitia non et. Modi voluptatem molestias. Facere ut molestiae exercitationem non nesciunt unde adipisci. Non cupiditate provident repudiandae. Natus quia necessitatibus libero enim earum quam et.';
-
-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.';
-
-const column4 =
-  'Ratione placeat ea ea. Explicabo rem eaque voluptatibus. Nihil nulla culpa et dolor numquam omnis est. Quis quas excepturi est dignissimos ducimus et ad quis quis. Eos enim et nam delectus.';
-
-describe('Columns', () => {
-  it('renders all the children', () => {
-    render(
-      <Columns count={2}>
-        <Column key="column-1">{column1}</Column>
-        <Column key="column-2">{column2}</Column>
-        <Column key="column-3">{column3}</Column>
-        <Column key="column-4">{column4}</Column>
-      </Columns>
-    );
-
-    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', () => {
-    render(
-      <Columns count={3}>
-        <Column key="column-1">{column1}</Column>
-        <Column key="column-2">{column2}</Column>
-        <Column key="column-3">{column3}</Column>
-        <Column key="column-4">{column4}</Column>
-      </Columns>
-    );
-
-    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
deleted file mode 100644
index 56cd1a1..0000000
--- a/src/components/molecules/layout/columns.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-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.
-   */
-  children: ReactComponentElement<typeof Column>[];
-  /**
-   * Set additional classnames to the columns wrapper.
-   */
-  className?: string;
-  /**
-   * The number of columns.
-   */
-  count: ColumnsNumber;
-  /**
-   * Should the columns be stacked on small devices? Default: true.
-   */
-  responsive?: boolean;
-};
-
-/**
- * Columns component.
- *
- * Render some Column components as columns.
- */
-export const Columns: FC<ColumnsProps> = ({
-  children,
-  className = '',
-  count,
-  responsive = true,
-}) => {
-  const countClass = `wrapper--${count}-columns`;
-  const responsiveClass = responsive
-    ? `wrapper--responsive`
-    : 'wrapper--no-responsive';
-  const wrapperClass = `${styles.wrapper} ${styles[countClass]} ${styles[responsiveClass]} ${className}`;
-
-  return <div className={wrapperClass}>{children}</div>;
-};
diff --git a/src/components/molecules/layout/index.ts b/src/components/molecules/layout/index.ts
index 75cbe28..f204f56 100644
--- a/src/components/molecules/layout/index.ts
+++ b/src/components/molecules/layout/index.ts
@@ -1,3 +1,2 @@
-export * from './columns';
 export * from './page-footer';
 export * from './page-header';