aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/organisms
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/organisms')
-rw-r--r--src/components/organisms/images/gallery.module.scss24
-rw-r--r--src/components/organisms/images/gallery.stories.tsx84
-rw-r--r--src/components/organisms/images/gallery.test.tsx43
-rw-r--r--src/components/organisms/images/gallery.tsx34
-rw-r--r--src/components/organisms/images/index.ts1
-rw-r--r--src/components/organisms/index.ts1
-rw-r--r--src/components/organisms/layout/cards-list.module.scss24
-rw-r--r--src/components/organisms/layout/cards-list.stories.tsx99
-rw-r--r--src/components/organisms/layout/cards-list.test.tsx62
-rw-r--r--src/components/organisms/layout/cards-list.tsx60
-rw-r--r--src/components/organisms/layout/index.ts1
11 files changed, 0 insertions, 433 deletions
diff --git a/src/components/organisms/images/gallery.module.scss b/src/components/organisms/images/gallery.module.scss
deleted file mode 100644
index 31960a4..0000000
--- a/src/components/organisms/images/gallery.module.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-@use "../../../styles/abstracts/mixins" as mix;
-@use "../../../styles/abstracts/placeholders";
-
-.wrapper {
- display: grid;
- grid-template-columns: minmax(0, 1fr);
- gap: var(--spacing-sm);
- max-width: 100%;
- margin: var(--spacing-sm) 0;
-
- @for $i from 0 to 6 {
- &--#{$i}-columns {
- @include mix.media("screen") {
- @include mix.dimensions("xs") {
- grid-template-columns: repeat(2, minmax(0, 1fr));
- }
-
- @include mix.dimensions("sm") {
- grid-template-columns: repeat(#{$i}, minmax(0, 1fr));
- }
- }
- }
- }
-}
diff --git a/src/components/organisms/images/gallery.stories.tsx b/src/components/organisms/images/gallery.stories.tsx
deleted file mode 100644
index 016b18e..0000000
--- a/src/components/organisms/images/gallery.stories.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-import NextImage from 'next/image';
-import { Figure } from '../../atoms';
-import { Gallery } from './gallery';
-
-/**
- * Gallery - Storybook Meta
- */
-export default {
- title: 'Organisms/Images/Gallery',
- component: Gallery,
- argTypes: {
- children: {
- control: {
- type: null,
- },
- description: 'Two or more images.',
- type: {
- name: 'function',
- required: true,
- },
- },
- columns: {
- control: {
- type: 'number',
- min: 2,
- max: 4,
- },
- description: 'The columns count.',
- type: {
- name: 'number',
- required: true,
- },
- },
- },
-} as ComponentMeta<typeof Gallery>;
-
-const image = {
- alt: 'Modi provident omnis',
- height: 480,
- src: 'https://picsum.photos/640/480',
- width: 640,
-};
-
-const Template: ComponentStory<typeof Gallery> = (args) => (
- <Gallery {...args}>
- <Figure>
- <NextImage {...image} />
- </Figure>
- <Figure>
- <NextImage {...image} />
- </Figure>
- <Figure>
- <NextImage {...image} />
- </Figure>
- <Figure>
- <NextImage {...image} />
- </Figure>
- </Gallery>
-);
-
-/**
- * Gallery Stories - Two columns
- */
-export const TwoColumns = Template.bind({});
-TwoColumns.args = {
- columns: 2,
-};
-
-/**
- * Gallery Stories - Three columns
- */
-export const ThreeColumns = Template.bind({});
-ThreeColumns.args = {
- columns: 3,
-};
-
-/**
- * Gallery Stories - Four columns
- */
-export const FourColumns = Template.bind({});
-FourColumns.args = {
- columns: 4,
-};
diff --git a/src/components/organisms/images/gallery.test.tsx b/src/components/organisms/images/gallery.test.tsx
deleted file mode 100644
index bffc3b2..0000000
--- a/src/components/organisms/images/gallery.test.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import { describe, expect, it } from '@jest/globals';
-import { render, screen as rtlScreen } from '@testing-library/react';
-import NextImage from 'next/image';
-import { Gallery } from './gallery';
-
-const columns = 3;
-
-const image = {
- alt: 'Modi provident omnis',
- height: 480,
- src: 'http://picsum.photos/640/480',
- width: 640,
-};
-
-describe('Gallery', () => {
- it('renders the correct number of items', () => {
- render(
- <Gallery columns={columns}>
- <NextImage {...image} />
- <NextImage {...image} />
- <NextImage {...image} />
- <NextImage {...image} />
- </Gallery>
- );
-
- // eslint-disable-next-line @typescript-eslint/no-magic-numbers
- expect(rtlScreen.getAllByRole('listitem')).toHaveLength(4);
- });
-
- it('renders the right number of columns', () => {
- render(
- <Gallery columns={columns}>
- <NextImage {...image} />
- <NextImage {...image} />
- <NextImage {...image} />
- <NextImage {...image} />
- </Gallery>
- );
- expect(rtlScreen.getByRole('list')).toHaveClass(
- `wrapper--${columns}-columns`
- );
- });
-});
diff --git a/src/components/organisms/images/gallery.tsx b/src/components/organisms/images/gallery.tsx
deleted file mode 100644
index 2f17130..0000000
--- a/src/components/organisms/images/gallery.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { Children, type FC, type ReactElement } from 'react';
-import { List, ListItem } from '../../atoms';
-import styles from './gallery.module.scss';
-
-// eslint-disable-next-line @typescript-eslint/no-magic-numbers
-export type GalleryColumn = 2 | 3 | 4;
-
-export type GalleryProps = {
- /**
- * The images.
- */
- children: ReactElement[];
- /**
- * The columns count.
- */
- columns: GalleryColumn;
-};
-
-/**
- * Gallery component
- *
- * Render a gallery of images.
- */
-export const Gallery: FC<GalleryProps> = ({ children, columns }) => {
- const columnsClass = `wrapper--${columns}-columns`;
-
- return (
- <List className={`${styles.wrapper} ${styles[columnsClass]}`} hideMarker>
- {Children.map(children, (child) => (
- <ListItem className={styles.item}>{child}</ListItem>
- ))}
- </List>
- );
-};
diff --git a/src/components/organisms/images/index.ts b/src/components/organisms/images/index.ts
deleted file mode 100644
index de0da26..0000000
--- a/src/components/organisms/images/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './gallery';
diff --git a/src/components/organisms/index.ts b/src/components/organisms/index.ts
index 8dfc61b..386eebf 100644
--- a/src/components/organisms/index.ts
+++ b/src/components/organisms/index.ts
@@ -1,5 +1,4 @@
export * from './forms';
-export * from './images';
export * from './layout';
export * from './modals';
export * from './toolbar';
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';
generated by cgit v1.2.3 (git 2.39.1) at 2025-10-27 08:25:54 +0000