How to pass raw HTML as an arg to storybook

Created on 14 March 2023, over 1 year ago
Updated 19 September 2023, about 1 year ago

Problem/Motivation

Lots of existing Drupal templates end up with something like this:

{{ content }}

How can we write a story with HTML in the arg?

Steps to reproduce

Proposed resolution

Remaining tasks

User interface changes

API changes

Data model changes

πŸ’¬ Support request
Status

Needs review

Version

1.0

Component

Code

Created by

πŸ‡¦πŸ‡ΊAustralia mstrelan

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @mstrelan
  • Assigned to dan.d
  • Status changed to Needs review about 1 year ago
  • πŸ‡ΊπŸ‡ΈUnited States dan.d

    There are two ways to achieve this:

    1. If you are trying to create a list of selections to swap out in your story, based on - https://storybook.js.org/docs/react/api/arg-types#mapping, you can use mapping:

    title: Your Components/Examples/Component
    argsTypes:
      argument_name:
        name: Give it a Name
        control: select
        options:
          - Option_1
          - Option_2
       mapping:
         Option_1: <p>Option one stuff</p> (or whatever you need, e.g. object, array, etc)
         Option_2: <p>Option two stuff</p> (or whatever you need, e.g. object, array, etc)

    ... to pass default arguments, use args property:

    args:
    argument_name: Option_1

    2. You can also provide a single value for the field.

    stories:
      - name: 1. Your Story
         args:
           content: |
             <p>Whatever your heart desires goes here</p>

    @e0ipso - I suggest we create an example in this collection to demonstrate the case.

Production build 0.71.5 2024