Merge pull request #150 from openeuropa/OEL-779-part-one

OEL-779: Review patterns: Accordion, Alert, Badge, Banner, Blockquote and Breadcrumbs

includes/pattern.inc

@@ -5,6 +5,9 @@
  * Theme and preprocess functions for patterns.
  */
 
+declare(strict_types = 1);
+
+use Drupal\Component\Utility\Html;
 use Drupal\Core\Url;
 
 /**
@@ -193,3 +196,10 @@ function oe_bootstrap_theme_preprocess_pattern_description_list(&$variables) {
     }
   }
 }
+
+/**
+ * Implements hook_preprocess_HOOK().
+ */
+function oe_bootstrap_theme_preprocess_pattern_accordion(array &$variables): void {
+  $variables['accordion_id'] = Html::getUniqueId('bcl-accordion');
+}

templates/paragraphs/paragraph--oe-banner.html.twig

@@ -8,7 +8,7 @@
 #}
 {% set attributes = create_attribute() %}
 {% if url %}
-  {% set _link = {
+  {% set _call_to_action = {
     'label': label,
     'path': url,
     'attributes': create_attribute({
@@ -30,7 +30,7 @@
   'variant': variant,
   'title': content.field_oe_title,
   'description':  content.field_oe_text,
-  'link': _link,
+  'call_to_action': _call_to_action,
   'image': image.src,
   'hero': _hero,
   'shade': _shade,

templates/patterns/accordion/accordion.ui_patterns.yml

@@ -1,24 +1,24 @@
 accordion:
-  label: "Accordion"
-  description: "List of items that can be clicked to hide or reveal additional content."
+  label: 'Accordion'
+  description: 'List of items that can be clicked to hide or reveal additional content. For more information: https://getbootstrap.com/docs/5.0/components/accordion/'
   settings:
-    flush: 
+    bare_layout:
       type: boolean
-      label: "Flush"
-      description: "set Flush to remove the default background-color, some borders, and some rounded corners to render accordions edge-to-edge with their parent container."
+      label: 'Bare layout'
+      description: 'Enable to remove the default background-color, some borders, and some rounded corners printing the accordion edge-to-edge with their parent container. False by default.'
       preview: false
-    open_item_id: 
+    open_item:
       type: number
-      label: "Open item id"
-      description: "Id of the default item to open, starting from 1"
+      label: 'Accordion item opened by default'
+      description: 'Index value of the item to open (starting from 1), all closed by default (0).'
       preview: 1
   fields:
     items:
-      type: "array"
-      label: "Accordion items"
-      description: "List of accordion items"
+      type: array
+      label: 'Accordion items'
+      description: 'List of accordion items.'
       preview:
-        - title: "Jobs, Growth, Investment and Competitiveness with an additional quite long string"
-          content: "Bullfights. Bull hockey. Do you like this? The bull is stabbed, prodded, beaten. The bull is wounded. The bull is tired before the matador ever steps into the ring. Now, is that victory? Of course it is. Wanna know the secret to winning? Creative sportsmanship. In other words, one has to rig the game."
-        - title: "Energy Union"
-          content: "Advice on living, working or travelling in the EU, on visas and immigration for non-EU citizens, European culture. Plus some extra text to make it a little bit longer."
+        - title: 'Jobs, Growth, Investment and Competitiveness with an additional quite long string'
+          content: 'Lorem fistrum eiusmod cillum elit papaar officia aliquip dolore velit. Pellentesque dolor sapien, mollis fringilla ultricies sed, lacinia vel nibh. Nulla auctor arcu risus, nec facilisis odio aliquet sed.'
+        - title: 'Energy Union'
+          content: 'Advice on living, working or travelling in the EU, on visas and immigration for non-EU citizens, European culture. Plus some extra text to make it a little bit longer.'

templates/patterns/accordion/pattern-accordion.html.twig

@@ -1,11 +1,13 @@
 {#
 /**
  * @file
- * Accordion component.
+ * Accordion pattern.
  */
 #}
 {% include '@oe-bcl/accordion' with {
-  'flush': flush,
+  'id': accordion_id,
+  'flush': bare_layout,
   'items': items,
-  'open_item_id': open_item_id
-} %}
+  'open_item_id': open_item,
+  'attributes': attributes,
+} only %}

templates/patterns/alert/alert.ui_patterns.yml

@@ -1,47 +1,47 @@
 alert:
-  label: Alert
-  description: Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. https://v5.getbootstrap.com/docs/5.0/components/alerts/
+  label: 'Alert'
+  description: 'Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. https://v5.getbootstrap.com/docs/5.0/components/alerts/'
+  variants:
+    primary:
+      label: 'Primary (default)'
+    secondary:
+      label: 'Secondary'
+    success:
+      label: 'Success'
+    danger:
+      label: 'Danger'
+    warning:
+      label: 'Warning'
+    info:
+      label: 'Info'
+    light:
+      label: 'Light'
+    dark:
+      label: 'Dark'
+    link:
+      label: 'Link'
   settings:
-    style:
-      type: select
-      label: Alert style
-      options:
-        primary: primary
-        secondary: secondary
-        success: success
-        danger: danger
-        warning: warning
-        info: info
-        light: light
-        dark: dark
-        link: link
-      preview: primary
     dismissible:
       type: boolean
-      label: Dismissible?
-      description: It’s possible to dismiss any alert inline
-      preview: True
+      label: 'Dismissible'
+      description: 'Add close button to dismiss the alert inline. Enabled by default.'
     animated_dismiss:
       type: boolean
-      label: Animated dismiss?
-      description: Add fade animation to the dismissible alert
-      preview: True
+      label: 'Animated dismiss'
+      description: 'Add fade animation to the dismissible alert. Enabled by default.'
   fields:
     heading:
       type: text
-      label: Heading
-      description: The alert heading. Optional.
-      preview: Well done!
+      label: 'Heading'
+      description: 'The alert heading. Optional.'
+      preview: 'Well done!'
     message:
       type: render
-      label: Message
-      description: The alert message.
-      preview: " A simple alert—check it out! "
-    icons_path:
+      label: 'Message'
+      description: 'The alert message.'
+      preview: 'A simple alert—check it out!'
+    icon:
       type: text
-      label: Path to icons
-      preview: "/assets/icons/bootstrap-icons.svg"
-    icon_name:
-      type: text
-      label: icon to add to the alert
-      preview: "alarm"
+      label: 'Icon name'
+      description: 'Add an icon to the alert. Optional.'
+      preview: 'alarm'

templates/patterns/alert/pattern-alert.html.twig

@@ -7,9 +7,10 @@
 {% include '@oe-bcl/alert' with {
   'heading': heading,
   'message': message,
-  'variant': style,
+  'variant': variant,
   'dismissible': dismissible,
   'animated_dismiss': animated_dismiss,
-  'icons_path': icons_path,
-  'icon_name': icon_name,
-} %}
+  'icons_path': bcl_icon_path,
+  'icon_name': icon,
+  'attributes': attributes,
+} only %}

templates/patterns/badge/badge.ui_patterns.yml

@@ -1,45 +1,43 @@
 badge:
-  label: Badge
-  description: A small count and labeling component. Badges scale to match the size of the immediate parent element by using relative font sizing and em units. https://v5.getbootstrap.com/docs/5.0/components/badge/
+  label: 'Badge'
+  description: 'A small count and labeling component. Badges scale to match the size of the immediate parent element by using relative font sizing and em units. For more information: https://v5.getbootstrap.com/docs/5.0/components/badge/'
   settings:
     background:
       type: select
-      label: Badge style
+      label: 'Badge background'
+      description: 'Set the background color of the badge:'
       options:
-        primary: primary
-        secondary: secondary
-        success: success
-        danger: danger
-        warning: warning
-        info: info
-        light: light
-        dark: dark
-        link: link
-      preview: primary
+        primary: 'primary (default)'
+        secondary: 'secondary'
+        success: 'success'
+        danger: 'danger'
+        warning: 'warning'
+        info: 'info'
+        light: 'light'
+        dark: 'dark'
+        link: 'link'
     rounded_pill:
       type: boolean
-      label: Pill badge. Optional
-      description: Make badge more rounded.
+      label: 'Pill badge.'
+      description: 'Make the badge a rounded pill. False by default.'
     dismissible:
       type: boolean
-      label: Dismissible badge. Optional
-      description: Add a close icon at the end of the badge.
+      label: 'Dismissible badge. Optional'
+      description: 'Add a close icon at the end of the badge.'
+      preview: true
   fields:
     label:
       type: text
-      label: Label
-      description: The badge label
-      preview: New
-    assistive_text:
-      type: text
-      label: Assistive text
-      description: Additional text hidden with the .visually-hidden class.
-      preview: ''
+      label: 'Label'
+      description: 'The badge label.'
+      preview: 'New'
     url:
       type: text
-      label: URL
-      description: The badge URL. Optional.
-      preview: ""
-    icons_path:
-      type: "text"
-      label: "Path to the svg sprite file for close icon"
+      label: 'Badge URL'
+      description: 'Converts the badge in a link. Optional.'
+      preview: 'https://europa.eu'
+    title:
+      type: text
+      label: 'Link title'
+      description: 'Title attribute if the badge is a link.'
+      preview: 'European website.'

templates/patterns/badge/pattern-badge.html.twig

@@ -1,17 +1,19 @@
 {#
 /**
  * @file
- * Badge component.
+ * Badge pattern.
  */
 #}
 
 {% include '@oe-bcl/badge' with {
   'label': label,
+  'title': title,
   'assistive_text': assistive_text,
   'url': url,
   'rounded_pill': rounded_pill,
   'background': background,
-  'icons_path': icons_path,
+  'icons_path': bcl_icon_path,
   'dismissible': dismissible,
-  'animated_dismiss': animated_dismiss
-} %}
+  'animated_dismiss': animated_dismiss,
+  'attributes': attributes,
+} only %}

templates/patterns/banner/banner.ui_patterns.yml

@@ -1,62 +1,61 @@
 banner:
-  label: "Banner"
-  description: "Banner or heroes with text and/or background image and/or with call to action. https://getbootstrap.com/docs/5.0/examples/heroes/"
+  label: 'Banner'
+  description: 'Banner or heroes with text and/or background image and/or with call to action. For more information: https://getbootstrap.com/docs/5.0/examples/heroes/'
   variants:
     default:
-      label: Default text banner
+      label: 'Default text banner'
+      description: 'Gray text banner.'
     primary:
-      label: Primary text banner
+      label: 'Primary text banner'
+      description: 'Text banner with a primary style.'
     image:
-      label: Image banner
+      label: 'Image banner'
+      description: 'Banner with text and an image.'
     image_shade:
-      label: Image shade banner
+      label: 'Image shade banner'
+      description: 'Banner with text and a shade image.'
   settings:
     shade:
-      type: "boolean"
-      label: "Shade"
-      description: "Enable the shadow effect to the image."
-      preview: false
+      type: boolean
+      label: 'Shade'
+      description: 'Enable the shadow effect to the image. False by default.'
     hero:
-      type: "boolean"
-      label: "Hero"
-      description: "Display banner as hero banner"
-      preview: false
+      type: boolean
+      label: 'Hero'
+      description: 'Display as hero banner. False by default.'
     full_width:
-      type: "boolean"
-      label: "Full width"
-      description: "Possibility of having a full-width banner within a bootstrap container"
-      preview: false
+      type: boolean
+      label: 'Full width'
+      description: 'Possibility of having a full-width banner within a bootstrap container. False by default.'
     centered:
-      type: "boolean"
-      label: "Centered"
-      description: "Whether the content of the banner is centered or not"
+      type: boolean
+      label: 'Centered'
+      description: 'Whether the content of the banner is centered or not. False by default.'
       preview: true
   fields:
     title:
-      type: "text"
-      label: "Title"
-      description: "Heading of the banner"
-      preview: "EU Budget for the future"
+      type: text
+      label: 'Title'
+      description: 'Title of the banner.'
+      preview: 'EU Budget for the future'
     description:
-      type: "text"
-      label: "Description"
-      description: "Sub-heading of the banner"
-      preview: "Innovation, economy, environment and geopolitics"
-    link:
-      type: "array"
-      label: "Link"
-      description: "Call to action link"
+      type: text
+      label: 'Description'
+      description: 'Sub-heading of the banner.'
+      preview: 'Innovation, economy, environment and geopolitics'
+    call_to_action:
+      type: array
+      label: 'Call to action'
+      description: 'Link to print a CTA button. Optional.'
       preview:
-        label: "Subscribe"
-        path: "https://example.com"
-        variant: "primary"
-        icon_position: "after"
+        label: 'Subscribe'
+        path: 'https://example.com'
+        link_style: 'warning'
+        icon_position: 'after'
         icon:
-          name: "chevron-right"
-          size: s
-          path: "/assets/icons/bootstrap-icons.svg"
+          name: 'chevron-right'
     image:
-      type: "text"
-      label: "Image"
-      description: "URL to the image"
-      preview:  "https://placeimg.com/1000/500/arch"
+      type: 'text'
+      label: 'Image'
+      description: 'URL of the image. Optional.'
+      preview:  'https://placeimg.com/1000/500/arch'