Issue #3365451 by amanire, Gauravvvv, smustgrave: Create new SDC component for Umami (disclaimer)

(cherry picked from commit 103b774c)

core/profiles/demo_umami/demo_umami.info.yml

@@ -45,6 +45,7 @@ install:
   - locale
   - config_translation
   - content_translation
+  - sdc
 themes:
   - claro
   - umami

core/profiles/demo_umami/themes/umami/components/disclaimer/disclaimer.component.yml

+# This is so your IDE knows about the syntax for fixes and autocomplete.
+$schema: https://git.drupalcode.org/project/sdc/-/raw/1.x/src/metadata.schema.json
+
+# The human readable name.
+name: Disclaimer
+
+# 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:
+  # Props are always an object with keys. Each key is a variable in your
+  # component template.
+  type: object
+
+  properties:
+    disclaimer:
+      type: string
+      description: Disclaimer text
+    copyright:
+      type: string
+      description: Copyright text of Disclaimer
+      examples:
+        - Terms & Conditions

core/profiles/demo_umami/themes/umami/css/components/blocks/disclaimer/disclaimer.css → core/profiles/demo_umami/themes/umami/components/disclaimer/disclaimer.css

@@ -3,36 +3,36 @@
  * This file is used to style the disclaimer block.
  */
 
-.block-type-disclaimer-block .field--name-field-disclaimer,
-.block-type-disclaimer-block .field--name-field-copyright {
+.disclaimer__disclaimer,
+.disclaimer__copyright {
   display: block;
   text-align: center;
   font-size: 0.94rem;
 }
 
 @media screen and (min-width: 75rem) {
-  .block-type-disclaimer-block {
+  .disclaimer {
     display: flex;
     justify-content: space-between;
   }
 
-  .block-type-disclaimer-block .field--name-field-disclaimer,
-  .block-type-disclaimer-block .field--name-field-copyright {
+  .disclaimer__disclaimer,
+  .disclaimer__copyright {
     margin-bottom: 0;
     text-align: start;
   }
 
-  .block-type-disclaimer-block .field--name-field-disclaimer {
+  .disclaimer__disclaimer {
     max-width: 40%;
     margin-left: 0.5rem; /* LTR */
   }
 
-  [dir="rtl"] .block-type-disclaimer-block .field--name-field-disclaimer {
+  [dir="rtl"] .disclaimer__disclaimer {
     margin-right: 0.5rem;
     margin-left: 0;
   }
 
-  .block-type-disclaimer-block .field--name-field-copyright {
+  .disclaimer__copyright {
     width: 25%;
   }
 }

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

+<div class="disclaimer">
+  {% if disclaimer %}
+    <div class="disclaimer__disclaimer">
+      {{ disclaimer }}
+    </div>
+  {% endif %}
+  {% if copyright %}
+    <div class="disclaimer__copyright">
+      {{ copyright }}
+    </div>
+  {% endif %}
+</div>

core/profiles/demo_umami/themes/umami/templates/components/disclaimer/block--bundle--disclaimer-block.html.twig

+{% extends "block.html.twig" %}
+{#
+/**
+ * @file
+ * Theme override for a disclaimer block.
+ *
+ * Displays Umami Disclaimer and Copyright text.
+ *
+ * Available variables:
+ * - content.field_disclaimer: Content of Disclaimer formatted text field.
+ * - content.field_copyright: Content of Copyright formatted text field.
+ */
+#}
+{% block content %}
+  {% embed 'umami:disclaimer' with {
+    disclaimer: content.field_disclaimer,
+    copyright: content.field_copyright,
+  } only %}
+  {% endembed %}
+{% endblock %}

core/profiles/demo_umami/themes/umami/umami.libraries.yml

@@ -6,7 +6,6 @@ global:
     component:
       css/components/blocks/banner/banner.css: {}
       css/components/blocks/branding/branding.css: {}
-      css/components/blocks/disclaimer/disclaimer.css: {}
       css/components/blocks/help/help.css: {}
       css/components/blocks/page-title/page-title.css: {}
       css/components/blocks/footer-promo/footer-promo.css: {}