From ee04742d1f0645908baa30e47845126c28848f50 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Tue, 3 May 2022 16:53:55 +0200
Subject: chore: add a CV page

---
 .../organisms/widgets/image-widget.module.scss     | 13 +++++++----
 .../organisms/widgets/image-widget.stories.tsx     | 25 ++++++++++++++++------
 .../organisms/widgets/image-widget.test.tsx        | 11 +++++++---
 src/components/organisms/widgets/image-widget.tsx  | 18 ++++++++++------
 4 files changed, 48 insertions(+), 19 deletions(-)

(limited to 'src/components/organisms/widgets')

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>
   );
-- 
cgit v1.2.3