OEL-4813: Port components to sdc.

components/accordion/accordion.component.yml

@@ -0,0 +1,47 @@
+name: Accordion
+description: 'List of items that can be clicked to hide or reveal additional content.'
+props:
+  type: object
+  properties:
+    accordion_id:
+      title: 'Accordion ID'
+      description: 'Unique ID for the accordion. Defaults to a random number.'
+      type: string
+    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:
+      title: Title
+      type: [string, array, object]
+      description: 'Title of the accordion.'
+    title_tag:
+      title: 'Title tag'
+      description: 'The tag to use for the title. Defaults to h2.'
+      type: string
+    expand_button_label:
+      title: 'Expand button'
+      description: 'Label of the expand button.'
+      type: [string, array, object]
+    collapse_button_label:
+      title: 'Collapse button'
+      description: 'Label of the collapse button.'
+      type: [string, array, object]
+    items:
+      title: 'Accordion items'
+      description: 'List of accordion items.'
+      type: array
+      items:
+        type: object
+        properties:
+          title:
+            type: [string, array, object]
+          content:
+            type: [string, array, object]
+    attributes:
+      title: Attributes
+      type: Drupal\Core\Template\Attribute

components/accordion/accordion.story.twig

@@ -0,0 +1,24 @@
+{% set 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.',
+  },
+] %}
+
+{% include 'oe_bootstrap_theme:accordion' with {
+  title: 'This is the title of this accordion.',
+  items: items,
+  open_item: 1,
+} only %}
+
+{% include 'oe_bootstrap_theme:accordion' with {
+  title: 'This is the title of this accordion with expand/collapse buttons.',
+  expand_button_label: 'Expand',
+  collapse_button_label: 'Collapse',
+  items: items,
+  open_item: 1,
+} only %}

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|default(html_unique_id('bcl-accordion')),
+  flush: bare_layout,
+  items: items,
+  open_item_id: open_item,
+  expand_button: expand_button_label ? {
+    label: expand_button_label,
+  },
+  collapse_button: collapse_button_label ? {
+    label: collapse_button_label,
+    variant: 'secondary',
+  },
+  attributes: attributes,
+} only %}

components/alert/alert.component.yml

@@ -0,0 +1,56 @@
+name: 'Alert'
+description: 'Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.'
+props:
+  type: object
+  properties:
+    variant:
+      title: Variant
+      type: string
+      description: 'The alert variant. Defaults to primary.'
+      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
+    dismissible:
+      title: Dismissible
+      type: boolean
+      description: 'Adds close button to dismiss the alert inline. Defaults to true.'
+    animated_dismiss:
+      title: 'Animated dismiss'
+      type: boolean
+      description: 'Adds fade animation to the dismissible alert. Defaults to true.'
+    heading:
+      title: Heading
+      type: [string, array, object]
+      description: 'The alert heading.'
+    message:
+      title: Message
+      type: [string, array, object]
+      description: 'The alert message.'
+    icon:
+      title: 'Icon name'
+      type: string
+      description: 'Icon name to display in the alert.'
+    icon_path:
+      title: 'Icons path'
+      type: string
+      description: 'Path to icons.'
+    attributes:
+      title: Attributes
+      type: Drupal\Core\Template\Attribute

components/alert/alert.story.twig

@@ -0,0 +1,22 @@
+{% set variants = [
+  'primary',
+  'secondary',
+  'success',
+  'danger',
+  'warning',
+  'info',
+  'light',
+  'dark',
+  'link',
+] %}
+
+{% for variant in variants %}
+  {% include 'oe_bootstrap_theme:alert' with {
+    variant: variant,
+    dismissible: true,
+    animated_dismiss: true,
+    heading: variant|capitalize ~ ' alert',
+    message: 'A simple alert. Check it out!',
+    icon: 'lock',
+  } only %}
+{% endfor %}

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: icon_path|default(bcl_icon_path|default(bcl_icon_path())),
+  icon_name: icon,
+  attributes: attributes,
+} only %}

components/badge/badge.component.yml

@@ -0,0 +1,62 @@
+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.'
+props:
+  type: object
+  properties:
+    label:
+      title: Label
+      type: [string, array, object]
+      description: 'The badge label.'
+    url:
+      title: 'Badge URL'
+      type: string
+      description: 'Converts the badge in a link.'
+    title:
+      title: 'Link title'
+      type: string
+      description: 'Title attribute if the badge is a link.'
+    assistive_text:
+      title: 'Assistive text'
+      type: string
+      description: 'Text to visually hide before the badge label.'
+    background:
+      title: 'Badge background'
+      type: string
+      description: 'Set the background color of the badge. Defaults to primary.'
+      enum:
+        - primary
+        - secondary
+        - success
+        - danger
+        - warning
+        - info
+        - light
+        - dark
+      'meta:enum':
+        primary: 'Primary (default)'
+        secondary: Secondary
+        success: Success
+        danger: Danger
+        warning: Warning
+        info: Info
+        light: Light
+        dark: Dark
+    rounded_pill:
+      title: 'Pill badge'
+      type: boolean
+      description: 'Makes the badge a rounded pill. Defaults to false.'
+    dismissible:
+      title: 'Dismissible badge'
+      type: boolean
+      description: 'Adds a close icon at the end of the badge. Defaults to false.'
+    outline:
+      title: Outline
+      type: boolean
+      description: 'Uses a border instead of a background. Defaults to false.'
+    icon_path:
+      title: 'Icons path'
+      type: string
+      description: 'Path to icons.'
+    attributes:
+      title: Attributes
+      type: Drupal\Core\Template\Attribute

components/badge/badge.story.twig

@@ -0,0 +1,47 @@
+{% set badges = [
+  { label: 'Primary', background: 'primary' },
+  { label: 'Secondary', background: 'secondary' },
+  { label: 'Success', background: 'success' },
+  { label: 'Danger', background: 'danger' },
+  { label: 'Warning', background: 'warning' },
+  { label: 'Info', background: 'info' },
+  { label: 'Light', background: 'light' },
+  { label: 'Dark', background: 'dark' },
+] %}
+
+<div class="d-flex flex-column gap-3">
+  <div class="d-flex flex-wrap gap-2">
+    {% for badge in badges %}
+      {% include 'oe_bootstrap_theme:badge' with badge only %}
+    {% endfor %}
+  </div>
+
+  <div class="d-flex flex-wrap gap-2">
+    {% for badge in badges %}
+      {% include 'oe_bootstrap_theme:badge' with badge|merge({ outline: true }) only %}
+    {% endfor %}
+  </div>
+
+  <div class="d-flex flex-wrap gap-2">
+    {% include 'oe_bootstrap_theme:badge' with {
+      label: 'Rounded pill',
+      background: 'success',
+      rounded_pill: true,
+    } only %}
+
+    {% include 'oe_bootstrap_theme:badge' with {
+      label: 'Linked badge',
+      url: 'https://example.com',
+      title: 'The badge title',
+      background: 'info',
+    } only %}
+
+    {% include 'oe_bootstrap_theme:badge' with {
+      label: 'Dismissible',
+      background: 'danger',
+      rounded_pill: true,
+      dismissible: true,
+      assistive_text: 'Remove badge',
+    } only %}
+  </div>
+</div>

components/badge/badge.twig

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