[1.1.0] improve/clean component library and stories

if i understood well what you told me during the meeting:

• more stories for components
• update ui-patterns-stories-full.html.twig template override with somethign like that:
  

  --- a/templates/ui_patterns_library/ui-patterns-stories-full.html.twig
  +++ b/templates/ui_patterns_library/ui-patterns-stories-full.html.twig
  @@ -10,20 +10,22 @@
       <div class="ui_patterns_story__story">
         {% if variants and not story.props.variant %}
           {% for variant_id, variant in variants %}
  -          {{ _self.render_variant(component_id, story_id, variant_id, variant) }}
  +          {{ _self.render_variant(component_id, story_id, story, variant_id, variant) }}
           {% endfor %}
         {% else %}
           {{ component_story(component_id, story_id, {}, {}, true) }}
  +        <pre><code>{{ story|json_encode(constant('JSON_PRETTY_PRINT')) }}

  {% endif %}

  {% endmacro %}
  -{% macro render_variant(component_id, story_id, variant_id, variant) %}
  +{% macro render_variant(component_id, story_id, story, variant_id, variant) %}

  {{ variant.title }} ({{ variant_id }})
  

  {% if variant.description %}
  

  {{ variant.description }}

  {% endif %}
  +

  {{ story|json_encode(constant('JSON_PRETTY_PRINT')) }}

  {{ component_story(component_id, story_id, {}, {variant: variant_id}, true) }}

  {% endmacro %}
  

This is how this code will display a story with its json settings :

Goal should be to look like dsfr does :

They are using prismsjs to display html, may be we can use it to display a clean json ?

I love the "show code", but that can be a button, a tab or whatever.
I don't think it's a good thing to display code by default, display is already huge, we should not add large piece of code which is not relevant at first.

When i see a display i want, only at this moment, i want to know how to build it, so i click on the "show me how to do" thing.

Unfortunatelly, there is no component in dsfr to display code or make this feature.

DSFR give us :

• Modal
• Accordion
• Tab
• Transcription

May be we could us one of them ?

Here is an example based on transcription (but we cannot change "transcription" text):

If the need is to show what are the values used in stories, some suggestions for a flatter and smaller snippet:

• YAML instead of JSON.
• only the content of slots & props

Unfortunatelly, i have no tools right now to encode story to YAML in twig. Twig does not provide this feature (it's part of symfony/twig-bridge)

And i don't think it's a good idea to try to add this from stories component or another preprocess.

Here is an example with JSON format, even if i know it's not the best format.

Display with components is here, we still have to define how display the "code" part.

We may need to port a yaml_encode Twig filter like https://symfony.com/doc/current/reference/twig_reference.html#yaml-encode

Where? 2 proposals:

• in UI Patterns Library, where we already have a TwigExtension class.
• in a more generic new Drupal contrib module

In both cases, that means the theme using the filter will need to declare the dependency to ui_patterns_library or the other module