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.

A Presentation component contains:
  • 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.
UI Patterns
Learn how wingsuit leverages UI patterns.
Learn how to manage your css, js and other asses with wingsuit.