A key feature of this module is that it provides a form for users to enter content for the component display. This means that you don't have to manually create a demo. However, I find that in practice this isn't very useful. It's fine if your component only needs text but is less usable if you need to render other entities (like media), or nested components. The user needs some knowledge of what type of data is expected to get the right output.
I'm also having problems with errors on that form when a component has a property with multiple allowed types (see #3497056 🐛 Form is broken if prop has multiple allowed types Active )
We are working on creating demos for all components, so I would like to have the option to just turn the form off and make the component labels into basic headings.
As a work-around, here is an override for the styleguide-explorer-group template to output the headings without the links to the forms:
Override for styleguide-explorer-group.html.twig
<div class="sdc-styleguide-explorer__group">
<h2 class="sdc-styleguide-explorer__group-title">
<button type="button">{{ title }}</button>
</h2>
<div class="sdc-styleguide-explorer__group-components">
{% for component in components %}
{# For standard component with a demo #}
{% if component.items['#items'] is not empty %}
<h3 class="sdc-styleguide-explorer__component-title">
{{ component.heading.link['#title'] }}
</h3>
{{ component.items }}
{# For standard components without a demo #}
{% elseif component.items is not empty %}
{{- component -}}
<small>{{ 'No demo available.' }}</small>
{% else %}
{# For default colors and text pages #}
{{- component -}}
{% endif %}
{% endfor %}
</div>
</div>
Active
1.2
Code
Hello!
An easier way to stop the link from being clickable is by adding some CSS to your theme.
.sdc-styleguide-explorer__component-title .sdc-styleguide-explorer__demo-link {
pointer-events: none;
}
That should stop it from taking the user to the component form.