Convert AZ Cards to be a SDC

modules/custom/az_card/az_card.libraries.yml

@@ -5,12 +5,12 @@ az_card:
 az_card_no_follow:
   css:
     component:
-      css/az-card-no-follow.css: {}
+      components/az-card/az-card-no-follow.css: {}
   js:
-    js/az-card-no-follow.js: {}
+    components/az-card/az-card-no-follow.js: {}
   dependencies:
     - core/drupal.nodelist.foreach
 az_card_title_hover:
   css:
     component:
-      css/az-card-title-hover.css: {}
+      components/az-card/az-card-title-hover.css: {}

modules/custom/az_card/css/az-card-no-follow.css → modules/custom/az_card/components/az-card/az-card-no-follow.css

@@ -2,4 +2,4 @@
 
 .az-card-no-follow, .az-card-no-follow.btn:not(:disabled):not(.disabled) {
     cursor: not-allowed;
-}
+}

modules/custom/az_card/css/az-card-title-hover.css → modules/custom/az_card/components/az-card/az-card-title-hover.css

@@ -15,4 +15,4 @@
 .card-body .visually-hidden {
   display: block;
   position: static !important;
-}
+}

modules/custom/az_card/components/az-card/az-card.component.yml

@@ -0,0 +1,47 @@
+$schema: https://git.drupalcode.org/project/drupal/-/raw/11.x/core/assets/schemas/v1/metadata.schema.json
+name: AZ Card
+status: experimental
+props:
+  type: object
+  properties:
+    media:
+      type:
+        - array
+        - 'null'
+    title:
+      type:
+        - string
+        - 'null'
+    body:
+      type:
+        - array
+        - 'null'
+    link:
+      type:
+        - array
+        - 'null'
+    link_url:
+      type:
+        - string
+        - object
+        - 'null'
+    title_style:
+      type: string
+    title_alignment:
+      type: string
+    title_level:
+      type: string
+    title_display:
+      type: string
+    has_media:
+      type: boolean
+    has_link:
+      type: boolean
+    has_body:
+      type: boolean
+    link_is_visually_hidden:
+      type: boolean
+    link_is_stretched:
+      type: boolean
+    link_label:
+      type: string

modules/custom/az_card/components/az-card/az-card.twig

@@ -0,0 +1,49 @@
+<div{{ attributes }}>
+  {% if has_media %}
+    <div class="position-relative overflow-hidden">
+      {{ media }}
+      {% if title and title_style == 'title-on-image' %}
+        <div class="card-img-overlay p-0 d-flex flex-column">
+          <{{ title_level }} class="fw-bold mt-auto card-title text-bg-gradient-black text-white mb-0 p-card pt-8 {{ title_alignment }} {{ title_display }}">
+            {% if has_link %}
+              <a href="{{ link_url }}" class="text-reset">{{ title }}</a>
+            {% else %}
+              {{ title }}
+            {% endif %}
+          </{{ title_level }}>
+        </div>
+      {% endif %}
+    </div>
+  {% endif %}
+  {% if title_style == 'title-on-image' and not has_body and (link_label == '' or link_is_visually_hidden) %}
+    <div class="d-flex flex-column">
+      {% if has_link %}
+        {% if link_is_visually_hidden and link_is_stretched %}
+          <div class="mt-auto">
+            <a href="{{ link_url }}" class="stretched-link" aria-label="{{ link_label }}"></a>
+          </div>
+        {% else %}
+          <div class="mt-auto">{{ link }}</div>
+        {% endif %}
+      {% endif %}
+    </div>
+  {% else %}
+    <div class="card-body d-flex flex-column">
+      {% if title and title_style == 'default' %}
+        <{{ title_level }} class="fw-bold mt-0 mb-3 card-title {{ title_alignment }} {{ title_display }}">
+          {% if has_link %}
+            <a href="{{ link_url }}" class="text-reset">{{ title }}</a>
+          {% else %}
+            {{ title }}
+          {% endif %}
+        </{{ title_level }}>
+      {% endif %}
+      {% if has_body %}
+        <div class="card-text">{{ body }}</div>
+      {% endif %}
+      {% if has_link %}
+        <div class="mt-auto">{{ link }}</div>
+      {% endif %}
+    </div>
+  {% endif %}
+</div>

modules/custom/az_card/templates/az-card.html.twig

@@ -19,54 +19,23 @@
  */
 #}
 
-{% set attributes = attributes.addClass('h-100') %}
+{% set link_classes = link['#attributes']['class']|default([]) %}
 
