Logo component do too much

Can you mention what shouldn't belong? Would renaming site-branding make more sense for what's being done?

On the component template, I would keep only the logo stuff as understood from https://designsystem.digital.gov/components/header/ :

• Slots: image
• Props: path (url), text (string)

Non tested code, just a quick and humble proposal:

<div{{ attributes.addClass(['usa-logo']) }}>
  <em class="usa-logo__text">
  {% if path %}
    <a class="logo-img" href="{{ path }}" accesskey="1" title="{{ text }}" aria-label="Home">
  {% endif %}
  {{ image|default(text) }}
  {% if path %}
    </a>
  {% endif %}
</div>

{% if site_logo %}
{{ pattern('logo', {
'path': path(''),
'text': site_name,
'image': site_logo
}) }}
{% endif %}

Then on block--system-branding-block.html.twig (Non tested code):

{% if site_logo %}
  {{ pattern('logo', {
    'path': path('<front>'),
    'text': site_name,
    'image': site_logo
  }) }}
  {% endif %}
  {% if site_name %}
      <a href="{{ path('<front>') }}" accesskey="2" title="{{ 'Home'|t }}" aria-label="Home">
        {{ site_name }}
      </a>
  {% endif %}
  {% if site_slogan %}
    <h2 class="usa-font-lead">{{ site_slogan }}</h2>
  {% endif %}
  <button class="usa-menu-btn" type="button">{{ 'Menu'|t }}</button>

This look good?

<div class="usa-logo site-logo" id="logo">
  <em class="usa-logo__text">

So not sure what's to be done. Everything with the logo is wrapped in this. So to add the other stuff back I think I would end up with what it is now.

If there is a class starting with "usa-logo", it belongs to the component.

Stuff without a class starting with "usa-logo":

• belongs to the site branding template if outside "usa-logo"
• is the content of a slot if inside "usa-logo"

My proposal from https://www.drupal.org/project/ui_suite_uswds/issues/3417850#comment-154... 🐛 Logo component do too much Needs review was not OK?

Right but the div and em tags with those classes wrap around

{% if site_slogan %}

{{ site_slogan }}

{% endif %}
{{ 'Menu'|t }}

So the suggestion doesn't close the em and div tags. But even adding that the slogan and menu button are now outside those tags when they need to be inside those tags.

While working on a project do believe this can be redone but not sure how much simplier it will be.

Simplified the logo some and actually addressed some accessibility issues

Felt bad putting display-flex flex-align-center flex-no-wrap but Drupal logo is different then uswds as we have a site name and in some scenarios a slogna.

the alt text for the image will be empty if the site name is present as a screenreader would read the alt text + site name and probably won't make sense

Going to re-open as I think there's a different approach I want to take to make it reusable by the footer also.

So was able to reduce the logo component down to just using a content slot. So in the block I set that variable and pass in what I need.

This allows for a little more control and overriding the block-system-branding block to make changes vs needing to override the logo pattern.

Automatically closed - issue fixed for 2 weeks with no activity.