[PP-1] Convert Navigation messages component to SDC

Postponed on 📌 Integrate Umami message Active

Everything looks much cleaner and simpler now!
Please take a look

i will have a look

It is a very nice SDC component! I love the facts you are not using Twig blocks fro your slot, iri-reference for URL prop, and both the definition and the template are very clean 👍

A few feedbacks however...

Little cleanups

Slots are not typed, so you need to remove "type" property:

slots:
  content:
    type: string
    description: Message content.

It seems you are using BEM methodology for the class naming, so this:

{%
  set classes = [
    'toolbar-message',
    'toolbar-message--type--' ~ type,
  ]
%}

Would be better written like:

{%
  set classes = [
    'toolbar-message',
    'toolbar-message--' ~ type,
  ]
%}

data-drupal-tooltip

Don't use a slot as an attribute value. A slot can have anything, including markup, and may break the browser DOM.

setAttribute('data-drupal-tooltip', content).

So, what can we do? The obvious options would be:

• Make content a string prop instead of a slot, especially if only plain text is expected here
• Create a new string prop for this attribute value

However, the best would be to remove those attributes from the template:

setAttribute('data-drupal-tooltip', content).setAttribute('data-drupal-tooltip-class', 'admin-toolbar__tooltip')

Because they tell us about the context how/where the component is used instead of being proper parts of the component.

I would inject them from outside (non tested proposal):

          '#type' => 'component',
          '#component' => 'navigation:message',
          '#props' => [
            'type' => 'warning',
            'url' => $url,
           'attributes' => new Attribute({
              'data-drupal-tooltip': content, # raw? processed? or something else?
              'data-drupal-tooltip-class': 'admin-toolbar__tooltip'
          })
          ],

Side note

I am recommending executing drush sdcv umami from https://www.drupal.org/project/sdc_devel/ → to automatically get useful warning and errors.

There are still some rough edges (unclear messages, false positives...) but this tools is already usable.