From ff39253304619bb74e3d720a495e49e6abe729e5 Mon Sep 17 00:00:00 2001
From: nod_ <nod_@598310.no-reply.drupal.org>
Date: Thu, 29 Feb 2024 22:33:08 +0100
Subject: [PATCH] Issue #3365497 by finnsky, Gauravvvv, sarahjean, smustgrave,
snig, e0ipso, pdureau: Create new SDC component for Umami Banner
---
.../components/banner/banner.component.yml | 35 +++++++++++++++
.../blocks => components}/banner/banner.css | 42 ++++-------------
.../umami/components/banner/banner.twig | 12 +++++
.../umami/css/components/forms/buttons.css | 13 ++++++
.../block--bundle--banner-block.html.twig | 45 +++++++------------
.../themes/umami/umami.libraries.yml | 1 -
.../demo_umami/themes/umami/umami.theme | 13 ++++++
7 files changed, 99 insertions(+), 62 deletions(-)
create mode 100644 core/profiles/demo_umami/themes/umami/components/banner/banner.component.yml
rename core/profiles/demo_umami/themes/umami/{css/components/blocks => components}/banner/banner.css (57%)
create mode 100644 core/profiles/demo_umami/themes/umami/components/banner/banner.twig
diff --git a/core/profiles/demo_umami/themes/umami/components/banner/banner.component.yml b/core/profiles/demo_umami/themes/umami/components/banner/banner.component.yml
new file mode 100644
index 000000000000..698efa5ccb7c
--- /dev/null
+++ b/core/profiles/demo_umami/themes/umami/components/banner/banner.component.yml
@@ -0,0 +1,35 @@
+# 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
diff --git a/core/profiles/demo_umami/themes/umami/css/components/blocks/banner/banner.css b/core/profiles/demo_umami/themes/umami/components/banner/banner.css
similarity index 57%
rename from core/profiles/demo_umami/themes/umami/css/components/blocks/banner/banner.css
rename to core/profiles/demo_umami/themes/umami/components/banner/banner.css
index bef901465bf2..9558b818e7cd 100644
--- a/core/profiles/demo_umami/themes/umami/css/components/blocks/banner/banner.css
+++ b/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;
}
}
diff --git a/core/profiles/demo_umami/themes/umami/components/banner/banner.twig b/core/profiles/demo_umami/themes/umami/components/banner/banner.twig
new file mode 100644
index 000000000000..20ce22235c5d
--- /dev/null
+++ b/core/profiles/demo_umami/themes/umami/components/banner/banner.twig
@@ -0,0 +1,12 @@
+<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>
diff --git a/core/profiles/demo_umami/themes/umami/css/components/forms/buttons.css b/core/profiles/demo_umami/themes/umami/css/components/forms/buttons.css
index 63f7932724d8..335d31717b70 100644
--- a/core/profiles/demo_umami/themes/umami/css/components/forms/buttons.css
+++ b/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,
diff --git a/core/profiles/demo_umami/themes/umami/templates/components/banner-block/block--bundle--banner-block.html.twig b/core/profiles/demo_umami/themes/umami/templates/components/banner-block/block--bundle--banner-block.html.twig
index 6b9176543167..add7d9385bba 100644
--- a/core/profiles/demo_umami/themes/umami/templates/components/banner-block/block--bundle--banner-block.html.twig
+++ b/core/profiles/demo_umami/themes/umami/templates/components/banner-block/block--bundle--banner-block.html.twig
@@ -1,3 +1,4 @@
+{% 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 %}
diff --git a/core/profiles/demo_umami/themes/umami/umami.libraries.yml b/core/profiles/demo_umami/themes/umami/umami.libraries.yml
index 25968fadb0ba..1a4120a78d43 100644
--- a/core/profiles/demo_umami/themes/umami/umami.libraries.yml
+++ b/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: {}
diff --git a/core/profiles/demo_umami/themes/umami/umami.theme b/core/profiles/demo_umami/themes/umami/umami.theme
index fe15ab615ad2..1181242b7cd3 100644
--- a/core/profiles/demo_umami/themes/umami/umami.theme
+++ b/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().
*/
--
GitLab