Reuse stories in other stories

Created on 18 April 2024, 2 months ago
Updated 13 June 2024, 12 days ago

Problem/Motivation

I have created stories for components.
I would like to compose other stories with some of these, like this (instead of copy/pasting)

...
{% story carousel %}
  {% include_story card_demo1 %}
  {% include_story card_demo2 %}
  ..
{% endstory %}

Where `card_demo1` and `card_demo2` are defined in the card.stories.twig

...
{% story card_demo1 with...
πŸ’¬ Support request
Status

Active

Version

1.0

Component

Twig

Created by

miiimooo Europe

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

Comments & Activities

  • Issue created by @miiimooo
  • πŸ‡³πŸ‡±Netherlands Web-Beest

    +1: I was looking for the same thing :-)

  • I ran into the same issue while trying the same thing as Web-Beest.

    How did you end up solving/bypassing this issue?

  • πŸ‡³πŸ‡±Netherlands Web-Beest

    So, in hindsight, the args is not the place where you want to do this. It would result (if it worked) in rendered HTML appearing in your controls-pane in Storybook.

    I've combined Storybook with SDC and came up with the following solution. I define the arguments I want to use in the args so I can alter them in controls. If you don't need to alter them, just define them as variables in Twig.

    In the component I've defined properties and slots. The slots are there so you can embed large blocks as content without it being a property of that component. So for instance a fieldset has a legend and 'children' (which can be anything). This is a place where you can embed a large piece of content.

    Fieldset template

    <fieldset>
      <legend>{{ legend_title }}</legend>
      {% block children %}
      {{ children }}
      {% endblock %}
    </fieldset>
    

    In my story I embed the component with a block:

        {% embed 'theme:fieldset' with {
          legend: 'Fieldset legend'
        }
        %}
          {% block children %}
            {{ include('theme:component') }}
          {% endblock %}
        {% endembed %}
    

    This way you can reuse stories / components in other stories.

Production build 0.69.0 2024