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 00000000000..f9b2d36c90c
--- /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 00000000000..27233534d87
--- /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 00000000000..3da4f9aac91
--- /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')}}>
+
+ {% block content %}{% endblock %}
+
+
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 00000000000..52efe8048d8
--- /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 0d4f196d4c8..33110078bfd 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 00000000000..09817e3115e
--- /dev/null
+++ b/core/profiles/demo_umami/themes/umami/components/read-more/read-more.twig
@@ -0,0 +1,10 @@
+
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 00000000000..33f2f7cebf6
--- /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 00000000000..0aae8674905
--- /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 }}
+
+{{ 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 0fe90e1b127..00000000000
--- 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 d7eb980180e..00000000000
--- 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 824e88274ca..00000000000
--- 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 545205b64e1..ed2ed5736f6 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,49 @@
* @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 %}
+{% set read_more %}
+{% trans %}View {{ node.type.entity.label() }}{% endtrans %}
+{% endset %}
+
+{% embed "umami:card" with {
+ attributes: attributes.addClass(classes),
+ content,
+ content_attributes,
+ label,
+ title_attributes,
+ title_prefix,
+ title_suffix,
+ read_more,
+ url,
+ } only %}
+ {% block content %}
+
+ {{ 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: read_more,
+ 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 00ccfb68b5e..4e5440b7327 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,41 @@
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 %}
-
+{% set read_more %}
+{% trans %}View {{ node.type.entity.label() }}{% endtrans %}
+{% endset %}
- {{ title_prefix }}
- {% if label and not page %}
-
- {{ label }}
-
- {% endif %}
- {{ title_suffix }}
-
-
-
-
- {{ content }}
-
-
-
+{% embed "umami:card" with {
+ attributes: attributes.addClass(classes),
+ content,
+ content_attributes,
+ label,
+ title_attributes,
+ title_prefix,
+ title_suffix,
+ read_more,
+ url,
+ } only %}
+ {% 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: read_more,
+ a11y: label,
+ extra_classes: 'umami-card__read-more'
+ } only %}
+
+ {{ content }}
+
+ {% 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 9835c2e0fe2..04d0a33f776 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,41 @@
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') }}
-
+{% set read_more %}
+{% trans %}View {{ node.type.entity.label() }}{% endtrans %}
+{% endset %}
- {{ title_prefix }}
- {% if label and not page %}
-
- {{ label }}
-
- {% endif %}
- {{ title_suffix }}
-
-
- {{ content }}
-
-
-
-
-
+{% embed "umami:card" with {
+ attributes: attributes.addClass(classes),
+ content,
+ content_attributes,
+ label,
+ title_attributes,
+ title_prefix,
+ title_suffix,
+ read_more,
+ url,
+ } only %}
+ {% block content %}
+ {% include "umami:title" with {
+ attributes: title_attributes.addClass('umami-card__title'),
+ label,
+ title_prefix,
+ title_suffix,
+ } only %}
+
+ {{ content }}
+
+ {% include "umami:read-more" with {
+ url,
+ text: read_more,
+ 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 51651fa429f..324a0e93897 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,29 +78,6 @@ 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:
- css:
- theme:
- css/components/content/card/card.css: {}
- css/components/content/card-common-alt/card-common-alt.css: {}
- dependencies:
- - umami/more-link
-
oneplusfourgrid_section:
css:
theme:
diff --git a/core/profiles/demo_umami/themes/umami/umami.theme b/core/profiles/demo_umami/themes/umami/umami.theme
index 3775471a592..7765b185548 100644
--- a/core/profiles/demo_umami/themes/umami/umami.theme
+++ b/core/profiles/demo_umami/themes/umami/umami.theme
@@ -40,6 +40,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';
+ }
}
}
}