Compatibility with Storybook module

I like this idea!

I've been going through this process but I'm not sure how to do the embed / include that embeds another component

Like how my-banner--tall, with Card story does.

I'm also, kind of stalled out considering what methods should actually be used during a story. I could embed the card like the template does but I think that might be cheating. Don't we want to include the component's template and tell the my-banner--tall component to include the card.

In the yml file the story looks like this:

  - name: 4. With Card
    args:
      heading: Join us at The Conference
      ctaText: Register
      ctaHref: https://www.example.org
      image: ''
      banner_body: |
        {% embed 'sdc_examples:my-card' with { header: 'Protect what you love' } %}
          {% block card_body %}
            <p>Green technology is kind to the environment. Let's build a humanity that thrives while being kind to the planet.</p>

            {% include 'sdc_examples:my-button' with { text: 'Like', iconType: 'like' } %}
          {% endblock %}
        {% endembed %}

So the banner_body doesn't quote the embed syntax, So... not sure what to do.

Any suggestions?

If it helps here's my my-banner--tall.stories.twig so far:

{% stories my_banner with { title: 'SDC Examples/My Banner' } %}

    {% story default with {
        name: '1. Default',
    } %}
        <div class="container">
            {{ include('sdc_examples:my-banner', {heading: 'Join us at the Conference', image: 'https://picsum.photos/seed/affse3/1200/150', ctaText: 'Register', ctaHref: 'https://www.example.org'}) }}
        </div>
    {% endstory %}

    {% story no_image with {
        name: '2. No Image',
    } %}
        <div class="container">
            {{ include('sdc_examples:my-banner', {heading: 'Are you sure you want to end the session?', image: '', ctaText: 'Log out', ctaHref: 'https://www.example.org'}) }}
        </div>
    {% endstory %}

    {% story with_body with {
        name: '3. With Body',
    } %}
        <div class="container">
            {{ include('sdc_examples:my-banner', {heading: 'Improve perceived performance', image: 'https://picsum.photos/seed/se3/1200/350', ctaText: 'Learn More', ctaHref: 'https://www.example.org', banner_body: "<h4>Benefits of our technology</h4>
        <ul>
          <li>Faster first contentful paint.</li>
          <li>Distributed content delivery networks.</li>
          <li>High availability and redundancy.</li>
        </ul>"}) }}
        </div>
    {% endstory %}

{% endstories %}

Embedding nested components is done the same way you would do it in a regular twig template. Perhaps this example can help: https://git.drupalcode.org/project/sdc_examples/-/blob/1.x/components/si...

Yes it does. Thank you. I should have scanned the rest of the components in the module. I did find heading and image but didn't think of looking for anything that didn't start with my

In your example, I notice that you're using the new components you've added like heading and image. Should I also be doing that (instead of what the previous story did which was use scalar values for each)?