From 57c0ba9c6c9ce036e99216507bd1340ff69c8f00 Mon Sep 17 00:00:00 2001 From: Mari Nez Date: Fri, 17 May 2024 16:58:15 -0600 Subject: [PATCH 1/2] feat(EMLSIF-192): add README file - wip and example of SDC --- README.md | 93 +++++++++++++++++++ .../accordion/accordion.component.yml | 20 ++++ .../accordion/accordion.stories.js | 30 +++--- .../02-molecules/accordion/accordion.yml | 2 - 4 files changed, 129 insertions(+), 16 deletions(-) create mode 100644 components/02-molecules/accordion/accordion.component.yml delete mode 100644 components/02-molecules/accordion/accordion.yml diff --git a/README.md b/README.md index cfd3e7d3..9b388d31 100644 --- a/README.md +++ b/README.md @@ -45,6 +45,97 @@ Runs [stylelint](https://stylelint.io/) for your sass files and [eslint](https:/ }, ``` +## Support Single Directory Components + +[Single Directory Components](https://www.drupal.org/project/sdc) will be a Drupal standard and historically, Emulsify has been doing something similar already. By doing some adjustments in Compound components, Emulsify will support SDC and make it seamless. + + +### Upgrading Compound component + +A complete compound component meets the following criteria. + +1. A YML file is required in each component. +2. A YML file using the same schema Single Directory Component does. +3. A YML file with the `[name-of-component].component.yml` extension. +4. A story file that imports and uses the metadata from the new YML schema. + +### Example of upgrading component + +The [accordion component](https://emulsify-ds.github.io/compound/?path=/docs/molecules-accordion--docs) serves as an example of how the new YML schema should look like and how to use that metadata in stories. + +#### Accordion YML new schema: + +``` +$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: Art Collections + accordion__item__content: + type: string + title: Accordion item content + description: The content of the accordion item. + data: 'The Yale Center for British Art will present Bridget Riley: Perceptual Abstraction from March 3 through July 24, 2022. Born in Britain in 1931, Riley is among the most important and influential painters in Britain and the world. Displayed on two floors, this major survey traces Riley’s oeuvre from the 1960s through the present by featuring over fifty works that were selected by the artist in collaboration with the YCBA. Also, revisit an exhibition hosted at the Yale University Art Gallery, On the Basis of Art: 150 Years of Women at Yale, including a related audio guide, publication, and more.' +``` + +Everything in this file is optional. Still, the file needs to exist. Adding metadata here will improve the DX when using components. + +- `$schema`: This is so the IDE knows about the syntax for fixes and autocomplete. +- `name`: The human readable name of the component. +- `group`: Key to organize components together - Atomic design in this case. +- `status`: Status can be: "experimental", "stable", "deprecated", "obsolete". +- `props`: + - Currently in Drupal 10.1, the schema will fail to validate if props section is not present, this is currently require. This may change in a future release of SDC. + - Schema for the props. SDC supports JSON Schema + - `type`: Props are always an object with keys. Each key is a variable in the component template. + - `required`: If the component has required properties, it;s list them here. + - `properties`: The key is the name of the variable in the template + - `type`: This information is required for every prop. + - `title`: A human-readable name to your props. + - `description`: This can be optional. + - `data`: The data used by storybook. + +#### Accordion new story: + +Import props from the YML schema: + +``` +import { props } from "./accordion.component.yml"; +``` + +Create variable and use data from propesties + +``` +const accordionData = props.properties; + +export default { + title: 'Molecules/Accordion', + argTypes: { + heading: { + name: 'Heading', + type: 'string', + defaultValue: accordionData.accordion__item__heading.data, + }, + content: { + name: 'Content', + type: 'string', + defaultValue: accordionData.accordion__item__content.data, + }, + }, +}; +``` + ### Contributors @@ -174,3 +265,5 @@ Runs [stylelint](https://stylelint.io/) for your sass files and [eslint](https:/
+ + diff --git a/components/02-molecules/accordion/accordion.component.yml b/components/02-molecules/accordion/accordion.component.yml new file mode 100644 index 00000000..52c93539 --- /dev/null +++ b/components/02-molecules/accordion/accordion.component.yml @@ -0,0 +1,20 @@ +$schema: https://git.drupalcode.org/project/drupal/-/raw/10.1.x/core/modules/sdc/src/metadata.schema.json +name: Accordion +group: Molecules +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: Art Collections + accordion__item__content: + type: string + title: Accordion item content + description: The content of the accordion item. + data: 'The Yale Center for British Art will present Bridget Riley: Perceptual Abstraction from March 3 through July 24, 2022. Born in Britain in 1931, Riley is among the most important and influential painters in Britain and the world. Displayed on two floors, this major survey traces Riley’s oeuvre from the 1960s through the present by featuring over fifty works that were selected by the artist in collaboration with the YCBA. Also, revisit an exhibition hosted at the Yale University Art Gallery, On the Basis of Art: 150 Years of Women at Yale, including a related audio guide, publication, and more.' \ No newline at end of file diff --git a/components/02-molecules/accordion/accordion.stories.js b/components/02-molecules/accordion/accordion.stories.js index 02a2853c..01cea186 100644 --- a/components/02-molecules/accordion/accordion.stories.js +++ b/components/02-molecules/accordion/accordion.stories.js @@ -1,24 +1,26 @@ -import accordionTwig from './accordion.twig'; +import accordionTwig from "./accordion.twig"; -import accordionData from './accordion.yml'; +import { props } from "./accordion.component.yml"; -import './accordion'; +import "./accordion"; + +const accordionData = props.properties; /** * Storybook Definition. */ export default { - title: 'Molecules/Accordion', + title: "Molecules/Accordion", argTypes: { heading: { - name: 'Heading', - type: 'string', - defaultValue: accordionData.accordion__item__heading, + name: "Heading", + type: "string", + defaultValue: accordionData.accordion__item__heading.data, }, content: { - name: 'Content', - type: 'string', - defaultValue: accordionData.accordion__item__content, + name: "Content", + type: "string", + defaultValue: accordionData.accordion__item__content.data, }, }, }; @@ -31,12 +33,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/components/02-molecules/accordion/accordion.yml b/components/02-molecules/accordion/accordion.yml deleted file mode 100644 index 3a0111aa..00000000 --- a/components/02-molecules/accordion/accordion.yml +++ /dev/null @@ -1,2 +0,0 @@ -accordion__item__heading: 'Art Collections' -accordion__item__content: 'The Yale Center for British Art will present Bridget Riley: Perceptual Abstraction from March 3 through July 24, 2022. Born in Britain in 1931, Riley is among the most important and influential painters in Britain and the world. Displayed on two floors, this major survey traces Riley’s oeuvre from the 1960s through the present by featuring over fifty works that were selected by the artist in collaboration with the YCBA. Also, revisit an exhibition hosted at the Yale University Art Gallery, On the Basis of Art: 150 Years of Women at Yale, including a related audio guide, publication, and more.' From 35bb860e8ba07ccb75205db7a020105af355e2cb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mariana=20N=C3=BA=C3=B1ez?= <48533432+mariannuar@users.noreply.github.com> Date: Tue, 18 Jun 2024 15:51:50 -0600 Subject: [PATCH 2/2] Update README.md Co-authored-by: josue2591 --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 9b388d31..fa3b8e58 100644 --- a/README.md +++ b/README.md @@ -49,6 +49,7 @@ Runs [stylelint](https://stylelint.io/) for your sass files and [eslint](https:/ [Single Directory Components](https://www.drupal.org/project/sdc) will be a Drupal standard and historically, Emulsify has been doing something similar already. By doing some adjustments in Compound components, Emulsify will support SDC and make it seamless. +A full annotated example of a `component.yml` file can be found [here](https://www.drupal.org/node/3352951) ### Upgrading Compound component