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!
Last modified 7mo ago