diff options
Diffstat (limited to 'src/components/organisms/layout')
| -rw-r--r-- | src/components/organisms/layout/cards-list.module.scss | 24 | ||||
| -rw-r--r-- | src/components/organisms/layout/cards-list.stories.tsx | 99 | ||||
| -rw-r--r-- | src/components/organisms/layout/cards-list.test.tsx | 62 | ||||
| -rw-r--r-- | src/components/organisms/layout/cards-list.tsx | 60 | ||||
| -rw-r--r-- | src/components/organisms/layout/index.ts | 1 |
5 files changed, 0 insertions, 246 deletions
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<typeof CardsListComponent>; - -const Template: ComponentStory<typeof CardsListComponent> = (args) => ( - <CardsListComponent {...args} /> -); - -const items: CardsListItem[] = [ - { - id: 'card-1', - card: ( - <Card> - <CardHeader> - <CardTitle>Et alias omnis</CardTitle> - </CardHeader> - <CardBody> - 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. - </CardBody> - </Card> - ), - }, - { - id: 'card-2', - card: ( - <Card> - <CardHeader> - <CardTitle>Fugiat magnam nesciunt</CardTitle> - </CardHeader> - <CardBody> - 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. - </CardBody> - </Card> - ), - }, - { - id: 'card-3', - card: ( - <Card> - <CardHeader> - <CardTitle>Asperiores eum quas</CardTitle> - </CardHeader> - <CardBody> - Doloremque ut cupiditate distinctio aperiam. Neque tempora unde - perferendis asperiores. Doloremque velit vel quam. Temporibus itaque - non non exercitationem. - </CardBody> - </Card> - ), - }, -]; - -/** - * 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: ( - <Card> - <CardHeader> - <CardTitle>Et alias omnis</CardTitle> - </CardHeader> - <CardBody> - 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. - </CardBody> - </Card> - ), - }, - { - id: 'card-2', - card: ( - <Card> - <CardHeader> - <CardTitle>Fugiat magnam nesciunt</CardTitle> - </CardHeader> - <CardBody> - 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. - </CardBody> - </Card> - ), - }, - { - id: 'card-3', - card: ( - <Card> - <CardHeader> - <CardTitle>Asperiores eum quas</CardTitle> - </CardHeader> - <CardBody> - Doloremque ut cupiditate distinctio aperiam. Neque tempora unde - perferendis asperiores. Doloremque velit vel quam. Temporibus itaque - non non exercitationem. - </CardBody> - </Card> - ), - }, -]; - -describe('CardsList', () => { - it('renders a list of cards', () => { - render(<CardsList items={items} />); - 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<string> | CardProps<undefined>>; - /** - * 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<CardsListProps> = ({ - className = '', - isOrdered = false, - items, -}) => { - const kindModifier = `wrapper--${isOrdered ? 'ordered' : 'unordered'}`; - - return ( - <List - className={`${styles.wrapper} ${styles[kindModifier]} ${className}`} - hideMarker - isInline - isOrdered={isOrdered} - > - {items.map(({ id, card }) => ( - <ListItem className={styles.item} key={id}> - {card} - </ListItem> - ))} - </List> - ); -}; 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'; |
