-
Notifications
You must be signed in to change notification settings - Fork 13
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #150 from openeuropa/OEL-779-part-one
OEL-779: Review patterns: Accordion, Alert, Badge, Banner, Blockquote and Breadcrumbs
- Loading branch information
Showing
21 changed files
with
326 additions
and
243 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,24 +1,24 @@ | ||
accordion: | ||
label: "Accordion" | ||
description: "List of items that can be clicked to hide or reveal additional content." | ||
label: 'Accordion' | ||
description: 'List of items that can be clicked to hide or reveal additional content. For more information: https://getbootstrap.com/docs/5.0/components/accordion/' | ||
settings: | ||
flush: | ||
bare_layout: | ||
type: boolean | ||
label: "Flush" | ||
description: "set Flush to remove the default background-color, some borders, and some rounded corners to render accordions edge-to-edge with their parent container." | ||
label: 'Bare layout' | ||
description: 'Enable to remove the default background-color, some borders, and some rounded corners printing the accordion edge-to-edge with their parent container. False by default.' | ||
preview: false | ||
open_item_id: | ||
open_item: | ||
type: number | ||
label: "Open item id" | ||
description: "Id of the default item to open, starting from 1" | ||
label: 'Accordion item opened by default' | ||
description: 'Index value of the item to open (starting from 1), all closed by default (0).' | ||
preview: 1 | ||
fields: | ||
items: | ||
type: "array" | ||
label: "Accordion items" | ||
description: "List of accordion items" | ||
type: array | ||
label: 'Accordion items' | ||
description: 'List of accordion items.' | ||
preview: | ||
- title: "Jobs, Growth, Investment and Competitiveness with an additional quite long string" | ||
content: "Bullfights. Bull hockey. Do you like this? The bull is stabbed, prodded, beaten. The bull is wounded. The bull is tired before the matador ever steps into the ring. Now, is that victory? Of course it is. Wanna know the secret to winning? Creative sportsmanship. In other words, one has to rig the game." | ||
- title: "Energy Union" | ||
content: "Advice on living, working or travelling in the EU, on visas and immigration for non-EU citizens, European culture. Plus some extra text to make it a little bit longer." | ||
- title: 'Jobs, Growth, Investment and Competitiveness with an additional quite long string' | ||
content: 'Lorem fistrum eiusmod cillum elit papaar officia aliquip dolore velit. Pellentesque dolor sapien, mollis fringilla ultricies sed, lacinia vel nibh. Nulla auctor arcu risus, nec facilisis odio aliquet sed.' | ||
- title: 'Energy Union' | ||
content: 'Advice on living, working or travelling in the EU, on visas and immigration for non-EU citizens, European culture. Plus some extra text to make it a little bit longer.' |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,11 +1,13 @@ | ||
{# | ||
/** | ||
* @file | ||
* Accordion component. | ||
* Accordion pattern. | ||
*/ | ||
#} | ||
{% include '@oe-bcl/accordion' with { | ||
'flush': flush, | ||
'id': accordion_id, | ||
'flush': bare_layout, | ||
'items': items, | ||
'open_item_id': open_item_id | ||
} %} | ||
'open_item_id': open_item, | ||
'attributes': attributes, | ||
} only %} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,47 +1,47 @@ | ||
alert: | ||
label: Alert | ||
description: Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. https://v5.getbootstrap.com/docs/5.0/components/alerts/ | ||
label: 'Alert' | ||
description: 'Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. https://v5.getbootstrap.com/docs/5.0/components/alerts/' | ||
variants: | ||
primary: | ||
label: 'Primary (default)' | ||
secondary: | ||
label: 'Secondary' | ||
success: | ||
label: 'Success' | ||
danger: | ||
label: 'Danger' | ||
warning: | ||
label: 'Warning' | ||
info: | ||
label: 'Info' | ||
light: | ||
label: 'Light' | ||
dark: | ||
label: 'Dark' | ||
link: | ||
label: 'Link' | ||
settings: | ||
style: | ||
type: select | ||
label: Alert style | ||
options: | ||
primary: primary | ||
secondary: secondary | ||
success: success | ||
danger: danger | ||
warning: warning | ||
info: info | ||
light: light | ||
dark: dark | ||
link: link | ||
preview: primary | ||
dismissible: | ||
type: boolean | ||
label: Dismissible? | ||
description: It’s possible to dismiss any alert inline | ||
preview: True | ||
label: 'Dismissible' | ||
description: 'Add close button to dismiss the alert inline. Enabled by default.' | ||
animated_dismiss: | ||
type: boolean | ||
label: Animated dismiss? | ||
description: Add fade animation to the dismissible alert | ||
preview: True | ||
label: 'Animated dismiss' | ||
description: 'Add fade animation to the dismissible alert. Enabled by default.' | ||
fields: | ||
heading: | ||
type: text | ||
label: Heading | ||
description: The alert heading. Optional. | ||
preview: Well done! | ||
label: 'Heading' | ||
description: 'The alert heading. Optional.' | ||
preview: 'Well done!' | ||
message: | ||
type: render | ||
label: Message | ||
description: The alert message. | ||
preview: " A simple alert—check it out! " | ||
icons_path: | ||
label: 'Message' | ||
description: 'The alert message.' | ||
preview: 'A simple alert—check it out!' | ||
icon: | ||
type: text | ||
label: Path to icons | ||
preview: "/assets/icons/bootstrap-icons.svg" | ||
icon_name: | ||
type: text | ||
label: icon to add to the alert | ||
preview: "alarm" | ||
label: 'Icon name' | ||
description: 'Add an icon to the alert. Optional.' | ||
preview: 'alarm' |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,45 +1,43 @@ | ||
badge: | ||
label: Badge | ||
description: A small count and labeling component. Badges scale to match the size of the immediate parent element by using relative font sizing and em units. https://v5.getbootstrap.com/docs/5.0/components/badge/ | ||
label: 'Badge' | ||
description: 'A small count and labeling component. Badges scale to match the size of the immediate parent element by using relative font sizing and em units. For more information: https://v5.getbootstrap.com/docs/5.0/components/badge/' | ||
settings: | ||
background: | ||
type: select | ||
label: Badge style | ||
label: 'Badge background' | ||
description: 'Set the background color of the badge:' | ||
options: | ||
primary: primary | ||
secondary: secondary | ||
success: success | ||
danger: danger | ||
warning: warning | ||
info: info | ||
light: light | ||
dark: dark | ||
link: link | ||
preview: primary | ||
primary: 'primary (default)' | ||
secondary: 'secondary' | ||
success: 'success' | ||
danger: 'danger' | ||
warning: 'warning' | ||
info: 'info' | ||
light: 'light' | ||
dark: 'dark' | ||
link: 'link' | ||
rounded_pill: | ||
type: boolean | ||
label: Pill badge. Optional | ||
description: Make badge more rounded. | ||
label: 'Pill badge.' | ||
description: 'Make the badge a rounded pill. False by default.' | ||
dismissible: | ||
type: boolean | ||
label: Dismissible badge. Optional | ||
description: Add a close icon at the end of the badge. | ||
label: 'Dismissible badge. Optional' | ||
description: 'Add a close icon at the end of the badge.' | ||
preview: true | ||
fields: | ||
label: | ||
type: text | ||
label: Label | ||
description: The badge label | ||
preview: New | ||
assistive_text: | ||
type: text | ||
label: Assistive text | ||
description: Additional text hidden with the .visually-hidden class. | ||
preview: '' | ||
label: 'Label' | ||
description: 'The badge label.' | ||
preview: 'New' | ||
url: | ||
type: text | ||
label: URL | ||
description: The badge URL. Optional. | ||
preview: "" | ||
icons_path: | ||
type: "text" | ||
label: "Path to the svg sprite file for close icon" | ||
label: 'Badge URL' | ||
description: 'Converts the badge in a link. Optional.' | ||
preview: 'https://europa.eu' | ||
title: | ||
type: text | ||
label: 'Link title' | ||
description: 'Title attribute if the badge is a link.' | ||
preview: 'European website.' |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,17 +1,19 @@ | ||
{# | ||
/** | ||
* @file | ||
* Badge component. | ||
* Badge pattern. | ||
*/ | ||
#} | ||
|
||
{% include '@oe-bcl/badge' with { | ||
'label': label, | ||
'title': title, | ||
'assistive_text': assistive_text, | ||
'url': url, | ||
'rounded_pill': rounded_pill, | ||
'background': background, | ||
'icons_path': icons_path, | ||
'icons_path': bcl_icon_path, | ||
'dismissible': dismissible, | ||
'animated_dismiss': animated_dismiss | ||
} %} | ||
'animated_dismiss': animated_dismiss, | ||
'attributes': attributes, | ||
} only %} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,62 +1,61 @@ | ||
banner: | ||
label: "Banner" | ||
description: "Banner or heroes with text and/or background image and/or with call to action. https://getbootstrap.com/docs/5.0/examples/heroes/" | ||
label: 'Banner' | ||
description: 'Banner or heroes with text and/or background image and/or with call to action. For more information: https://getbootstrap.com/docs/5.0/examples/heroes/' | ||
variants: | ||
default: | ||
label: Default text banner | ||
label: 'Default text banner' | ||
description: 'Gray text banner.' | ||
primary: | ||
label: Primary text banner | ||
label: 'Primary text banner' | ||
description: 'Text banner with a primary style.' | ||
image: | ||
label: Image banner | ||
label: 'Image banner' | ||
description: 'Banner with text and an image.' | ||
image_shade: | ||
label: Image shade banner | ||
label: 'Image shade banner' | ||
description: 'Banner with text and a shade image.' | ||
settings: | ||
shade: | ||
type: "boolean" | ||
label: "Shade" | ||
description: "Enable the shadow effect to the image." | ||
preview: false | ||
type: boolean | ||
label: 'Shade' | ||
description: 'Enable the shadow effect to the image. False by default.' | ||
hero: | ||
type: "boolean" | ||
label: "Hero" | ||
description: "Display banner as hero banner" | ||
preview: false | ||
type: boolean | ||
label: 'Hero' | ||
description: 'Display as hero banner. False by default.' | ||
full_width: | ||
type: "boolean" | ||
label: "Full width" | ||
description: "Possibility of having a full-width banner within a bootstrap container" | ||
preview: false | ||
type: boolean | ||
label: 'Full width' | ||
description: 'Possibility of having a full-width banner within a bootstrap container. False by default.' | ||
centered: | ||
type: "boolean" | ||
label: "Centered" | ||
description: "Whether the content of the banner is centered or not" | ||
type: boolean | ||
label: 'Centered' | ||
description: 'Whether the content of the banner is centered or not. False by default.' | ||
preview: true | ||
fields: | ||
title: | ||
type: "text" | ||
label: "Title" | ||
description: "Heading of the banner" | ||
preview: "EU Budget for the future" | ||
type: text | ||
label: 'Title' | ||
description: 'Title of the banner.' | ||
preview: 'EU Budget for the future' | ||
description: | ||
type: "text" | ||
label: "Description" | ||
description: "Sub-heading of the banner" | ||
preview: "Innovation, economy, environment and geopolitics" | ||
link: | ||
type: "array" | ||
label: "Link" | ||
description: "Call to action link" | ||
type: text | ||
label: 'Description' | ||
description: 'Sub-heading of the banner.' | ||
preview: 'Innovation, economy, environment and geopolitics' | ||
call_to_action: | ||
type: array | ||
label: 'Call to action' | ||
description: 'Link to print a CTA button. Optional.' | ||
preview: | ||
label: "Subscribe" | ||
path: "https://example.com" | ||
variant: "primary" | ||
icon_position: "after" | ||
label: 'Subscribe' | ||
path: 'https://example.com' | ||
link_style: 'warning' | ||
icon_position: 'after' | ||
icon: | ||
name: "chevron-right" | ||
size: s | ||
path: "/assets/icons/bootstrap-icons.svg" | ||
name: 'chevron-right' | ||
image: | ||
type: "text" | ||
label: "Image" | ||
description: "URL to the image" | ||
preview: "https://placeimg.com/1000/500/arch" | ||
type: 'text' | ||
label: 'Image' | ||
description: 'URL of the image. Optional.' | ||
preview: 'https://placeimg.com/1000/500/arch' |
Oops, something went wrong.