search

solid-design-system / solid

Monorepo for Union Investment's Solid Design System.
https://solid-design-system.fe.union-investment.de/x.x.x/storybook/
Other
19 stars 3 forks source link

docs: 📚 rewrite documentation in Figma and Storybook #1142

Open karlbaumhauer opened 4 months ago

karlbaumhauer commented 4 months ago

Description

After finishing #1141 we need to roll out the PoC to all components and "clean up" afterwards.

If you want to work on a component/style, just tag your name behind it and start working on it in an own branch docs/rewrite-docs. After that, make a Pull Request to the branch docs/rewrite-docs. The checkbox should be set, as soon as dev and design implemented it.

Figma Component Documentation _ WIP File

Components

Styles

Templates

For every component

  1. Move all related samples to the template folder. Show only the docs page and hide the single stories. CleanShot 2024-07-26 at 09 55 56
  2. Write an introduction text per component. Feel free to use descriptions from shoelace.style. List all related templates in the intro. CleanShot 2024-07-26 at 09 57 30
  3. Move all screenshot tests into {component}.test.stories.ts. Make a combination screenshot story and allow it to be screenshotted by Chromatic

CleanShot 2024-07-26 at 13 16 03@2x

For every component's "visual" feature in {component}.stories.ts

  1. Write a single story with plain HTML/CSS/JS, that shows the feature. For every content, try to create real life examples with real life text. You can take it e. g. from https://www.union-investment.com
export const Loading = {
  render: () => {
    return html`
      <div class="flex gap-12">
        <sd-button variant="primary" loading>Loading</sd-button>
        <sd-button variant="secondary" loading>Loading</sd-button>
        <sd-button variant="tertiary" loading>Loading</sd-button>
        <sd-button variant="cta" loading>Loading</sd-button>
      </div>
    `;
  }
};
  1. Describe in one sentence the functionality and what it is intended for. Feel free to use texts from Shoelace (e. g. https://shoelace.style/components/input#clearable). Design and Development have to align on that! Example: 
    /**
* Use the `loading` attribute to make a button busy. The width will remain the same as before, preventing adjacent elements from moving around.
*/

Standards

Order for docs

Where to put the documentation

DoR

DoD

karlbaumhauer commented 2 months ago

@yoezlem I changed the story points to 5 as we agreed to add storypoints to the respective PRs for each component.

yoezlem commented 2 months ago

@coraliefeil Coralie, could you also attach the Figma link here so we can review both when going through the PRs? I'm currently having trouble finding the correct link in Figma.

coraliefeil commented 2 months ago

Added it to the description Figma Component Documentation _ WIP File

Vahid1919 commented 1 month ago

@coraliefeil I noticed that there was an sd-badge both in styles and components. Is the one in styles incorrect?

coraliefeil commented 1 month ago

@coraliefeil I noticed that there was an sd-badge both in styles and components. Is the one in styles incorrect?

Where do you see that?

Vahid1919 commented 1 month ago

@coraliefeil I noticed that there was an sd-badge both in styles and components. Is the one in styles incorrect?

Where do you see that?

@coraliefeil our checklist at the top.

Components

  • [x] sd-badge @smfonseca @coraliefeil

Styles

  • [ ] sd-badge @MartaPintoTeixeira