EMULSIF-236: Convert Images to support SDC

src/components/image/figure.component.yml

@@ -0,0 +1,36 @@
+$schema: https://git.drupalcode.org/project/drupal/-/raw/10.1.x/core/modules/sdc/src/metadata.schema.json
+
+name: Figure
+group: Components
+status: stable
+props:
+  type: object
+  required:
+    - image_src
+    - image_alt
+  properties:
+    output_image_tag:
+      type: boolean
+      title: Output image tag
+      description: Specifies whether to output the image tag
+      data: true
+    image_url:
+      type: string
+      title: Image URL
+      description: 'Specifies the URL that the image links to'
+      data: '#'
+    image_src:
+      type: string
+      title: Source
+      description: 'Specifies the path to the image'
+      data: 'https://placehold.co/1200x600'
+    image_alt:
+      type: string
+      title: Alternate text
+      description: 'Specifies an alternate text for the image'
+      data: 'This is the alt text'
+    image_caption:
+      type: string
+      title: Image caption
+      description: 'Specifies the caption for the image'
+      data: 'This is an image caption.'

src/components/image/image.component.yml

@@ -0,0 +1,36 @@
+$schema: https://git.drupalcode.org/project/drupal/-/raw/10.1.x/core/modules/sdc/src/metadata.schema.json
+
+name: Image
+group: Components
+status: stable
+props:
+  type: object
+  required:
+    - image_src
+    - image_alt
+  properties:
+    output_image_tag:
+      type: boolean
+      title: Output image tag
+      description: Specifies whether to output the image tag
+      data: true
+    image_src:
+      type: string
+      title: Source
+      description: 'Specifies the path to the image'
+      data: 'https://placehold.co/320x180'
+    image_alt:
+      type: string
+      title: Alternate text
+      description: 'Specifies an alternate text for the image'
+      data: 'A 16 by 9 image'
+    image_srcset:
+      type: string
+      title: Source Set Attribute
+      description: The image's srcset attribute, which defines multiple image sources for different device resolutions.
+      data: 'https://placehold.co/320x180 320w, https://placehold.co/480x270 480w, https://placehold.co/640x360 640w, https://placehold.co/800x450 800w, https://placehold.co/960x540 960w, https://placehold.co/1120x630 1120w, https://placehold.co/1280x720 1280w, https://placehold.co/1440x810 1440w, https://placehold.co/1600x900 1600w, https://placehold.co/1760x990 1760w, https://placehold.co/1920x1080 1920w, https://placehold.co/2080x1170 2080w, https://placehold.co/2240x1260 2240w'
+    image_sizes:
+      type: string
+      title: Image sizes
+      description: 'Specifies the intended display sizes of the image'
+      data: '100vw'

src/components/image/images.stories.js

@@ -1,8 +1,10 @@
-import image from './responsive-image.twig';
-import figure from './figure.twig';
+import imageTwig from './responsive-image.twig';
+import figureTwig from './figure.twig';
 
-import imageData from './image.yml';
-import figureData from './figure.yml';
+import { props as imageProps } from './image.component.yml';
+import { props as figureProps } from './figure.component.yml';
+
+import { mapDataToTwig } from '../../util/dataTransformers';
 
 const svgIcons = require.context('../../../assets/icons/', true, /\.svg$/);
 const icons = [];
@@ -11,11 +13,21 @@ svgIcons.keys().forEach((key) => {
   icons.push(icon);
 });
 
+const imageData = mapDataToTwig(imageProps.properties);
+const figureData = mapDataToTwig(figureProps.properties);
+
 /**
  * Storybook Definition.
  */
-export default { title: 'Components/Media' };
 
-export const images = () => image(imageData);
+export default {
+  title: 'Components/Media',
+  decorators: [
+    (story) =>
+      `<div style="max-width: 890px; margin: 0 auto;">${story()}</div>`,
+  ],
+};
+
+export const Image = () => imageTwig(imageData);
 
-export const figures = () => figure(figureData);
+export const Figure = () => figureTwig(figureData);

src/util/dataTransformers.js

@@ -0,0 +1,27 @@
+/**
+ * Maps properties from a given data object to a new object containing only the `data` values.
+ *
+ * This function iterates through the keys of the `props` object and extracts the `data` property
+ * from each key, if it exists. The result is a new object where each key has its corresponding `data` value.
+ *
+ * @param {Object} props - The object containing properties with `data` fields.
+ * @returns {Object} - A new object where each key is mapped to its `data` value from the original object.
+ */
+export function mapDataToTwig(props) {
+  const result = {};
+
+  for (const key in props) {
+    if (props.hasOwnProperty(key)) {
+      if (props[key]?.data !== undefined) {
+        result[key] = props[key].data;
+      } else if (
+        typeof props[key] === 'object' &&
+        props[key].hasOwnProperty('properties')
+      ) {
+        result[key] = mapDataToTwig(props[key].properties);
+      }
+    }
+  }
+
+  return result;
+}