Issue #3365497 by finnsky, Gauravvvv, sarahjean, smustgrave, snig, e0ipso,...

Issue #3365497 by finnsky, Gauravvvv, sarahjean, smustgrave, snig, e0ipso, pdureau: Create new SDC component for Umami Banner

core/profiles/demo_umami/themes/umami/components/banner/banner.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: Banner
+
+# Status can be: "experimental", "stable", "deprecated", "obsolete".
+status: experimental
+
+props:
+  # Props are always an object with keys. Each key is a variable in your
+  # component template.
+  type: object
+
+  properties:
+    attributes:
+      type: Drupal\Core\Template\Attribute
+      title: Attributes
+      description: Banner attributes.
+
+# Slots always hold arbitrary markup. We know that beforehand, so no need for
+# a schema for slots.
+slots:
+  # The key is the name of the slot. In your template you will use
+  # {% block content %}.
+  content:
+    # A human-readable name.
+    title: Content
+    # A description.
+    description: This is the banner content
+  image:
+    # A human-readable name.
+    title: Image
+    # A description.
+    description: This is the banner image

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

@@ -3,12 +3,12 @@
  * This file is used to style the banner block.
  */
 
-.banner-block__content {
+.banner__content {
   margin: 1rem 4%;
   font-size: 1.188em;
 }
 
-.banner-block .field--name-field-title {
+.banner__title {
   margin: 0 0 0.5em 0;
   font-family: "Scope One", Georgia, serif;
   font-size: 1.777em;
@@ -16,38 +16,14 @@
   line-height: 1.2em;
 }
 
-.banner-block .field--name-field-content-link a {
-  display: inline-block;
-  padding: 0.7em 1.3em;
-  cursor: pointer;
-  transition: background-color 0.5s ease;
-  text-align: center;
-  text-decoration: none;
-  color: #fff;
-  border: 2px solid #d93760;
-  border-radius: 3px;
-  background-color: #d93760;
-  font-family: "Scope One", Georgia, serif;
-  font-size: 1.2rem;
-  font-weight: 400;
-}
-
-.banner-block .field--name-field-content-link a:focus,
-.banner-block .field--name-field-content-link a:hover {
-  color: #000;
-  border-color: #d93760;
-  outline-color: #fff;
-  outline-offset: 2px;
-  background-color: #fcece7;
-}
 /* Medium */
 @media screen and (min-width: 48rem) { /* 768px */
-  .banner-block {
+  .banner {
     position: relative; /* Anchor absolutely positioned background image. */
     background-color: #464646;
   }
 
-  .banner-block__inner {
+  .banner__inner {
     display: flex;
     align-items: center;
     min-height: 54vw;
@@ -55,7 +31,7 @@
     padding: 0 4%;
   }
 
-  .banner-block__content {
+  .banner__content {
     position: relative; /* Establish stacking context to appear above absolutely positioned background image. */
     max-width: 50%;
     margin: 0;
@@ -65,7 +41,7 @@
     background: rgba(0, 0, 0, 0.42);
   }
 
-  .banner-block__image img {
+  .banner__image img {
     position: absolute;
     top: 0;
     left: 0;
@@ -76,16 +52,16 @@
 }
 /* Large */
 @media screen and (min-width: 60rem) { /* 960px */
-  .banner-block__content {
+  .banner__content {
     max-width: 41%;
   }
-  .banner-block__inner {
+  .banner__inner {
     min-height: 43vw;
   }
 }
 /* Extra large + side margins */
 @media screen and (min-width: 80rem) { /* 1200px (large) + 80px (side margins) = 1280px */
-  .banner-block__inner {
+  .banner__inner {
     padding: 0;
   }
 }

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

+<div{{ attributes.addClass('banner') }}>
+  <div class="container">
+    <div class="banner__inner">
+      <div class="banner__image">
+        {% block image %}{% endblock %}
+      </div>
+      <div class="banner__content">
+        {% block content %}{% endblock %}
+      </div>
+    </div>
+  </div>
+</div>

core/profiles/demo_umami/themes/umami/css/components/forms/buttons.css

@@ -30,6 +30,19 @@
   background-color: #e6eee0;
 }
 
+.button--primary {
+  border-color: #d93760;
+  background-color: #d93760;
+}
+
+.button--primary:hover,
+.button--primary:active,
+.button--primary:focus {
+  outline-color: #fff;
+  outline-offset: 2px;
+  background-color: #fcece7;
+}
+
 .button[disabled]:hover,
 .button[disabled]:active,
 .button[disabled]:focus,

core/profiles/demo_umami/themes/umami/templates/components/banner-block/block--bundle--banner-block.html.twig

+{% extends "block.html.twig" %}
 {#
 /**
  * @file
@@ -26,31 +27,19 @@
  * @see template_preprocess_block()
  */
 #}
-{%
-  set classes = [
-    'banner-block',
-    'block',
-    'block-' ~ configuration.provider|clean_class,
-    'block-' ~ plugin_id|clean_class,
-  ]
-%}
-
-<div{{ attributes.addClass(classes) }}>
-  <div class="container">
-    <div class="banner-block__inner">
-      {{ title_prefix }}
-      {% if label %}
-        <h2{{ title_attributes }}>{{ label }}</h2>
-      {% endif %}
-      {{ title_suffix }}
-      {% block content %}
-        <div class="banner-block__image">
-          {{ content.field_media_image }}
-        </div>
-        <div class="banner-block__content">
-          {{ content|without('field_media_image') }}
-        </div>
-      {% endblock %}
-    </div>
-  </div>
-</div>
+{% block content %}
+  {% embed 'umami:banner' with {
+    attributes: create_attribute(),
+  } %}
+    {% block image %}
+      {{ content.field_media_image }}
+    {% endblock %}
+    {% block content %}
+      {% include "umami:title" with {
+        attributes: create_attribute({'class': ['banner__title']}),
+        label: content.field_title,
+      } only %}
+      {{ content|without(['field_media_image', 'field_title']) }}
+    {% endblock %}
+  {% endembed %}
+{% endblock %}

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

@@ -4,7 +4,6 @@ global:
     base:
       css/base.css: {}
     component:
-      css/components/blocks/banner/banner.css: {}
       css/components/blocks/help/help.css: {}
       css/components/blocks/page-title/page-title.css: {}
       css/components/blocks/language-switcher/language-switcher.css: {}

core/profiles/demo_umami/themes/umami/umami.theme

@@ -69,6 +69,19 @@ function umami_theme_suggestions_block_alter(array &$suggestions, array $variabl
   }
 }
 
+/**
+ * Implements hook_umami_preprocess_block__bundle__banner_block().
+ */
+function umami_preprocess_block__bundle__banner_block(&$variables) {
+  if (isset($variables['content']['field_content_link'])) {
+    foreach (Element::children($variables['content']['field_content_link']) as $key) {
+      $variables['content']['field_content_link'][$key]['#attributes']['class'][] = 'button';
+      $variables['content']['field_content_link'][$key]['#attributes']['class'][] = 'button--primary';
+      $variables['content']['field_content_link'][$key]['#attributes']['class'][] = 'banner__button';
+    }
+  }
+}
+
 /**
  * Implements hook_umami_preprocess_block__bundle__footer_promo_block().
  */