Writing Stories

Search…
Writing Stories
Writing components is still the same as it has always been in Emulsify (Create your component Twig/React, .scss and/or .js files. However, for Storybook you will now want to create "stories" to add your components to the Storybook UI. See below for some examples:
Simple annotated example
(From components/01-atoms/buttons/buttons.stories.js with added comments)
1
// We use the React version of Storybook (more on that later)
2
import React from 'react';
3
​
4
// Import your Twig file
5
import button from './twig/button.twig';
6
​
7
// Import your Data file
8
import buttonData from './twig/button.yml';
9
​
10
/**
11
 * Create your Storybook Definition and components
12
 */
13
​
14
// This is the definition and defines the navigation in Storybook
15
export default { title: 'Atoms/Button' }; 
16
​
17
// Will create a story called "Twig" in the above navigation
18
// using your button component and buttonData.
19
export const twig = () => <div dangerouslySetInnerHTML={{ __html: button(buttonData) }} />;
Copied!
Sharing Data Between Components
(From components/02-molecules/card/cards.stories.js with added comments)
1
import React from 'react';
2
​
3
import card from './card.twig';
4
​
5
// Original Data for all cards
6
import cardData from './card.yml';
7
// Only data specific to the 'bg' card variation
8
import cardBgData from './card-bg.yml';
9
​
10
export default { title: 'Molecules/Cards' };
11
​
12
export const cardExample = () => <div dangerouslySetInnerHTML={{ __html: card(cardData) }} />;
13
// Below contains all data including 'bg' variation data.
14
export const cardWithBackground = () => (
15
  <div dangerouslySetInnerHTML={{ __html: card({ ...cardData, ...cardBgData }) }} />);
16
​
Copied!
Using JavaScript
(From components/02-molecules/tabs/tabs.stories.js with added comments)
1
import React from 'react';
2
​
3
import tabs from './tabs.twig';
4
​
5
import tabData from './tabs.yml';
6
​
7
// Import your JavaScript file as you normally would in Node.js
8
// Assuming you use Drupal behaviors it will automatically be loaded.
9
import './tabs';
10
​
11
export default { title: 'Molecules/Tabs' };
12
​
13
// Apply the Storybook hook with your JS function inside of it
14
// before returning your component.
15
export const JSTabs = () => (
16
  <div dangerouslySetInnerHTML={{ __html: tabs(tabData) }} />;
17
);
18
​
Copied!
Using Storybook "Controls"
Storybook Controls offers the ability to tweak stories via the Storybook UI for demoing different variations, etc. Here is a simple example below:
1
import React from 'react';
2
​
3
import button from './button.twig';
4
​
5
import buttonData from './button.yml';
6
​
7
/**
8
 * Storybook Definition.
9
 */
10
export default {
11
  title: 'Atoms/Button',
12
  argTypes: {
13
    color: {
14
      control: {
15
        type: 'select',
16
        name: 'Color',
17
        options: ['red', 'yellow', 'blue'],
18
      },
19
    },
20
  },
21
};
22
​
23
export const Button = (args) => (
24
  <div
25
    dangerouslySetInnerHTML={{
26
      __html: button({
27
        ...buttonData,
28
        button_modifiers: [
29
          // By default, it contains an array of all colors.
30
          Array.isArray(args.color) ? 'red' : args.color,
31
        ],
32
      }),
33
    }}
34
  />
35
);
36
​
37
Button.args = {
38
  color: ['red', 'yellow', 'blue'],
39
};
40
​
Copied!
Emulsify Drupal Usage - Previous
Commands
Next - Emulsify Drupal Usage
Accessibility Testing
Last modified 7mo ago
Copy link
Contents
Simple annotated example
Sharing Data Between Components
Using JavaScript
Using Storybook "Controls"