diff options
Diffstat (limited to 'src/components/organisms/images')
| -rw-r--r-- | src/components/organisms/images/gallery.module.scss | 2 | ||||
| -rw-r--r-- | src/components/organisms/images/gallery.stories.tsx | 4 | ||||
| -rw-r--r-- | src/components/organisms/images/gallery.tsx | 16 |
3 files changed, 11 insertions, 11 deletions
diff --git a/src/components/organisms/images/gallery.module.scss b/src/components/organisms/images/gallery.module.scss index f4faa63..31960a4 100644 --- a/src/components/organisms/images/gallery.module.scss +++ b/src/components/organisms/images/gallery.module.scss @@ -2,8 +2,6 @@ @use "../../../styles/abstracts/placeholders"; .wrapper { - @extend %reset-list; - display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--spacing-sm); diff --git a/src/components/organisms/images/gallery.stories.tsx b/src/components/organisms/images/gallery.stories.tsx index 8b68777..5005ed8 100644 --- a/src/components/organisms/images/gallery.stories.tsx +++ b/src/components/organisms/images/gallery.stories.tsx @@ -1,4 +1,4 @@ -import { ComponentMeta, ComponentStory } from '@storybook/react'; +import type { ComponentMeta, ComponentStory } from '@storybook/react'; import { ResponsiveImage } from '../../molecules'; import { Gallery } from './gallery'; @@ -37,7 +37,7 @@ export default { const image = { alt: 'Modi provident omnis', height: 480, - src: 'http://placeimg.com/640/480/fashion', + src: 'http://picsum.photos/640/480', width: 640, }; diff --git a/src/components/organisms/images/gallery.tsx b/src/components/organisms/images/gallery.tsx index ae773f6..b35acfe 100644 --- a/src/components/organisms/images/gallery.tsx +++ b/src/components/organisms/images/gallery.tsx @@ -1,7 +1,9 @@ -import { Children, FC, ReactElement } from 'react'; -import { type ResponsiveImageProps } from '../../molecules'; +import { Children, type FC, type ReactElement } from 'react'; +import { List, ListItem } from '../../atoms'; +import type { ResponsiveImageProps } from '../../molecules'; import styles from './gallery.module.scss'; +// eslint-disable-next-line @typescript-eslint/no-magic-numbers export type GalleryColumn = 2 | 3 | 4; export type GalleryProps = { @@ -24,10 +26,10 @@ export const Gallery: FC<GalleryProps> = ({ children, columns }) => { const columnsClass = `wrapper--${columns}-columns`; return ( - <ul className={`${styles.wrapper} ${styles[columnsClass]}`}> - {Children.map(children, (child) => { - return <li className={styles.item}>{child}</li>; - })} - </ul> + <List className={`${styles.wrapper} ${styles[columnsClass]}`} hideMarker> + {Children.map(children, (child) => ( + <ListItem className={styles.item}>{child}</ListItem> + ))} + </List> ); }; |
