[POC] OEL-3735: Upgrade to ui_patterns v2

components/accordion/accordion.component.yml

@@ -0,0 +1,38 @@
+name: 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/'
+slots:
+  title:
+    title: Title
+    description: 'Title of the accordion.'
+  expand_button_label:
+    title: 'Expand button'
+    description: 'Label of the expand button.'
+  collapse_button_label:
+    title: 'Collapse button'
+    description: 'Label of the collapse button.'
+props:
+  type: object
+  properties:
+    bare_layout:
+      title: '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. Defaults to false.'
+      type: boolean
+    open_item:
+      title: 'Accordion item opened by default'
+      description: 'Index value of the item to open (starting from 1), all closed by default (0).'
+      type: number
+    title_tag:
+      title: 'Title tag'
+      description: 'The tag to use for the title. Defaults to h2.'
+      type: string
+    items:
+      title: 'Accordion items'
+      description: 'List of accordion items.'
+      type: array
+      items:
+        type: object
+        properties:
+          title:
+            type: string
+          content:
+            type: string

components/accordion/accordion.preview-buttons.story.yml

@@ -0,0 +1,13 @@
+name: Expand / Collapse buttons
+slots:
+  title: 'This is the title of this accordion.'
+  expand_button_label: 'Expand'
+  collapse_button_label: 'Collapse'
+props:
+  items:
+    - 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.'
+  bare_layout: false
+  open_item: 1

components/accordion/accordion.preview-default.story.yml

@@ -0,0 +1,11 @@
+name: Default
+slots:
+  title: 'This is the title of this accordion.'
+props:
+  items:
+    - 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.'
+  bare_layout: false
+  open_item: 1

components/accordion/accordion.twig

