From 22c836ded6866439cb53926fafdc2a361fdb2df6 Mon Sep 17 00:00:00 2001
From: iberdinsky-skilld <iberdinsky@mail.skilld.fr>
Date: Sat, 26 Aug 2023 18:34:15 +0200
Subject: [PATCH] Create new SDC component for Umami (card view mode) -
#3347672
---
.../umami/components/card/card.component.yml | 38 +++++++++++
.../themes/umami/components/card/card.css | 65 +++++++++++++++++++
.../themes/umami/components/card/card.twig | 5 ++
.../read-more/read-more.component.yml | 23 +++++++
.../read-more/read-more.css} | 17 ++---
.../umami/components/read-more/read-more.twig | 10 +++
.../components/title/title.component.yml | 38 +++++++++++
.../themes/umami/components/title/title.twig | 5 ++
.../card-common-alt/card-common-alt.css | 8 ---
.../content/card-common/card-common.css | 8 ---
.../css/components/content/card/card.css | 46 -------------
.../content/node--card-common-alt.html.twig | 35 ++++++++--
.../content/node--card-common.html.twig | 45 ++++++-------
.../templates/content/node--card.html.twig | 42 ++++++------
.../themes/umami/umami.libraries.yml | 27 +-------
.../demo_umami/themes/umami/umami.theme | 4 ++
16 files changed, 266 insertions(+), 150 deletions(-)
create mode 100644 core/profiles/demo_umami/themes/umami/components/card/card.component.yml
create mode 100644 core/profiles/demo_umami/themes/umami/components/card/card.css
create mode 100644 core/profiles/demo_umami/themes/umami/components/card/card.twig
create mode 100644 core/profiles/demo_umami/themes/umami/components/read-more/read-more.component.yml
rename core/profiles/demo_umami/themes/umami/{css/components/navigation/more-link/more-link.css => components/read-more/read-more.css} (65%)
create mode 100644 core/profiles/demo_umami/themes/umami/components/read-more/read-more.twig
create mode 100644 core/profiles/demo_umami/themes/umami/components/title/title.component.yml
create mode 100644 core/profiles/demo_umami/themes/umami/components/title/title.twig
delete mode 100644 core/profiles/demo_umami/themes/umami/css/components/content/card-common-alt/card-common-alt.css
delete mode 100644 core/profiles/demo_umami/themes/umami/css/components/content/card-common/card-common.css
delete mode 100644 core/profiles/demo_umami/themes/umami/css/components/content/card/card.css
diff --git a/core/profiles/demo_umami/themes/umami/components/card/card.component.yml b/core/profiles/demo_umami/themes/umami/components/card/card.component.yml
new file mode 100644
index 000000000000..f9b2d36c90c1
--- /dev/null
+++ b/core/profiles/demo_umami/themes/umami/components/card/card.component.yml
@@ -0,0 +1,38 @@
+# 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: Card
+
+# Status can be: "experimental", "stable", "deprecated", "obsolete".
+status: experimental
+
+# Schema for the props. We support www.json-schema.org. Learn more about the
+# syntax there.
+props:
+ type: object
+ properties:
+ attributes:
+ type: Drupal\Core\Template\Attribute
+ title: Attributes
+ description: Wrapper attributes.
+ html_tag:
+ type: string
+ title: HTML tag for wrapper
+
+ # Limit the available options by using enums.
+ enum:
+ - article
+ - div
+ # Provide a default value
+ default: article
+
+# 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:
+ title: Content
+ required: true
+ description: The card content.
diff --git a/core/profiles/demo_umami/themes/umami/components/card/card.css b/core/profiles/demo_umami/themes/umami/components/card/card.css
new file mode 100644
index 000000000000..27233534d87f
--- /dev/null
+++ b/core/profiles/demo_umami/themes/umami/components/card/card.css
@@ -0,0 +1,65 @@
+.umami-card {
+ width: 100%;
+ padding: 1rem;
+ border: 1px solid #fcece7;
+ background-color: #fff;
+}
+
+.umami-card__content {
+ display: grid;
+ gap: 1.2rem;
+}
+
+.umami-card__label-items {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 0.1rem;
+ margin: 0;
+ color: #5f635d;
+ font-size: 0.889rem;
+}
+
+.umami-card__read-more {
+ justify-self: start;
+}
+
+.umami-card__title {
+ flex-grow: 1;
+ margin: 0;
+ text-decoration: none;
+ color: #000;
+ font-size: 1.424rem;
+ font-weight: 400;
+}
+
+.umami-card__title a {
+ text-decoration: none;
+ color: #000;
+ background-color: inherit;
+}
+
+.umami-card__title a:hover,
+.umami-card__title a:focus {
+ text-decoration: underline;
+ color: #000;
+}
+
+.umami-card__wrapper {
+ display: grid;
+ gap: 1rem;
+ grid-template-rows: 1fr auto auto;
+ height: 100%;
+}
+
+.umami-card--alt .umami-card__wrapper {
+ grid-template-rows: auto 1fr auto;
+}
+
+.umami-card .field--name-field-media-image {
+ line-height: 0;
+}
+
+.umami-card .field--name-field-media-image img {
+ display: block;
+ width: 100%;
+}
\ No newline at end of file
diff --git a/core/profiles/demo_umami/themes/umami/components/card/card.twig b/core/profiles/demo_umami/themes/umami/components/card/card.twig
new file mode 100644
index 000000000000..3da4f9aac917
--- /dev/null
+++ b/core/profiles/demo_umami/themes/umami/components/card/card.twig
@@ -0,0 +1,5 @@
+<{{html_tag|default('article')}}{{attributes.addClass('umami-card')}}>
+ <div class="umami-card__wrapper">
+ {% block content %}{% endblock %}
+ </div>
+</{{html_tag|default('article')}}>
diff --git a/core/profiles/demo_umami/themes/umami/components/read-more/read-more.component.yml b/core/profiles/demo_umami/themes/umami/components/read-more/read-more.component.yml
new file mode 100644
index 000000000000..52efe8048d84
--- /dev/null
+++ b/core/profiles/demo_umami/themes/umami/components/read-more/read-more.component.yml
@@ -0,0 +1,23 @@
+# 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: Read More
+
+# Status can be: "experimental", "stable", "deprecated", "obsolete".
+status: experimental
+
+# Schema for the props. We support www.json-schema.org. Learn more about the
+# syntax there.
+props:
+ type: object
+ properties:
+ a11y:
+ type: string
+ title: Read More screen reader text
+ text:
+ type: string
+ title: Read More text
+ url:
+ type: string
+ title: Read More url
diff --git a/core/profiles/demo_umami/themes/umami/css/components/navigation/more-link/more-link.css b/core/profiles/demo_umami/themes/umami/components/read-more/read-more.css
similarity index 65%
rename from core/profiles/demo_umami/themes/umami/css/components/navigation/more-link/more-link.css
rename to core/profiles/demo_umami/themes/umami/components/read-more/read-more.css
index 0d4f196d4c8e..33110078bfda 100644
--- a/core/profiles/demo_umami/themes/umami/css/components/navigation/more-link/more-link.css
+++ b/core/profiles/demo_umami/themes/umami/components/read-more/read-more.css
@@ -3,7 +3,7 @@
* This file is used to style the more link.
*/
-.read-more__link {
+.read-more {
position: relative;
display: inline-block;
box-sizing: border-box;
@@ -13,31 +13,26 @@
border-bottom: 1px solid transparent;
background-color: inherit;
}
-[dir=rtl] .read-more__link {
+[dir=rtl] .read-more {
padding-right: unset;
padding-left: 20px;
}
-.read-more__link:focus,
-.read-more__link:hover {
+.read-more:focus,
+.read-more:hover {
text-decoration: none;
color: #008068;
border-bottom: 1px solid #008068;
background-color: inherit;
}
-.read-more__link::before {
+.read-more__icon {
position: absolute;
top: 50%;
right: 0; /* LTR */
width: 14px;
height: 14px;
margin-top: -7px;
- content: "";
- background-image: url("../../../../images/svg/pointer.svg");
- background-repeat: no-repeat;
- background-position: 0 0;
- background-size: contain;
}
-[dir=rtl] .read-more__link::before {
+[dir=rtl] .read-more__icon {
right: unset;
left: 0;
transform: rotate(180deg);
diff --git a/core/profiles/demo_umami/themes/umami/components/read-more/read-more.twig b/core/profiles/demo_umami/themes/umami/components/read-more/read-more.twig
new file mode 100644
index 000000000000..09817e3115ee
--- /dev/null
+++ b/core/profiles/demo_umami/themes/umami/components/read-more/read-more.twig
@@ -0,0 +1,10 @@
+<a class="read-more {{ extra_classes }}" href="{{ url }}">
+ {{ text }}
+ <span class="visually-hidden">
+ - {{ a11y }}
+ </span>
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600" class="read-more__icon">
+ <path fill="none" d="M159.19 117.37v365.26L341.82 300 159.19 117.37z"/>
+ <path fill="#008068" d="M341.82 300L159.19 482.63v98.99L440.81 300 159.19 18.38v98.99L341.82 300z"/>
+ </svg>
+</a>
diff --git a/core/profiles/demo_umami/themes/umami/components/title/title.component.yml b/core/profiles/demo_umami/themes/umami/components/title/title.component.yml
new file mode 100644
index 000000000000..33f2f7cebf68
--- /dev/null
+++ b/core/profiles/demo_umami/themes/umami/components/title/title.component.yml
@@ -0,0 +1,38 @@
+# 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: Title
+
+# Status can be: "experimental", "stable", "deprecated", "obsolete".
+status: experimental
+
+# Schema for the props. We support www.json-schema.org. Learn more about the
+# syntax there.
+props:
+ type: object
+ properties:
+ attributes:
+ type: Drupal\Core\Template\Attribute
+ title: Attributes
+ description: Wrapper attributes.
+ html_tag:
+ type: string
+ title: HTML tag for title
+ # Limit the available options by using enums.
+ enum:
+ - h1
+ - h2
+ - h3
+ - h4
+ - h5
+ - h6
+ - span
+ # Provide a default value
+ default: h2
+ title_prefix:
+ type: object
+ title: Title prefix
+ title_suffix:
+ type: object
+ title: Title suffix
diff --git a/core/profiles/demo_umami/themes/umami/components/title/title.twig b/core/profiles/demo_umami/themes/umami/components/title/title.twig
new file mode 100644
index 000000000000..0aae8674905b
--- /dev/null
+++ b/core/profiles/demo_umami/themes/umami/components/title/title.twig
@@ -0,0 +1,5 @@
+{{ title_prefix }}
+<{{ html_tag|default('h2') }}{{ attributes.addClass('umami-title') }}>
+ {{ label }}
+</{{ html_tag|default('h2') }}>
+{{ title_suffix }}
\ No newline at end of file
diff --git a/core/profiles/demo_umami/themes/umami/css/components/content/card-common-alt/card-common-alt.css b/core/profiles/demo_umami/themes/umami/css/components/content/card-common-alt/card-common-alt.css
deleted file mode 100644
index 0fe90e1b1276..000000000000
--- a/core/profiles/demo_umami/themes/umami/css/components/content/card-common-alt/card-common-alt.css
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
-* @file
-* This file is used to style the 'Card common alt' view mode.
-*/
-
-.node--view-mode-card-common-alt .node__content {
- order: -1;
-}
diff --git a/core/profiles/demo_umami/themes/umami/css/components/content/card-common/card-common.css b/core/profiles/demo_umami/themes/umami/css/components/content/card-common/card-common.css
deleted file mode 100644
index d7eb980180e1..000000000000
--- a/core/profiles/demo_umami/themes/umami/css/components/content/card-common/card-common.css
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
-* @file
-* This file is used to style the 'Card common' view mode.
-*/
-
-.node--view-mode-card-common .read-more {
- margin-bottom: 1em;
-}
diff --git a/core/profiles/demo_umami/themes/umami/css/components/content/card/card.css b/core/profiles/demo_umami/themes/umami/css/components/content/card/card.css
deleted file mode 100644
index 824e88274ca6..000000000000
--- a/core/profiles/demo_umami/themes/umami/css/components/content/card/card.css
+++ /dev/null
@@ -1,46 +0,0 @@
-/**
-* @file
-* This file is used to style the 'Card' view mode.
-*/
-
-.view-mode-card {
- display: flex;
- flex-direction: column;
- width: 100%;
- padding: 1rem;
- border: 1px solid #fcece7;
-}
-
-.view-mode-card .node__title {
- flex-grow: 1;
-}
-
-.view-mode-card .field--name-title {
- text-decoration: none;
- color: #000;
- font-size: 1.424rem;
- font-weight: 400;
-}
-
-.view-mode-card .node__link {
- text-decoration: none;
- color: #000;
- background-color: inherit;
-}
-
-.view-mode-card .node__link:focus,
-.view-mode-card .node__link:hover {
- text-decoration: underline;
- color: #000;
-}
-
-.view-mode-card .field--name-field-media-image img {
- display: block;
- width: 100%;
- margin-bottom: 1.2em;
-}
-
-.view-mode-card .label-items {
- color: #5f635d;
- font-size: 0.889rem;
-}
diff --git a/core/profiles/demo_umami/themes/umami/templates/content/node--card-common-alt.html.twig b/core/profiles/demo_umami/themes/umami/templates/content/node--card-common-alt.html.twig
index 545205b64e1e..444c9e69a6c7 100644
--- a/core/profiles/demo_umami/themes/umami/templates/content/node--card-common-alt.html.twig
+++ b/core/profiles/demo_umami/themes/umami/templates/content/node--card-common-alt.html.twig
@@ -66,8 +66,35 @@
* @see template_preprocess_node()
*/
#}
-{% extends "node--card-common.html.twig" %}
+{%
+ set classes = [
+ 'node',
+ 'node--type-' ~ node.bundle|clean_class,
+ node.isPromoted() ? 'node--promoted',
+ node.isSticky() ? 'node--sticky',
+ not node.isPublished() ? 'node--unpublished',
+ view_mode ? 'node--view-mode-' ~ view_mode|clean_class,
+ 'umami-card--alt',
+ ]
+%}
+{{ attach_library('umami/classy.node') }}
-{% block libraries %}
- {{ attach_library('umami/view-mode-card-common-alt') }}
-{% endblock %}
+{% embed "umami:card" with { attributes: attributes.addClass(classes) } %}
+ {% block content %}
+ <div{{content_attributes.addClass('umami-card__content')}}>
+ {{ content }}
+ </div>
+ {% include "umami:title" with {
+ attributes: title_attributes.addClass('umami-card__title'),
+ label,
+ title_prefix,
+ title_suffix,
+ } only %}
+ {% include "umami:read-more" with {
+ url,
+ text: 'View'|t ~ ' ' ~ node.type.entity.label()|t,
+ a11y: label,
+ extra_classes: 'umami-card__read-more'
+ } only %}
+ {% endblock %}
+{% endembed %}
diff --git a/core/profiles/demo_umami/themes/umami/templates/content/node--card-common.html.twig b/core/profiles/demo_umami/themes/umami/templates/content/node--card-common.html.twig
index 00ccfb68b5e7..967e1034a013 100644
--- a/core/profiles/demo_umami/themes/umami/templates/content/node--card-common.html.twig
+++ b/core/profiles/demo_umami/themes/umami/templates/content/node--card-common.html.twig
@@ -73,34 +73,27 @@
node.isPromoted() ? 'node--promoted',
node.isSticky() ? 'node--sticky',
not node.isPublished() ? 'node--unpublished',
- 'view-mode-card',
view_mode ? 'node--view-mode-' ~ view_mode|clean_class,
]
%}
{{ attach_library('umami/classy.node') }}
-{{ attach_library('umami/view-mode-card') }}
-{% block libraries %}
-{{ attach_library('umami/view-mode-card-common') }}
-{% endblock %}
-<article{{ attributes.addClass(classes) }}>
-
- {{ title_prefix }}
- {% if label and not page %}
- <h2{{ title_attributes.addClass('node__title') }}>
- {{ label }}
- </h2>
- {% endif %}
- {{ title_suffix }}
-
- <div class="read-more">
- <a class="read-more__link" href="{{ url }}">
- {% trans %}View {{ node.type.entity.label() }}{% endtrans %} <span class="visually-hidden"> - {{ label }}</span>
- </a>
- </div>
-
- <div{{ content_attributes.addClass('node__content') }}>
- {{ content }}
- </div>
-
-</article>
+{% embed "umami:card" with { attributes: attributes.addClass(classes) } %}
+ {% block content %}
+ {% include "umami:title" with {
+ attributes: title_attributes.addClass('umami-card__title'),
+ label,
+ title_prefix,
+ title_suffix,
+ } only %}
+ {% include "umami:read-more" with {
+ url,
+ text: 'View'|t ~ ' ' ~ node.type.entity.label()|t,
+ a11y: label,
+ extra_classes: 'umami-card__read-more'
+ } only %}
+ <div{{content_attributes.addClass('umami-card__content')}}>
+ {{ content }}
+ </div>
+ {% endblock %}
+{% endembed %}
diff --git a/core/profiles/demo_umami/themes/umami/templates/content/node--card.html.twig b/core/profiles/demo_umami/themes/umami/templates/content/node--card.html.twig
index 9835c2e0fe21..39acc03e42e7 100644
--- a/core/profiles/demo_umami/themes/umami/templates/content/node--card.html.twig
+++ b/core/profiles/demo_umami/themes/umami/templates/content/node--card.html.twig
@@ -73,31 +73,27 @@
node.isPromoted() ? 'node--promoted',
node.isSticky() ? 'node--sticky',
not node.isPublished() ? 'node--unpublished',
- 'view-mode-card',
view_mode ? 'node--view-mode-' ~ view_mode|clean_class,
]
%}
{{ attach_library('umami/classy.node') }}
-{{ attach_library('umami/view-mode-card') }}
-<article{{ attributes.addClass(classes) }}>
-
- {{ title_prefix }}
- {% if label and not page %}
- <h2{{ title_attributes.addClass('node__title') }}>
- {{ label }}
- </h2>
- {% endif %}
- {{ title_suffix }}
-
- <div{{ content_attributes.addClass('node__content') }}>
- {{ content }}
- </div>
-
- <div class="read-more">
- <a class="read-more__link" href="{{ url }}">
- {% trans %}View {{ node.type.entity.label() }}{% endtrans %} <span class="visually-hidden"> - {{ label }}</span>
- </a>
- </div>
-
-</article>
+{% embed "umami:card" with { attributes: attributes.addClass(classes) } %}
+ {% block content %}
+ {% include "umami:title" with {
+ attributes: title_attributes.addClass('umami-card__title'),
+ label,
+ title_prefix,
+ title_suffix,
+ } only %}
+ <div{{content_attributes.addClass('umami-card__content')}}>
+ {{ content }}
+ </div>
+ {% include "umami:read-more" with {
+ url,
+ text: 'View'|t ~ ' ' ~ node.type.entity.label()|t,
+ a11y: label,
+ extra_classes: 'umami-card__read-more'
+ } only %}
+ {% endblock %}
+{% endembed %}
diff --git a/core/profiles/demo_umami/themes/umami/umami.libraries.yml b/core/profiles/demo_umami/themes/umami/umami.libraries.yml
index 51651fa429f7..1b671f1d4326 100644
--- a/core/profiles/demo_umami/themes/umami/umami.libraries.yml
+++ b/core/profiles/demo_umami/themes/umami/umami.libraries.yml
@@ -57,11 +57,6 @@ messages:
js:
js/components/messages/messages.js: {}
-more-link:
- css:
- theme:
- css/components/navigation/more-link/more-link.css: { weight: -10 }
-
quicklinks:
css:
theme:
@@ -83,28 +78,12 @@ user:
component:
css/components/user/user.css: { weight: -10 }
-view-mode-card:
- css:
- theme:
- css/components/content/card/card.css: {}
- dependencies:
- - umami/more-link
-
-view-mode-card-common:
- css:
- theme:
- css/components/content/card/card.css: {}
- css/components/content/card-common/card-common.css: {}
- dependencies:
- - umami/more-link
-
-view-mode-card-common-alt:
+demo-umami-tour:
css:
theme:
- css/components/content/card/card.css: {}
- css/components/content/card-common-alt/card-common-alt.css: {}
+ css/components/tour/tour.theme.css: {}
dependencies:
- - umami/more-link
+ - claro/tour-styling
oneplusfourgrid_section:
css:
diff --git a/core/profiles/demo_umami/themes/umami/umami.theme b/core/profiles/demo_umami/themes/umami/umami.theme
index 78b19feaa9f9..653f6e12f05f 100644
--- a/core/profiles/demo_umami/themes/umami/umami.theme
+++ b/core/profiles/demo_umami/themes/umami/umami.theme
@@ -39,6 +39,10 @@ function umami_preprocess_field(&$variables, $hook) {
$element['#field_name'] == 'field_tags' ||
$element['#field_name'] == 'field_difficulty') {
$variables['attributes']['class'] = 'label-items';
+
+ if ($element['#view_mode'] == 'card' && $element['#field_name'] == 'field_difficulty') {
+ $variables['attributes']['class'] = 'umami-card__label-items';
+ }
}
}
}
--
GitLab