How to display multiple variants?

[johnpauldavis]

Here I have a YAML for an accordion:

  use: '@components/accordion/accordion.twig'
  label: Accordion
  description: A collapsible accordion.
  fields:
    size:
      type: select
      label: Size
      description: The size of the accordion.
      required: false
      options:
        small: Small
        large: Large
      preview: small
    allowMultipleExpanded:
      type: string
      label: Allow Multiple Expanded
      description: Allow mutiple accordion items to be expandable at once.
      preview: 'true'
      required: false
    headingLevel:
      type: select
      label: Heading Level
      description: The heading Level of the accordion items.
      required: false
      options:
        h1: Heading1
        h2: Heading2
        h3: Heading3
        h4: Heading4
        h5: Heading5
        h6: Heading6
      preview: h3
    items:
      type: object
      label: Items
      description: The accordion items.
      required: true
      preview:
        - label: label 1
          content: "<p>Content of Item 1</p><p>Content of Item 1</p><p>Content of Item 1</p><p>Content of Item 1</p><p>Content of Item 1</p>"
          id: item1
          defaultExpanded: false
        - label: label 2
          content: "<p>Content of Item 2</p><p>Content of Item 2</p><p>Content of Item 2</p><p>Content of Item 2</p><p>Content of Item 2</p>"
          id: item2
          defaultExpanded: false
  variants:
    default:
      label: Default
    expanded:
      label: Expanded
  visibility: storybook

What I want is to display the version of the accordion with the panels expanded by default and the version with the panels closed by default. Adding a variants key creates two sub-stories just like in the vanilla Storybook, but I cannot see any way in the documentation to populate these with the two different options. The docs linked to regarding UI patterns are equally unhelpful. Is this even possible? If not, is there a way for me to just write these stories in Javascript like I would with vanilla Storybook?

thanks!

[johnpauldavis]

I'm updating this myself because after creating an MDX files and console logging / looking in React dev tools in Chrome I was able to figure out the following, which I recommend being added to the documentation:

The variants key in the YAML takes a fields param despite the docs not showing this. The difference between the fields param as a child of variants and the one as a child of the pattern name is that the one in variants doesn't include the type/label/description/required/preview keys. Instead, the key/value pairs you'd normally include as children of preview are now direct children of variant -> fields. Furthermore, you only want to include the fields whose value is different for this variant. So, in my example I only need to include the items field and its value(s). If you include them all, then Wingsuit will not display any controls for that sub-story in the "canvas" tab. So, to prevent this, only include the fields whose information is changed in the variant. Here's my updated YAML:

accordion:
  use: '@components/accordion/accordion.twig'
  label: Accordion
  description: The accordion component allows the user to show and hide sections of
    related content on a page. Click the accordions below to
    expand/collapse the accordion content.
  fields:
    size:
      type: select
      label: Size
      description: The size of the accordion.
      required: false
      options:
        small: Small
        large: Large
      preview: small
    allowMultipleExpanded:
      type: string
      label: Allow Multiple Expanded
      description: Allow mutiple accordion items to be expandable at once.
      preview: 'true'
      required: false
    headingLevel:
      type: select
      label: Heading Level
      description: The heading Level of the accordion items.
      required: false
      options:
        h1: Heading1
        h2: Heading2
        h3: Heading3
        h4: Heading4
        h5: Heading5
        h6: Heading6
      preview: h3
    items:
      type: object
      label: Items
      description: The accordion items.
      required: true
      preview:
        - label: label 1
          content: "<p>Content of Item 1</p><p>Content of Item 1</p><p>Content of Item 1</p><p>Content of Item 1</p><p>Content of Item 1</p>"
          id: item1
          defaultExpanded: false
        - label: label 2
          content: "<p>Content of Item 2</p><p>Content of Item 2</p><p>Content of Item 2</p><p>Content of Item 2</p><p>Content of Item 2</p>"
          id: item2
          defaultExpanded: false
  variants:
    default:
      label: Default
      description: the default settings for the Accordion
    expanded:
      label: Expanded
      description: The Accordion with panels opened on page load
      fields:
        items:
          - label: label 1
            content: "<p>Content of Item 1</p><p>Content of Item 1</p><p>Content of Item 1</p><p>Content of Item 1</p><p>Content of Item 1</p>"
            id: item1
            defaultExpanded: 'true'
          - label: label 2
            content: "<p>Content of Item 2</p><p>Content of Item 2</p><p>Content of Item 2</p><p>Content of Item 2</p><p>Content of Item 2</p>"
            id: item2
            defaultExpanded: 'true'
    closed:
      label: Closed
      description: The Accordion with panels closed on page load
  visibility: storybook