From a9be35b8f009a17c2af5635ca0221cf6f328a0a7 Mon Sep 17 00:00:00 2001 From: Mari Nez Date: Wed, 17 Jul 2024 11:53:09 -0600 Subject: [PATCH 01/27] feat(emulsif-230): update accordion component to support SDC --- .../accordion/accordion.component.yml | 24 +++++++++++++++++++ src/components/accordion/accordion.stories.js | 16 +++++++------ src/components/accordion/accordion.yml | 2 -- 3 files changed, 33 insertions(+), 9 deletions(-) create mode 100644 src/components/accordion/accordion.component.yml delete mode 100644 src/components/accordion/accordion.yml diff --git a/src/components/accordion/accordion.component.yml b/src/components/accordion/accordion.component.yml new file mode 100644 index 0000000..8999496 --- /dev/null +++ b/src/components/accordion/accordion.component.yml @@ -0,0 +1,24 @@ +accordion__item__heading: 'Header label text' +accordion__item__content: '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. ' + +$schema: https://git.drupalcode.org/project/drupal/-/raw/10.1.x/core/modules/sdc/src/metadata.schema.json + +name: Accordion +group: Molecules +status: experimental +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.' \ No newline at end of file diff --git a/src/components/accordion/accordion.stories.js b/src/components/accordion/accordion.stories.js index c435ec3..188a016 100644 --- a/src/components/accordion/accordion.stories.js +++ b/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, }, ], }); diff --git a/src/components/accordion/accordion.yml b/src/components/accordion/accordion.yml deleted file mode 100644 index e55c6dd..0000000 --- a/src/components/accordion/accordion.yml +++ /dev/null @@ -1,2 +0,0 @@ -accordion__item__heading: 'Header label text' -accordion__item__content: '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. ' From 2c7fc9c4f42ea9f12d5992001c2e490b3f6e919b Mon Sep 17 00:00:00 2001 From: mariannuar Date: Wed, 17 Jul 2024 18:28:16 +0000 Subject: [PATCH 02/27] 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..f175535 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 Wed, 17 Jul 2024 18:28:14 GMT */ :root { From e015f8fe85fba13eee59716246a400605acb1034 Mon Sep 17 00:00:00 2001 From: Mari Nez Date: Wed, 17 Jul 2024 13:11:49 -0600 Subject: [PATCH 03/27] feat(emulsif-230): update yml file --- src/components/accordion/accordion.component.yml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/accordion/accordion.component.yml b/src/components/accordion/accordion.component.yml index 8999496..5490c2a 100644 --- a/src/components/accordion/accordion.component.yml +++ b/src/components/accordion/accordion.component.yml @@ -4,8 +4,8 @@ accordion__item__content: 'Enim eget nec sit scelerisque lacus. Porttitor senect $schema: https://git.drupalcode.org/project/drupal/-/raw/10.1.x/core/modules/sdc/src/metadata.schema.json name: Accordion -group: Molecules -status: experimental +group: Components +status: stable props: type: object required: From c4d07eb75c95ff52f1e285f889ffeaeae04bc505 Mon Sep 17 00:00:00 2001 From: Mari Nez Date: Wed, 17 Jul 2024 13:12:54 -0600 Subject: [PATCH 04/27] feat(emulsif-230): update yml file --- src/components/accordion/accordion.component.yml | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/components/accordion/accordion.component.yml b/src/components/accordion/accordion.component.yml index 5490c2a..9375af0 100644 --- a/src/components/accordion/accordion.component.yml +++ b/src/components/accordion/accordion.component.yml @@ -1,6 +1,3 @@ -accordion__item__heading: 'Header label text' -accordion__item__content: '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. ' - $schema: https://git.drupalcode.org/project/drupal/-/raw/10.1.x/core/modules/sdc/src/metadata.schema.json name: Accordion From 4200422aae070549d5569cdfd0fcc9eb7763af4f Mon Sep 17 00:00:00 2001 From: mariannuar Date: Wed, 17 Jul 2024 19:13:05 +0000 Subject: [PATCH 05/27] 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 f175535..0c68199 100644 --- a/src/components/tokens/_tokens.scss +++ b/src/components/tokens/_tokens.scss @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Wed, 17 Jul 2024 18:28:14 GMT + * Generated on Wed, 17 Jul 2024 19:13:04 GMT */ :root { From d82b6c4716449f0ed8d874ef855e0c9545e4a17b Mon Sep 17 00:00:00 2001 From: Mari Nez Date: Wed, 17 Jul 2024 18:00:25 -0600 Subject: [PATCH 06/27] feat(emulsif-232): convert blockquote to support sdc --- .../blockquote/blockquote.component.yml | 21 +++++++++++++++++++ .../blockquote/blockquote.stories.js | 20 ++++++++++-------- src/components/blockquote/blockquote.yml | 2 -- 3 files changed, 32 insertions(+), 11 deletions(-) create mode 100644 src/components/blockquote/blockquote.component.yml delete mode 100644 src/components/blockquote/blockquote.yml diff --git a/src/components/blockquote/blockquote.component.yml b/src/components/blockquote/blockquote.component.yml new file mode 100644 index 0000000..d641f19 --- /dev/null +++ b/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:

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.

