Merge pull request #132 from emulsify-ds/emulsif-234-convert-card-to-…

…support-sdc

EMULSIF-234: Convert card to support sdc

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/tokens/_tokens.scss

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 05 Aug 2024 15:59:19 GMT
+ * Generated on Mon, 05 Aug 2024 16:09:06 GMT
  */
 
 :root {