Adding a Component Container in DSM

DSM component containers help you group multiple component implementations across design and development. This allows you to create centralized component documentation and ensure different implementations are in sync.

For example, you can use a component container to group multiple design assets—i.e., Sketch symbols—that represent component variants. You can also add a React coded component to the same component container, and the DSM documentation site will present the design and code side by side.

Creating a component container

Creating a component container is as simple as creating a component page in your DSM documentation site. These pages can be at the Component category level, or they can be nested within a folder.

To create a component page:

1. Sign in to the DSM documentation site and open your design system.
2. At the top of the page, click Components.
3. In the left-hand navigation, select (or create) a category or folder.
4. Within the category or folder, click Add Page.
5. Name the page and press Enter.

You've now created a component page, which serves as a component container. 

There are typically multiple design instances of the same coded component in a UI toolkit, representing different component variants (for example, a button might have a hover state and a click state). Component pages enable you to easily group multiple instances of one component.

Adding a Storybook tab

If you're using the CLI-based DSM Storybook integration, the next step is to create a DSM-hosted Storybook tab.

To add a DSM-hosted Storybook tab:

1. Open your DSM documentation site and navigate to the chosen component page.
2. Beneath the component name, click Add tab.
3. Select Storybook, and then select the appropriate framework (React, Vue, Angular, or HTML).

You can now begin connecting the Storybook story to its component container in DSM.