From 8b391031b1e1a15416c03d173ac81846781946ad Mon Sep 17 00:00:00 2001 From: Mari Nez Date: Fri, 19 Jul 2024 15:40:29 -0600 Subject: [PATCH 1/5] feat(emulsif-234): convert cards to support sdc --- src/components/card/card-horizontal.yml | 10 ----- src/components/card/card.component.yml | 53 +++++++++++++++++++++++++ src/components/card/card.yml | 8 ---- src/components/card/cards.stories.js | 29 ++++++++++++-- 4 files changed, 78 insertions(+), 22 deletions(-) delete mode 100644 src/components/card/card-horizontal.yml create mode 100644 src/components/card/card.component.yml delete mode 100644 src/components/card/card.yml diff --git a/src/components/card/card-horizontal.yml b/src/components/card/card-horizontal.yml deleted file mode 100644 index 092df44..0000000 --- a/src/components/card/card-horizontal.yml +++ /dev/null @@ -1,10 +0,0 @@ -card__image__src: 'https://placehold.co/250x200' -card__image__alt: "This is the card image's alt text" -card__image__output_image_tag: true -card__heading: 'This is the card heading' -card__subheading: 'Subhead Curabitur non nulla sit amet nisl tempus convallis quis ac lectus' -card__body: '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: 'Read more about this card' -card__link__url: '#' -card__modifiers: - - 'horizontal' \ No newline at end of file diff --git a/src/components/card/card.component.yml b/src/components/card/card.component.yml new file mode 100644 index 0000000..d877c84 --- /dev/null +++ b/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: '#' \ No newline at end of file diff --git a/src/components/card/card.yml b/src/components/card/card.yml deleted file mode 100644 index 0d278b9..0000000 --- a/src/components/card/card.yml +++ /dev/null @@ -1,8 +0,0 @@ -card__image__src: 'https://placehold.co/400' -card__image__alt: "This is the card image's alt text" -card__image__output_image_tag: true -card__heading: 'This is the card heading' -card__subheading: 'Subhead Curabitur non nulla sit amet nisl tempus convallis quis ac lectus' -card__body: '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: 'Read more about this card' -card__link__url: '#' diff --git a/src/components/card/cards.stories.js b/src/components/card/cards.stories.js index f14b149..5d0aae3 100644 --- a/src/components/card/cards.stories.js +++ b/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 = () => - `
${card(cardData)}
`; -export const cardHorizontal = () => card(cardDataHorizontal); + `
${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, + })}
`; +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'], + }); From 71bdba5674ed50d8c42e20d8c3e008d51d7fc971 Mon Sep 17 00:00:00 2001 From: mariannuar Date: Fri, 19 Jul 2024 21:42:59 +0000 Subject: [PATCH 2/5] feat: create tokens --- src/components/tokens/_tokens.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/tokens/_tokens.scss b/src/components/tokens/_tokens.scss index 60a9cc9..6c6deed 100644 --- a/src/components/tokens/_tokens.scss +++ b/src/components/tokens/_tokens.scss @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Sat, 13 Jul 2024 03:47:16 GMT + * Generated on Fri, 19 Jul 2024 21:42:57 GMT */ :root { From d1279f93c5791a2176bf670a691ad8f61b5bf3ec Mon Sep 17 00:00:00 2001 From: mariannuar Date: Mon, 5 Aug 2024 16:02:58 +0000 Subject: [PATCH 3/5] feat: create tokens --- src/components/tokens/_tokens.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/tokens/_tokens.scss b/src/components/tokens/_tokens.scss index 23f7041..5ba80d2 100644 --- a/src/components/tokens/_tokens.scss +++ b/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:02:57 GMT */ :root { From 7600ae90a2de1afe6ca537a2f586e24a8b352a63 Mon Sep 17 00:00:00 2001 From: Mari Nez Date: Mon, 5 Aug 2024 10:03:02 -0600 Subject: [PATCH 4/5] feat(emulsif-234): add empty line at the end of card.component.yml file --- src/components/card/card.component.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/card/card.component.yml b/src/components/card/card.component.yml index d877c84..e5a571e 100644 --- a/src/components/card/card.component.yml +++ b/src/components/card/card.component.yml @@ -50,4 +50,4 @@ props: type: string title: Link's url description: The link's url of the card. - data: '#' \ No newline at end of file + data: '#' From 76bbb80affb3c298516ba0d78e94875eaad54a9b Mon Sep 17 00:00:00 2001 From: mariannuar Date: Mon, 5 Aug 2024 16:09:08 +0000 Subject: [PATCH 5/5] feat: create tokens --- src/components/tokens/_tokens.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/tokens/_tokens.scss b/src/components/tokens/_tokens.scss index 5ba80d2..692f43e 100644 --- a/src/components/tokens/_tokens.scss +++ b/src/components/tokens/_tokens.scss @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Mon, 05 Aug 2024 16:02:57 GMT + * Generated on Mon, 05 Aug 2024 16:09:06 GMT */ :root {