EMULSIF-243: Convert Tables to support SDC

src/components/tables/tables.component.yml

@@ -0,0 +1,80 @@
+$schema: https://git.drupalcode.org/project/drupal/-/raw/10.1.x/core/modules/sdc/src/metadata.schema.json
+
+name: Table
+group: Components
+status: stable
+props:
+  type: object
+  required:
+    - header
+    - rows
+    - footer
+  properties:
+    caption:
+      type: string
+      title: Caption
+      description: 'The caption for the table'
+      data: 'Lorem Ipsum'
+    header:
+      type: array
+      title: Table Header
+      description: 'An array of header cells for the table'
+      data:
+        - tag: th
+          content: Heading item 1
+        - tag: th
+          content: Heading item 2
+        - tag: th
+          content: Heading item 3
+          attributes: { data-cell-highlight: '' }
+        - tag: th
+          content: Heading item 4
+    rows:
+      type: array
+      title: Table Rows
+      description: 'An array of rows in the table'
+      data:
+        - cells:
+            - tag: td
+              content: <h3>Lorem ipsum dolor sit amet</h3><p>Massa erat, eu tempus magna aliquet at. Cras tincidunt nulla sit amet urna maximus, at auctor felis pretium. Nam dignissim fringilla egestas..</p>
+            - tag: td
+              content: CHECK
+            - tag: td
+              content: CHECK
+              attributes: { data-cell-highlight: '' }
+            - tag: td
+              content: CHECK
+        - cells:
+            - tag: td
+              content: <h3>Nullam a nibh tempor justo suscipit</h3><p>Roin luctus maximus auctor. Praesent bibendum pharetra convallis. Suspendisse consectetur tempor dignissim. Aliquam erat volutpat.</p>
+            - tag: td
+              content: Limited
+            - tag: td
+              content: Limited
+              attributes: { data-cell-highlight: '' }
+            - tag: td
+              content: CHECK
+        - cells:
+            - tag: td
+              content: <h3>Pellentesque habitant morbi tristique senectus</h3><p>Paecenas tincidunt orci non erat congue bibendum. Donec at accumsan risus. Maecenas tristique gravida elit, non molestie felis hendrerit posuere.</p>
+            - tag: td
+              content: Limited
+            - tag: td
+              content: NOCHECK
+              attributes: { data-cell-highlight: '' }
+            - tag: td
+              content: NOCHECK
+    footer:
+      type: array
+      title: Table Footer
+      description: 'An array of footer cells for the table'
+      data:
+        - tag: td
+          content: Footer item 1
+        - tag: td
+          content: Footer item 2
+        - tag: td
+          content: Footer item 3
+          attributes: { data-cell-highlight: '' }
+        - tag: td
+          content: Footer item 4

src/components/tables/tables.stories.js

@@ -1,9 +1,12 @@
 import tableTwig from './tables.twig';
-import tableData from './tables.yml';
+import { props } from './tables.component.yml';
+import { mapDataToTwig } from '../../util/dataTransformers';
 
 /**
  * Storybook Definition.
  */
 export default { title: 'Components/Typography' };
 
+const tableData = mapDataToTwig(props.properties);
+
 export const tables = () => tableTwig(tableData);