[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.

Moved content to typed props.

Please review!

It looks good! Thanks a lot.

Some little proposals.

Definitions

Props:

• type title is missing
• content description is the same as the title, you can remove it

Templating

I am afraid {% if url is not empty %} is not catching when url value is missing. I would recommend the simpler {% if url %}

Thank you for quick response!
Fixed!

Tested this on an Umami install

Hate uploading duplicate files almost but here's before and after

After

Looking at the MR my only question was going to be if content should be a slot but see @pdureau already addressed that and I'll 100% defer to him on all things SDC.

Rest looked good to me.

@nod_ That dependency not needed anymore because CSS now provided in SDC