scania-digital-design-system/sdds

Improvement - Move examples from $content to templates

Closed this issue · 1 comments

Describe current situation
Describe what the current situation and what problem it is causing for this improvement

Right now we are using $content control inside some of the stories (headline as an example) to show code example. This might be causing problems in the future, when showing multiple examples in storybook. We should utilize the controls/templates the correct way https://storybook.js.org/docs/react/essentials/controls

export const Headlines = Template.bind({});
Headlines.args = {
  content: `
  <h1>Headline</h1>
  <h2>Headline</h2>
  <h3>A headline for page layouts</h3>
  <h4>A headline for page layouts</h4>
  <h5>A sub headline, which is most commonly paired with body-01</h5>
  <h6>A sub headline, which is most commonly paired with body-02</h6>
  <h7>A sub headline, which is most commonly paired with detail-02 </h7>
  `
}

Describe the improvement
A clear and concise description of what kind of improvement you have in mind.

Instead we should use the templates more to solve multiple examples,

export const Headlines = coolHeadlineTemplate.bind({});

If applicable, please provide steps to reproduce
Steps to reproduce the behavior:

  1. Go to headline story code
  2. Look at the $content

AB#170

Done