Need to declare embedded component's slots for storybook

Created on 3 July 2024, 6 months ago
Updated 9 September 2024, 4 months ago

Problem/Motivation

When I use a component inside another component, I have to pass slots like in this example: https://git.drupalcode.org/project/sdc_examples/-/blob/1.x/components/si...

sdc_examples:heading.component.yml

...
slots:
  heading_text:
    title: Text
...

sdc_examples:side-by-side.twig

...
  {% set heading_text %}
    {% block sbs_heading_text %}{% endblock %}
  {% endset %}
...
    {% embed 'sdc_examples:heading' with {
    ...
    %}
      {% block heading_text %}
        {{ heading_text }}    
      {% endblock %}
    {% endembed %}

When I run this with storybook dev server, I get an watchdog error from "storybook":

An exception has been thrown during the compilation of a template ("We found an unexpected slot that is not declared: [heading_text]. Declare them in "side-by-side.component.yml").

The only way to make this go away, was to add the embedded component's slot into the embedding component's definition yml:

side-by-side.component.yml

...
slots:
  sbs_body:
    title: Body
    required: true
  sbs_heading_text:
    title: Heading Body
    required: true
  heading_text:
    title: dummy - do not use
🐛 Bug report
Status

Fixed

Version

1.0

Component

Storybook

Created by

miiimooo Europe

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

Comments & Activities

Production build 0.71.5 2024