feat(storefront): Add caption to Image component

Author: Barsnes

apps/storefront/components/Image/Image.module.css

@@ -3,6 +3,8 @@
   max-width: 800px;
   margin: var(--fds-spacing-7) 0;
   border-radius: var(--fds-border_radius-medium);
+  flex-wrap: wrap;
+  gap: var(--fds-spacing-4);
 }
 
 .container .img {
@@ -13,3 +15,8 @@
 .boxShadow {
   box-shadow: var(--fds-shadow-medium);
 }
+
+.container .caption {
+  color: var(--fds-semantic-text-neutral-subtle);
+  font: var(--fds-typography-paragraph-small);
+}

apps/storefront/components/Image/Image.tsx

@@ -7,18 +7,24 @@ interface ImageProps {
   alt: string;
   src: string;
   boxShadow: boolean;
+  caption: string;
 }
 
-const Image = ({ alt, src, boxShadow, ...rest }: ImageProps) => {
+const Image = ({ alt, src, boxShadow, caption, ...rest }: ImageProps) => {
   return (
-    <div className={cl(classes.container, { [classes.boxShadow]: boxShadow })}>
+    <figure
+      className={cl(classes.container, { [classes.boxShadow]: boxShadow })}
+    >
       <img
         className={classes.img}
         src={src}
         alt={alt}
         {...rest}
       ></img>
-    </div>
+      {caption && (
+        <figcaption className={classes.caption}>{caption}</figcaption>
+      )}
+    </figure>
   );
 };