diff --git a/components/accordion/accordion.component.yml b/components/accordion/accordion.component.yml new file mode 100644 index 000000000..0fca3504e --- /dev/null +++ b/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 diff --git a/components/accordion/accordion.preview-buttons.story.yml b/components/accordion/accordion.preview-buttons.story.yml new file mode 100644 index 000000000..6d942a4c3 --- /dev/null +++ b/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 diff --git a/components/accordion/accordion.preview-default.story.yml b/components/accordion/accordion.preview-default.story.yml new file mode 100644 index 000000000..ff77fb05e --- /dev/null +++ b/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 diff --git a/components/accordion/accordion.twig b/components/accordion/accordion.twig new file mode 100644 index 000000000..fd8fbf6bb --- /dev/null +++ b/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 %} diff --git a/components/alert/alert.component.yml b/components/alert/alert.component.yml new file mode 100644 index 000000000..37d76b846 --- /dev/null +++ b/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 diff --git a/components/alert/alert.preview.story.yml b/components/alert/alert.preview.story.yml new file mode 100644 index 000000000..ccb400e7b --- /dev/null +++ b/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 diff --git a/components/alert/alert.twig b/components/alert/alert.twig new file mode 100644 index 000000000..ba99778c9 --- /dev/null +++ b/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 %} diff --git a/components/alertbcl/alertbcl.component.yml b/components/alertbcl/alertbcl.component.yml new file mode 100644 index 000000000..3009d3245 --- /dev/null +++ b/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 diff --git a/components/alertbcl/alertbcl.preview.story.yml b/components/alertbcl/alertbcl.preview.story.yml new file mode 100644 index 000000000..eba41ada3 --- /dev/null +++ b/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 diff --git a/components/alertbcl/alertbcl.twig b/components/alertbcl/alertbcl.twig new file mode 100644 index 000000000..a1b0e363d --- /dev/null +++ b/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') %} + +
+{% 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 %} +
+ {%- if _heading is not empty -%} +
{{ _heading }}
+ {%- endif -%} + {%- if _message is not empty -%} + {{- _message -}} + {%- endif -%} +
+{%- if _dismissible -%} + +{%- endif -%} +
+ +{% endapply %} diff --git a/components/badge/badge.component.yml b/components/badge/badge.component.yml new file mode 100644 index 000000000..515b6bd9d --- /dev/null +++ b/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 diff --git a/components/badge/badge.preview.story.yml b/components/badge/badge.preview.story.yml new file mode 100644 index 000000000..4bf23ffcd --- /dev/null +++ b/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 diff --git a/components/badge/badge.twig b/components/badge/badge.twig new file mode 100644 index 000000000..2120233e9 --- /dev/null +++ b/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 %} diff --git a/components/banner/banner.component.yml b/components/banner/banner.component.yml new file mode 100644 index 000000000..1d7ba284a --- /dev/null +++ b/components/banner/banner.component.yml @@ -0,0 +1,50 @@ +name: 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: + title: 'Default text banner' + description: 'Gray text banner.' + primary: + title: 'Primary text banner' + description: 'Text banner with a primary style.' + image: + title: 'Image banner' + description: 'Banner with text and an image.' + image_shade: + title: 'Image shade banner' + description: 'Banner with text and a shade image.' +slots: + title: + title: Title + description: 'Title of the banner.' + title_tag: + title: 'Title tag' + description: 'The tag to use for the title. Defaults to div.' + description: + title: Description + description: 'Sub-heading of the banner.' + call_to_action: + title: 'Call to action' + description: 'Link to print a CTA button. Optional.' + image: + title: Image + description: 'URL of the image. Optional.' +props: + type: object + properties: + shade: + title: Shade + description: 'Enable the shadow effect to the image. Defaults to false.' + type: boolean + hero: + title: Hero + description: 'Display as hero banner. Defaults to false.' + type: boolean + full_width: + title: 'Full width' + description: 'Possibility of having a full-width banner within a bootstrap container. Defaults to false.' + type: boolean + centered: + title: Centered + description: 'Whether the content of the banner is centered or not. Defaults to false.' + type: boolean diff --git a/components/banner/banner.preview.story.yml b/components/banner/banner.preview.story.yml new file mode 100644 index 000000000..c0347a078 --- /dev/null +++ b/components/banner/banner.preview.story.yml @@ -0,0 +1,14 @@ +name: Preview +slots: + title: 'EU Budget for the future' + description: 'Innovation, economy, environment and geopolitics' + call_to_action: + label: Subscribe + path: 'https://example.com' + link_style: warning + icon_position: after + icon: + name: chevron-right + image: 'https://picsum.photos/1000/500' +props: + centered: true diff --git a/components/banner/banner.twig b/components/banner/banner.twig new file mode 100644 index 000000000..56c7cc855 --- /dev/null +++ b/components/banner/banner.twig @@ -0,0 +1,34 @@ +{# +/** + * @file + * Banner pattern. + */ +#} +{% block attributes %} + {% set attributes = attributes.addClass([ + 'bg-lighter', + 'text-dark', + ]) + %} +{% endblock %} +{% if centered %} + {% set attributes = attributes.addClass(['text-center'])%} +{% endif %} +{% if call_to_action %} + {% set call_to_action = call_to_action|merge( + {'variant': call_to_action.link_style} + ) %} +{% endif %} +{% include '@oe-bcl/banner' with { + shade: variant == 'image_shade' ? true : shade, + hero: hero, + full_width: full_width, + centered: centered, + title: title, + title_tag: title_tag, + description: description, + link: call_to_action, + image: variant == 'image' or variant == 'image_shade' ? image : '' , + content_classes: content_classes, + attributes: attributes, +} only %} diff --git a/components/blockquote/blockquote.component.yml b/components/blockquote/blockquote.component.yml new file mode 100644 index 000000000..7fd8e92b8 --- /dev/null +++ b/components/blockquote/blockquote.component.yml @@ -0,0 +1,33 @@ +name: Blockquote +description: 'For quoting blocks of content from another source within your document. For more information: https://v5.getbootstrap.com/docs/5.0/content/typography/#blockquotes' +slots: + title: + title: Title + description: 'Title of the blockquote.' + title_tag: + title: 'Title tag' + description: 'The tag to use for the title. Defaults to h2.' + quote: + title: Quote + description: 'The quote text.' + attribution: + title: Attribution + description: 'The name of the quoted person or entity.' + cite: + title: Citation + description: 'The creative work in which the referenced quote was published. Optional.' +props: + type: object + properties: + alignment: + title: 'Text alignment' + description: 'Align the quote in the page.' + type: string + enum: + - left + - center + - end + 'meta:enum': + left: 'left (default)' + center: center + end: end diff --git a/components/blockquote/blockquote.preview.story.yml b/components/blockquote/blockquote.preview.story.yml new file mode 100644 index 000000000..71a2c6de6 --- /dev/null +++ b/components/blockquote/blockquote.preview.story.yml @@ -0,0 +1,6 @@ +name: Preview +slots: + title: 'This is the title of this blockquote.' + quote: 'Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit.' + attribution: 'Cicero in ' + cite: 'de Finibus Bonorum et Malorum' diff --git a/components/blockquote/blockquote.twig b/components/blockquote/blockquote.twig new file mode 100644 index 000000000..69567cc4a --- /dev/null +++ b/components/blockquote/blockquote.twig @@ -0,0 +1,15 @@ +{# +/** + * @file + * Blockquote pattern. + */ +#} +{% include '@oe-bcl/blockquote' with { + 'title': title, + 'title_tag': title_tag, + 'quote': quote, + 'attribution': attribution, + 'cite': cite, + 'alignment': alignment, + 'attributes': attributes, +} only %} diff --git a/components/breadcrumb/breadcrumb.component.yml b/components/breadcrumb/breadcrumb.component.yml new file mode 100644 index 000000000..6702d9b52 --- /dev/null +++ b/components/breadcrumb/breadcrumb.component.yml @@ -0,0 +1,6 @@ +name: Breadcrumb +description: 'Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS. For more information: https://v5.getbootstrap.com/docs/5.0/components/breadcrumb/' +slots: + items: + title: Items + description: 'List with the breadcrumbs items.' diff --git a/components/breadcrumb/breadcrumb.preview.story.yml b/components/breadcrumb/breadcrumb.preview.story.yml new file mode 100644 index 000000000..6745bebf2 --- /dev/null +++ b/components/breadcrumb/breadcrumb.preview.story.yml @@ -0,0 +1,17 @@ +name: Preview +slots: + items: + - + label: Home + path: '#home' + id: '#home' + - + label: Library + path: '#library' + id: '#lib' + - + label: Patterns + path: '#patterns' + id: '#pat' + - + label: Other diff --git a/components/breadcrumb/breadcrumb.twig b/components/breadcrumb/breadcrumb.twig new file mode 100644 index 000000000..579070bbe --- /dev/null +++ b/components/breadcrumb/breadcrumb.twig @@ -0,0 +1,11 @@ +{# +/** + * @file + * Breadcrumb pattern. + */ +#} +{% include '@oe-bcl/breadcrumb' with { + 'links': items, + 'icon_path': bcl_icon_path, + 'attributes': attributes, +} only %} diff --git a/components/button/button.component.yml b/components/button/button.component.yml new file mode 100644 index 000000000..869706dd4 --- /dev/null +++ b/components/button/button.component.yml @@ -0,0 +1,73 @@ +name: Button +description: 'For actions in forms, dialogs, and more with support for multiple sizes, states, and more. For more information: https://v5.getbootstrap.com/docs/5.0/components/buttons/' +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: + label: + title: 'Button label' + description: 'The button label.' + icon: + title: 'Icon name' + description: 'Add an icon to the button. Optional.' +props: + type: object + properties: + outline: + title: 'Button outline' + description: 'Lighter button style removing background color. Defaults to false.' + type: boolean + size: + title: 'Button size' + description: 'Size of the button:' + type: string + enum: + - sm + - md + - lg + 'meta:enum': + sm: small + md: 'medium (default)' + lg: large + type: + title: 'Button type' + description: 'Sets the button behavior type:' + type: string + enum: + - button + - submit + - reset + 'meta:enum': + button: 'button (default)' + submit: submit + reset: reset + disabled: + title: Disabled + description: 'If true, the button will not be enabled when clicking. Defaults to false.' + type: boolean + icon_position: + title: 'Icon position' + description: 'If button has an icon, it can be placed before or after text:' + type: string + enum: + - before + - after + 'meta:enum': + before: before + after: 'after (default)' diff --git a/components/button/button.preview.story.yml b/components/button/button.preview.story.yml new file mode 100644 index 000000000..f82b6876a --- /dev/null +++ b/components/button/button.preview.story.yml @@ -0,0 +1,4 @@ +name: Preview +slots: + label: Submit + icon: arrow-right diff --git a/components/button/button.twig b/components/button/button.twig new file mode 100644 index 000000000..0873078f4 --- /dev/null +++ b/components/button/button.twig @@ -0,0 +1,23 @@ +{# +/** + * @file + * Button pattern. + */ +#} +{% if icon %} + {% set _icon = { + path: bcl_icon_path, + name: icon, + } %} +{% endif %} +{% include '@oe-bcl/button' with { + 'label': label, + 'variant': variant, + 'size': size, + 'type': type, + 'outline': outline, + 'disabled': disabled|default(attributes.disabled), + 'icon': _icon, + 'icon_position': icon_position, + 'attributes': attributes, +} only %} diff --git a/components/card/card.component.yml b/components/card/card.component.yml new file mode 100644 index 000000000..35f879e67 --- /dev/null +++ b/components/card/card.component.yml @@ -0,0 +1,46 @@ +name: Card +description: 'A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options. For more information: https://v5.getbootstrap.com/docs/5.0/components/card' +variants: + default: + title: Default + description: 'Standard bootstrap card.' + search: + title: Search + description: 'Card with special behaviour for print search results items.' +slots: + orientation: + title: Orientation + description: 'Can be set to horizontal or vertical. Defaults to vertical.' + title: + title: Title + description: 'Title of the card.' + title_tag: + title: 'Title tag' + description: 'Title tag of the card. Defaults to h1.' + subtitle: + title: Subtitle + description: 'Card subtitle.' + text: + title: Text + description: 'Card text.' + image: + title: Image + description: 'Image for the card. Optional.' + date: + title: 'Date block' + description: 'If set, presents a date block that uses the same parameters as the bcl date-block pattern. Optional.' + meta: + title: 'Meta items' + description: 'Date or other meta information.' + content: + title: Content + description: 'Card content.' + header: + title: 'Card header' + description: 'Card header content.' + footer: + title: 'Card footer' + description: 'Card footer content.' + badges: + title: Badges + description: 'List of badges for the card.' diff --git a/components/card/card.preview.story.yml b/components/card/card.preview.story.yml new file mode 100644 index 000000000..2d5930f66 --- /dev/null +++ b/components/card/card.preview.story.yml @@ -0,0 +1,25 @@ +name: Preview +slots: + title: 'This is the title of this card.' + subtitle: 'Subtitle card' + text: 'Text card with longer text which is supported' + image: + src: 'https://picsum.photos/1000/500/' + alt: 'Alternative text for card image' + meta: + - + plain_text: Organisation + - + plain_text: Position + content: '' + header: 'Header of card' + footer: 'Footer of card' + badges: + - + label: 'A badge' + - + label: 'A non-rounded badge' + rounded_pill: false + - + label: 'A solid badge' + outline: false diff --git a/components/card/card.twig b/components/card/card.twig new file mode 100644 index 000000000..ebb279932 --- /dev/null +++ b/components/card/card.twig @@ -0,0 +1,63 @@ +{# +/** + * @file + * Card pattern. + */ +#} +{% apply spaceless %} +{% set _content %} + {% if meta is not empty %} + {# Use negative margin to compensate for me-3 on each item. #} +
+ {% for _meta_item in meta %} + {% if _meta_item is not empty %} + {{ _meta_item }} + {% endif %} + {% endfor %} +
+ {% endif %} + {% set _rendered_content %} + {{ content }} + {% endset %} + {% if _rendered_content|trim is not empty %} +
{{ _rendered_content }}
+ {% endif %} +{% endset %} +{% set _badges = [] %} +{% if badges is not empty %} + {% for item in badges %} + {% set _badges = _badges|merge([{ + outline: true, + rounded_pill: true, + }|merge(item)]) %} + {% endfor %} +{% endif %} +{% include '@oe-bcl/card' with { + 'horizontal': orientation == 'horizontal', + 'horizontal_grid': (orientation == 'horizontal') ? { + left_col_classes: 'col-4', + right_col_classes: 'col-8', + gutter: 0, + } : {}, + 'title': title, + 'title_tag': title_tag, + 'subtitle': (subtitle is not empty) ? { + 'content': subtitle, + } : {}, + 'text': (text is not empty) ? { + 'content': text, + 'classes': 'mt-2', + 'tag': 'div', + } : {}, + 'content': _content, + 'image': image ? { + 'path': image.src, + 'alt': image.alt, + }, + 'date': date|default({}), + 'card_header': header, + 'card_footer': footer, + 'badges': _badges, + 'attributes': attributes, +} only %} +{% endapply %} diff --git a/components/card_layout/card_layout.component.yml b/components/card_layout/card_layout.component.yml new file mode 100644 index 000000000..fd359c589 --- /dev/null +++ b/components/card_layout/card_layout.component.yml @@ -0,0 +1,63 @@ +name: 'Card layout' +description: 'In addition to styling the content within cards, Bootstrap includes a few options for laying out series of cards. For more information: https://getbootstrap.com/docs/5.0/components/card/#card-layout' +variants: + group: + title: Group + description: 'Use card groups to render cards as a single, attached element with equal width and height columns.' + grid: + title: Grid + description: 'Use the Bootstrap grid system and its classes to control how many grid columns (wrapped around your cards) are shown per row.' + masonry: + title: Masonry + description: 'It works by placing elements in optimal position based on available vertical space.' +slots: + items: + title: 'Card items' + description: 'An array of card pattern items.' +props: + type: object + properties: + grid_columns: + title: 'Grid columns' + description: 'Number of grid columns:' + type: integer + enum: + - 1 + - 2 + - 3 + 'meta:enum': + 1: '1 (default)' + 2: '2' + 3: '3' + responsiveness: + title: Responsiveness + description: 'Pick a maximum breakpoint with which to have a responsive layout up to by using:' + type: string + enum: + - sm + - md + - lg + - xl + - xxl + responsive_columns: + title: 'Responsive columns' + description: 'Number of responsive columns:' + type: integer + enum: + - 2 + - 3 + gutter: + title: Gutter + description: 'Select the gutter between cards:' + type: integer + enum: + - 0 + - 1 + - 2 + - 3 + - 4 + - 5 + equal_height: + title: 'Equal height' + description: 'If true, all cards will have the same height. Defaults to false.' + type: boolean diff --git a/components/card_layout/card_layout.preview.story.yml b/components/card_layout/card_layout.preview.story.yml new file mode 100644 index 000000000..81ed30a1e --- /dev/null +++ b/components/card_layout/card_layout.preview.story.yml @@ -0,0 +1,65 @@ +name: Preview +slots: + items: + - + title: 'Title card 1' + title_tag: h2 + subtitle: 'Subtitle card 1' + text: 'Text card with longer text which is supported 1' + image: + src: 'https://picsum.photos/1000/500/' + alt: 'Alternative text for card image' + content: + - + type: html_tag + tag: button + value: 'Custom action' + attributes: + class: + - btn + - btn-primary + card_header: 'Header of card 1' + card_footer: 'Footer of card 1' + - + title: 'Title card 2' + title_tag: h2 + subtitle: 'Subtitle card 2' + text: 'Text card with longer text which is supported 2' + image: + src: 'https://picsum.photos/1000/500/' + alt: 'Alternative text for card image' + content: 'Custom test' + card_header: 'Header of card 2' + card_footer: 'Footer of card 2' + - + title: 'Title card 3' + title_tag: h2 + subtitle: 'Subtitle card 3' + text: 'Text card with longer text which is supported 3' + image: + src: 'https://picsum.photos/1000/500/' + alt: 'Alternative text for card image' + content: 'Some representative placeholder content for the first card.' + card_header: 'Header of card 3' + card_footer: 'Footer of card 3' + - + title: 'Title card 4' + title_tag: h2 + subtitle: 'Subtitle card 4' + text: 'Text card with longer text which is supported 4' + content: + - + type: html_tag + tag: button + value: 'Custom action' + attributes: + class: + - btn + - btn-primary + card_header: 'Header of card 4' + card_footer: 'Footer of card 4' +props: + grid_columns: 3 + responsiveness: md + responsive_columns: 3 + gutter: 3 diff --git a/components/card_layout/card_layout.twig b/components/card_layout/card_layout.twig new file mode 100644 index 000000000..c08db7719 --- /dev/null +++ b/components/card_layout/card_layout.twig @@ -0,0 +1,16 @@ +{# +/** + * @file + * Card layout pattern. + */ +#} +{% include '@oe-bcl/card-layout' with { + 'type': variant, + 'items': items|bcl_card_list, + 'grid_columns': grid_columns, + 'responsive_columns': responsive_columns, + 'responsiveness': responsiveness, + 'gutter': gutter, + 'equal_height': type == 'group' ? true : equal_height, + 'attributes': attributes, +} only %} diff --git a/components/card_v2/card_v2.component.yml b/components/card_v2/card_v2.component.yml new file mode 100644 index 000000000..a6e1ff93a --- /dev/null +++ b/components/card_v2/card_v2.component.yml @@ -0,0 +1,54 @@ +name: 'Card V2' +description: 'A card is a flexible and extensible content container. The V2 leaves more possibility for content and render items as we transformed all the content areas into render options. https://v5.getbootstrap.com/docs/5.0/components/card' +group: 'Version 2.x' +variants: + default: + title: Default + description: 'Standard bootstrap card.' + horizontal: + title: Horizontal + description: 'Card shown horizontal with image on the left and content on the right.' +slots: + title: + title: Title + description: 'Card title. Supports markup, e.g. for links.' + media: + title: Media + description: 'Media for the card. Optional.' + content: + title: Content + description: 'Card content.' + header: + title: Header + description: 'Card header content. Optional.' + footer: + title: Footer + description: 'Card footer content. Optional.' +props: + type: object + properties: + tag: + title: Tag + description: 'The tag to use for the card main wrapper. Defaults to "article".' + type: string + default: article + attributes: + title: 'Card attributes' + description: 'Extra attributes for the card' + $ref: 'ui-patterns://attributes' + media_attributes: + title: 'Media attributes' + description: 'Extra attributes for the card media' + $ref: 'ui-patterns://attributes' + content_attributes: + title: 'Content attributes' + description: 'Extra attributes for the card content' + $ref: 'ui-patterns://attributes' + header_attributes: + title: 'Header attributes' + description: 'Extra attributes for the card header' + $ref: 'ui-patterns://attributes' + footer_attributes: + title: 'Footer attributes' + description: 'Extra attributes for the card footer' + $ref: 'ui-patterns://attributes' diff --git a/components/card_v2/card_v2.preview.story.yml b/components/card_v2/card_v2.preview.story.yml new file mode 100644 index 000000000..564af0147 --- /dev/null +++ b/components/card_v2/card_v2.preview.story.yml @@ -0,0 +1,3 @@ +name: Preview +props: + tag: article diff --git a/components/card_v2/card_v2.twig b/components/card_v2/card_v2.twig new file mode 100644 index 000000000..85a431773 --- /dev/null +++ b/components/card_v2/card_v2.twig @@ -0,0 +1,40 @@ +{# +/** + * @file + * Default template for "Card V2" pattern. + * + * For available variables, refer to the pattern declaration. + */ +#} + +{% set _classes = ['card', 'v2'] %} + +{% if variant == 'horizontal' %} + {% set _classes = _classes|merge(['horizontal']) %} +{% endif %} + +<{{ tag }}{{ attributes.addClass(_classes) }}> + {% if media is not empty %} + + {{ media }} + + {% endif %} + {% if header is not empty %} + + {{ header }} + + {% endif %} + + {% if title is not empty %} +
+ {{ title }} +
+ {% endif %} + {{ content }} + + {% if footer is not empty %} + + {{ footer }} + + {% endif %} + diff --git a/components/carousel/carousel.component.yml b/components/carousel/carousel.component.yml new file mode 100644 index 000000000..5d08f61e2 --- /dev/null +++ b/components/carousel/carousel.component.yml @@ -0,0 +1,43 @@ +name: Carousel +description: 'A slideshow component for cycling through elements, like a carousel. For more information: https://v5.getbootstrap.com/docs/5.0/components/carousel/' +slots: + title: + title: Title + description: 'Title of the carousel.' + title_tag: + title: 'Title tag' + description: 'The tag to use for the title. Defaults to h2.' + slides: + title: Slides + description: 'Each slide is an image, a caption and interval of slide movement.' +props: + type: object + properties: + fade: + title: Fade + description: 'Animate slides with a fade transition instead of a slide. Defaults to false.' + type: boolean + show_controls: + title: 'Show controls' + description: 'Enable the controls (prev and next buttons). Defaults to false.' + type: boolean + show_indicators: + title: 'Show indicators' + description: 'With indicators (default: false).' + type: boolean + autoplay: + title: 'Disable autoplay' + description: 'Whether to initialise and animate the carousel at page load. Defaults to true. If false, the carousel will need to be instantiated explicitly via JavaScript.' + type: boolean + autoinit: + title: 'initialize the carousel' + description: 'DEPRECATED in favour of autoplay. Whether to initialise and animate the carousel at page load. Its value will be used only if autoplay is not present.' + type: boolean + disable_touch: + title: 'Disable touch' + description: 'Allow the carousel to swipe on touch. Defaults to false.' + type: boolean + dark_mode: + title: 'Dark mode' + description: 'Enable the dark mode. Defaults to false.' + type: boolean diff --git a/components/carousel/carousel.preview.story.yml b/components/carousel/carousel.preview.story.yml new file mode 100644 index 000000000..14dc51fa7 --- /dev/null +++ b/components/carousel/carousel.preview.story.yml @@ -0,0 +1,30 @@ +name: Preview +slots: + title: 'This is the title of this carousel.' + slides: + - + caption: 'First slide caption' + caption_title: 'First slide title' + interval: 0 + image: + src: 'https://picsum.photos/1000/500/' + alt: 'alt image 1' + link: + label: 'First link' + path: 'https://link.one' + - + caption: 'Second slide caption' + caption_title: 'Second slide title' + interval: 0 + image: + src: 'https://picsum.photos/1000/500/' + alt: 'alt image 1' + link: + label: 'Second link' + path: 'https://link.two' +props: + fade: true + show_controls: true + show_indicators: true + autoplay: true + dark_mode: false diff --git a/components/carousel/carousel.twig b/components/carousel/carousel.twig new file mode 100644 index 000000000..db2e76f7e --- /dev/null +++ b/components/carousel/carousel.twig @@ -0,0 +1,45 @@ +{# +/** + * @file + * Carousel pattern. + */ +#} +{% set _slides = [] %} +{% for slide in slides %} + {% set _image %} + {% block image %} + + {% endblock %} + {% endset %} + {% set _item = slide|merge({ + 'image': _image, + }) %} + {% if slide.link %} + {% set _item = _item|merge({ + 'link': slide.link|merge({ + 'icon_position': 'before', + 'icon': { + 'name': 'link', + 'path': bcl_icon_path, + }, + }), + }) %} + {% endif %} + {% set _slides = _slides|merge([_item]) %} +{% endfor %} +{% include '@oe-bcl/carousel' with { + 'title': title, + 'title_tag': title_tag, + 'id': carousel_id, + 'autoplay': autoplay ?? true, + 'dark': dark_mode, + 'active_item': active_item, + 'items': _slides, + 'fade': fade ?? false, + 'with_controls': show_controls ?? true, + 'prev_label': 'Previous'|t, + 'next_label': 'Next'|t, + 'with_indicators': show_indicators ?? false, + 'disable_touch': disable_touch ?? false, + 'attributes': attributes, +} only %} diff --git a/components/columns/columns.component.yml b/components/columns/columns.component.yml new file mode 100644 index 000000000..001f98b5c --- /dev/null +++ b/components/columns/columns.component.yml @@ -0,0 +1,18 @@ +name: Columns +description: 'Renders content organised in columns of equal width.' +group: 'Version 2.x' +slots: + items: + title: Items + description: 'The items to organize in columns. Accepts any render array.' +props: + type: object + properties: + columns: + title: Columns + description: 'The number of columns. Defaults to 4.' + type: number + tag: + title: Tag + description: 'HTML tag to use for the wrapper. Defaults to "div".' + type: string diff --git a/components/columns/columns.preview.story.yml b/components/columns/columns.preview.story.yml new file mode 100644 index 000000000..facbc304f --- /dev/null +++ b/components/columns/columns.preview.story.yml @@ -0,0 +1,15 @@ +name: Preview +slots: + items: + - + '#plain_text': 'Item 1' + - + '#plain_text': 'Item 2' + - + '#plain_text': 'Item 3' + - + '#plain_text': 'Item 4' + - + '#plain_text': 'Item 5' + - + '#plain_text': 'Item 6' diff --git a/components/columns/columns.twig b/components/columns/columns.twig new file mode 100644 index 000000000..db07e06c8 --- /dev/null +++ b/components/columns/columns.twig @@ -0,0 +1,32 @@ +{# +/** + * @file + * Columns pattern. + * + * Available variables: + * - columns: The number of columns. Defaults to 4. + * - items: The items to organize in columns. + * - tag: HTML tag to use for the wrapper. Defaults to "
". + * - attributes: Attributes to apply to the wrapper. + */ +#} +{% set tag = tag|default('div') %} +{% set columns = columns|default(4) %} +{% + set wrapper_classes = [ + 'columns', + ] +%} +{% + set responsive_grid_styles = [ + '--columns-grid--column-count: ' ~ columns ~ ';', + ] +%} + +<{{ tag }}{{ attributes.addClass(wrapper_classes).setAttribute('style', responsive_grid_styles|join()) }}> + {% for item in items|element_children %} +
+ {{- item -}} +
+ {% endfor %} + diff --git a/components/content_banner/content_banner.component.yml b/components/content_banner/content_banner.component.yml new file mode 100644 index 000000000..1f87965a8 --- /dev/null +++ b/components/content_banner/content_banner.component.yml @@ -0,0 +1,33 @@ +name: 'Content banner' +description: 'Shows the content summary along with the title, image and badges.' +slots: + background: + title: Background + description: 'Set a gray or white background at the content banner. Defaults to white.' + image: + title: Image + description: 'Image of the content.' + image_size: + title: 'Image size' + description: 'The size of the images. Allowed values: md, lg, xl. Defaults to lg.' + title: + title: Title + description: 'Title of the content banner.' + title_tag: + title: 'Title tag' + description: 'The tag to use for the title. Defaults to h1.' + action_bar: + title: 'Action bar region' + description: 'Action bar region. E.g. for action buttons.' + content: + title: Content + description: 'Text with the summary of the content.' + meta: + title: Meta + description: 'Miscellaneous information as date, author, etc.' + badges: + title: Badges + description: 'List of badges.' + links: + title: Links + description: 'List of links.' diff --git a/components/content_banner/content_banner.preview.story.yml b/components/content_banner/content_banner.preview.story.yml new file mode 100644 index 000000000..b711cec94 --- /dev/null +++ b/components/content_banner/content_banner.preview.story.yml @@ -0,0 +1,29 @@ +name: Preview +slots: + background: gray + image: + src: 'https://picsum.photos/255/255/' + alt: 'Alternative text for content banner image' + title: 'This is the title of this page.' + action_bar: '
' + content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse volutpat ultricies massa, a dapibus libero porta nec. Sed facilisis dictum vestibulum. Fusce commodo hendrerit diam, pretium tempus leo varius sit amet. Etiam interdum, orci at sagittis luctus, lorem libero tempus mauris, a fermentum libero orci semper lacus. Duis tristique fringilla magna, eu egestas dolor molestie non.' + meta: + - + plain_text: '26 May 2020' + - + plain_text: '1 comment' + badges: + - + label: 'Primary badge' + rounded_pill: true + outline: false + - + label: 'Secondary badge' + rounded_pill: true + links: + - + label: 'Link 1' + path: /example-1.html + - + label: 'Link 2' + path: /example-2.html diff --git a/components/content_banner/content_banner.twig b/components/content_banner/content_banner.twig new file mode 100644 index 000000000..b83ca1fcf --- /dev/null +++ b/components/content_banner/content_banner.twig @@ -0,0 +1,50 @@ +{# +/** + * @file + * Content banner pattern. + */ +#} +{% apply spaceless %} +{# Render the 'meta' items into the content variable. #} +{% set _content %} + {% set content_attributes = create_attribute().addClass(['mt-4', 'card-content']) %} + {% if meta is not empty %} + {% set content_attributes = create_attribute().addClass('card-content') %} +
+ {% for _meta_item in meta %} + {% if _meta_item is not empty %} + {{ _meta_item }} + {% endif %} + {% endfor %} +
+ {% endif %} + {% if content is not empty %} + {{ content }}
+ {% endif %} +{% endset %} + +{# Enable 'outline' in every badge. #} +{% set _badges = [] %} +{% for _badge in badges %} + {% set _badge = _badge|merge({ + 'outline': _badge.outline ?? true, + }) %} + {% set _badges = _badges|merge([_badge]) %} +{% endfor %} + +{% include '@oe-bcl/bcl-content-banner/bcl-content-banner.html.twig' with { + 'background': background, + 'title': title, + 'title_tag': title_tag, + 'content': _content, + 'image': image ? { + 'path': image.src, + 'alt': image.alt, + } : {}, + 'image_size': image_size ?? 'lg', + 'badges': _badges, + 'links': links, + 'action_bar': action_bar, + 'attributes': attributes, +} only %} +{% endapply %} diff --git a/components/date_block/date_block.component.yml b/components/date_block/date_block.component.yml new file mode 100644 index 000000000..62b929ce0 --- /dev/null +++ b/components/date_block/date_block.component.yml @@ -0,0 +1,6 @@ +name: 'Date block' +description: 'Date block allows to present a block that can be placed in other components.' +slots: + date: + title: Date + description: 'A DateTime object.' diff --git a/components/date_block/date_block.preview.story.yml b/components/date_block/date_block.preview.story.yml new file mode 100644 index 000000000..73397796d --- /dev/null +++ b/components/date_block/date_block.preview.story.yml @@ -0,0 +1,3 @@ +name: Preview +slots: + date: '2021-05-26' diff --git a/components/date_block/date_block.twig b/components/date_block/date_block.twig new file mode 100644 index 000000000..7e7a60502 --- /dev/null +++ b/components/date_block/date_block.twig @@ -0,0 +1,14 @@ +{# +/** + * @file + * Date block pattern. + */ +#} + +{% include '@oe-bcl/date-block' with { + 'day': date|date('d'), + 'month': date|date('M'), + 'year': date|date('Y'), + 'date_time': date|date('Y-m-d'), + 'attributes': attributes, +} only %} diff --git a/components/description_list/description_list.component.yml b/components/description_list/description_list.component.yml new file mode 100644 index 000000000..8d8d5ae7c --- /dev/null +++ b/components/description_list/description_list.component.yml @@ -0,0 +1,24 @@ +name: 'Description list' +description: 'Description lists are used to display and organise content that belongs to a category with a descriptions. Common use cases include glossary type lists or a list of speakers with their biographies..' +slots: + title: + title: Title + description: 'Title of the description list.' + title_tag: + title: 'Title tag' + description: 'The tag to use for the title. Defaults to h2.' + items: + title: 'List items' + description: 'Each item is composed by one or more terms and one or more definitions. Each term entry can have an icon.' +props: + type: object + properties: + orientation: + title: Orientation + type: string + enum: + - default + - horizontal + 'meta:enum': + default: Default + horizontal: Horizontal diff --git a/components/description_list/description_list.preview.story.yml b/components/description_list/description_list.preview.story.yml new file mode 100644 index 000000000..cf11f2189 --- /dev/null +++ b/components/description_list/description_list.preview.story.yml @@ -0,0 +1,42 @@ +name: Preview +slots: + title: 'This is the title of this description list.' + items: + - + term: + - + label: 'Single label with icon' + icon: geo-alt-fill + definition: 'Description of first term text goes here.' + - + term: + - + label: 'First label without icon' + - + label: 'Second label' + icon: upload + definition: 'Description of second term text goes here.' + - + term: + - + label: + - + '#markup': 'A label with some markup.' + definition: + - + label: 'First description of third term text goes here.' + - + label: 'Second description of third term text goes here.' + - + term: + - + label: 'Custom icon size' + icon: + name: calendar-x + size: xl + definition: 'This is a bigger icon.' + - + term: 'A single term without icon.' + definition: 'Yet another definition text.' +props: + orientation: horizontal diff --git a/components/description_list/description_list.twig b/components/description_list/description_list.twig new file mode 100644 index 000000000..11d9d21d6 --- /dev/null +++ b/components/description_list/description_list.twig @@ -0,0 +1,13 @@ +{# +/** + * @file + * Description list pattern. + */ +#} +{% include '@oe-bcl/description-list' with { + 'title': title, + 'title_tag': title_tag, + 'items': items, + 'variant': orientation, + 'attributes': attributes, +} only %} diff --git a/components/dropdown/dropdown.component.yml b/components/dropdown/dropdown.component.yml new file mode 100644 index 000000000..16e989f0e --- /dev/null +++ b/components/dropdown/dropdown.component.yml @@ -0,0 +1,16 @@ +name: Dropdown +description: 'Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin. For more information visit: https://v5.getbootstrap.com/docs/5.0/components/dropdowns/' +slots: + button_label: + title: 'Dropdown button label' + description: 'The label to show in the toggle button.' + items: + title: 'Dropdown items' + description: 'An array of dropdown items.' +props: + type: object + properties: + dark_mode: + title: 'Dark mode' + description: 'When enabled, sets dark mode. Defaults to false.' + type: boolean diff --git a/components/dropdown/dropdown.preview.story.yml b/components/dropdown/dropdown.preview.story.yml new file mode 100644 index 000000000..efe3f4d38 --- /dev/null +++ b/components/dropdown/dropdown.preview.story.yml @@ -0,0 +1,20 @@ +name: Preview +slots: + button_label: 'Dropdown toggle' + items: + - + label: 'I am a link' + path: '#' + - + label: 'I am a button' + button: true + - + divider: true + - + label: 'I am a disabled button' + button: true + disabled: true + - + label: 'I am an active button' + button: true + active: true diff --git a/components/dropdown/dropdown.twig b/components/dropdown/dropdown.twig new file mode 100644 index 000000000..394da177c --- /dev/null +++ b/components/dropdown/dropdown.twig @@ -0,0 +1,15 @@ +{# +/** + * @file + * Dropdown pattern. + */ +#} +{% include '@oe-bcl/dropdown' with { + 'trigger': { + label: button_label + }, + 'link': false, + 'dark': dark_mode, + 'id': dropdown_id, + 'items': items +} only %} diff --git a/components/fact_figures/fact_figures.component.yml b/components/fact_figures/fact_figures.component.yml new file mode 100644 index 000000000..f532e31f6 --- /dev/null +++ b/components/fact_figures/fact_figures.component.yml @@ -0,0 +1,18 @@ +name: 'Fact and Figures' +description: 'Fact and Figures pattern used for the paragraph of same type.' +slots: + title: + title: Title + description: 'Title of the facts & figures section.' + title_tag: + title: 'Title tag' + description: 'The tag to use for the title. Defaults to h2.' + columns: + title: Columns + description: 'One, two or three columns layout for responsive. Defaults to 3.' + items: + title: Items + description: 'List of facts, with icon, title, subtitle and content.' + link: + title: Link + description: 'Additional link to be displayed after facts. A link pattern definition must be passed.' diff --git a/components/fact_figures/fact_figures.preview.story.yml b/components/fact_figures/fact_figures.preview.story.yml new file mode 100644 index 000000000..953112870 --- /dev/null +++ b/components/fact_figures/fact_figures.preview.story.yml @@ -0,0 +1,38 @@ +name: Preview +slots: + title: 'This is the title of this facts & figures section.' + columns: 2 + items: + - + icon: x-diamond-fill + title: '1529 JIRA Ticket' + subtitle: 'Jira Tickets' + description: 'Nunc condimentum sapien ut nibh finibus suscipit vitae at justo. Morbi quis odio faucibus, commodo tortor id, elementum liber' + - + icon: ui-checks + title: '337 Features' + subtitle: 'Feature tickets' + description: 'Turpis varius congue venenatis, erat dui feugiat felis.' + - + icon: wallet-fill + title: '107 Tests' + subtitle: 'Test tickets' + description: 'Cras vestibulum efficitur mi, quis porta tellus rutrum ut. Quisque at pulvinar sem.' + - + icon: file-code-fill + title: '5670 Variants' + subtitle: 'Test variants' + description: 'Aliquam lacinia diam eu sem malesuada, in interdum ante bibendum.' + - + icon: puzzle-fill + title: '345 Dev Ticket' + subtitle: 'Jira ticket' + description: 'Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis nec lectus tortor.' + - + icon: eye-fill + title: '43 Components' + subtitle: 'Figma components' + description: 'Sed efficitur bibendum rutrum. Nunc feugiat congue augue ac consectetur.' + link: + label: 'Read more' + path: /example diff --git a/components/fact_figures/fact_figures.twig b/components/fact_figures/fact_figures.twig new file mode 100644 index 000000000..4f5c94bbd --- /dev/null +++ b/components/fact_figures/fact_figures.twig @@ -0,0 +1,16 @@ +{# +/** + * @file + * Fact Figures pattern. + */ +#} +{% include '@oe-bcl/bcl-fact-figures/fact-figures.html.twig' with { + 'title': title, + 'title_tag': title_tag, + 'items': items, + 'responsive_columns': columns, + 'equal_height': true, + 'icon_path': bcl_icon_path, + 'link_more': link, + 'attributes': attributes, +} only %} diff --git a/components/featured_media/featured_media.component.yml b/components/featured_media/featured_media.component.yml new file mode 100644 index 000000000..f82967cde --- /dev/null +++ b/components/featured_media/featured_media.component.yml @@ -0,0 +1,36 @@ +name: 'Featured Media' +description: 'Pattern used for the presentation of Featured media paragraph. Media types can be iframe, video, image or featured item (media + text).' +slots: + caption: + title: Caption + description: 'Description of the featured media.' + embedded_media: + title: 'Embedded media' + description: 'The embedded media.' + image: + title: Image + description: 'The image for the image variant.' + ratio: + title: Ratio + description: 'The embedded media aspect ratio. One of 1x1, 4x3, 16x9 or 21x9.' + link: + title: Link + description: 'Call to action link with icon. A link pattern definition must be passed.' + title: + title: Title + description: 'Title of the featured media.' + title_tag: + title: 'Title tag' + description: 'Title tag of the featured media. Defaults to h2' + subtitle_tag: + title: 'Subtitle tag' + description: 'Subtitle tag of the featured media. Defaults to h3' + subtitle: + title: Subtitle + description: 'The title, displayed below the title but before the text.' + text: + title: 'Full text' + description: 'The full rich text.' + text_position: + title: 'Text position' + description: 'The position of the text when present. Either left or right. Defaults to left.' diff --git a/components/featured_media/featured_media.preview.story.yml b/components/featured_media/featured_media.preview.story.yml new file mode 100644 index 000000000..7f83561e8 --- /dev/null +++ b/components/featured_media/featured_media.preview.story.yml @@ -0,0 +1,16 @@ +name: Preview +slots: + caption: 'Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit.' + image: + src: 'https://picsum.photos/1200/600/' + alt: 'Alternative text for paragraph image' + name: Example + link: + label: 'View all' + path: '#example' + title: 'This is the title of this featured media.' + title_tag: h2 + subtitle_tag: h3 + subtitle: 'Lorem ipsum' + text: + '#markup': '

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Non enim iam stirpis bonum quaeret, sed animalis. Ego vero volo in virtute vim esse quam maximam; A mene tu? Quid, quod res alia tota est? Duo Reges: constructio interrete.

' diff --git a/components/featured_media/featured_media.twig b/components/featured_media/featured_media.twig new file mode 100644 index 000000000..7b9661fd0 --- /dev/null +++ b/components/featured_media/featured_media.twig @@ -0,0 +1,76 @@ +{# +/** + * @file + * Featured media pattern. + */ +#} +{% macro featured_media(embedded_media, image, caption, ratio) %} + {% include '@oe-bcl/featured-media' with { + 'embedded_media': embedded_media, + 'image': image, + 'content': caption, + 'content_classes': 'bg-light p-3', + 'ratio': ratio, + } only %} +{% endmacro %} + + + {% if subtitle or text or link %} + {% set text_alignment_class = 'order-1' %} + {% set video_alignment_class = 'order-2' %} + {% if text_position == 'right' %} + {% set text_alignment_class = 'order-2' %} + {% set video_alignment_class = 'order-1' %} + {% endif %} + + {# Backward compatibily setting: Text always on top in mobile viewports. #} + {% if featured_media_mobile_text_top %} + {% set text_alignment_class = 'order-md-1' %} + {% set video_alignment_class = 'order-md-2' %} + {% if text_position == 'right' %} + {% set text_alignment_class = 'order-md-2' %} + {% set video_alignment_class = 'order-md-1' %} + {% endif %} + {% endif %} + + {%- if title is not empty -%} + {% include '@oe-bcl/heading' with { + title: title, + title_tag: title_tag|default('h2'), + attributes: create_attribute().addClass('mb-4'), + } only %} + {%- endif -%} +
+
+ {% if subtitle %} + {% if subtitle_tag is not empty %} + {% set _subtitle_tag = subtitle_tag %} + {% elseif featured_media_subtitle_tag_h5 %} + {% set _subtitle_tag = 'h5' %} + {% else %} + {% set _subtitle_tag = title is not empty ? 'h3' : 'h2' %} + {% endif %} + <{{ _subtitle_tag }} class="text-secondary">{{ subtitle }} + {% endif %} + {{ text }} + {% if link %} + {{ pattern('link', { + label: link.label, + path: link.path, + variant: 'link', + icon: link.icon + }) }} + {% endif %} +
+
+ {{ _self.featured_media(embedded_media, image, caption, ratio) }} +
+
+ {% else %} +
+
+ {{ _self.featured_media(embedded_media, image, caption, ratio) }} +
+
+ {% endif %} + diff --git a/components/file/file.component.yml b/components/file/file.component.yml new file mode 100644 index 000000000..875ecb216 --- /dev/null +++ b/components/file/file.component.yml @@ -0,0 +1,18 @@ +name: File +description: 'File component is used to show info about files that can be downloaded, together with their translations.' +slots: + title: + title: Title + description: 'Title of the file.' + title_tag: + title: 'Title tag' + description: 'The tag to use for the title. Defaults to h2.' + link_label: + title: 'Download link label' + description: 'The label to use for the download links. Defaults to "Download".' + file: + title: File + description: 'A FileValueObject instance.' + translations: + title: Translations + description: 'A list of FileValueObject instances pointing to translations of the file. Optional.' diff --git a/components/file/file.preview.story.yml b/components/file/file.preview.story.yml new file mode 100644 index 000000000..49a268c2a --- /dev/null +++ b/components/file/file.preview.story.yml @@ -0,0 +1,29 @@ +name: Preview +slots: + title: 'This is the title of this file.' + file: + title: 'Example document' + mime: application/pdf + url: 'https://example.com/document.pdf' + size: '4444' + name: document.pdf + language_code: en + translations: + - + language_code: bg + name: translation_bg.docx + mime: application/msword + size: '40391' + url: /translation_bg.docx + - + language_code: es + name: translation_es.pdf + mime: application/pdf + size: '425' + url: /translation_es.html + - + language_code: fr + name: translation_fr.pdf + mime: application/pdf + size: '121' + url: 'https://example.com/translation_fr.html' diff --git a/components/file/file.twig b/components/file/file.twig new file mode 100644 index 000000000..af72916f0 --- /dev/null +++ b/components/file/file.twig @@ -0,0 +1,76 @@ +{# +/** + * @file + * File download pattern. + */ +#} +{% apply spaceless %} +{% set _translations = [] %} + +{% if translations is not empty and translations is iterable %} + {% set _items = [] %} + {% for _item in translations %} + {% set _translation_meta = '(' ~ _item.extension|upper ~ ')' %} + {% if _item.size %} + {% set _translation_meta = '(' ~ _item.size|format_size ~ ' - ' ~ _item.extension|upper ~ ')' %} + {% endif %} + + {% set _items = _items|merge([{ + title: _item.title, + language: _item.language_code|to_native_language, + meta: _translation_meta, + download: { + label: link_label|default('Download'|t), + path: _item.url, + }, + }]) %} + {% endfor %} + {% set _translations = { + label: { + path: bcl_icon_path, + label: 'Other languages (@count)'|t({'@count': _items|length}), + icon_position: 'after', + icon: { + name: 'caret-down-fill', + size: '2xs', + path: bcl_icon_path, + } + }, + items: _items, + } %} +{% endif %} + +{% set _meta = '(' ~ file.extension|upper ~ ')' %} +{% if file.size %} + {% set _meta = '(' ~ file.size|format_size ~ ' - ' ~ file.extension|upper ~ ')' %} +{% endif %} +{% endapply %} + +{% if file is not empty %} +
+ {% include '@oe-bcl/file' with { + 'title': title, + 'title_tag': title_tag, + 'icon_path': bcl_icon_path, + 'item_title': file.title, + 'language': file.language_code|to_native_language, + 'meta': _meta, + 'icon': { + 'path': bcl_icon_path, + 'name': file.extension|to_file_icon, + 'size': '2xl', + }, + 'download': { + 'label': link_label|default('Download'|t), + 'path': file.url, + 'icon': { + 'path': bcl_icon_path, + 'name': 'download', + 'size': 'fluid', + }, + }, + 'translation': _translations, + 'attributes': attributes, + } only %} +
+{% endif %} diff --git a/components/gallery/gallery.component.yml b/components/gallery/gallery.component.yml new file mode 100644 index 000000000..01434950e --- /dev/null +++ b/components/gallery/gallery.component.yml @@ -0,0 +1,12 @@ +name: Gallery +description: 'A collection of images and videos.' +slots: + title: + title: Title + description: 'Title of the gallery.' + title_tag: + title: 'Title tag' + description: 'The tag to use for the title. Defaults to h2.' + items: + title: Items + description: 'A list of ' diff --git a/components/gallery/gallery.preview.story.yml b/components/gallery/gallery.preview.story.yml new file mode 100644 index 000000000..bf93a1093 --- /dev/null +++ b/components/gallery/gallery.preview.story.yml @@ -0,0 +1,104 @@ +name: Preview +slots: + title: 'This is the title of gallery.' + items: + - + media: + '#markup': '' + thumbnail: + '#markup': 'Example alt text' + caption_title: 'Bio-defence preparedness programme' + caption: 'Caption first item' + - + media: + '#markup': 'Cat media image alt' + thumbnail: + '#markup': 'Cat thumbnail alt' + thumbnail: + '#markup': 'Lisbon thumbnail alt' + caption_title: Lisbon + caption: 'Meanwhile in Lisbon, the capital of Portugal' + - + media: + '#theme': image + '#uri': 'https://picsum.photos/id/112/800/600/' + '#title': 'Kiev image media title' + '#alt': 'Kiev image media alt' + thumbnail: + '#markup': 'Kiev thumbnail alt' + caption_title: Kiev + caption: 'Meanwhile in Kiev, the capital of Ukraine' + - + media: + '#markup': 'Paris image media alt' + thumbnail: + '#markup': 'Paris thumbnail alt' + caption_title: Paris + caption: 'Meanwhile in Paris, the capital of France' + - + media: + '#markup': 'Rome image media alt' + thumbnail: + '#markup': 'Rome thumbnail alt' + caption_title: Rome + caption: 'Meanwhile in Rome, the capital of Italy' + - + media: + '#markup': 'Madrid image media alt' + thumbnail: + '#markup': 'Madrid thumbnail alt' + caption_title: Spain + caption: 'Meanwhile in Madrid, the capital of Spain' + - + media: + '#markup': 'Brussels image media alt' + thumbnail: + '#markup': 'Brussels thumbnail alt' + caption_title: Brussels + caption: 'Meanwhile in Brussels, the capital of Belgium' + - + media: + '#markup': 'Budapest image media alt' + thumbnail: + '#markup': 'Budapest thumbnail alt' + caption_title: Budapest + caption: 'Meanwhile in Budapest, the capital of Hungary' + - + media: + '#markup': '' + thumbnail: + '#markup': 'YouTube thumbnail alt' + caption_title: 'Safer electric vehicles - through harmonised test procedures for battery technology' + - + media: + '#markup': 'Stockholm image media alt' + thumbnail: + '#markup': 'Stockholm thumbnail alt' + caption_title: Stockholm + caption: 'Meanwhile in Stockholm, the capital of Sweden' + - + media: + '#markup': 'Helsinki image media alt' + thumbnail: + '#markup': 'Helsinki thumbnail alt' + caption_title: Helsinki + caption: 'Meanwhile in Helsinki, the capital of Finland' + - + media: + '#markup': 'Tallinn image media alt' + thumbnail: + '#markup': 'Tallinn thumbnail alt' + caption_title: Tallinn + caption: 'Meanwhile in Tallinn, the capital of Estonia' + - + media: + '#markup': 'Vilnius image media alt' + thumbnail: + '#markup': 'Vilnius thumbnail alt' + caption_title: Vilnius + caption: 'Meanwhile in Vilnius, the capital of Lithuania' diff --git a/components/gallery/gallery.twig b/components/gallery/gallery.twig new file mode 100644 index 000000000..a6d0dfd84 --- /dev/null +++ b/components/gallery/gallery.twig @@ -0,0 +1,30 @@ +{# +/** + * @file + * Gallery pattern. + */ +#} +{% extends '@oe-bcl/gallery' %} + +{% set toggle_collapsed = 'View the full gallery (%d)'|t %} +{% set toggle_expanded = 'View less'|t %} +{% set items = bcl_gallery_items(items|default([])) %} +{% set icon_path = bcl_icon_path %} + +{% block carousel %} + {# Captions are not rendered for playable medias in the carousel. #} + {% include '@oe-bcl/carousel' with { + id: _carousel_id, + with_controls: true, + with_indicators: false, + prev_label: _prev_label, + next_label: _next_label, + autoplay: false, + items: items|map(_item => _item|merge({ + caption: _item.is_playable ? '' : _item.caption, + caption_title: _item.is_playable ? '' : _item.caption_title, + link: _item.is_playable ? '' : _item.link, + })), + } only %} +{% endblock %} + diff --git a/components/icon/icon.component.yml b/components/icon/icon.component.yml new file mode 100644 index 000000000..954f4670c --- /dev/null +++ b/components/icon/icon.component.yml @@ -0,0 +1,9 @@ +name: Icon +description: 'A component to show an icon. For more information visit: https://icons.getbootstrap.com/.' +slots: + name: + title: 'Name of icon' + description: 'A list of icon names (Empty by default). It can be a set or a subset of icon names that are present in the svg file:' + size: + title: 'Size of icon' + description: 'A list of icon sizes.' diff --git a/components/icon/icon.preview.story.yml b/components/icon/icon.preview.story.yml new file mode 100644 index 000000000..82c6501aa --- /dev/null +++ b/components/icon/icon.preview.story.yml @@ -0,0 +1,4 @@ +name: Preview +slots: + name: eye + size: xl diff --git a/components/icon/icon.twig b/components/icon/icon.twig new file mode 100644 index 000000000..656d5add6 --- /dev/null +++ b/components/icon/icon.twig @@ -0,0 +1,12 @@ +{# +/** + * @file + * Icon pattern. + */ +#} +{% include '@oe-bcl/icon' with { + 'name': name, + 'path': bcl_icon_path, + 'size': size, + 'attributes': attributes, +} only %} diff --git a/components/inpage_navigation/inpage_navigation.component.yml b/components/inpage_navigation/inpage_navigation.component.yml new file mode 100644 index 000000000..97d380b43 --- /dev/null +++ b/components/inpage_navigation/inpage_navigation.component.yml @@ -0,0 +1,19 @@ +name: 'Inpage navigation' +description: 'Inpage navigation adds a navigation element and content element so when scrolling the active element is indicated in the nav part.' +slots: + title: + title: Title + description: 'Title of the inpage navigation element.' + links: + title: Links + description: 'Array of links used in the navigation part.' + content: + title: Content + description: 'Content part of the inpage navigation.' +props: + type: object + properties: + dynamic_active: + title: 'Dynamic Active' + description: 'Automated behaviour for the active item in mobile.' + type: boolean diff --git a/components/inpage_navigation/inpage_navigation.preview.story.yml b/components/inpage_navigation/inpage_navigation.preview.story.yml new file mode 100644 index 000000000..f66373c8c --- /dev/null +++ b/components/inpage_navigation/inpage_navigation.preview.story.yml @@ -0,0 +1,19 @@ +name: Preview +slots: + title: 'This is the title of this inpage navigation.' + links: + - + label: 'Heading 1' + path: '#item-1' + - + label: 'Heading 2 with a long title going on several lines' + path: '#item-2' + - + label: 'Heading 3' + path: '#item-3' + - + label: 'Heading 4' + path: '#item-4' + content: '

Heading 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut imperdiet neque, finibus pretium metus. Mauris sed consequat purus, eget facilisis arcu. Vestibulum accumsan turpis sed dui placerat, in varius turpis consequat. Pellentesque porta id lorem sit amet efficitur. Sed id ipsum quis metus venenatis facilisis sit amet at mi.

Heading 2 with a long title going on several lines

Ut placerat tellus dui, ut tempor orci pulvinar eget. Maecenas hendrerit risus vel tempus tincidunt. Suspendisse vitae ante nibh. Ut faucibus porttitor dui, sit amet pharetra nulla aliquam non. Donec massa mauris, convallis quis nunc nec, ultrices dapibus urna. In vel elementum ipsum, luctus volutpat odio. Maecenas aliquet justo in purus placerat dictum.

Heading 3

Curabitur vehicula accumsan placerat. Aliquam eget tincidunt ex, sed elementum justo. Sed faucibus ultrices finibus. Vivamus pellentesque nisl ac interdum ultrices. Quisque ornare sit amet est sed pretium. Aliquam eu leo vitae nisi egestas volutpat ut non lectus. Sed condimentum tempus semper.

Heading 4

Nullam dignissim quam tellus, eget pretium tortor vulputate quis. In vehicula enim vitae lorem fermentum convallis. Phasellus bibendum, turpis sit amet faucibus interdum, dui lorem iaculis enim, ac eleifend odio tellus eget dolor. Maecenas nunc ante, tincidunt nec risus ut, eleifend tempor nisi.

' +props: + dynamic_active: true diff --git a/components/inpage_navigation/inpage_navigation.twig b/components/inpage_navigation/inpage_navigation.twig new file mode 100644 index 000000000..e0ce62cc4 --- /dev/null +++ b/components/inpage_navigation/inpage_navigation.twig @@ -0,0 +1,24 @@ +{# +/** + * @file + * Inpage navigation pattern. + */ +#} +{% if links is not empty %} + {{ attach_library('oe_bootstrap_theme/inpage_navigation') }} +{% endif %} +
+
+ {% include '@oe-bcl/inpage-navigation' with { + 'title': title, + 'links': links, + 'icon_path': bcl_icon_path, + 'id': inpage_navigation_id, + 'dropdown_id': inpage_navigation_dropdown_id, + 'dynamic_active': dynamic_active, + } only %} +
+
+ {{ content }} +
+
diff --git a/components/link/link.component.yml b/components/link/link.component.yml new file mode 100644 index 000000000..c11d5c509 --- /dev/null +++ b/components/link/link.component.yml @@ -0,0 +1,37 @@ +name: Link +description: 'A simple link.' +slots: + label: + title: Label + description: 'The button label' + path: + title: URL + description: 'The button URL (optional).' + icon: + title: Icon + description: 'An icon name or an icon array definition (optional).' +props: + type: object + properties: + disabled: + title: Disabled + description: 'When enabled, sets the link as disabled. Defaults to false.' + type: boolean + standalone: + title: Standalone + description: 'When enabled, adds extra class to underline the link item when hover. Defaults to false.' + type: boolean + icon_position: + title: 'Icon position' + description: 'The position of the icon in relation to the text of the link:' + type: string + enum: + - before + - after + 'meta:enum': + before: before + after: 'after (default)' + remove_icon_spacers: + title: 'Remove icon spacers' + description: 'When enabled, prevents margins to be added to the icon. Defaults to false.' + type: boolean diff --git a/components/link/link.preview.story.yml b/components/link/link.preview.story.yml new file mode 100644 index 000000000..77ff1562a --- /dev/null +++ b/components/link/link.preview.story.yml @@ -0,0 +1,7 @@ +name: Preview +slots: + label: Submit + path: 'http://example.com' + icon: key +props: + standalone: 'true' diff --git a/components/link/link.twig b/components/link/link.twig new file mode 100644 index 000000000..88752d30a --- /dev/null +++ b/components/link/link.twig @@ -0,0 +1,16 @@ +{# +/** + * @file + * Link pattern. + */ +#} +{% include '@oe-bcl/link' with { + 'label': label, + 'path': path, + 'disabled': disabled, + 'icon': icon, + 'icon_position': icon_position, + 'remove_icon_spacers': remove_icon_spacers, + 'standalone': standalone, + 'attributes': attributes, +} only %} diff --git a/components/links_block/links_block.component.yml b/components/links_block/links_block.component.yml new file mode 100644 index 000000000..4c1234df4 --- /dev/null +++ b/components/links_block/links_block.component.yml @@ -0,0 +1,35 @@ +name: 'Links block' +description: 'List of links with an optional title.' +slots: + title: + title: Title + description: 'Title of the links block.' + title_tag: + title: 'Title tag' + description: 'The tag to use for the title. Defaults to h2.' + links: + title: Links + description: 'Array of links.' +props: + type: object + properties: + background: + title: Background + description: 'Determines the background of the block:' + type: string + enum: + - gray + - transparent + 'meta:enum': + gray: 'gray (default)' + transparent: transparent + orientation: + title: Orientation + description: 'Determines if the list of links is shown vertically or horizontally:' + type: string + enum: + - vertical + - horizontal + 'meta:enum': + vertical: 'vertical (default)' + horizontal: horizontal diff --git a/components/links_block/links_block.preview.story.yml b/components/links_block/links_block.preview.story.yml new file mode 100644 index 000000000..f5999109b --- /dev/null +++ b/components/links_block/links_block.preview.story.yml @@ -0,0 +1,16 @@ +name: Preview +slots: + title: 'This is the title of this links block element.' + links: + - + label: 'European Commission' + url: 'http://link-1.com' + - + label: Priorities + url: 'http://link-2.com' + - + label: 'Jobs, Growth and Investment' + url: 'http://link-3.com' + - + label: 'More channels...' + url: 'http://link-4.com' diff --git a/components/links_block/links_block.twig b/components/links_block/links_block.twig new file mode 100644 index 000000000..e4dea57b0 --- /dev/null +++ b/components/links_block/links_block.twig @@ -0,0 +1,14 @@ +{# +/** + * @file + * Links block pattern. + */ +#} +{% include '@oe-bcl/links-block' with { + background: background, + variant: orientation, + title: title, + title_tag: title_tag, + links: links, + attributes: attributes, +} only %} diff --git a/components/list_group/list_group.component.yml b/components/list_group/list_group.component.yml new file mode 100644 index 000000000..a0e9b87e6 --- /dev/null +++ b/components/list_group/list_group.component.yml @@ -0,0 +1,25 @@ +name: 'List Group' +description: 'List groups are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within. For more information visit https://v5.getbootstrap.com/docs/5.0/components/list-group/' +slots: + items: + title: 'List group items' + description: 'Array of objects: List item object or Button and Link component object if type is actionable.' +props: + type: object + properties: + type: + title: Type + description: 'The list of possible list types is:' + type: string + enum: + - unordered + - ordered + - actionable + 'meta:enum': + unordered: 'unordered (default)' + ordered: ordered + actionable: actionable + flush: + title: Flush + description: 'When enabled, adds flush to remove some borders and rounded corners to render list group items edge-to-edge in a parent container (e.g., cards). Defaults to false.' + type: boolean diff --git a/components/list_group/list_group.preview.story.yml b/components/list_group/list_group.preview.story.yml new file mode 100644 index 000000000..292ba0c3b --- /dev/null +++ b/components/list_group/list_group.preview.story.yml @@ -0,0 +1,26 @@ +name: Preview +slots: + items: + - + variant: danger + html: 'Label 1' + - + variant: secondary + html: 'Label 2' + - + variant: primary + html: 'Label 3' + - + label: 'Example form input' + required: false + readonly: false + id: example-form-input-1 + size: sm + input: true + input_type: checkbox + - + variant: warning + html: 'Label 5' + badge: + label: '10' + rounded_pill: true diff --git a/components/list_group/list_group.twig b/components/list_group/list_group.twig new file mode 100644 index 000000000..8089d5a2c --- /dev/null +++ b/components/list_group/list_group.twig @@ -0,0 +1,13 @@ +{# +/** + * @file + * List group pattern. + */ +#} + +{% include '@oe-bcl/list-group' with { + 'flush': flush, + 'type': type, + 'items': items, + 'attributes': attributes, +} only %} diff --git a/components/listing/listing.component.yml b/components/listing/listing.component.yml new file mode 100644 index 000000000..a9b9fd6ed --- /dev/null +++ b/components/listing/listing.component.yml @@ -0,0 +1,23 @@ +name: Listing +description: 'Listing of cards.' +variants: + default: + title: Default + highlight: + title: Highlight +slots: + columns: + title: Columns + description: 'Number of columns, 1, 2 or 3. Defaults to 1.' + title: + title: Title + description: 'Title of the listing block.' + title_tag: + title: 'Title tag' + description: 'The tag to use for the title. Defaults to h2.' + link: + title: Link + description: 'Call to action link with icon. A link pattern definition must be passed.' + items: + title: Items + description: 'List of card items.' diff --git a/components/listing/listing.preview.story.yml b/components/listing/listing.preview.story.yml new file mode 100644 index 000000000..f968f836d --- /dev/null +++ b/components/listing/listing.preview.story.yml @@ -0,0 +1,56 @@ +name: Preview +slots: + title: 'This is the listing title' + link: + label: 'European Commission' + path: 'https://link-1.com' + items: + - + title: 'Card Title 1' + text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ut ex tristique, dignissim sem ac, bibendum est. Sed vehicula lorem non nunc tincidunt hendrerit. Nunc tristique ante et fringilla fermentum.' + image: + src: 'https://picsum.photos/seed/1002/600/400' + alt: 'alt img' + content: + '#markup': '
Article 17 October 2019
' + - + title: + '#markup': 'Card title 2 with link markup' + text: 'Pellentesque ut tristique purus, quis viverra erat. Mauris tincidunt placerat nisl eget consectetur. Morbi malesuada augue nisl, in faucibus odio ultricies elementum. Fusce eu tempor diam, sollicitudin pretium libero.' + image: + src: 'https://picsum.photos/seed/1003/600/400' + alt: 'alt img' + content: + '#markup': '
Article 17 October 2019
' + - + title: 'Card title 3' + text: 'Phasellus mi nulla, lobortis tempus sem ac, sodales hendrerit mi. Cras mauris dui, aliquet non tellus vel, dignissim suscipit ligula. Donec posuere eu neque nec venenatis.' + image: + src: 'https://picsum.photos/seed/1004/600/400' + alt: 'alt img' + content: + '#markup': '
Article 17 October 2019
' + - + title: 'Card title 4' + text: 'Proin vitae diam efficitur, suscipit enim vehicula, malesuada massa. Aenean hendrerit lectus quis ex vestibulum, quis tempor urna congue. Phasellus luctus felis dui, eu eleifend nisl viverra vel.' + image: + src: 'https://picsum.photos/seed/1005/600/400' + alt: 'alt img' + content: + '#markup': '
Article 17 October 2019
' + - + title: 'Card title 5' + text: 'Mauris hendrerit erat eget arcu aliquet tincidunt. Aliquam et massa egestas, mollis sapien at, euismod risus. Vivamus lacinia lacus sapien, ut imperdiet purus vehicula quis.' + image: + src: 'https://picsum.photos/seed/1006/600/400' + alt: 'alt img' + content: + '#markup': '
Article 17 October 2019
' + - + title: 'Card title 6' + text: 'Aliquam pulvinar vel dui sed luctus. Vestibulum non nulla sit amet odio ultricies blandit. Nunc vehicula eros nunc, ut commodo diam pretium id.' + image: + src: 'https://picsum.photos/seed/1007/600/400' + alt: 'alt img' + content: + '#markup': '
Article 17 October 2019
' diff --git a/components/listing/listing.twig b/components/listing/listing.twig new file mode 100644 index 000000000..8297f07e6 --- /dev/null +++ b/components/listing/listing.twig @@ -0,0 +1,20 @@ +{# +/** + * @file + * Listing pattern. + */ +#} +{% include '@oe-bcl/listing' with { + 'variant': variant|default('default') ~ '-' ~ columns|default('1') ~ '-col', + 'items': items|bcl_card_list, + 'link': link ? { + 'path': link.path, + 'label': link.label, + 'icon': bcl_icon_path ? { + 'path': bcl_icon_path, + } : null, + } : null, + 'title': title, + 'title_tag': title_tag, + 'attributes': attributes.addClass('text-break'), +} only %} diff --git a/components/modal/modal.component.yml b/components/modal/modal.component.yml new file mode 100644 index 000000000..c1ec7090a --- /dev/null +++ b/components/modal/modal.component.yml @@ -0,0 +1,30 @@ +name: Modal +description: 'Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content. For more information vitis https://v5.getbootstrap.com/docs/5.0/components/modal/' +slots: + title: + title: Title + description: 'Title of the modal.' + show_close_button: + title: 'Show close button' + description: 'Sets the visibility of the close button at the header. Defaults to false.' + body: + title: Body + description: 'The modal’s body content.' + footer: + title: Footer + description: 'The modal’s footer.' + toggle: + title: 'Toggle button' + description: 'An optional button pattern definition that will allow to show/hide the modal.' +props: + type: object + properties: + size: + title: 'Modal size' + description: 'The size that the modal will have:' + type: string + enum: + - sm + - lg + - xl + - fullscreen diff --git a/components/modal/modal.preview.story.yml b/components/modal/modal.preview.story.yml new file mode 100644 index 000000000..dc4d6931d --- /dev/null +++ b/components/modal/modal.preview.story.yml @@ -0,0 +1,23 @@ +name: Preview +slots: + title: 'Modal title' + show_close_button: true + body: '

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

' + footer: + - + type: html_tag + tag: button + attributes: + class: 'btn btn-secondary' + data-bs-dismiss: modal + value: Close + - + type: html_tag + tag: button + attributes: + class: 'btn btn-primary' + value: 'Save changes' + toggle: + label: 'Show modal' +props: + size: lg diff --git a/components/modal/modal.twig b/components/modal/modal.twig new file mode 100644 index 000000000..40f168956 --- /dev/null +++ b/components/modal/modal.twig @@ -0,0 +1,45 @@ +{# +/** + * @file + * Modal pattern. + */ +#} +{% set _id = attributes.id|default(modal_id) %} + +{% set _header %} + {% apply spaceless %} + {% if title is not empty %} +

{{ title }}
+ {% endif %} + {% if show_close_button is not empty %} + {% include '@oe-bcl/button' with { + clean_class: TRUE, + attributes: create_attribute() + .addClass(['btn-close']) + .setAttribute('data-bs-dismiss', 'modal') + .setAttribute('aria-label', 'Close'), + } only %} + {% endif %} + {% endapply %} +{% endset %} + +{% include '@oe-bcl/modal' with { + 'size': size, + 'id': _id, + 'header': _header, + 'body': body, + 'footer': footer +} only %} + +{% if toggle is not empty %} + {% set _toggle_attributes = toggle.attributes|default({}) %} + {% set _toggle_attributes = _toggle_attributes|merge({ + 'data-bs-toggle': 'modal', + 'data-bs-target': '#' ~ _id, + 'aria-controls': _id + }) %} + {% set _toggle = toggle|merge({ + attributes: _toggle_attributes + }) %} + {{ pattern('button', _toggle) }} +{% endif %} diff --git a/components/navbar/navbar.component.yml b/components/navbar/navbar.component.yml new file mode 100644 index 000000000..5a476ac0e --- /dev/null +++ b/components/navbar/navbar.component.yml @@ -0,0 +1,21 @@ +name: Navbar +description: 'Powerful, responsive navigation bar. Includes support for branding, navigation, and more, including support for our collapse plugin. For more information: https://v5.getbootstrap.com/docs/5.0/components/navbar/' +slots: + expanded_breakpoint: + title: 'Expanded breakpoint' + description: 'The breakpoint at which the menu will be shown as expanded. For earlier breakpoints, it will be shown after clicking a toggle button. Must be a valid breakpoint class (sm, md, lg). Defaults to lg. If not present, then will not collapse.' + color_scheme: + title: 'Color scheme' + description: 'The color scheme to use. Can be either light or dark.' + background: + title: Background + description: 'Adds a background color that depends on the color scheme. Enabled by default.' + branding: + title: 'Branding region' + description: 'Navbar branding region. E.g. for text and/or logo.' + navigation: + title: 'Navigation region' + description: 'Navbar navigation region. Usually contains navigation items.' + right: + title: 'Right region' + description: 'Navbar right region. Sticks at the right of the navbar. Usually contains a search form.' diff --git a/components/navbar/navbar.preview.story.yml b/components/navbar/navbar.preview.story.yml new file mode 100644 index 000000000..132128719 --- /dev/null +++ b/components/navbar/navbar.preview.story.yml @@ -0,0 +1,65 @@ +name: Preview +slots: + expanded_breakpoint: lg + background: true + branding: + - + type: html_tag + tag: a + value: Navbar + attributes: + href: '#navbar' + rel: home + class: navbar-brand + navigation: + - + type: component + label: 'I am a link' + path: '#first' + attributes: + class: nav-link + component: link + - + type: component + label: 'I am a link 2' + path: '#second' + attributes: + class: nav-link + component: link + - + type: component + label: 'I am a link 3' + path: '#third' + attributes: + class: nav-link + component: link + - + type: component + component: dropdown + slots: + button_label: 'Dropdown Toggle' + items: + - + path: '#navbar' + label: 'I am a link' + - + path: '#navbar' + label: 'I am an active button' + button: true + active: true + - + divider: true + - + path: '#navbar' + button: true + disabled: true + label: 'I am a disabled button' + props: + variant: default + right: + - + type: html_tag + tag: form + attributes: + class: d-flex + children: '
' diff --git a/components/navbar/navbar.twig b/components/navbar/navbar.twig new file mode 100644 index 000000000..279dac128 --- /dev/null +++ b/components/navbar/navbar.twig @@ -0,0 +1,29 @@ +{# +/** + * @file + * Navbar pattern. + */ +#} + +{% extends '@oe-bcl/navbar' %} + +{% set color_set = color_scheme|default('light') %} +{% if background ?? true %} + {% set background = color_set %} +{% endif %} +{% if not expanded_breakpoint %} + {% set disable_collapse = true %} +{% endif %} +{% set expand = expanded_breakpoint|default('lg') %} + +{% block branding %} + {{ branding }} +{% endblock %} + +{% block navigation %} + {{ navigation }} +{% endblock %} + +{% block right %} + {{ right }} +{% endblock %} diff --git a/components/navigation/navigation.component.yml b/components/navigation/navigation.component.yml new file mode 100644 index 000000000..6060ffdc2 --- /dev/null +++ b/components/navigation/navigation.component.yml @@ -0,0 +1,25 @@ +name: Navigation +description: 'Renders a series of links in a navigation element.' +variants: + default: + title: Default + description: 'Default navigation style.' + tabs: + title: Tabs + description: 'Shows the items styled as tabs.' + pills: + title: Pills + description: 'Shows the items styled as pills.' + navbar: + title: Navbar + description: 'When the navigation is part of a navbar element.' +slots: + orientation: + title: Orientation + description: 'Can be set to horizontal or vertical. Defaults to horizontal.' +props: + properties: + items: + type: array + title: 'Navigation items' + description: 'Array of navigation items' diff --git a/components/navigation/navigation.preview.story.yml b/components/navigation/navigation.preview.story.yml new file mode 100644 index 000000000..28e0ff588 --- /dev/null +++ b/components/navigation/navigation.preview.story.yml @@ -0,0 +1,21 @@ +name: Preview +slots: + items: + - + label: "I'm a link 1" + path: '#first' + - + label: "I'm a link 2" + path: '#second' + - + label: "I'm a link 3" + id: third-tab + path: '#third' + - + label: "I'm a link active" + active: true + path: '#fourth' + - + label: "I'm a link disabled" + disabled: true + path: '#' diff --git a/components/navigation/navigation.twig b/components/navigation/navigation.twig new file mode 100644 index 000000000..24583f39f --- /dev/null +++ b/components/navigation/navigation.twig @@ -0,0 +1,16 @@ +{# +/** + * @file + * Navigation pattern. + */ +#} +{% include '@oe-bcl/navigation' with { + 'items': items, + 'pills': variant == 'pills', + 'vertical': orientation == 'vertical', + 'tabs': variant == 'tabs', + 'nav': (variant == 'pills' or variant == 'tabs'), + 'tabs_content': false, + 'navbar': variant == 'navbar', + 'attributes': attributes, +} only %} diff --git a/components/offcanvas/offcanvas.component.yml b/components/offcanvas/offcanvas.component.yml new file mode 100644 index 000000000..e0b72de67 --- /dev/null +++ b/components/offcanvas/offcanvas.component.yml @@ -0,0 +1,37 @@ +name: Offcanvas +description: 'Hidden sidebar with activation. For more information visit: https://getbootstrap.com/docs/5.0/components/offcanvas/' +variants: + default: + title: Default + search: + title: Search +slots: + title: + title: Title + description: 'Offcanvas title.' + body: + title: Body + description: 'Offcanvas body content.' + toggle: + title: 'Toggle button' + description: 'An optional button pattern definition that will allow to show/hide the offcanvas.' +props: + type: object + properties: + placement: + title: Offcanvas + description: 'Select the placement of the offcanvas:' + type: string + enum: + - start + - end + - top + - bottom + body_scroll: + title: Scroll + description: 'If true, enable body scrolling when offcanvas is displayed. Defaults to false.' + type: boolean + backdrop: + title: Backdrop + description: 'If true, enable backdrop behind offcanvas. Defaults to false.' + type: boolean diff --git a/components/offcanvas/offcanvas.preview.story.yml b/components/offcanvas/offcanvas.preview.story.yml new file mode 100644 index 000000000..2fbbded1f --- /dev/null +++ b/components/offcanvas/offcanvas.preview.story.yml @@ -0,0 +1,10 @@ +name: Preview +slots: + title: 'An offcanvas title' + body: 'An interesting content for this offcanvas' + toggle: + label: Toggle + icon: filter +props: + placement: start + backdrop: true diff --git a/components/offcanvas/offcanvas.twig b/components/offcanvas/offcanvas.twig new file mode 100644 index 000000000..698ac6d94 --- /dev/null +++ b/components/offcanvas/offcanvas.twig @@ -0,0 +1,33 @@ +{# +/** + * @file + * Offcanvas pattern. + */ +#} +{% block offcanvas %} +{% include '@oe-bcl/offcanvas' with { + 'title': title, + 'placement': placement, + 'id': offcanvas_id, + 'body': body, + 'with_body_scroll': body_scroll, + 'with_backdrop': backdrop, + 'attributes': attributes, + 'responsiveness': 'lg' +} only %} +{% endblock %} + +{% block toggle_button %} +{% if toggle is not empty %} + {% set _toggle_attributes = toggle.attributes|default({}) %} + {% set _toggle_attributes = _toggle_attributes|merge({ + 'data-bs-toggle': 'offcanvas', + 'data-bs-target': '#' ~ offcanvas_id, + 'aria-controls': offcanvas_id + }) %} + {% set _toggle = toggle|merge({ + attributes: _toggle_attributes + }) %} + {{ pattern('button', _toggle) }} +{% endif %} +{% endblock %} diff --git a/components/pagination/pagination.component.yml b/components/pagination/pagination.component.yml new file mode 100644 index 000000000..1c3a3ceff --- /dev/null +++ b/components/pagination/pagination.component.yml @@ -0,0 +1,55 @@ +name: Pagination +description: 'Showing pagination to indicate a series of related content exists across multiple pages. For more information visit: https://getbootstrap.com/docs/5.0/components/pagination/' +variants: + default: + title: Default + description: 'The default pagination style.' + glossary: + title: Glossary + description: 'Glossary style.' +slots: + enable_prev_next_icons: + title: 'Enable previous/next icons' + description: 'Show icons instead of texts in links to previous and next page. Defaults to false.' + enable_first_last_icons: + title: 'Enable first/last icons' + description: 'Show icons instead of texts in links to first and last page. Defaults to true.' + first: + title: 'First link' + description: 'Pagination first link with path and label or icon.' + prev: + title: 'Previous link' + description: 'Pagination previous link with path and label or icon.' + next: + title: 'Next link' + description: 'Pagination next link with path and label or icon.' + last: + title: 'Last link' + description: 'Pagination last link with path and label or icon.' + items: + title: 'Pagination items' + description: 'List of items with path, label, disabled and active to build the pagination.' +props: + type: object + properties: + size: + title: Size + description: 'Size of the pagination:' + type: string + enum: + - sm + - lg + 'meta:enum': + sm: Small + lg: Large + alignment: + title: Alignment + description: 'Align the pagination to:' + type: string + enum: + - center + - end + list_attributes: + title: 'List attributes' + description: 'Extra attributes for the list container' + $ref: 'ui-patterns://attributes' diff --git a/components/pagination/pagination.preview.story.yml b/components/pagination/pagination.preview.story.yml new file mode 100644 index 000000000..11b560244 --- /dev/null +++ b/components/pagination/pagination.preview.story.yml @@ -0,0 +1,26 @@ +name: Preview +slots: + enable_first_last_icons: true + first: + path: '#' + label: First + prev: + path: '#' + label: Previous + next: + path: '#' + label: Next + last: + path: '#' + label: Last + items: + - + path: '#' + label: '1' + active: true + - + path: '#' + label: '2' +props: + size: sm + alignment: center diff --git a/components/pagination/pagination.twig b/components/pagination/pagination.twig new file mode 100644 index 000000000..69d8fb1f3 --- /dev/null +++ b/components/pagination/pagination.twig @@ -0,0 +1,38 @@ +{# +/** + * @file + * Pagination pattern. + */ +#} + +{% set internal_items = [] %} +{% for item in items %} + {% set internal_items = internal_items|merge([item|merge({ + 'attributes': create_attribute({'aria-label': item.label}).merge(item.attributes|default(create_attribute())), + })]) + %} +{% endfor %} +{% include '@oe-bcl/pagination' with { + 'variant': variant ?? 'default', + 'size': size, + 'alignment': alignment, + 'aria_label': aria_label, + 'enable_prev_next_icon': enable_prev_next_icons, + 'enable_first_last_icon': enable_first_last_icons, + 'first': first ? first|merge({ + 'attributes': create_attribute({'aria-label': first.aria_label|default('First'|t)}).merge(first.attributes|default(create_attribute())), + }), + 'prev': prev ? prev|merge({ + 'attributes': create_attribute({'aria-label': prev.aria_label|default('Previous'|t)}).merge(prev.attributes|default(create_attribute())), + }), + 'next': next ? next|merge({ + 'attributes': create_attribute({'aria-label': next.aria_label|default('Next'|t)}).merge(next.attributes|default(create_attribute())), + }), + 'last': last ? last|merge({ + 'attributes': create_attribute({'aria-label': last.aria_label|default('Last'|t)}).merge(first.attributes|default(create_attribute())), + }), + 'items': internal_items, + 'attributes': attributes, + 'icon_path': bcl_icon_path, + 'list_attributes': list_attributes.addClass('js-pager__items'), +} only %} diff --git a/components/progress/progress.component.yml b/components/progress/progress.component.yml new file mode 100644 index 000000000..258bc4a9e --- /dev/null +++ b/components/progress/progress.component.yml @@ -0,0 +1,45 @@ +name: Progress +description: 'Indicate the progress as a bar. For more information visit: https://getbootstrap.com/docs/5.0/components/progress/' +slots: + label: + title: Label + description: 'Text before the progress bar.' + progress: + title: Progress + description: 'The progress value for the bar.' + min: + title: Minimum + description: 'Minimum value shown in the progress bar.' + max: + title: Maximum + description: 'Maximum value shown in the progress bar.' + text: + title: Text + description: 'Text inside the progress bar.' + message: + title: Message + description: 'Optional description text below the progress bar.' +props: + type: object + properties: + style: + title: 'Bar style' + description: 'Set the bar style:' + type: string + enum: + - primary + - secondary + - success + - danger + - warning + - info + - light + - dark + striped: + title: Striped + description: 'Stripped style for the progress bar. Defaults to false.' + type: boolean + animated: + title: Animated + description: 'Animation on striped bar. Defaults to false.' + type: boolean diff --git a/components/progress/progress.preview.story.yml b/components/progress/progress.preview.story.yml new file mode 100644 index 000000000..168a279c5 --- /dev/null +++ b/components/progress/progress.preview.story.yml @@ -0,0 +1,10 @@ +name: Preview +slots: + label: 'This is the label of the progress bar' + progress: 50 + max: 100 + text: 50% +props: + style: primary + striped: true + animated: true diff --git a/components/progress/progress.twig b/components/progress/progress.twig new file mode 100644 index 000000000..63b67c903 --- /dev/null +++ b/components/progress/progress.twig @@ -0,0 +1,18 @@ +{# +/** + * @file + * Progress pattern. + */ +#} +{% include '@oe-bcl/progress' with { + 'progress': progress, + 'min': min, + 'max': max, + 'message': message, + 'striped': striped, + 'animated': animated, + 'label': label, + 'variant': style, + 'bar_label': text, + 'attributes': attributes, +} only %} diff --git a/components/section/section.component.yml b/components/section/section.component.yml new file mode 100644 index 000000000..464294b77 --- /dev/null +++ b/components/section/section.component.yml @@ -0,0 +1,33 @@ +name: Section +description: 'Renders content and heading inside section.' +group: 'Version 2.x' +slots: + content: + title: Content + description: 'Content of the section.' + heading: + title: Heading + description: 'Heading of the section.' +props: + type: object + properties: + heading_attributes: + title: 'Heading attributes' + description: 'Extra attributes for the heading' + $ref: 'ui-patterns://attributes' + wrapper_attributes: + title: 'Wrapper attributes' + description: 'Extra attributes for the wrapper' + $ref: 'ui-patterns://attributes' + attributes: + title: 'Section attributes' + description: 'Extra attributes for the section' + $ref: 'ui-patterns://attributes' + heading_tag: + title: 'Heading tag' + description: 'Tag of the heading. Default to h2.' + type: string + tag: + title: 'Wrapper tag' + description: 'Tag of the wrapper. Defaults to section.' + type: string diff --git a/components/section/section.preview.story.yml b/components/section/section.preview.story.yml new file mode 100644 index 000000000..9d80d808d --- /dev/null +++ b/components/section/section.preview.story.yml @@ -0,0 +1,4 @@ +name: Preview +slots: + content: '

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Suspendisse ultrices gravida dictum fusce. Sit amet facilisis magna etiam tempor orci eu lobortis. Erat pellentesque adipiscing commodo elit at imperdiet. Iaculis at erat pellentesque adipiscing commodo. Nunc lobortis mattis aliquam faucibus purus in massa. In nulla posuere sollicitudin aliquam ultrices sagittis orci. Id nibh tortor id aliquet lectus proin nibh nisl condimentum. Eleifend donec pretium vulputate sapien nec. Mauris pellentesque pulvinar pellentesque habitant morbi tristique senectus et netus. Nulla porttitor massa id neque.

Donec ultrices tincidunt arcu non sodales neque sodales ut. Tempus imperdiet nulla malesuada pellentesque elit eget gravida cum. Porta nibh venenatis cras sed. Magna fermentum iaculis eu non. Tortor dignissim convallis aenean et tortor at. Dictumst quisque sagittis purus sit amet volutpat consequat mauris. Massa tempor nec feugiat nisl pretium fusce id velit ut. Nisl condimentum id venenatis a condimentum vitae sapien. Netus et malesuada fames ac turpis egestas. Dolor morbi non arcu risus quis varius. Odio morbi quis commodo odio aenean sed. Sed arcu non odio euismod lacinia at quis risus. Blandit cursus risus at ultrices mi tempus imperdiet.

' + heading: 'This is the title of the section' diff --git a/components/section/section.twig b/components/section/section.twig new file mode 100644 index 000000000..ee21d14d4 --- /dev/null +++ b/components/section/section.twig @@ -0,0 +1,44 @@ +{# +/** + * @file + * Section pattern. + * + * Available variables: + * - heading: Heading of the section. + * - heading_tag: Tag of the heading. + * - heading_attributes: Attributes of the heading. + * - tag: Tag of the content section. + * - content: Content of the section. + * - attributes: Attributes of the section. + * - wrapper_attributes: Attributes of the content wrapper. + */ +#} + +{% set tag = tag|default('section') %} +{% set heading_tag = heading_tag|default('h2') %} +{% + set section_classes = [ + 'section', + ] +%} +{% + set heading_classes = [ + 'section__title', + ] +%} +{% + set wrapper_classes = [ + 'section__body', + ] +%} + +<{{ tag }}{{ attributes.addClass(section_classes) }}> + {% if heading is not empty %} + <{{ heading_tag }}{{ heading_attributes.addClass(heading_classes) }}> + {{ heading }} + + {% endif %} + + {{ content }} + + diff --git a/components/timeline/timeline.component.yml b/components/timeline/timeline.component.yml new file mode 100644 index 000000000..422118166 --- /dev/null +++ b/components/timeline/timeline.component.yml @@ -0,0 +1,25 @@ +name: Timeline +description: 'Timeline is a flexible and powerful component for displaying a series of content ordered in time.' +slots: + title: + title: Title + description: 'Title of the timeline block.' + title_tag: + title: 'Title tag' + description: 'The tag to use for the title. Defaults to h2.' + expand_button_label: + title: 'Label expanded' + description: 'When all items are displayed, the label of the button to hide them.' + collapse_button_label: + title: 'Label collapsed' + description: 'When there are hidden items, the label of the button to expand them.' + items: + title: Items + description: 'List of timeline items, with id, label, title and content.' +props: + type: object + properties: + hide_from: + title: 'Hide from' + description: 'Indicate the number of items to display in the timeline, hide the others and add a toggle button to show them.' + type: number diff --git a/components/timeline/timeline.preview.story.yml b/components/timeline/timeline.preview.story.yml new file mode 100644 index 000000000..5a7169e66 --- /dev/null +++ b/components/timeline/timeline.preview.story.yml @@ -0,0 +1,42 @@ +name: Preview +slots: + title: 'This is the timeline title' + items: + - + label: '13 September 2017' + title: 'Item title' + content: + '#markup': 'President Junckers State of the Union speech' + - + label: '28-29 September 2017' + content: + '#markup': 'Informal Digital Summit, Tallinn' + - + label: '14 November 2017' + content: 'Strengthening European identity through education and culture: European Commissions contribution to the Leaders meeting.' + - + label: '17 November 2017' + content: + '#markup': 'Social Summit in Gothenburg, Sweden' + - + label: '6 December 2017' + content: + '#markup': 'Economic and Monetary Union package of proposals' + - + label: '14-15 December 2017' + content: + '#markup': 'EU Leaders meeting on migration, Brussels' + - + label: '15 December 2017' + content: + '#markup': 'Euro Summit' + - + label: '6 February 2018' + content: + '#markup': 'EU-Western Balkans Strategy' + - + label: '14 February 2018' + content: + '#markup': 'Multiannual Financial Framework and institutional issues - enhancing efficiency at the helm of the European Union' +props: + hide_from: 5 diff --git a/components/timeline/timeline.twig b/components/timeline/timeline.twig new file mode 100644 index 000000000..db6bf5a67 --- /dev/null +++ b/components/timeline/timeline.twig @@ -0,0 +1,20 @@ +{# +/** + * @file + * Timeline pattern. + * + */ +#} +{% include '@oe-bcl/timeline' with { + 'toggle_collapsed': collapse_button_label|default('Show more %d items'|t) , + 'toggle_expanded': expand_button_label|default('Hide %d items'|t), + 'hide': { + 'from': hide_from, + 'to': hide_to|default(0), + }, + 'items': items, + 'icon_path': bcl_icon_path, + 'attributes': attributes, + 'title': title, + 'title_tag': title_tag, +} only %} diff --git a/composer.json b/composer.json index 7ae2231b5..3b7ae1cd8 100644 --- a/composer.json +++ b/composer.json @@ -10,8 +10,8 @@ "cweagans/composer-patches": "^1.7", "drupal/core": "^10.3 || ^11", "drupal/file_link": "^2.2", - "drupal/ui_patterns": "^1.10", - "drupal/ui_patterns_settings": "^2.3", + "drupal/ui_patterns": "^2.0", + "drupal/ui_patterns_settings": "3.0.x-dev", "openeuropa/ecl-twig-loader": "^4.0" }, "require-dev": { @@ -61,11 +61,6 @@ "locations": { "web-root": "./build" } - }, - "patches": { - "drupal/ui_patterns_settings": { - "Case mismatch between loaded and declared class names @see https://www.drupal.org/project/ui_patterns_settings/issues/3508198": "https://www.drupal.org/files/issues/2025-02-21/3508198-case-mismatch.patch" - } } }, "config": { diff --git a/modules/oe_bootstrap_theme_helper/oe_bootstrap_theme_helper.info.yml b/modules/oe_bootstrap_theme_helper/oe_bootstrap_theme_helper.info.yml index 553faebb7..65b56f2f4 100644 --- a/modules/oe_bootstrap_theme_helper/oe_bootstrap_theme_helper.info.yml +++ b/modules/oe_bootstrap_theme_helper/oe_bootstrap_theme_helper.info.yml @@ -7,7 +7,7 @@ dependencies: - drupal:responsive_image - ui_patterns:ui_patterns - ui_patterns:ui_patterns_library - - ui_patterns_settings:ui_patterns_settings + - ui_patterns:ui_patterns_legacy config_devel: install: - image.style.oe_bootstrap_theme_medium_no_crop diff --git a/modules/oe_bootstrap_theme_helper/src/TwigExtension/TwigExtension.php b/modules/oe_bootstrap_theme_helper/src/TwigExtension/TwigExtension.php index 6985438ff..e63db511b 100644 --- a/modules/oe_bootstrap_theme_helper/src/TwigExtension/TwigExtension.php +++ b/modules/oe_bootstrap_theme_helper/src/TwigExtension/TwigExtension.php @@ -284,6 +284,9 @@ public function toInternalLanguageId(string $language_code): string { * The link render array. */ public function bclLink(Environment $env, $label, $path, Attribute $attributes): array { + if (is_array($path) && isset($path['#children'])) { + $path = $path['#children']?->__toString(); + } if (is_string($path)) { // The text has been processed by twig already, convert it to a safe // object for the render system.