Issue #3347672 by mortona2k, finnsky, markconroy, Gauravvvv, smustgrave,...

Issue #3347672 by mortona2k, finnsky, markconroy, Gauravvvv, smustgrave, e0ipso, andypost, ipwa, lauriii: Create new SDC component for Umami (Common Card)

core/profiles/demo_umami/themes/umami/components/card/card.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: 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.

core/profiles/demo_umami/themes/umami/css/components/content/card/card.css → core/profiles/demo_umami/themes/umami/components/card/card.css

-/**
-* @file
-* This file is used to style the 'Card' view mode.
-*/
-
-.view-mode-card {
-  display: flex;
-  flex-direction: column;
+.umami-card {
   width: 100%;
   padding: 1rem;
   border: 1px solid #fcece7;
+  background-color: #fff;
 }
 
-.view-mode-card .node__title {
-  flex-grow: 1;
+.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;
 }
 
-.view-mode-card .field--name-title {
+.umami-card__title {
+  flex-grow: 1;
+  margin: 0;
   text-decoration: none;
   color: #000;
   font-size: 1.424rem;
   font-weight: 400;
 }
 
-.view-mode-card .node__link {
+.umami-card__title a {
   text-decoration: none;
   color: #000;
   background-color: inherit;
 }
 
-.view-mode-card .node__link:focus,
-.view-mode-card .node__link:hover {
+.umami-card__title a:hover,
+.umami-card__title a:focus {
   text-decoration: underline;
   color: #000;
 }
 
-.view-mode-card .field--name-field-media-image img {
-  display: block;
-  width: 100%;
-  margin-bottom: 1.2em;
+.umami-card__wrapper {
+  display: grid;
+  gap: 1rem;
+  grid-template-rows: 1fr auto auto;
+  height: 100%;
 }
 
-.view-mode-card .label-items {
-  color: #5f635d;
-  font-size: 0.889rem;
+.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

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

+<{{html_tag|default('article')}}{{attributes.addClass('umami-card')}}>
+  <div class="umami-card__wrapper">
+    {% block content %}{% endblock %}
+  </div>
+</{{html_tag|default('article')}}>

core/profiles/demo_umami/themes/umami/components/read-more/read-more.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: 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

core/profiles/demo_umami/themes/umami/css/components/navigation/more-link/more-link.css → 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);

core/profiles/demo_umami/themes/umami/components/read-more/read-more.twig

+<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>

core/profiles/demo_umami/themes/umami/components/title/title.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: 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

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

+{{ title_prefix }}
+<{{ html_tag|default('h2') }}{{ attributes.addClass('umami-title') }}>
+  {{ label }}
+</{{ html_tag|default('h2') }}>
+{{ title_suffix }}
\ No newline at end of file

core/profiles/demo_umami/themes/umami/css/components/content/card-common-alt/card-common-alt.css

-/**
-* @file
-* This file is used to style the 'Card common alt' view mode.
-*/
-
-.node--view-mode-card-common-alt .node__content {
-  order: -1;
-}

core/profiles/demo_umami/themes/umami/css/components/content/card-common/card-common.css

-/**
-* @file
-* This file is used to style the 'Card common' view mode.
-*/
-
-.node--view-mode-card-common .read-more {
-  margin-bottom: 1em;
-}

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 %}
+    <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: read_more,
+      a11y: label,
+      extra_classes: 'umami-card__read-more'
+    } only %}
+  {% endblock %}
+{% endembed %}

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 %}
 
-<article{{ attributes.addClass(classes) }}>
+{% set read_more %}
+{% trans %}View {{ node.type.entity.label() }}{% endtrans %}
+{% endset %}
 
-  {{ 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),
+  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 %}
+    <div{{content_attributes.addClass('umami-card__content')}}>
+      {{ content }}
+    </div>
+  {% endblock %}
+{% endembed %}

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') }}
 
-<article{{ attributes.addClass(classes) }}>
+{% set read_more %}
+{% trans %}View {{ node.type.entity.label() }}{% endtrans %}
+{% endset %}
 
-  {{ 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),
+  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 %}
+    <div{{content_attributes.addClass('umami-card__content')}}>
+      {{ content }}
+    </div>
+    {% include "umami:read-more" with {
+      url,
+      text: read_more,
+      a11y: label,
+      extra_classes: 'umami-card__read-more'
+    } only %}
+  {% endblock %}
+{% endembed %}

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:

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';
+      }
     }
   }
 }