Umami Demo: review of the already merged SDC components

Problem/Motivation

We are building UI Patterns 2.x, based on SDC API, and we are using Umami Demo for testing our site building and contribution features (usage of SDC components in blocks, views, layouts, field formatters...).

Thanks to those tests, we have some feedbacks to share.

Proposed resolution

Add missing attributes objects in templates

Default attributes object is always injected in template and expected for alteration (adding contextual accessibility attributes, adding data for site building tools, style overrides of the component...)

• branding.twig
• disclaimer.twig
• read-more.twig

Add missing slots or props

Every slot or prop from the component definition must be used in templates. Every slot or prop used in the template must be present in the component definition (except the mandatory default ones: attributes, componentMetadata...)

• extra_classes is not defined in read-more . I would suggest to use the default attributes object instead.
• label is defined but not used in footer-block.twig
• label is not defined in title

Replace some string props by slots

When injected markup as value is not breaking the display, use a slot instead of a string prop. This will allow to inject render arrays and renderable objects, which can render plain strings or markups.

• label in badge
• disclaimer& copyright in disclaimer
• text & a11y in read-more
• site_name& site_slogan in branding

Avoid undefined object as prop

This is valid, but it is not possible to understand the expected data: {"type":"object"}

title_prefix & title_suffix in title

Proposal: they are slots, because they look like slots in the template:

{{ title_prefix }}
<{{ html_tag|default('h2') }}{{ attributes.addClass('umami-title') }}>
  {{ label }}
</{{ html_tag|default('h2') }}>
{{ title_suffix }}

Some other suggestions

Avoid path() function

path function (found in branding.twig ) must be avoided in components because it execute Drupal urlGenerator service. UI Components receive data, they don't request data. I would recommend to resolve the route before sending the URL to the component.

URL props instead of string

Some strings would be better defined as URL (relative or absolute, internationalized):

{
  "type": "string",
  "format": "iri-reference"
}

• site_logo in branding
• url in read-more

API changes

Most suggestions are "safe", but some may break current usage of those components:

• Removal of extra_classes in read-more
• Removal of path() function in branding

Also bug presented in related recipes.

Field templated override label. So badge appear in related recipes. Fixed also here