Lab 4: Knobs

Hint: if you got lost, you can always check out the corresponding branch for the lab. If you want to start over, you can reset it by typing executing git reset --hard origin/lab-3

Now that we have created our first component, we want to make it accessible for non-developers, as well. This is where the Storybook addon knobs comes into play.

Labs

First of all, we need to install the addon and then register the knobs addon with Storybook.

• in your favorite shell, type the following:

npm i --save-dev @storybook/addon-knobs

• in your IDE, open the file .storybook/addons.js and add the following line:

import '@storybook/addon-actions/register';
import '@storybook/addon-links/register';
import '@storybook/addon-notes/register';
+import '@storybook/addon-knobs/register';

We're now ready to use our very first knob in a stories-file. As we only have one component so far, the decision is pretty easy.

• In your IDE, open the file src/app/button/button.stories.ts and add the following imports as well as the withKnobs decorator:

import {storiesOf} from '@storybook/angular';
import {ButtonComponent} from './button.component';
+import {withKnobs, text} from '@storybook/addon-knobs';

storiesOf('Forms | Button', module)
+  .addDecorator(withKnobs)
  .add('Default', () => ({
    component: ButtonComponent,
    props: {
      label: 'Submit'
    }
  }));

Now the story is set up to use knobs. In order to use a knob for the label property, change the following line of code:

import {storiesOf} from '@storybook/angular';
import {ButtonComponent} from './button.component';
import {withKnobs, text} from '@storybook/addon-knobs';

storiesOf('Forms | Button', module)
  .addDecorator(withKnobs)
  .add('Default', () => ({
    component: ButtonComponent,
    props: {
-     label: 'Submit'
+     label: text('Label', 'Submit')
    }
  }));

Self-Check

• in Storybook, you should now be able to access the Knobs-Tab in the addon panel. If the addon panel does not show up for you, press A while inside Storybook.

Hint: if you got lost, you can always check out the corresponding branch for the lab. need the solution, you can reset it by typing executing git reset --hard origin/lab-4