@@ -0,0 +1,22 @@
+{#
+/**
+ * @file
+ * Accordion pattern.
+ */
+#}
+{% include '@oe-bcl/accordion' with {
+  'title': title,
+  'title_tag': title_tag,
+  'id': accordion_id,
+  'flush': bare_layout,
+  'items': items,
+  'open_item_id': open_item,
+  'expand_button': expand_button_label|render is not empty ? {
+    'label': expand_button_label,
+  },
+  'collapse_button': collapse_button_label|render is not empty ? {
+    'label': collapse_button_label,
+    'variant': 'secondary',
+  },
+  'attributes': attributes,
+} only %}

components/alert/alert.component.yml

@@ -0,0 +1,42 @@
+name: 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:
+    title: 'Primary (default)'
+  secondary:
+    title: Secondary
+  success:
+    title: Success
+  danger:
+    title: Danger
+  warning:
+    title: Warning
+  info:
+    title: Info
+  light:
+    title: Light
+  dark:
+    title: Dark
+  link:
+    title: Link
+slots:
+  heading:
+    title: Heading
+    description: 'The alert heading. Optional.'
+  message:
+    title: Message
+    description: 'The alert message.'
+  icon:
+    title: 'Icon name'
+    description: 'Add an icon to the alert. Optional.'
+props:
+  type: object
+  properties:
+    dismissible:
+      title: Dismissible
+      description: 'Add close button to dismiss the alert inline. Defaults to true.'
+      type: boolean
+    animated_dismiss:
+      title: 'Animated dismiss'
+      description: 'Add fade animation to the dismissible alert. Defaults to true.'
+      type: boolean

components/alert/alert.preview.story.yml

@@ -0,0 +1,5 @@
+name: Preview
+slots:
+  heading: 'Well done!'
+  message: 'A simple alert—check it out!'
+  icon: info-circle

components/alert/alert.twig

@@ -0,0 +1,16 @@
+{#
+/**
+ * @file
+ * Alert component.
+ */
+#}
+{% include '@oe-bcl/alert' with {
+  'heading': heading,
+  'message': message,
+  'variant': variant,
+  'dismissible': dismissible,
+  'animated_dismiss': animated_dismiss,
+  'icon_path': bcl_icon_path,
+  'icon_name': icon,
+  'attributes': attributes,
+} only %}

components/alertbcl/alertbcl.component.yml

@@ -0,0 +1,42 @@
+name: Alert bcl
+description: 'BCL - 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:
+    title: 'Primary (default)'
+  secondary:
+    title: Secondary
+  success:
+    title: Success
+  danger:
+    title: Danger
+  warning:
+    title: Warning
+  info:
+    title: Info
+  light:
+    title: Light
+  dark:
+    title: Dark
+  link:
+    title: Link
+slots:
+  heading:
+    title: Heading
+    description: 'The alert heading. Optional.'
+  message:
+    title: Message
+    description: 'The alert message.'
+  icon:
+    title: 'Icon name'
+    description: 'Add an icon to the alert. Optional.'
+props:
+  type: object
+  properties:
+    dismissible:
+      title: Dismissible
+      description: 'Add close button to dismiss the alert inline. Defaults to true.'
+      type: boolean
+    animated_dismiss:
+      title: 'Animated dismiss'
+      description: 'Add fade animation to the dismissible alert. Defaults to true.'
+      type: boolean

components/alertbcl/alertbcl.preview.story.yml

@@ -0,0 +1,5 @@
+name: Preview BCL
+slots:
+  heading: 'Well done!'
+  message: 'A simple alert—check it out!'
+  icon: info-circle

components/alertbcl/alertbcl.twig

@@ -0,0 +1,83 @@
+{% apply spaceless %}
+
+{# Parameters:
+  - message (string) (default: '')
+  - heading (string) (default: '')
+  - variant (string) (default: 'primary')
+  - dismissible (boolean) (default: true)
+  - animated_dismiss (boolean) (default: true)
+  - icon_path (string) (default: '')
+  - icon_name (string) (default: '')
+  - attributes (drupal attrs)
+#}
+
+{% set _message = message|default('') %}
+{% set _heading = heading|default('') %}
+{% set _variant = variant|default('primary') %}
+{% set _dismissible = dismissible ?? true %}
+{% set _animated_dismiss = animated_dismiss ?? true %}
+{% set _icon_path = icon_path|default('') %}
+{% set _icon_name = icon_name|default('') %}
+
+{% set _classes = ['alert', 'alert-' ~ _variant|e('html_attr'), 'd-flex', 'align-items-center'] %}
+{% set _icon_names = {
+    primary: "info-circle-fill",
+    secondary: "info-circle-fill",
+    success: "check-circle-fill",
+    danger: "dash-circle-fill",
+    warning: "exclamation-triangle-fill",
+    light: "info-circle-fill",
+    info: "info-circle-fill",
+    dark: "info-circle-fill",
+  }
+%}
+
+{% if _dismissible %}
+  {% set _classes = _classes|merge(['alert-dismissible']) %}
+{% endif %}
+{% if _animated_dismiss %}
+  {% set _classes = _classes|merge(['fade', 'show']) %}
+{% endif %}
+
+{% set _classes = _classes|merge(['text-dark']) %}
+
+{% set _icon_classes = ['flex-shrink-0 me-3 mt-1 align-self-start' ] %}
+
+{% if _variant != 'light' %}
+  {% set _icon_classes = _icon_classes|merge(['text-' ~ _variant]) %}
+{% endif %}
+
+{% if attributes is empty %}
+  {% set attributes = create_attribute() %}
+{% endif %}
+
+{% set attributes = attributes.addClass(_classes).setAttribute('role', 'alert') %}
+
+<div {{ attributes }}>
+{% if _icon_path is not empty %}
+  {% include '@oe-bcl/bcl-icon/icon.html.twig' with {
+    name: _icon_name ?: _icon_names[_variant],
+    size: 's',
+    path: _icon_path,
+    attributes: create_attribute().addClass(_icon_classes),
+  } only %}
+{% endif %}
+  <div class="alert-content flex-grow-1">
+  {%- if _heading is not empty -%}
+    <div class="alert-heading h4">{{ _heading }}</div>
+  {%- endif -%}
+  {%- if _message is not empty -%}
+    {{- _message -}}
+  {%- endif -%}
+  </div>
+{%- if _dismissible -%}
+  <button
+    type="button"
+    class="btn-close"
+    data-bs-dismiss="alert"
+    aria-label="Close">
+  </button>
+{%- endif -%}
+</div>
+
+{% endapply %}

components/badge/badge.component.yml

@@ -0,0 +1,51 @@
+name: 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/'
+slots:
+  label:
+    title: Label
+    description: 'The badge label.'
+  url:
+    title: 'Badge URL'
+    description: 'Converts the badge in a link. Optional.'
+  title:
+    title: 'Link title'
+    description: 'Title attribute if the badge is a link. Optional.'
+props:
+  type: object
+  properties:
+    background:
+      title: 'Badge background'
+      description: 'Set the background color of the badge. Defaults to "primary".'
+      type: string
+      enum:
+        - primary
+        - secondary
+        - success
+        - danger
+        - warning
+        - info
+        - light
+        - dark
+        - link
+      'meta:enum':
+        primary: 'primary (default)'
+        secondary: secondary
+        success: success
+        danger: danger
+        warning: warning
+        info: info
+        light: light
+        dark: dark
+        link: link
+    rounded_pill:
+      title: 'Pill badge.'
+      description: 'Make the badge a rounded pill. Defaults to false.'
+      type: boolean
+    dismissible:
+      title: 'Dismissible badge. Optional'
+      description: 'Add a close icon at the end of the badge. Defaults to false.'
+      type: boolean
+    outline:
+      title: Outline.
+      description: 'Use a border instead of a background. Defaults to false.'
+      type: boolean

components/badge/badge.preview.story.yml

@@ -0,0 +1,7 @@
+name: Preview
+slots:
+  label: New
+  url: 'https://europa.eu'
+  title: 'European website.'
+props:
+  dismissible: true

components/badge/badge.twig

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