Merge branch 'convert-components-to-sdc' of github.com:emulsify-ds/em…

…ulsify-ui-kit into emulsif-231-convert-audio-player-to-support-sdc

src/components/accordion/accordion.component.yml

@@ -0,0 +1,21 @@
+$schema: https://git.drupalcode.org/project/drupal/-/raw/10.1.x/core/modules/sdc/src/metadata.schema.json
+
+name: Accordion
+group: Components
+status: stable
+props:
+  type: object
+  required:
+    - accordion__item__heading
+    - accordion__item__content
+  properties:
+    accordion__item__heading:
+      type: string
+      title: Heading
+      description: The heading of the accordion item.
+      data: Header label text
+    accordion__item__content:
+      type: string
+      title: Accordion item content
+      description: The content of the accordion item.
+      data: 'Enim eget nec sit scelerisque lacus. Porttitor senectus vulputate mattis tortor odio vitae. Dui et, ut ipsum aliquet sit tempor. Amet consectetur purus justo feugiat mattis sit ultricies odio.  Pellentesque pellentesque sit sed porttitor duis interdum. Bibendum nisl, eu, ornare non. Enim consequat in quisque vestibulum facilisi odio. Elementum elit est, vitae feugiat enim odio cursus. Enim cum dictum gravida amet id eget. Ut ac velit sed nulla leo id. Ante duis pellentesque aliquam massa amet, neque cum. Vitae mi purus placerat nibh purus faucibus imperdiet quisque diam. Elementum urna feugiat rhoncus purus. Consectetur neque auctor eite commodo consequat.'

src/components/accordion/accordion.stories.js

@@ -1,9 +1,11 @@
 import accordionTwig from './accordion.twig';
 
-import accordionData from './accordion.yml';
+import { props } from './accordion.component.yml';
 
 import './accordion';
 
+const accordionData = props.properties;
+
 /**
  * Storybook Definition.
  */
@@ -13,12 +15,12 @@ export default {
     heading: {
       name: 'Heading',
       type: 'string',
-      defaultValue: accordionData.accordion__item__heading,
+      defaultValue: accordionData.accordion__item__heading.data,
     },
     content: {
       name: 'Content',
       type: 'string',
-      defaultValue: accordionData.accordion__item__content,
+      defaultValue: accordionData.accordion__item__content.data,
     },
   },
   decorators: [
@@ -35,12 +37,12 @@ export const Accordion = ({ heading, content }) =>
         accordion__item__content: content,
       },
       {
-        accordion__item__heading: accordionData.accordion__item__heading,
-        accordion__item__content: accordionData.accordion__item__content,
+        accordion__item__heading: accordionData.accordion__item__heading.data,
+        accordion__item__content: accordionData.accordion__item__content.data,
       },
       {
-        accordion__item__heading: accordionData.accordion__item__heading,
-        accordion__item__content: accordionData.accordion__item__content,
+        accordion__item__heading: accordionData.accordion__item__heading.data,
+        accordion__item__content: accordionData.accordion__item__content.data,
       },
     ],
   });

src/components/blockquote/blockquote.component.yml

@@ -0,0 +1,21 @@
+$schema: https://git.drupalcode.org/project/drupal/-/raw/10.1.x/core/modules/sdc/src/metadata.schema.json
+
+name: Blockquote
+group: Components
+status: stable
+props:
+  type: object
+  required:
+    - block_quote__quote
+    - block_quote__attribution
+  properties:
+    block_quote__quote:
+      type: string
+      title: Quote
+      description: The quote/content of the blockquote item.
+      data: <p>In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before the final copy is available.</p>
+    block_quote__attribution:
+      type: string
+      title: Attribution
+      description: The attribution of the blockquote item.
+      data: 'Lorem Ipsum'

src/components/blockquote/blockquote.stories.js

@@ -1,6 +1,8 @@
 import blockquoteTwig from './blockquote.twig';
 
