Stories

Component stories

Where to put stories

Stories go inside a component's /storybook directory on the index.jsx file.

Component configuration

The Storybook configuration is a module that exports properties about the component to be rendered. We write them using Component Story Format (CSF), which is an open standard based on ES6 modules that is portable beyond Storybook.

In CSF, stories and component metadata are defined as ES Modules. Every component story file consists of a required default export and one or more named exports.

Default export

The default export defines metadata about your component, including the component itself, its title, decorators, and parameters.

The component field is optional (but encouraged!), and is used by addons for automatic prop table generation and display of other component metadata. title should be unique, i.e. not re-used across files.

Named export

The component stories are defined with a name export using UpperCamelCase.

	Description	Required
Default export	Defines metadata about your component, including the component itself, its title, decorators, and parameters	Yes
Named export	The component stories' defintion, using UpperCamelCase	Yes
storyName	A property available in the named export to change the story's name	No
dependencies	An object containing the Origami dependencies to load	No
args	Arguments that define how the component is to be rendered. Can be used to dynamically change props, slots, styles, inputs, etc.	No
argTypes	First-class feature in Storybook for specifying the behaviour of Args	No

Here is an example component and story configuration:

import { MyExampleComponent } from '../src/path_to_your_component'
import BuildService from '../../../.storybook/build-service'
import fetchMock from 'fetch-mock'
import React from 'react'
import { Helmet } from 'react-helmet'

// Origami dependencies to load (from the Build Service)
const dependencies = {
	'o-fonts': '^3.0.0'
}

// Default Export
export default {
	title: 'x-my-example-component'
}

// A function expecting a clean instance of fetch-mock
const fetchMock = fetchMock => {
    fetchMock.mock('/api/data', { some: 'data' });
}

// Named Export
export const MyFavourtieFood = (args) => {
	fetchMock(fetchMock)
	return (
		<div className="story-container">
			{dependencies && <BuildService dependencies={dependencies} />}
			<Helmet>
				<link rel="stylesheet" href={`components/x-my-example-component/dist/MyExampleComponent.css`} />
			</Helmet>
			<MyExampleComponent {...args} />
		</div>
	)
}

MyFavourtieFood.storyName = 'My Favourite Food'

MyFavourtieFood.args = {
	question: 'What is your favourite food?',
	favouriteFood: 'default option'
}

MyFavourtieFood.argTypes = {
	favouriteFood: { control: { type: 'select', options: ['default option', 'pizza', 'sushi', 'tacos'] } }
}

You can find more information about how to write stories on the Storybook Docs