diff options
Diffstat (limited to 'src/components/organisms/widgets')
4 files changed, 48 insertions, 19 deletions
diff --git a/src/components/organisms/widgets/image-widget.module.scss b/src/components/organisms/widgets/image-widget.module.scss index 8e4d0aa..0d69441 100644 --- a/src/components/organisms/widgets/image-widget.module.scss +++ b/src/components/organisms/widgets/image-widget.module.scss @@ -1,7 +1,12 @@ @use "@styles/abstracts/functions" as fun; -.img { +.figure { + --scale-up: 1.02; + --scale-down: 0.98; + margin: 0; + padding: fun.convert-px(5); + border: fun.convert-px(1) solid var(--color-border); } .txt { @@ -10,7 +15,7 @@ .widget { &--left { - .img { + .figure { margin-right: auto; } @@ -20,7 +25,7 @@ } &--center { - .img { + .figure { margin-left: auto; margin-right: auto; } @@ -31,7 +36,7 @@ } &--right { - .img { + .figure { margin-left: auto; } diff --git a/src/components/organisms/widgets/image-widget.stories.tsx b/src/components/organisms/widgets/image-widget.stories.tsx index 27871ae..3014b36 100644 --- a/src/components/organisms/widgets/image-widget.stories.tsx +++ b/src/components/organisms/widgets/image-widget.stories.tsx @@ -50,7 +50,7 @@ export default { required: true, }, }, - img: { + image: { description: 'An image object.', type: { name: 'object', @@ -58,6 +58,19 @@ export default { value: {}, }, }, + imageClassName: { + control: { + type: 'text', + }, + description: 'Set additional classnames to the image wrapper.', + table: { + category: 'Styles', + }, + type: { + name: 'string', + required: false, + }, + }, level: { control: { type: 'number', @@ -107,7 +120,7 @@ const Template: ComponentStory<typeof ImageWidget> = (args) => ( <ImageWidget {...args} /> ); -const img = { +const image = { alt: 'Et perferendis quaerat', height: 480, src: 'http://placeimg.com/640/480/nature', @@ -122,7 +135,7 @@ export const AlignLeft = Template.bind({}); AlignLeft.args = { alignment: 'left', expanded: true, - img, + image, level: 2, title: 'Quo et totam', }; @@ -134,7 +147,7 @@ export const AlignCenter = Template.bind({}); AlignCenter.args = { alignment: 'center', expanded: true, - img, + image, level: 2, title: 'Quo et totam', }; @@ -146,7 +159,7 @@ export const AlignRight = Template.bind({}); AlignRight.args = { alignment: 'right', expanded: true, - img, + image, level: 2, title: 'Quo et totam', }; @@ -158,7 +171,7 @@ export const WithDescription = Template.bind({}); WithDescription.args = { description: 'Sint enim harum', expanded: true, - img, + image, level: 2, title: 'Quo et totam', }; diff --git a/src/components/organisms/widgets/image-widget.test.tsx b/src/components/organisms/widgets/image-widget.test.tsx index 8c24bd9..c6b1a3a 100644 --- a/src/components/organisms/widgets/image-widget.test.tsx +++ b/src/components/organisms/widgets/image-widget.test.tsx @@ -18,7 +18,12 @@ const url = '/another-page'; describe('ImageWidget', () => { it('renders an image', () => { render( - <ImageWidget expanded={true} img={img} title={title} level={titleLevel} /> + <ImageWidget + expanded={true} + image={img} + title={title} + level={titleLevel} + /> ); expect(screen.getByRole('img', { name: img.alt })).toBeInTheDocument(); }); @@ -27,7 +32,7 @@ describe('ImageWidget', () => { render( <ImageWidget expanded={true} - img={img} + image={img} title={title} level={titleLevel} url={url} @@ -43,7 +48,7 @@ describe('ImageWidget', () => { render( <ImageWidget expanded={true} - img={img} + image={img} description={description} title={title} level={titleLevel} diff --git a/src/components/organisms/widgets/image-widget.tsx b/src/components/organisms/widgets/image-widget.tsx index ba04c6a..873337b 100644 --- a/src/components/organisms/widgets/image-widget.tsx +++ b/src/components/organisms/widgets/image-widget.tsx @@ -14,7 +14,7 @@ export type Image = Pick< export type ImageWidgetProps = Pick< WidgetProps, - 'expanded' | 'level' | 'title' + 'className' | 'expanded' | 'level' | 'title' > & { /** * The content alignment. @@ -27,7 +27,11 @@ export type ImageWidgetProps = Pick< /** * An object describing the image. */ - img: Image; + image: Image; + /** + * Set additional classnames to the image wrapper. + */ + imageClassName?: string; /** * Add a link to the image. */ @@ -41,20 +45,22 @@ export type ImageWidgetProps = Pick< */ const ImageWidget: FC<ImageWidgetProps> = ({ alignment = 'left', + className = '', description, - img, + image, + imageClassName = '', url, ...props }) => { const alignmentClass = `widget--${alignment}`; return ( - <Widget className={styles[alignmentClass]} {...props}> + <Widget className={`${styles[alignmentClass]} ${className}`} {...props}> <ResponsiveImage target={url} caption={description} - className={styles.img} - {...img} + className={`${styles.figure} ${imageClassName}`} + {...image} /> </Widget> ); |