diff options
Diffstat (limited to 'src/components/organisms/images')
| -rw-r--r-- | src/components/organisms/images/gallery.module.scss | 24 | ||||
| -rw-r--r-- | src/components/organisms/images/gallery.stories.tsx | 84 | ||||
| -rw-r--r-- | src/components/organisms/images/gallery.test.tsx | 43 | ||||
| -rw-r--r-- | src/components/organisms/images/gallery.tsx | 34 | ||||
| -rw-r--r-- | src/components/organisms/images/index.ts | 1 |
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'; |
