aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/organisms/images
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/organisms/images')
-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
5 files changed, 0 insertions, 186 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';