Add Addons and Stories In Angular Storybook — Part 2

5 min readJun 18, 2021

Hello everyone! In this part of the series, I’ll cover what is addons and how to add them to the storybook. Also, I’ll show you how to add stories to it.

Note: If you want to start with the introduction of the storybook then below is the link to my first blog of this series:
https://amita-kawale.medium.com/introduction-of-storybook-using-angular-part-i-4887d334199d

What are Addons?

Addons in a storybook are node modules that are used to load custom and essentials addons to the storybook. It stores addon loaders, communication channel and other resources which can be used by storybook implementations where required.

Types of add-ons:

Below the list of popular addons which is advanced features and new workflows for the storybook:

Deprecated Addons:

Essential addons in the storybook

Storybook gives by default a set of “essential” addons that we get in our created initial storybook. These essential add-ons are pre-installed in the Storybook no need to add them separately.

Essential addons include flowing addons:

Installation of addons in the storybook

Let’s take an example of installation of accessibility testing addon in your storybook project using the following command:

npm install @storybook/addon-a11y

Note: You can install other addons like the same with addon name

Next, update installed addons in the .storybook/main.js file to the following:

// .storybook/main.jsmodule.exports = {
  stories: [],
  addons: [
    // Other Storybook addons     "@storybook/addon-essentials",     "@storybook/addon-a11y", // the addon registered here
  ],
};

so these are steps to install any addons in your storybook project.

How Addons work and How to write stories:

Storybook provides lots of reusable add-ons that are packaged as NPM modules. I’ll show you few addons with examples and how they work on the isolated components.

Below are some major add-ons that greatly enhance your workflow:

Controls Addon:

When you write stories for any component in that there is a function that returns a component’s given state which set of arguments and uses the generic term arguments (args for short) in Angular we use @Input.
We always write stories in button.stories.ts check the below code for how to written stories for the button component.
Which take one button with the name primary and state is true this is an action for the toggle to change primary button to secondary button in the control addons.

import { Story, Meta } from '@storybook/angular';
import Button from './button.component';const Template: Story<Button> = (args: Button) => ({
component: Button,
props: args,
});export const Primary = Template.bind({});
Primary.args = {
primary: true,
label: 'Button',
};

Now in button.component.ts in this file, we have to define the state for the primary button and we can apply a primary color using class on that button. Using the controls addon we can change that state. Below shows you how the button stories work step by step

In HTML file

<button type="button" [ngClass]="btnColor">
{{ label }}
</button>`

In button.conponent.ts file

export default class ButtonComponent {@Input() primary = false;public get btnColor(): string[] {
const mode = this.primary ? 'btn-primary' : 'btn-secondary';
return ['btn',mode];
}}

In CSS file

.btn {
font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial,        sans-serif;
font-weight: 700;
border: 0;
border-radius: 3em;
cursor: pointer;
display: inline-block;
line-height: 1;
font-size: 14px;
padding: 11px 20px;
}.btn-primary {
color: white;
background-color: #1ea7fd;
}.btn-secondary {
color: #333;
background-color: transparent;
box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
}

Controls allow you to dynamically edit props through the Storybook interface. It’s a great development, testing, and debugging tool.

With Controls, you are able to change a button’s state or text from enabled to disabled simply by checking a box or changing a field.

Accessibility Addon

Accessibility addons check the accessibility rule on your components
This is very helpful to developers to understand which of these rules their components respect and which ones they violate.
It also provides hints for how to fix it.

Docs Addon

StoryBook Docs transform your Storybook stories into world-class component documentation.

In Docs-addonyour component stories, text descriptions, comments, props tables, and code examples are clean, readable pages.

If you want more control in MDX, It allows you to write long-form markdown documentation and stories into one file

You can also use it to write pure documentation pages and embed them inside your Storybook alongside your stories.

Viewport Addon

The Viewport addon allows us to display our stories in different sizes and layouts. This addon basically functions as your browser developer tool.

You can set popular layouts like a tablet, small mobile, large mobile, and desktop resolution or you can add custom viewports on your components to help visualize them in different environments.

Design Addon

If you want to use UI designs in your Storybook page for any component, you can use the design using this addon respectively.
They will help you deal with your component’s sizes, depths, and line heights
and colors.

Action Addon

The Action addon is used to display data received by event handlers.
It’s basically your event console.log().
With this addon, you can check multiple actions on your component.