+ block_quote__attribution: + type: string + title: Attribution + description: The attribution of the blockquote item. + data: 'Lorem Ipsum' diff --git a/src/components/blockquote/blockquote.stories.js b/src/components/blockquote/blockquote.stories.js index 92a0fc7..6b4434c 100644 --- a/src/components/blockquote/blockquote.stories.js +++ b/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', })} diff --git a/src/components/blockquote/blockquote.yml b/src/components/blockquote/blockquote.yml deleted file mode 100644 index d7f60ee..0000000 --- a/src/components/blockquote/blockquote.yml +++ /dev/null @@ -1,2 +0,0 @@ -block_quote__quote:

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.

-block_quote__attribution: Lorem Ipsum From e311614e75b7a0c57a6019ad0440a947f9caef17 Mon Sep 17 00:00:00 2001 From: mariannuar Date: Thu, 18 Jul 2024 00:05:11 +0000 Subject: [PATCH 07/27] 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..1b6dba0 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 Thu, 18 Jul 2024 00:05:10 GMT */ :root { From 375bae67246c24b6bbfb70ac192265b8dba84221 Mon Sep 17 00:00:00 2001 From: Mari Nez Date: Wed, 17 Jul 2024 18:45:12 -0600 Subject: [PATCH 08/27] feat(emulsif-233): convert button to support sdc --- src/components/button/button.component.yml | 15 +++++++++++++++ src/components/button/button.stories.js | 7 +++++-- 2 files changed, 20 insertions(+), 2 deletions(-) create mode 100644 src/components/button/button.component.yml diff --git a/src/components/button/button.component.yml b/src/components/button/button.component.yml new file mode 100644 index 0000000..4c69673 --- /dev/null +++ b/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' diff --git a/src/components/button/button.stories.js b/src/components/button/button.stories.js index 49b5d84..2a20ab2 100644 --- a/src/components/button/button.stories.js +++ b/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 = () => `

Default:

${template()}

Hover:

- ${template({ button__additional_classes: ['button--hover'] })} + ${template({ button__additional_classes: [`${buttonData[0]}`] })}

Focus:

- ${template({ button__additional_classes: ['button--focus'] })} + ${template({ button__additional_classes: [`${buttonData[1]}`] })} `; Button.parameters = { From 772ee08e240ef633b9a58276273f50f2db355b39 Mon Sep 17 00:00:00 2001 From: mariannuar Date: Thu, 18 Jul 2024 00:48:03 +0000 Subject: [PATCH 09/27] 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..d34e72c 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 Thu, 18 Jul 2024 00:48:02 GMT */ :root { From 8b391031b1e1a15416c03d173ac81846781946ad Mon Sep 17 00:00:00 2001 From: Mari Nez Date: Fri, 19 Jul 2024 15:40:29 -0600 Subject: [PATCH 10/27] 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 11/27] 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 49d6fd580b0e774a2736a418813835b61de61d96 Mon Sep 17 00:00:00 2001 From: Mari Nez Date: Fri, 19 Jul 2024 17:12:19 -0600 Subject: [PATCH 12/27] feat(emulsif-235): convert checkboxes, selects and radio buttons to support sdc --- src/components/forms/checkbox/checkbox.yml | 7 ---- src/components/forms/forms.component.yml | 42 ++++++++++++++++++++++ src/components/forms/forms.stories.js | 14 ++++---- src/components/forms/radio/radio.yml | 7 ---- src/components/forms/select/select.yml | 6 ---- 5 files changed, 50 insertions(+), 26 deletions(-) delete mode 100644 src/components/forms/checkbox/checkbox.yml create mode 100644 src/components/forms/forms.component.yml delete mode 100644 src/components/forms/radio/radio.yml delete mode 100644 src/components/forms/select/select.yml diff --git a/src/components/forms/checkbox/checkbox.yml b/src/components/forms/checkbox/checkbox.yml deleted file mode 100644 index d286a75..0000000 --- a/src/components/forms/checkbox/checkbox.yml +++ /dev/null @@ -1,7 +0,0 @@ -checkboxes: - - title: 'Option 1' - checked: 'checked' - - title: 'Option 2' - - title: 'Option 3' - - title: 'Option 4' - disabled: 'disabled' diff --git a/src/components/forms/forms.component.yml b/src/components/forms/forms.component.yml new file mode 100644 index 0000000..cd5286c --- /dev/null +++ b/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' diff --git a/src/components/forms/forms.stories.js b/src/components/forms/forms.stories.js index 0489aa3..4120060 100644 --- a/src/components/forms/forms.stories.js +++ b/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(); diff --git a/src/components/forms/radio/radio.yml b/src/components/forms/radio/radio.yml deleted file mode 100644 index 806a54b..0000000 --- a/src/components/forms/radio/radio.yml +++ /dev/null @@ -1,7 +0,0 @@ -radios: - - title: 'Option 1' - checked: 'checked' - - title: 'Option 2' - - title: 'Option 3' - - title: 'Option 4' - disabled: 'disabled' diff --git a/src/components/forms/select/select.yml b/src/components/forms/select/select.yml deleted file mode 100644 index 597ac2f..0000000 --- a/src/components/forms/select/select.yml +++ /dev/null @@ -1,6 +0,0 @@ -select: - - title: 'Choose an Option' - - title: 'Option 1' - - title: 'Option 2' - - title: 'Option 3' - - title: 'Option 4' From 2bf5bb0e7bf80b06bb5ca17ba20447413da68274 Mon Sep 17 00:00:00 2001 From: Mari Nez Date: Wed, 24 Jul 2024 10:14:07 -0600 Subject: [PATCH 13/27] fix(emulsif-235): tokens used in select --- src/components/forms/select/_select.scss | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/forms/select/_select.scss b/src/components/forms/select/_select.scss index 57d4265..a090c22 100644 --- a/src/components/forms/select/_select.scss +++ b/src/components/forms/select/_select.scss @@ -12,7 +12,7 @@ &::after { border-left: 5px solid transparent; border-right: 5px solid transparent; - border-top: 9px solid var(--colors-text-body); + border-top: 9px solid var(--color-text-body); content: ' '; position: absolute; top: 42%; @@ -25,21 +25,21 @@ } :hover { - background: var(--selectdropdown-button-fill-hover); + background: var(--selectdropdown-color-button-fill-hover); } } .form-item__select { - border: var(--border-sm) solid var(--selectdropdown-button-stroke); - border-radius: var(--selectdropdown-radius); + border: var(--border-sm) solid var(--selectdropdown-color-button-stroke); + border-radius: var(--selectdropdown-color-radius); height: 41px; // set height required for discrepancy between .form-item__dropdown border and the select :focus border font-size: 16px; margin: 0; outline: none; padding: 0.6em 0.8em 0.5em; width: 100%; - color: var(--selectdropdown-label); - background: var(--selectdropdown-button-fill); + color: var(--selectdropdown-color-label); + background: var(--selectdropdown-color-button-fill); :focus { outline: none; From 1aaeea82e99fff01a8217ca82c7e7de52fd06ca8 Mon Sep 17 00:00:00 2001 From: mariannuar Date: Wed, 24 Jul 2024 16:19:12 +0000 Subject: [PATCH 14/27] 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..aeb6113 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 Wed, 24 Jul 2024 16:19:11 GMT */ :root { From 4e6222ca88e80125db762a5acdfd3f5e0feb7a7b Mon Sep 17 00:00:00 2001 From: Mari Nez Date: Wed, 24 Jul 2024 11:47:07 -0600 Subject: [PATCH 15/27] feat(emulsif-237): convert links to support sdc --- src/components/links/link/link.component.yml | 27 ++++++++++++++++++++ src/components/links/link/link.yml | 4 --- src/components/links/link/links.stories.js | 10 ++++++-- 3 files changed, 35 insertions(+), 6 deletions(-) create mode 100644 src/components/links/link/link.component.yml delete mode 100644 src/components/links/link/link.yml diff --git a/src/components/links/link/link.component.yml b/src/components/links/link/link.component.yml new file mode 100644 index 0000000..6870bea --- /dev/null +++ b/src/components/links/link/link.component.yml @@ -0,0 +1,27 @@ +$schema: https://git.drupalcode.org/project/drupal/-/raw/10.1.x/core/modules/sdc/src/metadata.schema.json + +name: Links +group: Components +status: stable +props: + type: object + required: + - link_url + - link_content + properties: + link_url: + type: string + title: Link's url + description: The url of the link. + data: 'https://github.com/emulsify-ds/emulsify-design-system' + link_content: + type: string + title: Link's content + description: The content/text of the link. + data: 'This is my link text' + link_attributes: + type: string + title: Link's attributes (optional) + description: The attribute of the link. + data: + target: '_blank' \ No newline at end of file diff --git a/src/components/links/link/link.yml b/src/components/links/link/link.yml deleted file mode 100644 index f7c96ef..0000000 --- a/src/components/links/link/link.yml +++ /dev/null @@ -1,4 +0,0 @@ -link_url: 'https://github.com/emulsify-ds/emulsify-design-system' -link_content: 'This is my link text' -link_attributes: - 'target': '_blank' diff --git a/src/components/links/link/links.stories.js b/src/components/links/link/links.stories.js index 83e011e..c0f574f 100644 --- a/src/components/links/link/links.stories.js +++ b/src/components/links/link/links.stories.js @@ -1,10 +1,16 @@ import link from './link.twig'; +import { props } from './link.component.yml'; -import linkData from './link.yml'; +const linkData = props.properties; /** * Storybook Definition. */ export default { title: 'Components/Typography/Links' }; -export const links = () => link(linkData); +export const links = () => + link({ + link_url: linkData.link_url.data, + link_content: linkData.link_content.data, + link_attributes: linkData.link_attributes.data, + }); From d495b9649279ce233a27430089771ed135ece665 Mon Sep 17 00:00:00 2001 From: mariannuar Date: Wed, 24 Jul 2024 17:52:24 +0000 Subject: [PATCH 16/27] 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..eee9534 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 Wed, 24 Jul 2024 17:52:23 GMT */ :root { From f52d66f4b4dbd1e8c5febe7aa43e4e2fc579fa41 Mon Sep 17 00:00:00 2001 From: Mari Nez Date: Wed, 24 Jul 2024 14:20:29 -0600 Subject: [PATCH 17/27] feat(emulsif-238): convert lists to support sdc --- src/components/lists/list.component.yml | 16 ++++++++++++++++ src/components/lists/list.stories.js | 8 +++++--- src/components/lists/list.twig | 2 +- src/components/lists/list.yml | 8 -------- 4 files changed, 22 insertions(+), 12 deletions(-) create mode 100644 src/components/lists/list.component.yml delete mode 100644 src/components/lists/list.yml diff --git a/src/components/lists/list.component.yml b/src/components/lists/list.component.yml new file mode 100644 index 0000000..bebd383 --- /dev/null +++ b/src/components/lists/list.component.yml @@ -0,0 +1,16 @@ +$schema: https://git.drupalcode.org/project/drupal/-/raw/10.1.x/core/modules/sdc/src/metadata.schema.json + +name: Lists +group: Components +status: stable +props: + type: object + properties: + list__items: + type: array + title: List items + description: The items of the list. + data: + - "This is a list of items that doesn't need numbers." + - 'Amet consectetur purus justo feugiat mattis sit ultricies odio. Pellentesque pellentesque sit sed porttitor duis interdum.' + - 'Elementum elit est, vitae feugiat enim odio cursus. Enim cum dictum gravida amet id eget.' diff --git a/src/components/lists/list.stories.js b/src/components/lists/list.stories.js index 7213918..b0ca075 100644 --- a/src/components/lists/list.stories.js +++ b/src/components/lists/list.stories.js @@ -1,6 +1,7 @@ import listTwig from './list.twig'; +import { props } from './list.component.yml'; -import listData from './list.yml'; +const listData = props.properties.list__items.data; /** * Storybook Definition. @@ -9,11 +10,12 @@ export default { title: 'Components/Typography' }; export const ListUnordered = () => `
- ${listTwig({ list__items: listData.unordered__list__items })} + ${listTwig({ list__items: listData })}
`; + export const ListOrdered = () => `
- ${listTwig({ list__items: listData.ordered__list__items, list__type: 'ol' })} + ${listTwig({ list__items: listData, list__type: 'ol' })}
`; diff --git a/src/components/lists/list.twig b/src/components/lists/list.twig index 2c320fb..b601843 100644 --- a/src/components/lists/list.twig +++ b/src/components/lists/list.twig @@ -16,7 +16,7 @@ {% block list__content %} {% for list__item in list__items %} {% include "@components/lists/_list-item.twig" with { - list__item__content: list__item.list__item__content, + list__item__content: list__item, list__item__blockname: list__base_class, } %} {% endfor %} diff --git a/src/components/lists/list.yml b/src/components/lists/list.yml deleted file mode 100644 index 44ddab6..0000000 --- a/src/components/lists/list.yml +++ /dev/null @@ -1,8 +0,0 @@ -unordered__list__items: - - list__item__content: "This is a list of items that doesn't need numbers." - - list__item__content: 'Amet consectetur purus justo feugiat mattis sit ultricies odio. Pellentesque pellentesque sit sed porttitor duis interdum.' - - list__item__content: 'Elementum elit est, vitae feugiat enim odio cursus. Enim cum dictum gravida amet id eget.' -ordered__list__items: - - list__item__content: 'This is a list of items that benefits from numbers.' - - list__item__content: 'Amet consectetur purus justo feugiat mattis sit ultricies odio. Pellentesque pellentesque sit sed porttitor duis interdum.' - - list__item__content: 'Elementum elit est, vitae feugiat enim odio cursus. Enim cum dictum gravida amet id eget.' From 20f6ebb1a74b3ffb501a4b615dc53114e731b66c Mon Sep 17 00:00:00 2001 From: mariannuar Date: Wed, 24 Jul 2024 20:24:11 +0000 Subject: [PATCH 18/27] 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..76628ad 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 Wed, 24 Jul 2024 20:24:10 GMT */ :root { From 0756c51a2d039189f2d725a8af91a9154533d475 Mon Sep 17 00:00:00 2001 From: mariannuar Date: Mon, 5 Aug 2024 15:55:10 +0000 Subject: [PATCH 19/27] 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 1b6dba0..7aadc9c 100644 --- a/src/components/tokens/_tokens.scss +++ b/src/components/tokens/_tokens.scss @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Thu, 18 Jul 2024 00:05:10 GMT + * Generated on Mon, 05 Aug 2024 15:55:09 GMT */ :root { From e269017ea631d129cc8d16279f86247ea55f7dcf Mon Sep 17 00:00:00 2001 From: mariannuar Date: Mon, 5 Aug 2024 15:59:20 +0000 Subject: [PATCH 20/27] 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 7aadc9c..23f7041 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:55:09 GMT + * Generated on Mon, 05 Aug 2024 15:59:19 GMT */ :root { From d1279f93c5791a2176bf670a691ad8f61b5bf3ec Mon Sep 17 00:00:00 2001 From: mariannuar Date: Mon, 5 Aug 2024 16:02:58 +0000 Subject: [PATCH 21/27] 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 22/27] 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 23/27] 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 { From 77821ced6ecb81d5bf2ce5cd97a93d6d9f71452d Mon Sep 17 00:00:00 2001 From: mariannuar Date: Mon, 5 Aug 2024 16:15:36 +0000 Subject: [PATCH 24/27] 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 692f43e..a7f2e03 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:09:06 GMT + * Generated on Mon, 05 Aug 2024 16:15:34 GMT */ :root { From a6e2722e1b36678b45c43c1dcceaef082b5d721c Mon Sep 17 00:00:00 2001 From: Mari Nez Date: Mon, 5 Aug 2024 10:17:25 -0600 Subject: [PATCH 25/27] fix(emulsif-237): add empty line at the end of yml file --- src/components/links/link/link.component.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/links/link/link.component.yml b/src/components/links/link/link.component.yml index 6870bea..ce48b2e 100644 --- a/src/components/links/link/link.component.yml +++ b/src/components/links/link/link.component.yml @@ -24,4 +24,4 @@ props: title: Link's attributes (optional) description: The attribute of the link. data: - target: '_blank' \ No newline at end of file + target: '_blank' From 6e7f9c0cf2d111a282eed58265c2f3d0494bde46 Mon Sep 17 00:00:00 2001 From: mariannuar Date: Mon, 5 Aug 2024 16:19:23 +0000 Subject: [PATCH 26/27] 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 a7f2e03..417bf08 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:15:34 GMT + * Generated on Mon, 05 Aug 2024 16:19:21 GMT */ :root { From 6f54b34e13469c4f4eb1adbba6632a2edc24d764 Mon Sep 17 00:00:00 2001 From: mariannuar Date: Mon, 5 Aug 2024 16:30:16 +0000 Subject: [PATCH 27/27] 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 417bf08..43d3401 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:19:21 GMT + * Generated on Mon, 05 Aug 2024 16:30:15 GMT */ :root {