Skip to content
This repository was archived by the owner on Nov 6, 2024. It is now read-only.

EMLSIF-192: Read.me file to upgrade YML schema to use SDC #117

Open
mariannuar wants to merge 2 commits into
base: main
Choose a base branch
from
Open

EMLSIF-192: Read.me file to upgrade YML schema to use SDC #117

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
57c0ba9
feat(EMLSIF-192): add README file - wip and example of SDC
mariannuar May 17, 2024
35bb860
Update README.md
mariannuar Jun 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
94 changes: 94 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,98 @@ 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.

A full annotated example of a `component.yml` file can be found [here](https://www.drupal.org/node/3352951)

### 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 <em><a href="https://britishart.yale.edu/exhibitions-programs/bridget-riley-perceptual-abstraction">Bridget Riley: Perceptual Abstraction</a></em> 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, <a href="https://artgallery.yale.edu/exhibitions/exhibition/basis-art-150-years-women-yale">On the Basis of Art: 150 Years of Women at Yale</a>, 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

<table>
Expand Down Expand Up @@ -174,3 +266,5 @@ Runs [stylelint](https://stylelint.io/) for your sass files and [eslint](https:/
</td>
</tr>
</table>


20 changes: 20 additions & 0 deletions components/02-molecules/accordion/accordion.component.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 <em><a href="https://britishart.yale.edu/exhibitions-programs/bridget-riley-perceptual-abstraction">Bridget Riley: Perceptual Abstraction</a></em> 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, <a href="https://artgallery.yale.edu/exhibitions/exhibition/basis-art-150-years-women-yale">On the Basis of Art: 150 Years of Women at Yale</a>, including a related audio guide, publication, and more.'
30 changes: 16 additions & 14 deletions components/02-molecules/accordion/accordion.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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,
},
},
};
Expand All @@ -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,
},
],
});
2 changes: 0 additions & 2 deletions components/02-molecules/accordion/accordion.yml
View file
Open in desktop

This file was deleted.