Presentation

Presentation templates are located typically at apps/storybook/patterns/type/. They are useful to present a combination of components. A very typical use case are the pages in atomic design.

• pattern.stories.jsx
• pattern.twig

Within the stories, you load the twig file the same way as you do it in the twig only component.

import { RenderTwig } from '@wingsuit-designsystem/storybook';
import React from 'react';
import 'index';

export default { title: '05-folder/Name' };

const twigTemplate = require('./twigfile.twig');

export const Variant = () => <RenderTwig data={twigTemplate}></RenderTwig>;

Additional Twig functions

Inside the Twig template you may use two additional Twig functions:

• pattern_preview(patternId, variantId, variables) to render an existing pattern, including all preview data from the component. You can overwrite preview data with variables.
• pattern(patternId, variantId, variables) to render a pattern without any preview data. You can provide all variables as the third argument.