-import blockquoteData from './blockquote.yml';
+import { props } from './blockquote.component.yml';
+
+const blockquoteData = props.properties;
 
 /**
  * Storybook Definition.
@@ -11,12 +13,12 @@ export default {
     quote: {
       name: 'Quote',
       type: 'string',
-      defaultValue: blockquoteData.block_quote__quote,
+      defaultValue: blockquoteData.block_quote__quote.data,
     },
     attribution: {
       name: 'Attribution',
       type: 'string',
-      defaultValue: blockquoteData.block_quote__attribution,
+      defaultValue: blockquoteData.block_quote__attribution.data,
     },
     style: {
       name: 'Style',
@@ -27,25 +29,25 @@ export default {
     ariaLabel: {
       name: 'aria-label attribute',
       type: 'string',
-      defaultValue: blockquoteData.block_quote__aria_label,
+      defaultValue: 'Block Quote default value with bar graphic to the left',
     },
   },
 };
 
 export const blockquote = ({ style, quote, attribution, ariaLabel }) => `
   ${blockquoteTwig({
-    block_quote__quote: blockquoteData.block_quote__quote,
-    block_quote__attribution: blockquoteData.block_quote__attribution,
+    block_quote__quote: blockquoteData.block_quote__quote.data,
+    block_quote__attribution: blockquoteData.block_quote__attribution.data,
     block_quote__aria_label: 'Block Quote with bar graphic to the left',
   })}
   ${blockquoteTwig({
-    block_quote__quote: blockquoteData.block_quote__quote,
+    block_quote__quote: blockquoteData.block_quote__quote.data,
     block_quote__style: 'bar-right',
     block_quote__aria_label: 'Block Quote with bar graphic to the right',
   })}
   ${blockquoteTwig({
-    block_quote__quote: blockquoteData.block_quote__quote,
-    block_quote__attribution: blockquoteData.block_quote__attribution,
+    block_quote__quote: blockquoteData.block_quote__quote.data,
+    block_quote__attribution: blockquoteData.block_quote__attribution.data,
     block_quote__style: 'quote-left',
     block_quote__aria_label: 'Block Quote with quote icon to the left',
   })}

src/components/button/button.component.yml

@@ -0,0 +1,15 @@
+$schema: https://git.drupalcode.org/project/drupal/-/raw/10.1.x/core/modules/sdc/src/metadata.schema.json
+
+name: Button
+group: Components
+status: stable
+props:
+  type: object
+  properties:
+    button__additional_classes:
+      type: array
+      title: Additional classes
+      description: Additional classes for button.
+      data:
+      - 'button--hover'
+      - 'button--focus'

src/components/button/button.stories.js

@@ -1,6 +1,9 @@
 import template from './button.twig';
+import { props } from './button.component.yml';
 import figma from '../../../.storybook/configma.json';
 
+const buttonData = props.properties.button__additional_classes.data;
+
 export default {
   title: 'Components/Button',
   decorators: [(story) => `${story()}`],
@@ -10,9 +13,9 @@ export const Button = () => `
   <p>Default:</p>
   ${template()}
   <p>Hover:</p>
-  ${template({ button__additional_classes: ['button--hover'] })}
+  ${template({ button__additional_classes: [`${buttonData[0]}`] })}
   <p>Focus:</p>
-  ${template({ button__additional_classes: ['button--focus'] })}
+  ${template({ button__additional_classes: [`${buttonData[1]}`] })}
 `;
 
 Button.parameters = {

src/components/card/card.component.yml

@@ -0,0 +1,53 @@
+$schema: https://git.drupalcode.org/project/drupal/-/raw/10.1.x/core/modules/sdc/src/metadata.schema.json
+
+name: Cards
+group: Components
+status: stable
+props:
+  type: object
+  required:
+    - card__image__src
+    - card__image__alt
+    - card__heading
+    - card__body
+  properties:
+    card__image__src:
+      type: string
+      title: Image's source
+      description: The image's source of the card.
+      data: 'https://placehold.co/400'
+    card__image__alt:
+      type: string
+      title: Image's alternative text
+      description: The image's alternative text of the card.
+      data: 'This is the card image alt text'
+    card__image__output_image_tag:
+      type: boolean
+      title: Image's outpot image tag.
+      description: The image's output image tag of the card.
+      data: true
+    card__heading:
+      type: string
+      title: Heading
+      description: The heading of the card.
+      data: 'This is the card heading'
+    card__subheading:
+      type: string
+      title: Subheading
+      description: The subheading of the card.
+      data: 'Subhead Curabitur non nulla sit amet nisl tempus convallis quis ac lectus'
+    card__body:
+      type: string
+      title: Body
+      description: The content of the card.
+      data: 'Body ellentesque in ipsum id orci porta dapibus. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a.'
+    card__link__text:
+      type: string
+      title: Link's text
+      description: The link's text of the card.
+      data: 'Read more about this card'
+    card__link__url:
+      type: string
+      title: Link's url
+      description: The link's url of the card.
+      data: '#'

src/components/card/cards.stories.js

@@ -1,6 +1,7 @@
 import card from './card.twig';
-import cardData from './card.yml';
-import cardDataHorizontal from './card-horizontal.yml';
+import { props } from './card.component.yml';
+
+const cardData = props.properties;
 
 /**
  * Storybook Definition.
@@ -10,5 +11,25 @@ export default {
 };
 
 export const cardVertical = () =>
-  `<div style="max-width: 400px;">${card(cardData)}</div>`;
-export const cardHorizontal = () => card(cardDataHorizontal);
+  `<div style="max-width: 400px;">${card({
+    card__image__src: cardData.card__image__src.data,
+    card__image__alt: cardData.card__image__alt.data,
+    card__image__output_image_tag: cardData.card__image__output_image_tag.data,
+    card__heading: cardData.card__heading.data,
+    card__subheading: cardData.card__subheading.data,
+    card__body: cardData.card__body.data,
+    card__link__text: cardData.card__link__text.data,
+    card__link__url: cardData.card__link__url.data,
+  })}</div>`;
+export const cardHorizontal = () =>
+  card({
+    card__image__src: 'https://placehold.co/250x200',
+    card__image__alt: cardData.card__image__alt.data,
+    card__image__output_image_tag: cardData.card__image__output_image_tag.data,
+    card__heading: cardData.card__heading.data,
+    card__subheading: cardData.card__subheading.data,
+    card__body: cardData.card__body.data,
+    card__link__text: cardData.card__link__text.data,
+    card__link__url: cardData.card__link__url.data,
+    card__modifiers: ['horizontal'],
+  });

src/components/forms/forms.component.yml

@@ -0,0 +1,42 @@
+name:  Forms
+group: Components
+status: stable
+props:
+  type: object
+  required:
+    - checkboxes
+    - radios
+    - select
+  properties:
+    checkboxes:
+      type: array
+      title: Checkboxes
+      description: The options of checkbox.
+      data:
+        - title: 'Option 1'
+          checked: 'checked'
+        - title: 'Option 2'
+        - title: 'Option 3'
+        - title: 'Option 4'
+          disabled: 'disabled'
+    radios:
+      type: array
+      title: Radio buttons
+      description: The options of radio buttons.
+      data:
+        - title: 'Option 1'
+          checked: 'checked'
+        - title: 'Option 2'
+        - title: 'Option 3'
+        - title: 'Option 4'
+          disabled: 'disabled'
+    select:
+      type: array
+      title: Select
+      description: The options for select.
+      data:
+        - title: 'Choose an Option'
+        - title: 'Option 1'
+        - title: 'Option 2'
+        - title: 'Option 3'
+        - title: 'Option 4'

src/components/forms/forms.stories.js

@@ -3,19 +3,21 @@ import radio from './radio/radio.twig';
 import select from './select/select.twig';
 import textfields from './textfields/textfields.twig';
 
-import checkboxData from './checkbox/checkbox.yml';
-import radioData from './radio/radio.yml';
-import selectOptionsData from './select/select.yml';
+import { props } from './forms.component.yml';
+
+const checkboxData = props.properties.checkboxes.data;
+const radioData = props.properties.radios.data;
+const selectOptionsData = props.properties.select.data;
 
 /**
  * Storybook Definition.
  */
 export default { title: 'Components/Forms' };
 
-export const checkboxes = () => checkbox(checkboxData);
+export const checkboxes = () => checkbox({ checkboxes: checkboxData });
 
-export const radioButtons = () => radio(radioData);
+export const radioButtons = () => radio({ radios: radioData });
 
-export const selectDropdowns = () => select(selectOptionsData);
+export const selectDropdowns = () => select({ select: selectOptionsData });
 
 export const textfieldsExamples = () => textfields();