Verified Commit 69e6c445 authored by Lauri Timmanee's avatar Lauri Timmanee
Browse files

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

parent 6ec16df9

core/profiles/demo_umami/demo_umami.info.yml

+1 −1
Original line number Diff line number Diff line
@@ -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

0 → 100644
+26 −0
Original line number Diff line number Diff line 
# 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

+8 −6
Original line number Diff line number Diff line
@@ -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

0 → 100644
+15 −0
Original line number Diff line number Diff line 
<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

+5 −13
Original line number Diff line number Diff line
@@ -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 %}