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.scss2
-rw-r--r--src/components/organisms/images/gallery.stories.tsx4
-rw-r--r--src/components/organisms/images/gallery.tsx16
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>
);
};