convivial-demo-33841: Transform Fast Facts into the single directory component.

base/scss/style.scss

@@ -87,7 +87,6 @@
 @import "components/eu-cookie-compliance/eu-cookie-compliance";
 @import "components/external-link/external-link";
 @import "components/facets/facets";
-@import "components/fastfacts/fastfacts";
 @import "components/fields/field";
 @import "components/flipclock/flipclock";
 @import "components/footer/footer";

components/fastfacts/fastfacts.component.yml

@@ -0,0 +1,48 @@
+# Everything in this file is optional. Still, the file needs to exist. Adding
+# metadata here will improve the DX when using components.
+
+# 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: Fast facts
+
+# 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:
+    attributes:
+      type: Drupal\Core\Template\Attribute
+    classes:
+      type: array
+    content:
+      type: object
+    fastfacts_heading:
+      type: string
+    fastfacts_prefix:
+      type: string
+    fastfacts_suffix:
+      type: string
+    fastfacts_value:
+      type: number
+
+# This is how you take control of the keys in your library
+# declaration. The overrides specified here will be merged (shallow merge) with
+# the auto-generated library. The result of the merge will become the library
+# for the component.
+libraryOverrides:
+  # Once you add a key in the overrides, you take control of it. What you type
+  # here is what will end up in the library component.
+  dependencies:
+    - core/jquery
+    - core/drupal
+
+  # Here we are taking control of the JS assets. So we need to specify
+  # everything, even the parts that were auto-generated. This is useful when
+  # adding additional files or tweaking the <script> tag's attributes.
+  js:
+    fastfacts.js: {}

components/fastfacts/fastfacts.css

@@ -0,0 +1 @@
+/*! @convivial_bootstrap/fastfacts */.fastfact h3{margin:0}.fastfact__value,.fastfact__suffix,.fastfact__prefix{font-size:2.5rem;font-weight:500;line-height:1.2}.fastfact__heading{margin-top:1rem}

components/fastfacts/fastfacts.js

@@ -4,7 +4,7 @@
  */
 
 (function ($) {
-  Drupal.behaviors.fastFacts= {
+  Drupal.behaviors.fastfacts= {
     attach: function (context, settings) {
 
       function count($this, number, context){
@@ -28,4 +28,4 @@
     }
   };
 
-})(jQuery);
+})(jQuery, Drupal);

components/fastfacts/_fastfacts.scss → components/fastfacts/fastfacts.scss

@@ -1,5 +1,9 @@
 /*! @convivial_bootstrap/fastfacts */
 
+@import "../../libraries/bootstrap/scss/functions";
+@import "../../base/scss/variables-override";
+@import "../../libraries/bootstrap/scss/variables";
+
 .fastfact {
   h3 {
     margin: 0;

components/fastfacts/fastfacts.twig

@@ -0,0 +1,8 @@
+<div{{ attributes.addClass('fastfacts', classes) }}>
+  <div class="fastfact">
+    {% if fastfact_prefix %}<span class="fastfact__prefix">{{ fastfact_prefix }}</span>{% endif %}
+    {% if fastfact_value %}<span class="fastfact__value">{{ fastfact_value }}</span>{% endif %}
+    {% if fastfact_suffix %}<span class="fastfact__suffix">{{ fastfact_suffix }}</span>{% endif %}
+    {% if fastfact_heading %}<p class="fastfact__heading">{{ fastfact_heading }}</p>{% endif %}
+  </div>
+</div>

convivial_bootstrap.libraries.yml

@@ -85,14 +85,6 @@ d3:
   js:
     libraries/d3/dist/d3.min.js: { minified: true }
 
-fastfacts:
-  version: VERSION
-  js:
-    components/fastfacts/fastfacts.js: { }
-  dependencies:
-    - core/jquery
-    - core/drupal
-
 font-family:
   css:
     theme:

templates/paragraphs/fastfacts/paragraph--fastfact.html.twig

@@ -1,54 +1,19 @@
-{% extends '@convivial_bootstrap/paragraphs/paragraph.html.twig' %}
-{#
-/**
- * @file
- * Theme override to display a paragraph.
- *
- * Available variables:
- * - paragraph: Full paragraph entity.
- *   Only method names starting with "get", "has", or "is" and a few common
- *   methods such as "id", "label", and "bundle" are available. For example:
- *   - paragraph.getCreatedTime() will return the paragraph creation timestamp.
- *   - paragraph.id(): The paragraph ID.
- *   - paragraph.bundle(): The type of the paragraph, for example, "image" or "text".
- *   - paragraph.getOwnerId(): The user ID of the paragraph author.
- *   See Drupal\paragraphs\Entity\Paragraph for a full list of public properties
- *   and methods for the paragraph object.
- * - content: All paragraph items. Use {{ content }} to print them all,
- *   or print a subset such as {{ content.field_example }}. Use
- *   {{ content|without('field_example') }} to temporarily suppress the printing
- *   of a given child element.
- * - attributes: HTML attributes for the containing element.
- *   The attributes.class element may contain one or more of the following
- *   classes:
- *   - paragraphs: The current template type (also known as a "theming hook").
- *   - paragraphs--type-[type]: The current paragraphs type. For example, if the paragraph is an
- *     "Image" it would result in "paragraphs--type--image". Note that the machine
- *     name will often be in a short form of the human readable label.
- *   - paragraphs--view-mode--[view_mode]: The View Mode of the paragraph; for example, a
- *     preview would result in: "paragraphs--view-mode--preview", and
- *     default: "paragraphs--view-mode--default".
- * - view_mode: View mode; for example, "preview" or "full".
- * - logged_in: Flag for authenticated user status. Will be true when the
- *   current user is a logged-in member.
- * - is_admin: Flag for admin user status. Will be true when the current user
- *   is an administrator.
- *
- * @see template_preprocess_paragraph()
- *
- * @ingroup themeable
- */
-#}
-{% set attributes = attributes.addClass('fastfacts') %}
-{% block paragraph %}
-  {{ attach_library('convivial_bootstrap/fastfacts') }}
+{%
+  set classes = [
+    'paragraph',
+    'paragraph--type--' ~ paragraph.bundle|clean_class,
+    view_mode ? 'paragraph--view-mode--' ~ view_mode|clean_class,
+  ]
+%}
+
+{{ include ('convivial_bootstrap:fastfacts', {
+  attributes,
+  classes,
+  content,
+  fastfact_prefix : content.field_fastfact_prefix.0,
+  fastfact_value : content.field_fastfact_value.0,
+  fastfact_suffix : content.field_fastfact_suffix.0,
+  fastfact_heading : content.field_heading.0
+}) }}
+
 
-  <div{{ attributes.addClass(classes) }}>
-    <div class="fastfact">
-      {% block content %}
-        {{ content.field_fastfact_prefix }}{{ content.field_fastfact_value }}{{ content.field_fastfact_suffix }}
-        {{ content.field_heading }}
-      {% endblock %}
-    </div>
-  </div>
-{% endblock paragraph %}