Wingsuit Pattern

A Wingsuit pattern is defined inside a pattern.wingsuit.yml.

A Wingsuit pattern contains:

index.js
pattern.stories.jsx
pattern.wingsuit.yml
css file (optional)
javascript file. (optional)

Expose the reference to the wingsuit.yml file inside the pattern.stories.jsx file.

const patternDefinition = require('./pattern.wingsuit.yml');

export const wingsuit = {
  patternDefinition,
};

The pattern.wingsuit.yml

The pattern.wingsuit.yml is a extended version of the UI Patterns yaml. Check out the UI Patterns documentation, with additions of UI Patterns Settings.

A typical pattern definition file looks like this:

card:
  use: "@molecules/card/card.twig"
  label: Card
  description: Amazing Cards
  fields:
    headline:
      type: text
      label: Headline
      preview:
        faker: lorem.word
    image:
      type: pattern
      preview:
        id: image
        variant: primary
  variants:
    default:
      label: Default
    horizontal:
      label: Horizontal
  settings:
    headline_color:
      type: select
      label: Headline color
      required: false
      options:
        blue: Blue
        black: Black

Each variant is a storybook story.
Each field is editable with knobs and passed to the Twig template.
Each setting is editable with knobs and passed to the Twig template.

The extensions

To build better preview functionality, Wingsuit adds additional YAML configuration. These extensions are not compatible with UI Patterns Library.

Faker

The faker key generates automatic preview data with faker.js. The value can be a string or a subobject.

The string is passed to Faker.fake in '{{ }}' brackets.
To pass a complete Faker sentence use:

preview:
      faker:
        token: "{{ name.lastName }} {{ name.firstName }}

Type: pattern

With field type pattern you can render other patterns inside the pattern:

fields:
  image:
    type: pattern
    preview:
      id: image
      variant: primary
      settings:
        style: medium
      fields:
        field: value

id The id of the pattern.
variant The variant of the pattern.
fields Overwrites field preview values of the pattern.
settings Overwrites setting preview values of the pattern.

Pattern list

This works also with a list of patterns.

fields:
  images:
    type: pattern
    multi_value_type: single_value
    preview:
      -
        id: image
        variant: primary
        settings:
          style: medium
        fields:
          field: value
      -
        id: image
        variant: primary
        settings:
          style: medium
        fields:
          field: value

You can control how Wingsuit will handle the resulting array of objects.

Following options are available:

single_value: All patterns will be rendered into a single value. The resulting variable is a string not a array. This useful if you want to add multiple objects into one area.
Your pattern.twig looks like:

{{ images }}

items provides a list of patterns. The resulting variable is an array you can loop through.
Your pattern.twig looks like:

{% for item in images %}
{{ item }}
{% endfor %}

field_items provides a list of objects. The rendered pattern is inside the content key. This is useful to emulate multi value field templates in drupal.

{% for item in images %}
{{ item.content }}
{% endfor %}

Composing patterns (Since V1.1):

Composition allows you to embed patterns into patterns.

fields:
  container:
    label: Container
    type: pattern
    preview:
      id: container
      fields:
        content:
          - id: rich_text
            fields:
              text: Lorem ipsum
          - id: button
            fields:
              text: Read more
            settings:
              url: https://www.readmore.de

Type object

fields:
  items:
    type: object
    preview:
      - title: Datenschutz
        link: "#"
        in_active_trail: true
      - title: Impressum
        link: "#"

With field type object you can pass any objects to the Twig template. This is useful for the menu, for example. You can edit the JSON string with knobs.

Visibility

With the visibility property you can control in which app a pattern should be visible. If the property is not set, the pattern is visible in every app.

visibility: storybook | drupal | none