2.2.4 release

components/icon/icon.component.yml

@@ -1,7 +1,7 @@
 ---
 $schema: https://git.drupalcode.org/project/drupal/-/raw/HEAD/core/assets/schemas/v1/metadata.schema.json
-name: Previous-next
-description: Provides common Previous-Next navigation element for LGD themes and modules.
+name: Icon
+description: Provides common icon element for LGD themes and modules.
 status: stable
 props:
   type: object
@@ -10,7 +10,7 @@ props:
       type: string
       title: Icon name
       description: >
-        The filename of the icon to use, not including the extensin.
+        The filename of the icon to use, not including the extension.
     icon_path:
       type: string
       title: Icon path
@@ -36,3 +36,10 @@ props:
         The machine name of the theme containing the icon path. Defaults to
         'localgov_base', but will be ignored if icon_path already begins
         with '@'.
+    decoration:
+      type: string
+      title: Decoration
+      description: >
+        If set to 'true', the icon will have aria-hidden="true" added to the
+        wrapper element. Defaults to 'true'. This is useful for decorative
+        icons that do not add any meaning to the content.

components/icon/icon.twig

@@ -1,13 +1,54 @@
 {#
   @file Adding icons to our website, without loading an icon library.
 
-  To use this, you need to add this html to your template:
+  Available variables:
+  - icon_name: The name of the icon svg file to load. (without the .svg extension)
+  - icon_path: (optional) The path to the icon svg file. If not provided, it
+    defaults to 'includes/icons' within the theme specified in the 'theme'
+    variable.
+    You can provide a full path starting with '@theme_name/' to load from
+    another theme. For example: '@localgov_base/includes/icons'.
+  - theme: (optional) The theme to load the icon from if 'icon_path' is not provided.
+    Defaults to 'localgov_base'.
+  - icon_classes: (optional) A string of additional classes to add to the icon
+    wrapper element.
+  - icon_wrapper_element: (optional) The HTML element to use to wrap the icon.
+    Defaults to 'div'.
+  - decoration: (optional) If set to 'true', the icon will have aria-hidden="true"
+    added to the wrapper element. Defaults to 'true'. This is useful for decorative
+    icons that do not add any meaning to the content.
 
+  Examples of usage:
+
+  Basic example usage, loading from LocalGov Base theme:
+  {% include 'localgov_base:icon' with {
+      icon_name: 'facebook',
+    }
+  %}
+
+  Basic example, adding custom icon and span as element
+  {% include 'localgov_base:icon' with {
+    icon_name: 'twitter',
+    icon_classes: 'lgd-icon--large',
+    icon_wrapper_element: 'span',
+  } %}
+
+  Advanced example, loading from LocalGov Base theme:
+  {% include 'localgov_base:icon' with {
+    icon_name: 'whatsapp',
+    icon_path: '@localgov_base/templates/includes/icons/font-awesome/brands',
+    icon_classes: 'my-custom-icon-class',
+    icon_wrapper_element: 'span',
+  } %}
+
+
+  Advanced example, loading from custom theme:
   {% include 'localgov_base:icon' with {
-    theme: 'localgov_base',
-    icon_name: 'facebook-square',
-    icon_wrapper_element: 'div',
-    icon_classes: 'service-landing-page__service-icon',
+    icon_name: 'custom-icon',
+    theme: '@my_custom_theme',
+    icon_path: '@my_custom_theme/icons',
+    icon_classes: 'my-custom-icon-class',
+    icon_wrapper_element: 'span',
   } %}
 
   The only option above that is necessary is the 'icon_name' one. The others

css/components/callout-box.css

@@ -18,7 +18,14 @@
   background: var(--call-out-box-bg-color);
 }
 
+.call-out-box__content .field--name-localgov-body-text > :last-child {
+  /* Ensure we don't have extra space if there is no call out link */
+  margin-block-end: 0;
+}
+
 .call-out-box__link {
+  display: inline-block;
+  margin-block-start: var(--vertical-rhythm-spacing);
   padding: var(--call-out-box-link-padding);
   color: var(--call-out-box-bg-color);
   background-color: var(--call-out-box-text-color);