-<div{{ attributes }}>
-  {% if media %}
-    <div class="position-relative overflow-hidden">
-      {{ media }}
-      {% if title and title_style == 'title-on-image' %}
-        <div class="card-img-overlay p-0 d-flex flex-column">
-          <{{ title_level }} class="fw-bold mt-auto card-title text-bg-gradient-black text-white mb-0 p-card pt-8 {{ title_alignment }} {{ title_display }}">
-            {% if link|render %}
-              <a href="{{ link_url }}" class="text-reset">{{ title }}</a>
-            {% else %}
-              {{ title }}
-            {% endif %}
-          </{{ title_level }}>
-        </div>
-      {% endif %}
-    </div>
-  {% endif %}
-  {% if title_style == 'title-on-image' and body['#text'] == '' and (link['#title'] == '' or 'visually-hidden' in link['#attributes']['class'] ) %}
-    <div class="d-flex flex-column">
-      {% if link|render %}
-        {% if 'visually-hidden' in link['#attributes']['class'] and 'stretched-link' in link['#attributes']['class'] %}
-          <div class="mt-auto">
-            <a href="{{ link['#url'] }}" class="stretched-link" aria-label="{{ link['#title'] }}"></a>
-          </div>
-        {% else %}
-          <div class="mt-auto">{{ link }}</div>
-        {% endif %}
-      {% endif %}
-    </div>
-  {% else %}
-    <div class="card-body d-flex flex-column">
-      {% if title and title_style == 'default' %}
-        <{{ title_level }} class="fw-bold mt-0 mb-3 card-title {{ title_alignment }} {{ title_display }}">
-          {% if link|render %}
-            <a href="{{ link_url }}" class="text-reset">{{ title }}</a>
-          {% else %}
-            {{ title }}
-          {% endif %}
-        </{{ title_level }}>
-      {% endif %}
-      {% if body['#text'] %}
-        <div class="card-text">{{ body }}</div>
-      {% endif %}
-      {% if link %}
-        <div class="mt-auto">{{ link }}</div>
-      {% endif %}
-    </div>
-  {% endif %}
-</div>
+{% include 'az_card:az-card' with {
+  attributes: attributes.addClass('h-100'),
+  media: media,
+  title: title,
+  body: body,
+  link: link,
+  link_url: link_url,
+  title_style: title_style,
+  title_alignment: title_alignment,
+  title_level: title_level,
+  title_display: title_display,
+  has_media: media is not empty,
+  has_link: link is not empty,
+  has_body: body['#text']|default('') != '',
+  link_is_visually_hidden: 'visually-hidden' in link_classes,
+  link_is_stretched: 'stretched-link' in link_classes,
+  link_label: link['#title']|default(''),
+} only %}

modules/custom/az_paragraphs/az_paragraphs_cards/components/az-cards/az-cards.component.yml

@@ -0,0 +1,20 @@
+$schema: https://git.drupalcode.org/project/drupal/-/raw/11.x/core/assets/schemas/v1/metadata.schema.json
+name: AZ Cards
+status: experimental
+props:
+  type: object
+  properties:
+    title:
+      type:
+        - string
+        - 'null'
+    title_color_class:
+      type:
+        - string
+        - 'null'
+    show_title:
+      type: boolean
+    cards:
+      type:
+        - array
+        - 'null'

modules/custom/az_paragraphs/az_paragraphs_cards/components/az-cards/az-cards.twig

@@ -0,0 +1,7 @@
+<div{{ attributes }}>
+  {% if show_title and title %}
+    <h2{% if title_color_class %} class="{{ title_color_class }}"{% endif %}>{{ title }}</h2>
+  {% endif %}
+
+  {{ cards }}
+</div>

modules/custom/az_paragraphs/az_paragraphs_cards/templates/paragraph--az-cards.html.twig

@@ -0,0 +1,17 @@
+{#
+/**
+ * @file
+ * Theme override for the az_cards paragraph bundle.
+ */
+#}
+{{ attach_library('az_paragraphs/az_paragraphs.az_cards') }}
+
+{% set card_settings = paragraph.getAllBehaviorSettings()['az_cards_paragraph_behavior']|default({}) %}
+
+{% include 'az_paragraphs_cards:az-cards' with {
+  attributes: attributes.addClass('az-cards'),
+  title: paragraph.field_az_title.value|default(''),
+  title_color_class: card_settings['card_deck_title_color']|default(''),
+  show_title: view_mode != 'preview',
+  cards: content.field_az_cards,
+} only %}