From 94448fa278ab352a741ff13f22d6104869571144 Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Wed, 18 Oct 2023 19:25:02 +0200 Subject: feat(components): add a generic Grid component * merge Columns, Gallery and CardsList into Grid component * add more options to control the grid --- .../organisms/layout/cards-list.module.scss | 24 ------ .../organisms/layout/cards-list.stories.tsx | 99 ---------------------- .../organisms/layout/cards-list.test.tsx | 62 -------------- src/components/organisms/layout/cards-list.tsx | 60 ------------- src/components/organisms/layout/index.ts | 1 - 5 files changed, 246 deletions(-) delete mode 100644 src/components/organisms/layout/cards-list.module.scss delete mode 100644 src/components/organisms/layout/cards-list.stories.tsx delete mode 100644 src/components/organisms/layout/cards-list.test.tsx delete mode 100644 src/components/organisms/layout/cards-list.tsx (limited to 'src/components/organisms/layout') diff --git a/src/components/organisms/layout/cards-list.module.scss b/src/components/organisms/layout/cards-list.module.scss deleted file mode 100644 index 1665829..0000000 --- a/src/components/organisms/layout/cards-list.module.scss +++ /dev/null @@ -1,24 +0,0 @@ -@use "../../../styles/abstracts/mixins" as mix; -@use "../../../styles/abstracts/placeholders"; - -.wrapper { - display: grid; - grid-template-columns: repeat( - auto-fit, - min(calc(100vw - (var(--spacing-md) * 2)), var(--card-width, 30ch)) - ); - gap: var(--spacing-sm); - place-content: center; - align-items: stretch; - justify-items: stretch; - - @include mix.media("screen") { - @include mix.dimensions(null, "sm") { - gap: var(--spacing-lg); - } - } -} - -.item > * { - height: 100%; -} diff --git a/src/components/organisms/layout/cards-list.stories.tsx b/src/components/organisms/layout/cards-list.stories.tsx deleted file mode 100644 index 3f8e72a..0000000 --- a/src/components/organisms/layout/cards-list.stories.tsx +++ /dev/null @@ -1,99 +0,0 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; -import { Card, CardBody, CardHeader, CardTitle } from '../../molecules'; -import { - CardsList as CardsListComponent, - type CardsListItem, -} from './cards-list'; - -/** - * CardsList - Storybook Meta - */ -export default { - title: 'Organisms/Layout', - component: CardsListComponent, - argTypes: { - items: { - description: 'The cards data.', - type: { - name: 'object', - required: true, - value: {}, - }, - }, - isOrdered: { - control: { - type: 'boolean', - }, - description: 'Should the list be ordered?', - table: { - category: 'Options', - defaultValue: { summary: false }, - }, - type: { - name: 'boolean', - required: false, - }, - }, - }, -} as ComponentMeta; - -const Template: ComponentStory = (args) => ( - -); - -const items: CardsListItem[] = [ - { - id: 'card-1', - card: ( - - - Et alias omnis - - - Rerum voluptatem sint sint sit dignissimos. Labore totam possimus - tempore atque veniam. Doloremque tenetur quidem beatae veritatis quo. - Quaerat voluptatem deleniti voluptas quia. Qui voluptatem iure iste - expedita et sed beatae. - - - ), - }, - { - id: 'card-2', - card: ( - - - Fugiat magnam nesciunt - - - Sit corporis animi ea. Earum asperiores error et. Aliquid quia et - consequatur. Magnam sit ut facere explicabo vel dolorem earum - assumenda. Aspernatur inventore quod libero est. - - - ), - }, - { - id: 'card-3', - card: ( - - - Asperiores eum quas - - - Doloremque ut cupiditate distinctio aperiam. Neque tempora unde - perferendis asperiores. Doloremque velit vel quam. Temporibus itaque - non non exercitationem. - - - ), - }, -]; - -/** - * Layout Stories - Cards list - */ -export const CardsList = Template.bind({}); -CardsList.args = { - items, -}; diff --git a/src/components/organisms/layout/cards-list.test.tsx b/src/components/organisms/layout/cards-list.test.tsx deleted file mode 100644 index b04e109..0000000 --- a/src/components/organisms/layout/cards-list.test.tsx +++ /dev/null @@ -1,62 +0,0 @@ -import { describe, expect, it } from '@jest/globals'; -import { render, screen as rtlScreen } from '@testing-library/react'; -import { Card, CardBody, CardHeader, CardTitle } from '../../molecules'; -import { CardsList, type CardsListItem } from './cards-list'; - -const items: CardsListItem[] = [ - { - id: 'card-1', - card: ( - - - Et alias omnis - - - Rerum voluptatem sint sint sit dignissimos. Labore totam possimus - tempore atque veniam. Doloremque tenetur quidem beatae veritatis quo. - Quaerat voluptatem deleniti voluptas quia. Qui voluptatem iure iste - expedita et sed beatae. - - - ), - }, - { - id: 'card-2', - card: ( - - - Fugiat magnam nesciunt - - - Sit corporis animi ea. Earum asperiores error et. Aliquid quia et - consequatur. Magnam sit ut facere explicabo vel dolorem earum - assumenda. Aspernatur inventore quod libero est. - - - ), - }, - { - id: 'card-3', - card: ( - - - Asperiores eum quas - - - Doloremque ut cupiditate distinctio aperiam. Neque tempora unde - perferendis asperiores. Doloremque velit vel quam. Temporibus itaque - non non exercitationem. - - - ), - }, -]; - -describe('CardsList', () => { - it('renders a list of cards', () => { - render(); - expect(rtlScreen.getAllByRole('heading', { level: 2 })).toHaveLength( - items.length - ); - }); -}); diff --git a/src/components/organisms/layout/cards-list.tsx b/src/components/organisms/layout/cards-list.tsx deleted file mode 100644 index 4f920e8..0000000 --- a/src/components/organisms/layout/cards-list.tsx +++ /dev/null @@ -1,60 +0,0 @@ -import type { FC, ReactElement } from 'react'; -import { List, ListItem } from '../../atoms'; -import type { CardProps } from '../../molecules'; -import styles from './cards-list.module.scss'; - -export type CardsListItem = { - /** - * The card. - */ - card: ReactElement | CardProps>; - /** - * The card id. - */ - id: string; -}; - -export type CardsListProps = { - /** - * Set additional classnames to the list wrapper. - */ - className?: string; - /** - * Should the cards list be ordered? - * - * @default false - */ - isOrdered?: boolean; - /** - * The cards data. - */ - items: CardsListItem[]; -}; - -/** - * CardsList component - * - * Return a list of Card components. - */ -export const CardsList: FC = ({ - className = '', - isOrdered = false, - items, -}) => { - const kindModifier = `wrapper--${isOrdered ? 'ordered' : 'unordered'}`; - - return ( - - {items.map(({ id, card }) => ( - - {card} - - ))} - - ); -}; diff --git a/src/components/organisms/layout/index.ts b/src/components/organisms/layout/index.ts index 1351537..4593ccc 100644 --- a/src/components/organisms/layout/index.ts +++ b/src/components/organisms/layout/index.ts @@ -1,4 +1,3 @@ -export * from './cards-list'; export * from './comment'; export * from './comments-list'; export * from './no-results'; -- cgit v1.2.3