Connecting a Storybook Story to a Component Container

React

For React stories, add the following code and insert your DSM component container ID:

import React from 'react';
import { storiesOf } from '@storybook/react';
import { Button } from './Button.jsx';

storiesOf('Button', module)
  .add(
    'with emoji',
    () => (
      <button>😀 😎 👍 💯</button>
    ),
    {
      'in-dsm': {
        id: '<dsm component="" container="" id="">' 
      } 
    }
  );

Adding in-dsm properties

This table shows all required and optional in-dsm properties for React.

Vue

For Vue stories, add the following code and insert your DSM component container ID:

import Vue from 'vue';
import { storiesOf } from '@storybook/vue';
import MyButton from './Button.vue';

storiesOf('Button', module)
  .add(
    'with emoji',
    () => ({
      components: { MyButton },
      template: '<my-button>😀 😎 👍 💯</my-button>'
    }), 
    {
      'in-dsm': { 
        id: ‘<dsm component="" container="" id="">’, 
        componentPath: './Button.vue' 
      }
    }
  );
</dsm>

Adding in-dsm properties

This table shows all required and optional in-dsm properties available for Vue.

Angular

For Angular stories, add the following code and insert your DSM component container ID:

import { storiesOf } from '@storybook/angular';
import { ButtonComponent } from '../app/button.component';
 
storiesOf('Button', module)
  .add(
    'with emoji',
    () => ({
      component: ButtonComponent,
      template: '', 
      props: {
        buttonText: '😀 😎 👍 💯'
      }
    }),
    {
      'in-dsm': {
        id: '<dsm component="" container="" id="">',
        componentPath: '../app/button.component'
      }
    }
  );</dsm>

Adding in-dsm properties

This table shows all required and optional in-dsm properties available for Angular.

*For Angular, the component property is only optional if the story has a single root element. Otherwise, it is required.

HTML

For HTML stories, add the following code and insert your DSM component container ID:

import { storiesOf } from '@storybook/html';

storiesOf('Button', module)
  .add(
    'with text', 
    () => '<button class="dsm-btn">😀 😎 👍 💯</button>', {
      'in-dsm': {
        id: '<dsm component="" container="" id="">',
        docFilePath: '../components/button.docs.json'
      }
    }
  );</dsm>

DSM enables adding a properties table to HTML stories. DSM will generate the table based on the properties information provided in a JSON file through the docFilePath property. For details, refer to the JSON file in the DSM example library on GitHub.

Adding in-dsm properties

This table shows all required and optional in-dsm properties available for HTML.