diff options
Diffstat (limited to 'src/components/molecules/images')
3 files changed, 9 insertions, 9 deletions
diff --git a/src/components/molecules/images/responsive-image.module.scss b/src/components/molecules/images/responsive-image.module.scss index 3566421..3a4f283 100644 --- a/src/components/molecules/images/responsive-image.module.scss +++ b/src/components/molecules/images/responsive-image.module.scss @@ -3,8 +3,7 @@ .wrapper { display: flex; flex-flow: column; - width: 100%; - max-width: max-content; + width: fit-content; margin: 0; position: relative; text-align: center; @@ -14,9 +13,7 @@ margin: 0; padding: fun.convert-px(4) var(--spacing-2xs); background: var(--color-bg-secondary); - border: fun.convert-px(1) solid var(--color-border); - box-shadow: 0 fun.convert-px(-1) fun.convert-px(1) fun.convert-px(1) - var(--color-shadow-light); + border: fun.convert-px(1) solid var(--color-border-light); font-weight: 500; } @@ -32,7 +29,7 @@ &:hover, &:focus { - transform: scale(1.1); + transform: scale(var(--scale-up, 1.05)); } &:focus { @@ -43,7 +40,7 @@ } &:active { - transform: scale(0.9); + transform: scale(var(--scale-down, 0.95)); .caption { text-decoration: none; diff --git a/src/components/molecules/images/responsive-image.stories.tsx b/src/components/molecules/images/responsive-image.stories.tsx index a1f5295..35d9116 100644 --- a/src/components/molecules/images/responsive-image.stories.tsx +++ b/src/components/molecules/images/responsive-image.stories.tsx @@ -64,6 +64,7 @@ export default { required: false, }, }, + unoptimized: { table: { disable: true } }, width: { control: { type: 'number', diff --git a/src/components/molecules/images/responsive-image.tsx b/src/components/molecules/images/responsive-image.tsx index 31cbcd1..d07dd6c 100644 --- a/src/components/molecules/images/responsive-image.tsx +++ b/src/components/molecules/images/responsive-image.tsx @@ -1,6 +1,6 @@ import Link, { type LinkProps } from '@components/atoms/links/link'; import Image, { type ImageProps } from 'next/image'; -import { FC } from 'react'; +import { FC, ReactNode } from 'react'; import styles from './responsive-image.module.scss'; export type ResponsiveImageProps = Omit< @@ -14,7 +14,7 @@ export type ResponsiveImageProps = Omit< /** * A figure caption. */ - caption?: string; + caption?: ReactNode; /** * Set additional classnames to the figure wrapper. */ @@ -55,6 +55,7 @@ const ResponsiveImage: FC<ResponsiveImageProps> = ({ alt={alt} layout={layout || 'intrinsic'} objectFit={objectFit || 'contain'} + className={styles.img} {...props} /> {caption && ( @@ -67,6 +68,7 @@ const ResponsiveImage: FC<ResponsiveImageProps> = ({ alt={alt} layout={layout || 'intrinsic'} objectFit={objectFit || 'contain'} + className={styles.img} {...props} /> {caption && ( |