Issue #3365464 by sarahjean, Gauravvvv, e0ipso: Create new SDC component for Umami Branding

core/profiles/demo_umami/demo_umami.info.yml

@@ -29,6 +29,7 @@ install:
   - dynamic_page_cache
   - taxonomy
   - dblog
+  - sdc
   - search
   - shortcut
   - toolbar
@@ -45,7 +46,6 @@ install:
   - locale
   - config_translation
   - content_translation
-  - sdc
 themes:
   - claro
   - umami

core/profiles/demo_umami/themes/umami/components/branding/branding.component.yml

+# This is so your IDE knows about the syntax for fixes and autocomplete.
+$schema: https://git.drupalcode.org/project/drupal/-/raw/10.1.x/core/modules/sdc/src/metadata.schema.json
+
+# The human readable name.
+name: Branding
+
+# Status can be: "experimental", "stable", "deprecated", "obsolete".
+status: experimental
+
+# Use this key to organize components together.
+group: Navigation
+
+# Schema for the props. We support www.json-schema.org. Learn more about the
+# syntax there.
+props:
+  # Props are always an object with keys. Each key is a variable in your
+  # component template.
+  type: object
+
+  properties:
+    site_logo:
+      type: string
+    site_name:
+      type: string
+    site_slogan:
+      type: string

core/profiles/demo_umami/themes/umami/css/components/blocks/branding/branding.css → core/profiles/demo_umami/themes/umami/components/branding/branding.css

@@ -3,29 +3,31 @@
  * This file is used to style the branding block.
  */
 
-.block-system-branding-block {
+.branding {
   flex: 0 1 40%;
 }
 
 @media screen and (min-width: 48em) {
-  .block-system-branding-block {
+  .branding {
     flex: 0 1 220px;
     margin: 2.5rem 0;
     text-align: left;
   }
 }
-.site-logo {
+
+.branding__site-logo {
   display: inline-block;
   width: 100%;
   max-width: 205px;
   background-color: inherit;
 }
-.site-logo:hover,
-.site-logo:focus {
+
+.branding__site-logo:hover,
+.branding__site-logo:focus {
   background-color: inherit;
 }
 
-.site-logo svg {
+.branding__site-logo svg {
   width: 100%;
   max-width: 205px;
   height: auto;

core/profiles/demo_umami/themes/umami/components/branding/branding.twig

+<div class="branding">
+  {% if site_logo %}
+    <a href="{{ path('<front>') }}" rel="home" class="branding__site-logo">
+      <img src="{{ site_logo }}" alt="{{ 'Home'|t }}" />
+    </a>
+  {% endif %}
+  {% if site_name %}
+    <div class="branding__site-name">
+      <a href="{{ path('<front>') }}" rel="home">{{ site_name }}</a>
+    </div>
+  {% endif %}
+  {% if site_slogan %}
+    <div class="branding__site-slogan">{{ site_slogan }}</div>
+  {% endif %}
+</div>

core/profiles/demo_umami/themes/umami/templates/components/branding/block--system-branding-block.html.twig

@@ -14,17 +14,9 @@
  */
 #}
 {% block content %}
-  {% if site_logo %}
-    <a href="{{ path('<front>') }}" rel="home" class="site-logo">
-      <img src="{{ site_logo }}" alt="{{ 'Home'|t }}" />
-    </a>
-  {% endif %}
-  {% if site_name %}
-    <div class="site-name">
-      <a href="{{ path('<front>') }}" rel="home">{{ site_name }}</a>
-    </div>
-  {% endif %}
-  {% if site_slogan %}
-    <div class="site-slogan">{{ site_slogan }}</div>
-  {% endif %}
+  {{ include('umami:branding', {
+    site_logo: site_logo,
+    site_name: site_name,
+    site_slogan: site_slogan
+    }, with_context = false) }}
 {% endblock %}

core/profiles/demo_umami/themes/umami/umami.libraries.yml

@@ -5,7 +5,6 @@ global:
       css/base.css: {}
     component:
       css/components/blocks/banner/banner.css: {}
-      css/components/blocks/branding/branding.css: {}
       css/components/blocks/help/help.css: {}
       css/components/blocks/page-title/page-title.css: {}
       css/components/blocks/footer-promo/footer-promo.css: {}