From 1cd4e04eacb3f2453013127471a6e4ed6fa723a3 Mon Sep 17 00:00:00 2001
From: Florent Torregrosa <florent.torregrosa@gmail.com>
Date: Mon, 3 Mar 2025 12:11:22 +0100
Subject: [PATCH 01/15] Issue #3485834 by grimreaper: Blockquote, list,
pagination, breadcrumb.
---
.../blockquote/blockquote.default.story.yml | 6 +++++
.../blockquote.source_center.story.yml | 18 +++++++++++++++
.../blockquote.source_end.story.yml | 18 +++++++++++++++
....yml => blockquote.source_start.story.yml} | 3 ++-
.../breadcrumb/breadcrumb.1_item.story.yml | 4 ++++
.../breadcrumb/breadcrumb.2_items.story.yml | 6 +++++
...story.yml => breadcrumb.3_items.story.yml} | 2 +-
components/list/list.default_ol.story.yml | 9 ++++++++
components/list/list.default_ul.story.yml | 9 ++++++++
components/list/list.inline.story.yml | 9 ++++++++
components/list/list.preview.story.yml | 14 ------------
components/list/list.unstyled.story.yml | 22 +++++++++++++++++++
.../pagination.alignment_center.story.yml | 21 ++++++++++++++++++
.../pagination.alignment_end.story.yml | 21 ++++++++++++++++++
...story.yml => pagination.default.story.yml} | 10 +++++----
.../pagination.sizing_large.story.yml | 9 ++++++++
.../pagination.sizing_small.story.yml | 9 ++++++++
.../pagination/pagination.states.story.yml | 16 ++++++++++++++
18 files changed, 186 insertions(+), 20 deletions(-)
create mode 100644 components/blockquote/blockquote.default.story.yml
create mode 100644 components/blockquote/blockquote.source_center.story.yml
create mode 100644 components/blockquote/blockquote.source_end.story.yml
rename components/blockquote/{blockquote.preview.story.yml => blockquote.source_start.story.yml} (76%)
create mode 100644 components/breadcrumb/breadcrumb.1_item.story.yml
create mode 100644 components/breadcrumb/breadcrumb.2_items.story.yml
rename components/breadcrumb/{breadcrumb.preview.story.yml => breadcrumb.3_items.story.yml} (86%)
create mode 100644 components/list/list.default_ol.story.yml
create mode 100644 components/list/list.default_ul.story.yml
create mode 100644 components/list/list.inline.story.yml
delete mode 100644 components/list/list.preview.story.yml
create mode 100644 components/list/list.unstyled.story.yml
create mode 100644 components/pagination/pagination.alignment_center.story.yml
create mode 100644 components/pagination/pagination.alignment_end.story.yml
rename components/pagination/{pagination.preview.story.yml => pagination.default.story.yml} (67%)
create mode 100644 components/pagination/pagination.sizing_large.story.yml
create mode 100644 components/pagination/pagination.sizing_small.story.yml
create mode 100644 components/pagination/pagination.states.story.yml
diff --git a/components/blockquote/blockquote.default.story.yml b/components/blockquote/blockquote.default.story.yml
new file mode 100644
index 00000000..8dc44250
--- /dev/null
+++ b/components/blockquote/blockquote.default.story.yml
@@ -0,0 +1,6 @@
+name: "Default"
+slots:
+ content:
+ - type: html_tag
+ tag: p
+ value: "A well-known quote, contained in a blockquote element."
diff --git a/components/blockquote/blockquote.source_center.story.yml b/components/blockquote/blockquote.source_center.story.yml
new file mode 100644
index 00000000..f5871bbc
--- /dev/null
+++ b/components/blockquote/blockquote.source_center.story.yml
@@ -0,0 +1,18 @@
+name: "Alignment: center"
+description: "Use text utilities as needed to change the alignment of your blockquote."
+slots:
+ content:
+ - type: html_tag
+ tag: p
+ value: "A well-known quote, contained in a blockquote element."
+ footer:
+ - markup: "Someone famous in "
+ - type: html_tag
+ tag: cite
+ value: "Source Title"
+ attributes:
+ title: "Source Title"
+props:
+ attributes:
+ class:
+ - text-center
diff --git a/components/blockquote/blockquote.source_end.story.yml b/components/blockquote/blockquote.source_end.story.yml
new file mode 100644
index 00000000..01d35149
--- /dev/null
+++ b/components/blockquote/blockquote.source_end.story.yml
@@ -0,0 +1,18 @@
+name: "Alignment: end"
+description: "Use text utilities as needed to change the alignment of your blockquote."
+slots:
+ content:
+ - type: html_tag
+ tag: p
+ value: "A well-known quote, contained in a blockquote element."
+ footer:
+ - markup: "Someone famous in "
+ - type: html_tag
+ tag: cite
+ value: "Source Title"
+ attributes:
+ title: "Source Title"
+props:
+ attributes:
+ class:
+ - text-end
diff --git a/components/blockquote/blockquote.preview.story.yml b/components/blockquote/blockquote.source_start.story.yml
similarity index 76%
rename from components/blockquote/blockquote.preview.story.yml
rename to components/blockquote/blockquote.source_start.story.yml
index 7620fe56..719ddafa 100644
--- a/components/blockquote/blockquote.preview.story.yml
+++ b/components/blockquote/blockquote.source_start.story.yml
@@ -1,4 +1,5 @@
-name: Preview
+name: "Naming a source"
+description: "When there is something in the 'footer' slot."
slots:
content:
- type: html_tag
diff --git a/components/breadcrumb/breadcrumb.1_item.story.yml b/components/breadcrumb/breadcrumb.1_item.story.yml
new file mode 100644
index 00000000..1001e431
--- /dev/null
+++ b/components/breadcrumb/breadcrumb.1_item.story.yml
@@ -0,0 +1,4 @@
+name: "1 Item"
+props:
+ items:
+ - title: Home
diff --git a/components/breadcrumb/breadcrumb.2_items.story.yml b/components/breadcrumb/breadcrumb.2_items.story.yml
new file mode 100644
index 00000000..4eeb2ef5
--- /dev/null
+++ b/components/breadcrumb/breadcrumb.2_items.story.yml
@@ -0,0 +1,6 @@
+name: "2 Items"
+props:
+ items:
+ - title: Home
+ url: "#"
+ - title: Library
diff --git a/components/breadcrumb/breadcrumb.preview.story.yml b/components/breadcrumb/breadcrumb.3_items.story.yml
similarity index 86%
rename from components/breadcrumb/breadcrumb.preview.story.yml
rename to components/breadcrumb/breadcrumb.3_items.story.yml
index 070173ed..08a5881b 100644
--- a/components/breadcrumb/breadcrumb.preview.story.yml
+++ b/components/breadcrumb/breadcrumb.3_items.story.yml
@@ -1,4 +1,4 @@
-name: Preview
+name: "3 Items"
props:
items:
- title: Home
diff --git a/components/list/list.default_ol.story.yml b/components/list/list.default_ol.story.yml
new file mode 100644
index 00000000..82264689
--- /dev/null
+++ b/components/list/list.default_ol.story.yml
@@ -0,0 +1,9 @@
+name: "Default: ordered"
+slots:
+ items:
+ - markup: "Lorem ipsum"
+ - markup: "Phasellus iaculis"
+ - markup: "Nulla volutpat"
+props:
+ variant: default
+ list_type: ol
diff --git a/components/list/list.default_ul.story.yml b/components/list/list.default_ul.story.yml
new file mode 100644
index 00000000..b19a58da
--- /dev/null
+++ b/components/list/list.default_ul.story.yml
@@ -0,0 +1,9 @@
+name: "Default: unordered"
+slots:
+ items:
+ - markup: "Lorem ipsum"
+ - markup: "Phasellus iaculis"
+ - markup: "Nulla volutpat"
+props:
+ variant: default
+ list_type: ul
diff --git a/components/list/list.inline.story.yml b/components/list/list.inline.story.yml
new file mode 100644
index 00000000..f51e569e
--- /dev/null
+++ b/components/list/list.inline.story.yml
@@ -0,0 +1,9 @@
+name: Inline
+slots:
+ items:
+ - markup: "This is a list item."
+ - markup: "And another one."
+ - markup: "But they're displayed inline."
+props:
+ variant: inline
+ list_type: ul
diff --git a/components/list/list.preview.story.yml b/components/list/list.preview.story.yml
deleted file mode 100644
index 9b78f6fd..00000000
--- a/components/list/list.preview.story.yml
+++ /dev/null
@@ -1,14 +0,0 @@
-name: Preview
-slots:
- items:
- - type: html_tag
- tag: span
- value: "Lorem ipsum"
- - type: html_tag
- tag: span
- value: "Phasellus iaculis"
- - type: html_tag
- tag: span
- value: "Nulla volutpat"
-props:
- list_type: ul
diff --git a/components/list/list.unstyled.story.yml b/components/list/list.unstyled.story.yml
new file mode 100644
index 00000000..e95b5a2a
--- /dev/null
+++ b/components/list/list.unstyled.story.yml
@@ -0,0 +1,22 @@
+name: Unstyled
+slots:
+ items:
+ - markup: "This is a list."
+ - markup: "It appears completely unstyled."
+ - markup: "Structurally, it's still a list."
+ - markup: "However, this style only applies to immediate child elements."
+ - - markup: "Nested lists:"
+ - type: component
+ component: "ui_suite_bootstrap:list"
+ slots:
+ items:
+ - markup: "are unaffected by this style"
+ - markup: "will still show a bullet"
+ - markup: "and have appropriate left margin"
+ props:
+ variant: default
+ list_type: ul
+ - markup: "This may still come in handy in some situations."
+props:
+ variant: unstyled
+ list_type: ul
diff --git a/components/pagination/pagination.alignment_center.story.yml b/components/pagination/pagination.alignment_center.story.yml
new file mode 100644
index 00000000..29a5d3c0
--- /dev/null
+++ b/components/pagination/pagination.alignment_center.story.yml
@@ -0,0 +1,21 @@
+name: "Alignment: center"
+description: "Change the alignment of pagination components with flexbox utilities. For example, with .justify-content-center:"
+props:
+ items:
+ - url: "#"
+ title: "Previous"
+ attributes:
+ class:
+ - disabled
+ - url: "#"
+ title: "1"
+ - url: "#"
+ title: "2"
+ - url: "#"
+ title: "2"
+ - url: "#"
+ title: "Next"
+ variant: default
+ attributes:
+ class:
+ - justify-content-center
diff --git a/components/pagination/pagination.alignment_end.story.yml b/components/pagination/pagination.alignment_end.story.yml
new file mode 100644
index 00000000..7e01fb4d
--- /dev/null
+++ b/components/pagination/pagination.alignment_end.story.yml
@@ -0,0 +1,21 @@
+name: "Alignment: end"
+description: "Change the alignment of pagination components with flexbox utilities. For example, with .justify-content-end:"
+props:
+ items:
+ - url: "#"
+ title: "Previous"
+ attributes:
+ class:
+ - disabled
+ - url: "#"
+ title: "1"
+ - url: "#"
+ title: "2"
+ - url: "#"
+ title: "2"
+ - url: "#"
+ title: "Next"
+ variant: default
+ attributes:
+ class:
+ - justify-content-end
diff --git a/components/pagination/pagination.preview.story.yml b/components/pagination/pagination.default.story.yml
similarity index 67%
rename from components/pagination/pagination.preview.story.yml
rename to components/pagination/pagination.default.story.yml
index 0db30817..aebf2273 100644
--- a/components/pagination/pagination.preview.story.yml
+++ b/components/pagination/pagination.default.story.yml
@@ -1,16 +1,18 @@
-name: Preview
+name: Default
props:
items:
- url: "#"
title: "« First"
- url: "#"
title: "‹ Previous"
- - title: "4"
- url: "#"
- title: "5"
+ title: "1"
- url: "#"
- title: "6"
+ title: "2"
+ - url: "#"
+ title: "3"
- url: "#"
title: "Next ›"
- url: "#"
title: "Last »"
+ variant: default
diff --git a/components/pagination/pagination.sizing_large.story.yml b/components/pagination/pagination.sizing_large.story.yml
new file mode 100644
index 00000000..bd61b340
--- /dev/null
+++ b/components/pagination/pagination.sizing_large.story.yml
@@ -0,0 +1,9 @@
+name: "Sizing: large"
+props:
+ items:
+ - title: "1"
+ - url: "#"
+ title: "2"
+ - url: "#"
+ title: "3"
+ variant: lg
diff --git a/components/pagination/pagination.sizing_small.story.yml b/components/pagination/pagination.sizing_small.story.yml
new file mode 100644
index 00000000..49f11157
--- /dev/null
+++ b/components/pagination/pagination.sizing_small.story.yml
@@ -0,0 +1,9 @@
+name: "Sizing: small"
+props:
+ items:
+ - title: "1"
+ - url: "#"
+ title: "2"
+ - url: "#"
+ title: "3"
+ variant: sm
diff --git a/components/pagination/pagination.states.story.yml b/components/pagination/pagination.states.story.yml
new file mode 100644
index 00000000..20acfa7c
--- /dev/null
+++ b/components/pagination/pagination.states.story.yml
@@ -0,0 +1,16 @@
+name: "Disabled and active states"
+props:
+ items:
+ - url: "#"
+ title: "Previous"
+ attributes:
+ class:
+ - disabled
+ - url: "#"
+ title: "1"
+ - title: "2"
+ - url: "#"
+ title: "2"
+ - url: "#"
+ title: "Next"
+ variant: default
--
GitLab
From 009d8c591240f321ad616b60695158f060fe2a0c Mon Sep 17 00:00:00 2001
From: Florent Torregrosa <florent.torregrosa@gmail.com>
Date: Mon, 3 Mar 2025 15:34:15 +0100
Subject: [PATCH 02/15] Issue #3485834 by grimreaper: spinner, progress,
progress_stacked, figure.
---
components/figure/figure.alignment.story.yml | 14 +++++
...iew.story.yml => figure.default.story.yml} | 9 +--
.../progress/progress.background.story.yml | 53 ++++++++++++++++
.../progress.background_with_label.story.yml | 61 +++++++++++++++++++
.../progress/progress.default.story.yml | 22 +++++++
.../progress/progress.height_1.story.yml | 9 +++
.../progress/progress.height_20.story.yml | 9 +++
components/progress/progress.label.story.yml | 10 +++
.../progress/progress.label_long.story.yml | 14 +++++
.../progress/progress.preview.story.yml | 8 ---
...yml => progress_stacked.default.story.yml} | 2 +-
components/spinner/spinner.buttons.story.yml | 13 ++++
components/spinner/spinner.color.story.yml | 22 +++++++
...ew.story.yml => spinner.default.story.yml} | 2 +-
components/spinner/spinner.margin.story.yml | 9 +++
.../spinner/spinner.placement_flex.story.yml | 9 +++
.../spinner.placement_flex_2.story.yml | 12 ++++
.../spinner/spinner.placement_float.story.yml | 12 ++++
.../spinner/spinner.placement_text.story.yml | 9 +++
19 files changed, 285 insertions(+), 14 deletions(-)
create mode 100644 components/figure/figure.alignment.story.yml
rename components/figure/{figure.preview.story.yml => figure.default.story.yml} (89%)
create mode 100644 components/progress/progress.background.story.yml
create mode 100644 components/progress/progress.background_with_label.story.yml
create mode 100644 components/progress/progress.default.story.yml
create mode 100644 components/progress/progress.height_1.story.yml
create mode 100644 components/progress/progress.height_20.story.yml
create mode 100644 components/progress/progress.label.story.yml
create mode 100644 components/progress/progress.label_long.story.yml
delete mode 100644 components/progress/progress.preview.story.yml
rename components/progress_stacked/{progress_stacked.preview.story.yml => progress_stacked.default.story.yml} (98%)
create mode 100644 components/spinner/spinner.buttons.story.yml
create mode 100644 components/spinner/spinner.color.story.yml
rename components/spinner/{spinner.preview.story.yml => spinner.default.story.yml} (82%)
create mode 100644 components/spinner/spinner.margin.story.yml
create mode 100644 components/spinner/spinner.placement_flex.story.yml
create mode 100644 components/spinner/spinner.placement_flex_2.story.yml
create mode 100644 components/spinner/spinner.placement_float.story.yml
create mode 100644 components/spinner/spinner.placement_text.story.yml
diff --git a/components/figure/figure.alignment.story.yml b/components/figure/figure.alignment.story.yml
new file mode 100644
index 00000000..b8083906
--- /dev/null
+++ b/components/figure/figure.alignment.story.yml
@@ -0,0 +1,14 @@
+name: "Caption alignment"
+slots:
+ image:
+ theme: image
+ uri: "data:image/svg+xml;base64,PHN2ZyBzdHlsZT0iZm9udC1zaXplOiAxLjEyNXJlbTsgdGV4dC1hbmNob3I6IG1pZGRsZTsgdXNlci1zZWxlY3Q6IG5vbmU7IiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIyNTQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQgc2xpY2UiIGZvY3VzYWJsZT0iZmFsc2UiIHJvbGU9ImltZyIgYXJpYS1sYWJlbD0iUGxhY2Vob2xkZXI6IEltYWdlIGNhcCI+PHRpdGxlPlBsYWNlaG9sZGVyPC90aXRsZT48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjODY4ZTk2Ij48L3JlY3Q+PHRleHQgeD0iNTAlIiB5PSI1MCUiIGZpbGw9IiNkZWUyZTYiIGR5PSIuM2VtIj5JbWFnZSBjYXA8L3RleHQ+PC9zdmc+Cg=="
+ alt: "© 2017 John Smith photography"
+ attributes:
+ class:
+ - img-fluid
+ - rounded
+ caption: "A caption for the above image."
+props:
+ figcaption_attributes:
+ class: text-end
diff --git a/components/figure/figure.preview.story.yml b/components/figure/figure.default.story.yml
similarity index 89%
rename from components/figure/figure.preview.story.yml
rename to components/figure/figure.default.story.yml
index be5cf179..689f2ab7 100644
--- a/components/figure/figure.preview.story.yml
+++ b/components/figure/figure.default.story.yml
@@ -1,10 +1,11 @@
-name: Preview
+name: Default
slots:
image:
theme: image
uri: "data:image/svg+xml;base64,PHN2ZyBzdHlsZT0iZm9udC1zaXplOiAxLjEyNXJlbTsgdGV4dC1hbmNob3I6IG1pZGRsZTsgdXNlci1zZWxlY3Q6IG5vbmU7IiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIyNTQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQgc2xpY2UiIGZvY3VzYWJsZT0iZmFsc2UiIHJvbGU9ImltZyIgYXJpYS1sYWJlbD0iUGxhY2Vob2xkZXI6IEltYWdlIGNhcCI+PHRpdGxlPlBsYWNlaG9sZGVyPC90aXRsZT48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjODY4ZTk2Ij48L3JlY3Q+PHRleHQgeD0iNTAlIiB5PSI1MCUiIGZpbGw9IiNkZWUyZTYiIGR5PSIuM2VtIj5JbWFnZSBjYXA8L3RleHQ+PC9zdmc+Cg=="
alt: "© 2017 John Smith photography"
+ attributes:
+ class:
+ - img-fluid
+ - rounded
caption: "A caption for the above image."
-props:
- figcaption_attributes:
- class: text-end
diff --git a/components/progress/progress.background.story.yml b/components/progress/progress.background.story.yml
new file mode 100644
index 00000000..014635d6
--- /dev/null
+++ b/components/progress/progress.background.story.yml
@@ -0,0 +1,53 @@
+name: Background
+props:
+ min: 0
+ max: 100
+ stacked: false
+library_wrapper: >
+ {% set examples = [
+ {
+ width: 10,
+ aria: 'Default example'|t,
+ classes: [],
+ },
+ {
+ width: 25,
+ aria: 'Success example'|t,
+ classes: [
+ 'bg-success',
+ ],
+ },
+ {
+ width: 50,
+ aria: 'Info example'|t,
+ classes: [
+ 'bg-info',
+ ],
+ },
+ {
+ width: 75,
+ aria: 'Warning example'|t,
+ classes: [
+ 'bg-warning',
+ ],
+ },
+ {
+ width: 100,
+ aria: 'Danger example'|t,
+ classes: [
+ 'bg-danger',
+ ],
+ },
+ ] %}
+ {% for example in examples %}
+ {% set example_props = {'#props': _story['#props']|merge({
+ 'percent': example.width,
+ 'aria_label': example.aria,
+ 'attributes': create_attribute({class: example.classes})
+ })} %}
+
+ {% set example_story = _story %}
+ <div class="mt-3">
+ {{ example_story|merge(example_props) }}
+ </div>
+ {% endfor %}
diff --git a/components/progress/progress.background_with_label.story.yml b/components/progress/progress.background_with_label.story.yml
new file mode 100644
index 00000000..e53706a1
--- /dev/null
+++ b/components/progress/progress.background_with_label.story.yml
@@ -0,0 +1,61 @@
+name: "Background with label"
+props:
+ min: 0
+ max: 100
+ stacked: false
+library_wrapper: >
+ {% set examples = [
+ {
+ label: '10%',
+ width: 10,
+ aria: 'Default example'|t,
+ classes: [],
+ },
+ {
+ label: '25%',
+ width: 25,
+ aria: 'Success example'|t,
+ classes: [
+ 'text-bg-success',
+ ],
+ },
+ {
+ label: '50%',
+ width: 50,
+ aria: 'Info example'|t,
+ classes: [
+ 'text-bg-info',
+ ],
+ },
+ {
+ label: '75%',
+ width: 75,
+ aria: 'Warning example'|t,
+ classes: [
+ 'text-bg-warning',
+ ],
+ },
+ {
+ label: '100%',
+ width: 100,
+ aria: 'Danger example'|t,
+ classes: [
+ 'text-bg-danger',
+ ],
+ },
+ ] %}
+ {% for example in examples %}
+ {% set example_props = {'#props': _story['#props']|merge({
+ 'percent': example.width,
+ 'aria_label': example.aria,
+ 'attributes': create_attribute({class: example.classes})
+ })} %}
+ {% set example_slots = {'#slots': _story['#slots']|merge({
+ 'label': example.label,
+ })} %}
+
+ {% set example_story = _story %}
+ <div class="mt-3">
+ {{ example_story|merge(example_props)|merge(example_slots) }}
+ </div>
+ {% endfor %}
diff --git a/components/progress/progress.default.story.yml b/components/progress/progress.default.story.yml
new file mode 100644
index 00000000..07fec761
--- /dev/null
+++ b/components/progress/progress.default.story.yml
@@ -0,0 +1,22 @@
+name: Default
+props:
+ variant: default
+ min: 0
+ max: 100
+ stacked: false
+ aria_label: "Basic example"
+library_wrapper: >
+ {% set widths = [
+ 0,
+ 25,
+ 50,
+ 75,
+ 100,
+ ] %}
+ {% for width in widths %}
+ {% set width_props = {'#props': _story['#props']|merge({'percent': width})} %}
+ {% set width_story = _story %}
+ <div class="mt-3">
+ {{ width_story|merge(width_props) }}
+ </div>
+ {% endfor %}
diff --git a/components/progress/progress.height_1.story.yml b/components/progress/progress.height_1.story.yml
new file mode 100644
index 00000000..2e1183b5
--- /dev/null
+++ b/components/progress/progress.height_1.story.yml
@@ -0,0 +1,9 @@
+name: "Height 1px"
+props:
+ variant: default
+ percent: 25
+ min: 0
+ max: 100
+ stacked: false
+ bar_height: 1
+ aria_label: "Example 1px high"
diff --git a/components/progress/progress.height_20.story.yml b/components/progress/progress.height_20.story.yml
new file mode 100644
index 00000000..c5993fca
--- /dev/null
+++ b/components/progress/progress.height_20.story.yml
@@ -0,0 +1,9 @@
+name: "Height 20px"
+props:
+ variant: default
+ percent: 25
+ min: 0
+ max: 100
+ stacked: false
+ bar_height: 20
+ aria_label: "Example 20px high"
diff --git a/components/progress/progress.label.story.yml b/components/progress/progress.label.story.yml
new file mode 100644
index 00000000..86e063dc
--- /dev/null
+++ b/components/progress/progress.label.story.yml
@@ -0,0 +1,10 @@
+name: "Label"
+slots:
+ label: 25%
+props:
+ variant: default
+ percent: 25
+ min: 0
+ max: 100
+ stacked: false
+ aria_label: "Example with label"
diff --git a/components/progress/progress.label_long.story.yml b/components/progress/progress.label_long.story.yml
new file mode 100644
index 00000000..6f008988
--- /dev/null
+++ b/components/progress/progress.label_long.story.yml
@@ -0,0 +1,14 @@
+name: "Label: long"
+slots:
+ label: "Long label text for the progress bar, set to a dark color"
+props:
+ variant: default
+ attributes:
+ class:
+ - overflow-visible
+ - text-dark
+ percent: 10
+ min: 0
+ max: 100
+ stacked: false
+ aria_label: "Example with label"
diff --git a/components/progress/progress.preview.story.yml b/components/progress/progress.preview.story.yml
deleted file mode 100644
index ec0b5577..00000000
--- a/components/progress/progress.preview.story.yml
+++ /dev/null
@@ -1,8 +0,0 @@
-name: Preview
-slots:
- label: Label
-props:
- percent: 50
- min: 0
- max: 100
- stacked: false
diff --git a/components/progress_stacked/progress_stacked.preview.story.yml b/components/progress_stacked/progress_stacked.default.story.yml
similarity index 98%
rename from components/progress_stacked/progress_stacked.preview.story.yml
rename to components/progress_stacked/progress_stacked.default.story.yml
index 3ba5a8c9..db49c0dd 100644
--- a/components/progress_stacked/progress_stacked.preview.story.yml
+++ b/components/progress_stacked/progress_stacked.default.story.yml
@@ -1,4 +1,4 @@
-name: Preview
+name: Default
slots:
items:
- type: component
diff --git a/components/spinner/spinner.buttons.story.yml b/components/spinner/spinner.buttons.story.yml
new file mode 100644
index 00000000..ffb57d86
--- /dev/null
+++ b/components/spinner/spinner.buttons.story.yml
@@ -0,0 +1,13 @@
+name: "Buttons"
+props:
+# variant: border
+ aria_hidden: true
+library_wrapper: >
+ <button class="btn btn-primary" type="button" disabled>
+ {{ _story }}
+ <span class="visually-hidden" role="status">{{ 'Loading...'|t }}</span>
+ </button>
+ <button class="btn btn-primary" type="button" disabled>
+ {{ _story }}
+ <span role="status">{{ 'Loading...'|t }}</span>
+ </button>
diff --git a/components/spinner/spinner.color.story.yml b/components/spinner/spinner.color.story.yml
new file mode 100644
index 00000000..faadb9c4
--- /dev/null
+++ b/components/spinner/spinner.color.story.yml
@@ -0,0 +1,22 @@
+name: Colors
+props:
+ aria_hidden: false
+ visually_hidden_label: Loading...
+library_wrapper: >
+ {% set colors = [
+ 'primary',
+ 'secondary',
+ 'success',
+ 'danger',
+ 'warning',
+ 'info',
+ 'light',
+ 'dark',
+ ] %}
+ {% for color in colors %}
+ {% set color_props = {'#props': _story['#props']|merge({'attributes': create_attribute({
+ class: ['text-' ~ color]
+ })})} %}
+ {% set color_story = _story %}
+ {{ color_story|merge(color_props) }}
+ {% endfor %}
diff --git a/components/spinner/spinner.preview.story.yml b/components/spinner/spinner.default.story.yml
similarity index 82%
rename from components/spinner/spinner.preview.story.yml
rename to components/spinner/spinner.default.story.yml
index 1e0bacf5..f39768b0 100644
--- a/components/spinner/spinner.preview.story.yml
+++ b/components/spinner/spinner.default.story.yml
@@ -1,4 +1,4 @@
-name: Preview
+name: Default
props:
aria_hidden: false
visually_hidden_label: Loading...
diff --git a/components/spinner/spinner.margin.story.yml b/components/spinner/spinner.margin.story.yml
new file mode 100644
index 00000000..bde93bbc
--- /dev/null
+++ b/components/spinner/spinner.margin.story.yml
@@ -0,0 +1,9 @@
+name: Margin
+props:
+ variant: border
+ attributes:
+ class:
+ - m-5
+ aria_hidden: false
+ visually_hidden_label: Loading...
+
diff --git a/components/spinner/spinner.placement_flex.story.yml b/components/spinner/spinner.placement_flex.story.yml
new file mode 100644
index 00000000..8083ee77
--- /dev/null
+++ b/components/spinner/spinner.placement_flex.story.yml
@@ -0,0 +1,9 @@
+name: "Placement: flex"
+props:
+ variant: border
+ aria_hidden: false
+ visually_hidden_label: Loading...
+library_wrapper: >
+ <div class="d-flex justify-content-center">
+ {{ _story }}
+ </div>
diff --git a/components/spinner/spinner.placement_flex_2.story.yml b/components/spinner/spinner.placement_flex_2.story.yml
new file mode 100644
index 00000000..8907c6e1
--- /dev/null
+++ b/components/spinner/spinner.placement_flex_2.story.yml
@@ -0,0 +1,12 @@
+name: "Placement: flex 2"
+props:
+ variant: border
+ attributes:
+ class:
+ - ms-auto
+ aria_hidden: true
+library_wrapper: >
+ <div class="d-flex align-items-center">
+ <strong role="status">{{ 'Loading...'|t }}</strong>
+ {{ _story }}
+ </div>
diff --git a/components/spinner/spinner.placement_float.story.yml b/components/spinner/spinner.placement_float.story.yml
new file mode 100644
index 00000000..6b9e4ba2
--- /dev/null
+++ b/components/spinner/spinner.placement_float.story.yml
@@ -0,0 +1,12 @@
+name: "Placement: float"
+props:
+ variant: border
+ attributes:
+ class:
+ - float-end
+ aria_hidden: false
+ visually_hidden_label: Loading...
+library_wrapper: >
+ <div class="clearfix">
+ {{ _story }}
+ </div>
diff --git a/components/spinner/spinner.placement_text.story.yml b/components/spinner/spinner.placement_text.story.yml
new file mode 100644
index 00000000..3a493521
--- /dev/null
+++ b/components/spinner/spinner.placement_text.story.yml
@@ -0,0 +1,9 @@
+name: "Placement: text align"
+props:
+ variant: border
+ aria_hidden: false
+ visually_hidden_label: Loading...
+library_wrapper: >
+ <div class="text-center">
+ {{ _story }}
+ </div>
--
GitLab
From 67b0b18bc50914cf5dff43ac736d866d598c72ca Mon Sep 17 00:00:00 2001
From: Florent Torregrosa <florent.torregrosa@gmail.com>
Date: Mon, 3 Mar 2025 16:19:12 +0100
Subject: [PATCH 03/15] Issue #3485834 by grimreaper: Badge, close button,
accordion
---
.../accordion/accordion.always_open.story.yml | 45 +++++++++++++++++++
....story.yml => accordion.default.story.yml} | 2 +-
components/badge/badge.background.story.yml | 22 +++++++++
components/badge/badge.button.story.yml | 12 +++++
.../badge/badge.button_positioned.story.yml | 24 ++++++++++
.../badge.button_positioned_generic.story.yml | 9 ++++
components/badge/badge.headings.story.yml | 19 ++++++++
components/badge/badge.pill.story.yml | 26 +++++++++++
components/badge/badge.preview.story.yml | 7 ---
.../close_button/close_button.dark.story.yml | 11 ++++-
.../close_button/close_button.light.story.yml | 13 ++++++
.../close_button.preview.story.yml | 5 ---
.../close_button/close_button.white.story.yml | 5 ++-
13 files changed, 185 insertions(+), 15 deletions(-)
create mode 100644 components/accordion/accordion.always_open.story.yml
rename components/accordion/{accordion.preview.story.yml => accordion.default.story.yml} (99%)
create mode 100644 components/badge/badge.background.story.yml
create mode 100644 components/badge/badge.button.story.yml
create mode 100644 components/badge/badge.button_positioned.story.yml
create mode 100644 components/badge/badge.button_positioned_generic.story.yml
create mode 100644 components/badge/badge.headings.story.yml
create mode 100644 components/badge/badge.pill.story.yml
delete mode 100644 components/badge/badge.preview.story.yml
create mode 100644 components/close_button/close_button.light.story.yml
delete mode 100644 components/close_button/close_button.preview.story.yml
diff --git a/components/accordion/accordion.always_open.story.yml b/components/accordion/accordion.always_open.story.yml
new file mode 100644
index 00000000..6f394e1a
--- /dev/null
+++ b/components/accordion/accordion.always_open.story.yml
@@ -0,0 +1,45 @@
+name: "Always open"
+slots:
+ content:
+ - type: component
+ component: "ui_suite_bootstrap:accordion_item"
+ slots:
+ title: "Accordion Item #1"
+ content:
+ type: html_tag
+ tag: p
+ value: "Mollis pretium lorem primis senectus habitasse lectus scelerisque donec, ultricies tortor suspendisse adipiscing fusce morbi volutpat pellentesque, consectetur mi risus molestie curae malesuada cum. Dignissim lacus convallis massa mauris enim ad mattis magnis senectus montes, mollis taciti phasellus accumsan bibendum semper blandit suspendisse faucibus nibh est, metus lobortis morbi cras magna vivamus per risus fermentum."
+ props:
+ opened: true
+ - type: component
+ component: "ui_suite_bootstrap:accordion_item"
+ slots:
+ title: "Accordion Item #2"
+ content:
+ type: html_tag
+ tag: p
+ value: "Mollis pretium lorem primis senectus habitasse lectus scelerisque donec, ultricies tortor suspendisse adipiscing fusce morbi volutpat pellentesque, consectetur mi risus molestie curae malesuada cum. Dignissim lacus convallis massa mauris enim ad mattis magnis senectus montes, mollis taciti phasellus accumsan bibendum semper blandit suspendisse faucibus nibh est, metus lobortis morbi cras magna vivamus per risus fermentum."
+ props:
+ opened: false
+ - type: component
+ component: "ui_suite_bootstrap:accordion_item"
+ slots:
+ title: "Accordion Item #3"
+ content:
+ type: html_tag
+ tag: p
+ value: "Mollis pretium lorem primis senectus habitasse lectus scelerisque donec, ultricies tortor suspendisse adipiscing fusce morbi volutpat pellentesque, consectetur mi risus molestie curae malesuada cum. Dignissim lacus convallis massa mauris enim ad mattis magnis senectus montes, mollis taciti phasellus accumsan bibendum semper blandit suspendisse faucibus nibh est, metus lobortis morbi cras magna vivamus per risus fermentum."
+ props:
+ opened: false
+ - type: component
+ component: "ui_suite_bootstrap:accordion_item"
+ slots:
+ title: "Accordion Item #4"
+ content:
+ type: html_tag
+ tag: p
+ value: "Mollis pretium lorem primis senectus habitasse lectus scelerisque donec, ultricies tortor suspendisse adipiscing fusce morbi volutpat pellentesque, consectetur mi risus molestie curae malesuada cum. Dignissim lacus convallis massa mauris enim ad mattis magnis senectus montes, mollis taciti phasellus accumsan bibendum semper blandit suspendisse faucibus nibh est, metus lobortis morbi cras magna vivamus per risus fermentum."
+ props:
+ opened: false
+props:
+ keep_open: true
diff --git a/components/accordion/accordion.preview.story.yml b/components/accordion/accordion.default.story.yml
similarity index 99%
rename from components/accordion/accordion.preview.story.yml
rename to components/accordion/accordion.default.story.yml
index 0657e81b..5c7c0b35 100644
--- a/components/accordion/accordion.preview.story.yml
+++ b/components/accordion/accordion.default.story.yml
@@ -1,4 +1,4 @@
-name: Preview
+name: Default
slots:
content:
- type: component
diff --git a/components/badge/badge.background.story.yml b/components/badge/badge.background.story.yml
new file mode 100644
index 00000000..329a54b5
--- /dev/null
+++ b/components/badge/badge.background.story.yml
@@ -0,0 +1,22 @@
+name: "Background colors"
+library_wrapper: >
+ {% set colors = [
+ 'primary',
+ 'secondary',
+ 'success',
+ 'danger',
+ 'warning',
+ 'info',
+ 'light',
+ 'dark',
+ ] %}
+ {% for color in colors %}
+ {% set color_props = {'#props': _story['#props']|merge({'attributes': create_attribute({
+ class: ['text-bg-' ~ color]
+ })})} %}
+ {% set color_slots = {'#slots': _story['#slots']|merge({
+ 'label': color|capitalize,
+ })} %}
+ {% set color_story = _story %}
+ {{ color_story|merge(color_props)|merge(color_slots) }}
+ {% endfor %}
diff --git a/components/badge/badge.button.story.yml b/components/badge/badge.button.story.yml
new file mode 100644
index 00000000..4a160b43
--- /dev/null
+++ b/components/badge/badge.button.story.yml
@@ -0,0 +1,12 @@
+name: Button
+description: "Badges can be used as part of links or buttons to provide a counter."
+slots:
+ label: 4
+props:
+ attributes:
+ class:
+ - text-bg-secondary
+library_wrapper: >
+ <button type="button" class="btn btn-primary">
+ {{ 'Notifications'|t }} {{ _story }}
+ </button>
diff --git a/components/badge/badge.button_positioned.story.yml b/components/badge/badge.button_positioned.story.yml
new file mode 100644
index 00000000..9964f0f9
--- /dev/null
+++ b/components/badge/badge.button_positioned.story.yml
@@ -0,0 +1,24 @@
+name: "Button: positioned"
+description: "Use utilities to modify a .badge and position it in the corner of a link or button."
+slots:
+ label:
+ - markup: 99+
+ - type: html_tag
+ tag: span
+ value: "unread messages"
+ attributes:
+ class:
+ - visually-hidden
+props:
+ attributes:
+ class:
+ - position-absolute
+ - top-0
+ - start-100
+ - translate-middle
+ - bg-danger
+ - rounded-pill
+library_wrapper: >
+ <button type="button" class="btn btn-primary position-relative">
+ {{ 'Inbox'|t }} {{ _story }}
+ </button>
diff --git a/components/badge/badge.button_positioned_generic.story.yml b/components/badge/badge.button_positioned_generic.story.yml
new file mode 100644
index 00000000..38460605
--- /dev/null
+++ b/components/badge/badge.button_positioned_generic.story.yml
@@ -0,0 +1,9 @@
+name: "Button: positioned generic"
+description: "You can also replace the .badge class with a few more utilities without a count for a more generic indicator."
+library_wrapper: >
+ <button type="button" class="btn btn-primary position-relative">
+ {{ 'Profile'|t }}
+ <span class="position-absolute top-0 start-100 translate-middle p-2 bg-danger border border-light rounded-circle">
+ <span class="visually-hidden">{{ 'New alerts'|t }}</span>
+ </span>
+ </button>
diff --git a/components/badge/badge.headings.story.yml b/components/badge/badge.headings.story.yml
new file mode 100644
index 00000000..bd45afbb
--- /dev/null
+++ b/components/badge/badge.headings.story.yml
@@ -0,0 +1,19 @@
+name: Headings
+slots:
+ label: New
+props:
+ attributes:
+ class:
+ - text-bg-secondary
+library_wrapper: >
+ {% set headings = [
+ 'h1',
+ 'h2',
+ 'h3',
+ 'h4',
+ 'h5',
+ 'h6',
+ ] %}
+ {% for heading in headings %}
+ <{{ heading }}>{{ 'Example heading'|t }} {{ _story }}</{{ heading }}>
+ {% endfor %}
diff --git a/components/badge/badge.pill.story.yml b/components/badge/badge.pill.story.yml
new file mode 100644
index 00000000..56848861
--- /dev/null
+++ b/components/badge/badge.pill.story.yml
@@ -0,0 +1,26 @@
+name: "Pill badges"
+description: "Use the .rounded-pill utility class to make badges more rounded with a larger border-radius."
+library_wrapper: >
+ {% set colors = [
+ 'primary',
+ 'secondary',
+ 'success',
+ 'danger',
+ 'warning',
+ 'info',
+ 'light',
+ 'dark',
+ ] %}
+ {% for color in colors %}
+ {% set color_props = {'#props': _story['#props']|merge({'attributes': create_attribute({
+ class: [
+ 'text-bg-' ~ color,
+ 'rounded-pill',
+ ]
+ })})} %}
+ {% set color_slots = {'#slots': _story['#slots']|merge({
+ 'label': color|capitalize,
+ })} %}
+ {% set color_story = _story %}
+ {{ color_story|merge(color_props)|merge(color_slots) }}
+ {% endfor %}
diff --git a/components/badge/badge.preview.story.yml b/components/badge/badge.preview.story.yml
deleted file mode 100644
index df97b4bd..00000000
--- a/components/badge/badge.preview.story.yml
+++ /dev/null
@@ -1,7 +0,0 @@
-name: Preview
-slots:
- label: New
-props:
- attributes:
- class:
- - text-bg-primary
diff --git a/components/close_button/close_button.dark.story.yml b/components/close_button/close_button.dark.story.yml
index 707d9f3d..8e714a5e 100644
--- a/components/close_button/close_button.dark.story.yml
+++ b/components/close_button/close_button.dark.story.yml
@@ -1,6 +1,15 @@
name: Dark
+description: "Normal and disabled state."
props:
variant: default
disabled: false
aria_label: Close
-library_wrapper: "<div class=\"bg-dark\" data-bs-theme=\"dark\">{{ _story }}</div"
+library_wrapper: >
+ <div data-bs-theme="dark" class="bg-dark">
+ {{ _story }}
+
+ {% set disabled_props = {'#props': _story['#props']|merge({
+ 'disabled': true,
+ })} %}
+ {{ _story|merge(disabled_props) }}
+ </div>
diff --git a/components/close_button/close_button.light.story.yml b/components/close_button/close_button.light.story.yml
new file mode 100644
index 00000000..9fea8294
--- /dev/null
+++ b/components/close_button/close_button.light.story.yml
@@ -0,0 +1,13 @@
+name: "Light (default)"
+description: "Normal and disabled state."
+props:
+ variant: default
+ disabled: false
+ aria_label: Close
+library_wrapper: >
+ {{ _story }}
+
+ {% set disabled_props = {'#props': _story['#props']|merge({
+ 'disabled': true,
+ })} %}
+ {{ _story|merge(disabled_props) }}
diff --git a/components/close_button/close_button.preview.story.yml b/components/close_button/close_button.preview.story.yml
deleted file mode 100644
index 9c95156e..00000000
--- a/components/close_button/close_button.preview.story.yml
+++ /dev/null
@@ -1,5 +0,0 @@
-name: Preview
-props:
- variant: default
- disabled: false
- aria_label: Close
diff --git a/components/close_button/close_button.white.story.yml b/components/close_button/close_button.white.story.yml
index 30820780..6de1b00b 100644
--- a/components/close_button/close_button.white.story.yml
+++ b/components/close_button/close_button.white.story.yml
@@ -3,4 +3,7 @@ props:
variant: white
disabled: false
aria_label: Close
-library_wrapper: "<div class=\"bg-dark\">{{ _story }}</div"
+library_wrapper: >
+ <div class="bg-dark">
+ {{ _story }}
+ </div>
--
GitLab
From d82e09d2a161876601cbcd79435861911eb76ccd Mon Sep 17 00:00:00 2001
From: Florent Torregrosa <florent.torregrosa@gmail.com>
Date: Mon, 3 Mar 2025 18:10:05 +0100
Subject: [PATCH 04/15] Issue #3485834 by grimreaper: alert, button, button
group
---
components/alert/alert.complete.story.yml | 19 +++++++++++
components/alert/alert.default.story.yml | 5 +++
components/alert/alert.dismissing.story.yml | 5 +++
components/alert/alert.icon.story.yml | 21 ++++++++++++
components/alert/alert.link.story.yml | 5 +++
components/alert/alert.preview.story.yml | 6 ----
...iew.story.yml => button.default.story.yml} | 2 +-
components/button/button.disabled.story.yml | 6 ++++
.../button/button.disabled_link.story.yml | 7 ++++
components/button/button.tags.story.yml | 14 ++++++++
...ory.yml => button_group.default.story.yml} | 14 ++++----
.../button_group/button_group.link.story.yml | 29 ++++++++++++++++
.../button_group/button_group.mixed.story.yml | 24 ++++++++++++++
.../button_group.nesting.story.yml | 33 +++++++++++++++++++
.../button_group.outlined.story.yml | 24 ++++++++++++++
15 files changed, 200 insertions(+), 14 deletions(-)
create mode 100644 components/alert/alert.complete.story.yml
create mode 100644 components/alert/alert.default.story.yml
create mode 100644 components/alert/alert.dismissing.story.yml
create mode 100644 components/alert/alert.icon.story.yml
create mode 100644 components/alert/alert.link.story.yml
delete mode 100644 components/alert/alert.preview.story.yml
rename components/button/{button.preview.story.yml => button.default.story.yml} (88%)
create mode 100644 components/button/button.disabled.story.yml
create mode 100644 components/button/button.disabled_link.story.yml
create mode 100644 components/button/button.tags.story.yml
rename components/button_group/{button_group.preview.story.yml => button_group.default.story.yml} (67%)
create mode 100644 components/button_group/button_group.link.story.yml
create mode 100644 components/button_group/button_group.mixed.story.yml
create mode 100644 components/button_group/button_group.nesting.story.yml
create mode 100644 components/button_group/button_group.outlined.story.yml
diff --git a/components/alert/alert.complete.story.yml b/components/alert/alert.complete.story.yml
new file mode 100644
index 00000000..d12c80ef
--- /dev/null
+++ b/components/alert/alert.complete.story.yml
@@ -0,0 +1,19 @@
+name: Complete
+description: "Alerts can also contain additional HTML elements like headings, paragraphs and dividers."
+slots:
+ heading: "Well done!"
+ message:
+ - type: html_tag
+ tag: p
+ value: "Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content."
+ - type: html_tag
+ tag: hr
+ - type: html_tag
+ tag: p
+ value: "Whenever you need to, be sure to use margin utilities to keep things nice and tidy."
+ attributes:
+ class:
+ - mb-0
+props:
+ variant: success
+ dismissible: false
diff --git a/components/alert/alert.default.story.yml b/components/alert/alert.default.story.yml
new file mode 100644
index 00000000..46bb274b
--- /dev/null
+++ b/components/alert/alert.default.story.yml
@@ -0,0 +1,5 @@
+name: Default
+slots:
+ message: "A simple alert. Check it out!"
+props:
+ dismissible: false
diff --git a/components/alert/alert.dismissing.story.yml b/components/alert/alert.dismissing.story.yml
new file mode 100644
index 00000000..82f4f119
--- /dev/null
+++ b/components/alert/alert.dismissing.story.yml
@@ -0,0 +1,5 @@
+name: Dismissing
+slots:
+ message: "<strong>Holy guacamole!</strong> You should check in on some of those fields below."
+props:
+ dismissible: true
diff --git a/components/alert/alert.icon.story.yml b/components/alert/alert.icon.story.yml
new file mode 100644
index 00000000..93e71062
--- /dev/null
+++ b/components/alert/alert.icon.story.yml
@@ -0,0 +1,21 @@
+name: Icon
+slots:
+ message:
+ - type: icon
+ pack_id: 'bootstrap'
+ icon_id: 'exclamation-triangle-fill'
+ settings:
+ size: '1em'
+ - type: html_tag
+ tag: div
+ value: "An example alert with an icon"
+ attributes:
+ class:
+ - 'ms-2'
+props:
+ variant: primary
+ attributes:
+ class:
+ - d-flex
+ - align-items-center
+ dismissible: false
diff --git a/components/alert/alert.link.story.yml b/components/alert/alert.link.story.yml
new file mode 100644
index 00000000..f70547c6
--- /dev/null
+++ b/components/alert/alert.link.story.yml
@@ -0,0 +1,5 @@
+name: "Link color"
+slots:
+ message: 'A simple alert with <a href="#">an example link</a>. Give it a click if you like.'
+props:
+ dismissible: false
diff --git a/components/alert/alert.preview.story.yml b/components/alert/alert.preview.story.yml
deleted file mode 100644
index 337b2658..00000000
--- a/components/alert/alert.preview.story.yml
+++ /dev/null
@@ -1,6 +0,0 @@
-name: Preview
-slots:
- heading: "Well done!"
- message: "A simple alert. Check it out!"
-props:
- dismissible: true
diff --git a/components/button/button.preview.story.yml b/components/button/button.default.story.yml
similarity index 88%
rename from components/button/button.preview.story.yml
rename to components/button/button.default.story.yml
index 4cc11dda..cc9d62b6 100644
--- a/components/button/button.preview.story.yml
+++ b/components/button/button.default.story.yml
@@ -1,4 +1,4 @@
-name: Preview
+name: Default
slots:
label: Submit
props:
diff --git a/components/button/button.disabled.story.yml b/components/button/button.disabled.story.yml
new file mode 100644
index 00000000..0f9899c1
--- /dev/null
+++ b/components/button/button.disabled.story.yml
@@ -0,0 +1,6 @@
+name: Disabled
+slots:
+ label: Submit
+props:
+ disabled: true
+ label_visually_hidden: false
diff --git a/components/button/button.disabled_link.story.yml b/components/button/button.disabled_link.story.yml
new file mode 100644
index 00000000..b4dc47fc
--- /dev/null
+++ b/components/button/button.disabled_link.story.yml
@@ -0,0 +1,7 @@
+name: Disabled
+slots:
+ label: Submit
+props:
+ disabled: true
+ label_visually_hidden: false
+ url: "#"
diff --git a/components/button/button.tags.story.yml b/components/button/button.tags.story.yml
new file mode 100644
index 00000000..e36d8afb
--- /dev/null
+++ b/components/button/button.tags.story.yml
@@ -0,0 +1,14 @@
+name: "Button tags"
+slots:
+ label: Link
+props:
+ variant: primary
+ disabled: false
+ label_visually_hidden: false
+ url: "#"
+library_wrapper: >
+ {{ _story }}
+ <button class="btn btn-primary" type="submit">{{ 'Button'|t }}</button>
+ <input class="btn btn-primary" type="button" value="{{ 'Input'|t }}">
+ <input class="btn btn-primary" type="submit" value="{{ 'Submit'|t }}">
+ <input class="btn btn-primary" type="reset" value="{{ 'Reset'|t }}">
diff --git a/components/button_group/button_group.preview.story.yml b/components/button_group/button_group.default.story.yml
similarity index 67%
rename from components/button_group/button_group.preview.story.yml
rename to components/button_group/button_group.default.story.yml
index 1574045d..8ac340b9 100644
--- a/components/button_group/button_group.preview.story.yml
+++ b/components/button_group/button_group.default.story.yml
@@ -1,23 +1,23 @@
-name: Preview
+name: Default
slots:
buttons:
- type: component
component: "ui_suite_bootstrap:button"
slots:
- label: First
+ label: Left
props:
- variant: secondary
+ variant: primary
- type: component
component: "ui_suite_bootstrap:button"
slots:
- label: Second
+ label: Middle
props:
- variant: secondary
+ variant: primary
- type: component
component: "ui_suite_bootstrap:button"
slots:
- label: Third
+ label: Right
props:
- variant: secondary
+ variant: primary
props:
label: "Basic example"
diff --git a/components/button_group/button_group.link.story.yml b/components/button_group/button_group.link.story.yml
new file mode 100644
index 00000000..36e1249f
--- /dev/null
+++ b/components/button_group/button_group.link.story.yml
@@ -0,0 +1,29 @@
+name: Link
+slots:
+ buttons:
+ - type: component
+ component: "ui_suite_bootstrap:button"
+ slots:
+ label: "Active link"
+ props:
+ variant: primary
+ attributes:
+ class:
+ - active
+ url: "#"
+ - type: component
+ component: "ui_suite_bootstrap:button"
+ slots:
+ label: Link
+ props:
+ variant: primary
+ url: "#"
+ - type: component
+ component: "ui_suite_bootstrap:button"
+ slots:
+ label: Link
+ props:
+ variant: primary
+ url: "#"
+props:
+ variant: default
diff --git a/components/button_group/button_group.mixed.story.yml b/components/button_group/button_group.mixed.story.yml
new file mode 100644
index 00000000..08d968de
--- /dev/null
+++ b/components/button_group/button_group.mixed.story.yml
@@ -0,0 +1,24 @@
+name: "Mixed styles"
+slots:
+ buttons:
+ - type: component
+ component: "ui_suite_bootstrap:button"
+ slots:
+ label: Left
+ props:
+ variant: danger
+ - type: component
+ component: "ui_suite_bootstrap:button"
+ slots:
+ label: Middle
+ props:
+ variant: warning
+ - type: component
+ component: "ui_suite_bootstrap:button"
+ slots:
+ label: Right
+ props:
+ variant: success
+props:
+ variant: default
+ label: "Basic mixed styles example"
diff --git a/components/button_group/button_group.nesting.story.yml b/components/button_group/button_group.nesting.story.yml
new file mode 100644
index 00000000..d2b24ce0
--- /dev/null
+++ b/components/button_group/button_group.nesting.story.yml
@@ -0,0 +1,33 @@
+name: "Nesting"
+slots:
+ buttons:
+ - type: component
+ component: "ui_suite_bootstrap:button"
+ slots:
+ label: 1
+ props:
+ variant: primary
+ - type: component
+ component: "ui_suite_bootstrap:button"
+ slots:
+ label: 2
+ props:
+ variant: primary
+ - type: component
+ component: "ui_suite_bootstrap:dropdown"
+ slots:
+ title: Dropdown
+ props:
+ variant: dropdown
+ attributes:
+ class:
+ - btn-group
+ button_variant: primary
+ content:
+ - url: "#"
+ title: "Dropdown link"
+ - url: "#"
+ title: "Dropdown link"
+props:
+ variant: default
+ label: "Button group with nested dropdown"
diff --git a/components/button_group/button_group.outlined.story.yml b/components/button_group/button_group.outlined.story.yml
new file mode 100644
index 00000000..a1cc9841
--- /dev/null
+++ b/components/button_group/button_group.outlined.story.yml
@@ -0,0 +1,24 @@
+name: "Outlined styles"
+slots:
+ buttons:
+ - type: component
+ component: "ui_suite_bootstrap:button"
+ slots:
+ label: Left
+ props:
+ variant: outline_primary
+ - type: component
+ component: "ui_suite_bootstrap:button"
+ slots:
+ label: Middle
+ props:
+ variant: outline_primary
+ - type: component
+ component: "ui_suite_bootstrap:button"
+ slots:
+ label: Right
+ props:
+ variant: outline_primary
+props:
+ variant: default
+ label: "Basic outlined example"
--
GitLab
From 2ab628cc2e1c0d21828fc25da755504034f770a6 Mon Sep 17 00:00:00 2001
From: Florent Torregrosa <florent.torregrosa@gmail.com>
Date: Wed, 5 Mar 2025 17:50:42 +0100
Subject: [PATCH 05/15] Issue #3485834 by grimreaper: button_toolbar, carousel,
list_group
---
.../button_toolbar.default.story.yml | 80 ++++++++++++
.../button_toolbar.preview.story.yml | 26 ----
.../carousel/carousel.autoplay.story.yml | 27 ++++
...sel.autoplay_individual_interval.story.yml | 31 +++++
.../carousel.autoplay_no_controls.story.yml | 27 ++++
....story.yml => carousel.captions.story.yml} | 12 +-
.../carousel/carousel.default.story.yml | 26 ++++
.../carousel/carousel.indicators.story.yml | 26 ++++
.../carousel/carousel.no_touch.story.yml | 27 ++++
.../list_group/list_group.badge.story.yml | 60 +++++++++
.../list_group/list_group.color.story.yml | 59 +++++++++
.../list_group.color_link.story.yml | 68 ++++++++++
.../list_group.color_link_active.story.yml | 77 ++++++++++++
.../list_group.color_link_disabled.story.yml | 77 ++++++++++++
.../list_group.custom_content_1.story.yml | 101 +++++++++++++++
.../list_group.custom_content_2.story.yml | 117 ++++++++++++++++++
.../list_group/list_group.default.story.yml | 23 ++++
...w.story.yml => list_group.links.story.yml} | 16 ++-
.../list_group/list_group.state.story.yml | 29 +++++
.../list_group_item.preview.story.yml | 6 -
20 files changed, 872 insertions(+), 43 deletions(-)
create mode 100644 components/button_toolbar/button_toolbar.default.story.yml
delete mode 100644 components/button_toolbar/button_toolbar.preview.story.yml
create mode 100644 components/carousel/carousel.autoplay.story.yml
create mode 100644 components/carousel/carousel.autoplay_individual_interval.story.yml
create mode 100644 components/carousel/carousel.autoplay_no_controls.story.yml
rename components/carousel/{carousel.preview.story.yml => carousel.captions.story.yml} (89%)
create mode 100644 components/carousel/carousel.default.story.yml
create mode 100644 components/carousel/carousel.indicators.story.yml
create mode 100644 components/carousel/carousel.no_touch.story.yml
create mode 100644 components/list_group/list_group.badge.story.yml
create mode 100644 components/list_group/list_group.color.story.yml
create mode 100644 components/list_group/list_group.color_link.story.yml
create mode 100644 components/list_group/list_group.color_link_active.story.yml
create mode 100644 components/list_group/list_group.color_link_disabled.story.yml
create mode 100644 components/list_group/list_group.custom_content_1.story.yml
create mode 100644 components/list_group/list_group.custom_content_2.story.yml
create mode 100644 components/list_group/list_group.default.story.yml
rename components/list_group/{list_group.preview.story.yml => list_group.links.story.yml} (74%)
create mode 100644 components/list_group/list_group.state.story.yml
delete mode 100644 components/list_group_item/list_group_item.preview.story.yml
diff --git a/components/button_toolbar/button_toolbar.default.story.yml b/components/button_toolbar/button_toolbar.default.story.yml
new file mode 100644
index 00000000..17b25abc
--- /dev/null
+++ b/components/button_toolbar/button_toolbar.default.story.yml
@@ -0,0 +1,80 @@
+name: Default
+slots:
+ groups:
+ - type: component
+ component: "ui_suite_bootstrap:button_group"
+ props:
+ variant: default
+ label: "First group"
+ slots:
+ buttons:
+ - type: component
+ component: "ui_suite_bootstrap:button"
+ slots:
+ label: 1
+ props:
+ variant: primary
+ - type: component
+ component: "ui_suite_bootstrap:button"
+ slots:
+ label: 2
+ props:
+ variant: primary
+ - type: component
+ component: "ui_suite_bootstrap:button"
+ slots:
+ label: 3
+ props:
+ variant: primary
+ - type: component
+ component: "ui_suite_bootstrap:button"
+ slots:
+ label: 4
+ props:
+ variant: primary
+ attributes:
+ class:
+ - me-2
+ - type: component
+ component: "ui_suite_bootstrap:button_group"
+ props:
+ variant: default
+ label: "Second group"
+ slots:
+ buttons:
+ - type: component
+ component: "ui_suite_bootstrap:button"
+ slots:
+ label: 5
+ props:
+ variant: secondary
+ - type: component
+ component: "ui_suite_bootstrap:button"
+ slots:
+ label: 6
+ props:
+ variant: secondary
+ - type: component
+ component: "ui_suite_bootstrap:button"
+ slots:
+ label: 7
+ props:
+ variant: secondary
+ attributes:
+ class:
+ - me-2
+ - type: component
+ component: "ui_suite_bootstrap:button_group"
+ slots:
+ buttons:
+ - type: component
+ component: "ui_suite_bootstrap:button"
+ slots:
+ label: 8
+ props:
+ variant: info
+ props:
+ variant: default
+ label: "Third group"
+props:
+ label: "Toolbar with button groups"
diff --git a/components/button_toolbar/button_toolbar.preview.story.yml b/components/button_toolbar/button_toolbar.preview.story.yml
deleted file mode 100644
index ab046ccb..00000000
--- a/components/button_toolbar/button_toolbar.preview.story.yml
+++ /dev/null
@@ -1,26 +0,0 @@
-name: Preview
-slots:
- groups:
- - type: component
- attributes:
- class:
- - me-2
- component: "ui_suite_bootstrap:button_group"
- story: preview
- props:
- variant: default
- - type: component
- attributes:
- class:
- - me-2
- component: "ui_suite_bootstrap:button_group"
- story: preview
- props:
- variant: default
- - type: component
- component: "ui_suite_bootstrap:button_group"
- story: preview
- props:
- variant: default
-props:
- label: "Toolbar with button groups"
diff --git a/components/carousel/carousel.autoplay.story.yml b/components/carousel/carousel.autoplay.story.yml
new file mode 100644
index 00000000..8a645c36
--- /dev/null
+++ b/components/carousel/carousel.autoplay.story.yml
@@ -0,0 +1,27 @@
+name: "Autoplaying carousels"
+slots:
+ slides:
+ - type: component
+ component: "ui_suite_bootstrap:carousel_item"
+ slots:
+ image:
+ theme: image
+ uri: "data:image/svg+xml;base64,PHN2ZyBzdHlsZT0iZm9udC1zaXplOiAzLjVyZW07IHRleHQtYW5jaG9yOiBtaWRkbGU7IHVzZXItc2VsZWN0OiBub25lIiB3aWR0aD0iMTkyMCIgaGVpZ2h0PSI2NDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQgc2xpY2UiIGZvY3VzYWJsZT0iZmFsc2UiIHJvbGU9ImltZyIgYXJpYS1sYWJlbD0iUGxhY2Vob2xkZXI6IEZpcnN0IHNsaWRlIj48dGl0bGU+UGxhY2Vob2xkZXI8L3RpdGxlPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9IiM3NzciPjwvcmVjdD48dGV4dCB4PSI1MCUiIHk9IjUwJSIgZmlsbD0iIzU1NSIgZHk9Ii4zZW0iPkZpcnN0IHNsaWRlPC90ZXh0Pjwvc3ZnPgo="
+ - type: component
+ component: "ui_suite_bootstrap:carousel_item"
+ slots:
+ image:
+ theme: image
+ uri: "data:image/svg+xml;base64,PHN2ZyBzdHlsZT0iZm9udC1zaXplOiAzLjVyZW07IHRleHQtYW5jaG9yOiBtaWRkbGU7IHVzZXItc2VsZWN0OiBub25lIiB3aWR0aD0iMTkyMCIgaGVpZ2h0PSI2NDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQgc2xpY2UiIGZvY3VzYWJsZT0iZmFsc2UiIHJvbGU9ImltZyIgYXJpYS1sYWJlbD0iUGxhY2Vob2xkZXI6IFNlY29uZCBzbGlkZSI+PHRpdGxlPlBsYWNlaG9sZGVyPC90aXRsZT48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjNjY2Ij48L3JlY3Q+PHRleHQgeD0iNTAlIiB5PSI1MCUiIGZpbGw9IiM0NDQiIGR5PSIuM2VtIj5TZWNvbmQgc2xpZGU8L3RleHQ+PC9zdmc+Cg=="
+ - type: component
+ component: "ui_suite_bootstrap:carousel_item"
+ slots:
+ image:
+ theme: image
+ uri: "data:image/svg+xml;base64,PHN2ZyBzdHlsZT0iZm9udC1zaXplOiAzLjVyZW07IHRleHQtYW5jaG9yOiBtaWRkbGU7IHVzZXItc2VsZWN0OiBub25lIiB3aWR0aD0iMTkyMCIgaGVpZ2h0PSI2NDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQgc2xpY2UiIGZvY3VzYWJsZT0iZmFsc2UiIHJvbGU9ImltZyIgYXJpYS1sYWJlbD0iUGxhY2Vob2xkZXI6IFRoaXJkIHNsaWRlIj48dGl0bGU+UGxhY2Vob2xkZXI8L3RpdGxlPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9IiM1NTUiPjwvcmVjdD48dGV4dCB4PSI1MCUiIHk9IjUwJSIgZmlsbD0iIzMzMyIgZHk9Ii4zZW0iPlRoaXJkIHNsaWRlPC90ZXh0Pjwvc3ZnPgo="
+props:
+ variant: default
+ with_controls: true
+ with_indicators: false
+ with_touch: true
+ interval: 5000
diff --git a/components/carousel/carousel.autoplay_individual_interval.story.yml b/components/carousel/carousel.autoplay_individual_interval.story.yml
new file mode 100644
index 00000000..f323e2e5
--- /dev/null
+++ b/components/carousel/carousel.autoplay_individual_interval.story.yml
@@ -0,0 +1,31 @@
+name: "Autoplaying carousels: individual interval"
+slots:
+ slides:
+ - type: component
+ component: "ui_suite_bootstrap:carousel_item"
+ slots:
+ image:
+ theme: image
+ uri: "data:image/svg+xml;base64,PHN2ZyBzdHlsZT0iZm9udC1zaXplOiAzLjVyZW07IHRleHQtYW5jaG9yOiBtaWRkbGU7IHVzZXItc2VsZWN0OiBub25lIiB3aWR0aD0iMTkyMCIgaGVpZ2h0PSI2NDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQgc2xpY2UiIGZvY3VzYWJsZT0iZmFsc2UiIHJvbGU9ImltZyIgYXJpYS1sYWJlbD0iUGxhY2Vob2xkZXI6IEZpcnN0IHNsaWRlIj48dGl0bGU+UGxhY2Vob2xkZXI8L3RpdGxlPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9IiM3NzciPjwvcmVjdD48dGV4dCB4PSI1MCUiIHk9IjUwJSIgZmlsbD0iIzU1NSIgZHk9Ii4zZW0iPkZpcnN0IHNsaWRlPC90ZXh0Pjwvc3ZnPgo="
+ props:
+ interval: 10000
+ - type: component
+ component: "ui_suite_bootstrap:carousel_item"
+ slots:
+ image:
+ theme: image
+ uri: "data:image/svg+xml;base64,PHN2ZyBzdHlsZT0iZm9udC1zaXplOiAzLjVyZW07IHRleHQtYW5jaG9yOiBtaWRkbGU7IHVzZXItc2VsZWN0OiBub25lIiB3aWR0aD0iMTkyMCIgaGVpZ2h0PSI2NDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQgc2xpY2UiIGZvY3VzYWJsZT0iZmFsc2UiIHJvbGU9ImltZyIgYXJpYS1sYWJlbD0iUGxhY2Vob2xkZXI6IFNlY29uZCBzbGlkZSI+PHRpdGxlPlBsYWNlaG9sZGVyPC90aXRsZT48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjNjY2Ij48L3JlY3Q+PHRleHQgeD0iNTAlIiB5PSI1MCUiIGZpbGw9IiM0NDQiIGR5PSIuM2VtIj5TZWNvbmQgc2xpZGU8L3RleHQ+PC9zdmc+Cg=="
+ props:
+ interval: 2000
+ - type: component
+ component: "ui_suite_bootstrap:carousel_item"
+ slots:
+ image:
+ theme: image
+ uri: "data:image/svg+xml;base64,PHN2ZyBzdHlsZT0iZm9udC1zaXplOiAzLjVyZW07IHRleHQtYW5jaG9yOiBtaWRkbGU7IHVzZXItc2VsZWN0OiBub25lIiB3aWR0aD0iMTkyMCIgaGVpZ2h0PSI2NDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQgc2xpY2UiIGZvY3VzYWJsZT0iZmFsc2UiIHJvbGU9ImltZyIgYXJpYS1sYWJlbD0iUGxhY2Vob2xkZXI6IFRoaXJkIHNsaWRlIj48dGl0bGU+UGxhY2Vob2xkZXI8L3RpdGxlPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9IiM1NTUiPjwvcmVjdD48dGV4dCB4PSI1MCUiIHk9IjUwJSIgZmlsbD0iIzMzMyIgZHk9Ii4zZW0iPlRoaXJkIHNsaWRlPC90ZXh0Pjwvc3ZnPgo="
+props:
+ variant: default
+ with_controls: true
+ with_indicators: false
+ with_touch: true
+ interval: 5000
diff --git a/components/carousel/carousel.autoplay_no_controls.story.yml b/components/carousel/carousel.autoplay_no_controls.story.yml
new file mode 100644
index 00000000..2aea07eb
--- /dev/null
+++ b/components/carousel/carousel.autoplay_no_controls.story.yml
@@ -0,0 +1,27 @@
+name: "Autoplaying carousels: without controls"
+slots:
+ slides:
+ - type: component
+ component: "ui_suite_bootstrap:carousel_item"
+ slots:
+ image:
+ theme: image
+ uri: "data:image/svg+xml;base64,PHN2ZyBzdHlsZT0iZm9udC1zaXplOiAzLjVyZW07IHRleHQtYW5jaG9yOiBtaWRkbGU7IHVzZXItc2VsZWN0OiBub25lIiB3aWR0aD0iMTkyMCIgaGVpZ2h0PSI2NDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQgc2xpY2UiIGZvY3VzYWJsZT0iZmFsc2UiIHJvbGU9ImltZyIgYXJpYS1sYWJlbD0iUGxhY2Vob2xkZXI6IEZpcnN0IHNsaWRlIj48dGl0bGU+UGxhY2Vob2xkZXI8L3RpdGxlPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9IiM3NzciPjwvcmVjdD48dGV4dCB4PSI1MCUiIHk9IjUwJSIgZmlsbD0iIzU1NSIgZHk9Ii4zZW0iPkZpcnN0IHNsaWRlPC90ZXh0Pjwvc3ZnPgo="
+ - type: component
+ component: "ui_suite_bootstrap:carousel_item"
+ slots:
+ image:
+ theme: image
+ uri: "data:image/svg+xml;base64,PHN2ZyBzdHlsZT0iZm9udC1zaXplOiAzLjVyZW07IHRleHQtYW5jaG9yOiBtaWRkbGU7IHVzZXItc2VsZWN0OiBub25lIiB3aWR0aD0iMTkyMCIgaGVpZ2h0PSI2NDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQgc2xpY2UiIGZvY3VzYWJsZT0iZmFsc2UiIHJvbGU9ImltZyIgYXJpYS1sYWJlbD0iUGxhY2Vob2xkZXI6IFNlY29uZCBzbGlkZSI+PHRpdGxlPlBsYWNlaG9sZGVyPC90aXRsZT48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjNjY2Ij48L3JlY3Q+PHRleHQgeD0iNTAlIiB5PSI1MCUiIGZpbGw9IiM0NDQiIGR5PSIuM2VtIj5TZWNvbmQgc2xpZGU8L3RleHQ+PC9zdmc+Cg=="
+ - type: component
+ component: "ui_suite_bootstrap:carousel_item"
+ slots:
+ image:
+ theme: image
+ uri: "data:image/svg+xml;base64,PHN2ZyBzdHlsZT0iZm9udC1zaXplOiAzLjVyZW07IHRleHQtYW5jaG9yOiBtaWRkbGU7IHVzZXItc2VsZWN0OiBub25lIiB3aWR0aD0iMTkyMCIgaGVpZ2h0PSI2NDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQgc2xpY2UiIGZvY3VzYWJsZT0iZmFsc2UiIHJvbGU9ImltZyIgYXJpYS1sYWJlbD0iUGxhY2Vob2xkZXI6IFRoaXJkIHNsaWRlIj48dGl0bGU+UGxhY2Vob2xkZXI8L3RpdGxlPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9IiM1NTUiPjwvcmVjdD48dGV4dCB4PSI1MCUiIHk9IjUwJSIgZmlsbD0iIzMzMyIgZHk9Ii4zZW0iPlRoaXJkIHNsaWRlPC90ZXh0Pjwvc3ZnPgo="
+props:
+ variant: default
+ with_controls: false
+ with_indicators: false
+ with_touch: true
+ interval: 5000
diff --git a/components/carousel/carousel.preview.story.yml b/components/carousel/carousel.captions.story.yml
similarity index 89%
rename from components/carousel/carousel.preview.story.yml
rename to components/carousel/carousel.captions.story.yml
index 200c962c..41a237ab 100644
--- a/components/carousel/carousel.preview.story.yml
+++ b/components/carousel/carousel.captions.story.yml
@@ -1,4 +1,4 @@
-name: Preview
+name: Captions
slots:
slides:
- type: component
@@ -13,7 +13,7 @@ slots:
value: "First slide label"
- type: html_tag
tag: p
- value: "Nulla vitae elit libero, a pharetra augue mollis interdum."
+ value: "Some representative placeholder content for the first slide."
- type: component
component: "ui_suite_bootstrap:carousel_item"
slots:
@@ -26,9 +26,7 @@ slots:
value: "Second slide label"
- type: html_tag
tag: p
- value: "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
- props:
- interval: 10000
+ value: "Some representative placeholder content for the second slide."
- type: component
component: "ui_suite_bootstrap:carousel_item"
slots:
@@ -41,9 +39,9 @@ slots:
value: "Third slide label"
- type: html_tag
tag: p
- value: "Praesent commodo cursus magna, vel scelerisque nisl consectetur."
+ value: "Some representative placeholder content for the third slide."
props:
with_controls: true
with_indicators: true
with_touch: true
- interval: 5000
+ interval: 0
diff --git a/components/carousel/carousel.default.story.yml b/components/carousel/carousel.default.story.yml
new file mode 100644
index 00000000..a3fbceb4
--- /dev/null
+++ b/components/carousel/carousel.default.story.yml
@@ -0,0 +1,26 @@
+name: Default
+slots:
+ slides:
+ - type: component
+ component: "ui_suite_bootstrap:carousel_item"
+ slots:
+ image:
+ theme: image
+ uri: "data:image/svg+xml;base64,PHN2ZyBzdHlsZT0iZm9udC1zaXplOiAzLjVyZW07IHRleHQtYW5jaG9yOiBtaWRkbGU7IHVzZXItc2VsZWN0OiBub25lIiB3aWR0aD0iMTkyMCIgaGVpZ2h0PSI2NDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQgc2xpY2UiIGZvY3VzYWJsZT0iZmFsc2UiIHJvbGU9ImltZyIgYXJpYS1sYWJlbD0iUGxhY2Vob2xkZXI6IEZpcnN0IHNsaWRlIj48dGl0bGU+UGxhY2Vob2xkZXI8L3RpdGxlPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9IiM3NzciPjwvcmVjdD48dGV4dCB4PSI1MCUiIHk9IjUwJSIgZmlsbD0iIzU1NSIgZHk9Ii4zZW0iPkZpcnN0IHNsaWRlPC90ZXh0Pjwvc3ZnPgo="
+ - type: component
+ component: "ui_suite_bootstrap:carousel_item"
+ slots:
+ image:
+ theme: image
+ uri: "data:image/svg+xml;base64,PHN2ZyBzdHlsZT0iZm9udC1zaXplOiAzLjVyZW07IHRleHQtYW5jaG9yOiBtaWRkbGU7IHVzZXItc2VsZWN0OiBub25lIiB3aWR0aD0iMTkyMCIgaGVpZ2h0PSI2NDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQgc2xpY2UiIGZvY3VzYWJsZT0iZmFsc2UiIHJvbGU9ImltZyIgYXJpYS1sYWJlbD0iUGxhY2Vob2xkZXI6IFNlY29uZCBzbGlkZSI+PHRpdGxlPlBsYWNlaG9sZGVyPC90aXRsZT48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjNjY2Ij48L3JlY3Q+PHRleHQgeD0iNTAlIiB5PSI1MCUiIGZpbGw9IiM0NDQiIGR5PSIuM2VtIj5TZWNvbmQgc2xpZGU8L3RleHQ+PC9zdmc+Cg=="
+ - type: component
+ component: "ui_suite_bootstrap:carousel_item"
+ slots:
+ image:
+ theme: image
+ uri: "data:image/svg+xml;base64,PHN2ZyBzdHlsZT0iZm9udC1zaXplOiAzLjVyZW07IHRleHQtYW5jaG9yOiBtaWRkbGU7IHVzZXItc2VsZWN0OiBub25lIiB3aWR0aD0iMTkyMCIgaGVpZ2h0PSI2NDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQgc2xpY2UiIGZvY3VzYWJsZT0iZmFsc2UiIHJvbGU9ImltZyIgYXJpYS1sYWJlbD0iUGxhY2Vob2xkZXI6IFRoaXJkIHNsaWRlIj48dGl0bGU+UGxhY2Vob2xkZXI8L3RpdGxlPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9IiM1NTUiPjwvcmVjdD48dGV4dCB4PSI1MCUiIHk9IjUwJSIgZmlsbD0iIzMzMyIgZHk9Ii4zZW0iPlRoaXJkIHNsaWRlPC90ZXh0Pjwvc3ZnPgo="
+props:
+ with_controls: true
+ with_indicators: false
+ with_touch: true
+ interval: 0
diff --git a/components/carousel/carousel.indicators.story.yml b/components/carousel/carousel.indicators.story.yml
new file mode 100644
index 00000000..253e4117
--- /dev/null
+++ b/components/carousel/carousel.indicators.story.yml
@@ -0,0 +1,26 @@
+name: Indicators
+slots:
+ slides:
+ - type: component
+ component: "ui_suite_bootstrap:carousel_item"
+ slots:
+ image:
+ theme: image
+ uri: "data:image/svg+xml;base64,PHN2ZyBzdHlsZT0iZm9udC1zaXplOiAzLjVyZW07IHRleHQtYW5jaG9yOiBtaWRkbGU7IHVzZXItc2VsZWN0OiBub25lIiB3aWR0aD0iMTkyMCIgaGVpZ2h0PSI2NDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQgc2xpY2UiIGZvY3VzYWJsZT0iZmFsc2UiIHJvbGU9ImltZyIgYXJpYS1sYWJlbD0iUGxhY2Vob2xkZXI6IEZpcnN0IHNsaWRlIj48dGl0bGU+UGxhY2Vob2xkZXI8L3RpdGxlPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9IiM3NzciPjwvcmVjdD48dGV4dCB4PSI1MCUiIHk9IjUwJSIgZmlsbD0iIzU1NSIgZHk9Ii4zZW0iPkZpcnN0IHNsaWRlPC90ZXh0Pjwvc3ZnPgo="
+ - type: component
+ component: "ui_suite_bootstrap:carousel_item"
+ slots:
+ image:
+ theme: image
+ uri: "data:image/svg+xml;base64,PHN2ZyBzdHlsZT0iZm9udC1zaXplOiAzLjVyZW07IHRleHQtYW5jaG9yOiBtaWRkbGU7IHVzZXItc2VsZWN0OiBub25lIiB3aWR0aD0iMTkyMCIgaGVpZ2h0PSI2NDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQgc2xpY2UiIGZvY3VzYWJsZT0iZmFsc2UiIHJvbGU9ImltZyIgYXJpYS1sYWJlbD0iUGxhY2Vob2xkZXI6IFNlY29uZCBzbGlkZSI+PHRpdGxlPlBsYWNlaG9sZGVyPC90aXRsZT48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjNjY2Ij48L3JlY3Q+PHRleHQgeD0iNTAlIiB5PSI1MCUiIGZpbGw9IiM0NDQiIGR5PSIuM2VtIj5TZWNvbmQgc2xpZGU8L3RleHQ+PC9zdmc+Cg=="
+ - type: component
+ component: "ui_suite_bootstrap:carousel_item"
+ slots:
+ image:
+ theme: image
+ uri: "data:image/svg+xml;base64,PHN2ZyBzdHlsZT0iZm9udC1zaXplOiAzLjVyZW07IHRleHQtYW5jaG9yOiBtaWRkbGU7IHVzZXItc2VsZWN0OiBub25lIiB3aWR0aD0iMTkyMCIgaGVpZ2h0PSI2NDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQgc2xpY2UiIGZvY3VzYWJsZT0iZmFsc2UiIHJvbGU9ImltZyIgYXJpYS1sYWJlbD0iUGxhY2Vob2xkZXI6IFRoaXJkIHNsaWRlIj48dGl0bGU+UGxhY2Vob2xkZXI8L3RpdGxlPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9IiM1NTUiPjwvcmVjdD48dGV4dCB4PSI1MCUiIHk9IjUwJSIgZmlsbD0iIzMzMyIgZHk9Ii4zZW0iPlRoaXJkIHNsaWRlPC90ZXh0Pjwvc3ZnPgo="
+props:
+ with_controls: true
+ with_indicators: true
+ with_touch: true
+ interval: 0
diff --git a/components/carousel/carousel.no_touch.story.yml b/components/carousel/carousel.no_touch.story.yml
new file mode 100644
index 00000000..f4684380
--- /dev/null
+++ b/components/carousel/carousel.no_touch.story.yml
@@ -0,0 +1,27 @@
+name: "Disabled touch swiping"
+slots:
+ slides:
+ - type: component
+ component: "ui_suite_bootstrap:carousel_item"
+ slots:
+ image:
+ theme: image
+ uri: "data:image/svg+xml;base64,PHN2ZyBzdHlsZT0iZm9udC1zaXplOiAzLjVyZW07IHRleHQtYW5jaG9yOiBtaWRkbGU7IHVzZXItc2VsZWN0OiBub25lIiB3aWR0aD0iMTkyMCIgaGVpZ2h0PSI2NDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQgc2xpY2UiIGZvY3VzYWJsZT0iZmFsc2UiIHJvbGU9ImltZyIgYXJpYS1sYWJlbD0iUGxhY2Vob2xkZXI6IEZpcnN0IHNsaWRlIj48dGl0bGU+UGxhY2Vob2xkZXI8L3RpdGxlPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9IiM3NzciPjwvcmVjdD48dGV4dCB4PSI1MCUiIHk9IjUwJSIgZmlsbD0iIzU1NSIgZHk9Ii4zZW0iPkZpcnN0IHNsaWRlPC90ZXh0Pjwvc3ZnPgo="
+ - type: component
+ component: "ui_suite_bootstrap:carousel_item"
+ slots:
+ image:
+ theme: image
+ uri: "data:image/svg+xml;base64,PHN2ZyBzdHlsZT0iZm9udC1zaXplOiAzLjVyZW07IHRleHQtYW5jaG9yOiBtaWRkbGU7IHVzZXItc2VsZWN0OiBub25lIiB3aWR0aD0iMTkyMCIgaGVpZ2h0PSI2NDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQgc2xpY2UiIGZvY3VzYWJsZT0iZmFsc2UiIHJvbGU9ImltZyIgYXJpYS1sYWJlbD0iUGxhY2Vob2xkZXI6IFNlY29uZCBzbGlkZSI+PHRpdGxlPlBsYWNlaG9sZGVyPC90aXRsZT48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjNjY2Ij48L3JlY3Q+PHRleHQgeD0iNTAlIiB5PSI1MCUiIGZpbGw9IiM0NDQiIGR5PSIuM2VtIj5TZWNvbmQgc2xpZGU8L3RleHQ+PC9zdmc+Cg=="
+ - type: component
+ component: "ui_suite_bootstrap:carousel_item"
+ slots:
+ image:
+ theme: image
+ uri: "data:image/svg+xml;base64,PHN2ZyBzdHlsZT0iZm9udC1zaXplOiAzLjVyZW07IHRleHQtYW5jaG9yOiBtaWRkbGU7IHVzZXItc2VsZWN0OiBub25lIiB3aWR0aD0iMTkyMCIgaGVpZ2h0PSI2NDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQgc2xpY2UiIGZvY3VzYWJsZT0iZmFsc2UiIHJvbGU9ImltZyIgYXJpYS1sYWJlbD0iUGxhY2Vob2xkZXI6IFRoaXJkIHNsaWRlIj48dGl0bGU+UGxhY2Vob2xkZXI8L3RpdGxlPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9IiM1NTUiPjwvcmVjdD48dGV4dCB4PSI1MCUiIHk9IjUwJSIgZmlsbD0iIzMzMyIgZHk9Ii4zZW0iPlRoaXJkIHNsaWRlPC90ZXh0Pjwvc3ZnPgo="
+props:
+ variant: default
+ with_controls: true
+ with_indicators: false
+ with_touch: false
+ interval: 0
diff --git a/components/list_group/list_group.badge.story.yml b/components/list_group/list_group.badge.story.yml
new file mode 100644
index 00000000..0f491c99
--- /dev/null
+++ b/components/list_group/list_group.badge.story.yml
@@ -0,0 +1,60 @@
+name: "With badges"
+description: "Add badges to any list group item to show unread counts, activity, and more."
+slots:
+ items:
+ - type: component
+ component: "ui_suite_bootstrap:list_group_item"
+ slots:
+ content:
+ - markup: "A list item"
+ - type: component
+ component: "ui_suite_bootstrap:badge"
+ slots:
+ label: "14"
+ attributes:
+ class:
+ - text-bg-primary
+ - rounded-pill
+ attributes:
+ class:
+ - d-flex
+ - justify-content-between
+ - align-items-start
+ - type: component
+ component: "ui_suite_bootstrap:list_group_item"
+ slots:
+ content:
+ - markup: "A second list item"
+ - type: component
+ component: "ui_suite_bootstrap:badge"
+ slots:
+ label: "2"
+ attributes:
+ class:
+ - text-bg-primary
+ - rounded-pill
+ attributes:
+ class:
+ - d-flex
+ - justify-content-between
+ - align-items-start
+ - type: component
+ component: "ui_suite_bootstrap:list_group_item"
+ slots:
+ content:
+ - markup: "A third list item"
+ - type: component
+ component: "ui_suite_bootstrap:badge"
+ slots:
+ label: "1"
+ attributes:
+ class:
+ - text-bg-primary
+ - rounded-pill
+ attributes:
+ class:
+ - d-flex
+ - justify-content-between
+ - align-items-start
+props:
+ variant: default
diff --git a/components/list_group/list_group.color.story.yml b/components/list_group/list_group.color.story.yml
new file mode 100644
index 00000000..34666190
--- /dev/null
+++ b/components/list_group/list_group.color.story.yml
@@ -0,0 +1,59 @@
+name: "Color variants"
+slots:
+ items:
+ - type: component
+ component: "ui_suite_bootstrap:list_group_item"
+ props:
+ variant: default
+ slots:
+ content: "A simple default list group item"
+ - type: component
+ component: "ui_suite_bootstrap:list_group_item"
+ props:
+ variant: primary
+ slots:
+ content: "A simple primary list group item"
+ - type: component
+ component: "ui_suite_bootstrap:list_group_item"
+ props:
+ variant: secondary
+ slots:
+ content: "A simple secondary list group item"
+ - type: component
+ component: "ui_suite_bootstrap:list_group_item"
+ props:
+ variant: success
+ slots:
+ content: "A simple success list group item"
+ - type: component
+ component: "ui_suite_bootstrap:list_group_item"
+ props:
+ variant: danger
+ slots:
+ content: "A simple danger list group item"
+ - type: component
+ component: "ui_suite_bootstrap:list_group_item"
+ props:
+ variant: warning
+ slots:
+ content: "A simple warning list group item"
+ - type: component
+ component: "ui_suite_bootstrap:list_group_item"
+ props:
+ variant: info
+ slots:
+ content: "A simple info list group item"
+ - type: component
+ component: "ui_suite_bootstrap:list_group_item"
+ props:
+ variant: light
+ slots:
+ content: "A simple light list group item"
+ - type: component
+ component: "ui_suite_bootstrap:list_group_item"
+ props:
+ variant: dark
+ slots:
+ content: "A simple dark list group item"
+props:
+ variant: default
diff --git a/components/list_group/list_group.color_link.story.yml b/components/list_group/list_group.color_link.story.yml
new file mode 100644
index 00000000..e2e4fe2a
--- /dev/null
+++ b/components/list_group/list_group.color_link.story.yml
@@ -0,0 +1,68 @@
+name: "Color variants with links"
+slots:
+ items:
+ - type: component
+ component: "ui_suite_bootstrap:list_group_item"
+ props:
+ variant: default
+ url: "#"
+ slots:
+ content: "A simple default list group item"
+ - type: component
+ component: "ui_suite_bootstrap:list_group_item"
+ props:
+ variant: primary
+ url: "#"
+ slots:
+ content: "A simple primary list group item"
+ - type: component
+ component: "ui_suite_bootstrap:list_group_item"
+ props:
+ variant: secondary
+ url: "#"
+ slots:
+ content: "A simple secondary list group item"
+ - type: component
+ component: "ui_suite_bootstrap:list_group_item"
+ props:
+ variant: success
+ url: "#"
+ slots:
+ content: "A simple success list group item"
+ - type: component
+ component: "ui_suite_bootstrap:list_group_item"
+ props:
+ variant: danger
+ url: "#"
+ slots:
+ content: "A simple danger list group item"
+ - type: component
+ component: "ui_suite_bootstrap:list_group_item"
+ props:
+ variant: warning
+ url: "#"
+ slots:
+ content: "A simple warning list group item"
+ - type: component
+ component: "ui_suite_bootstrap:list_group_item"
+ props:
+ variant: info
+ url: "#"
+ slots:
+ content: "A simple info list group item"
+ - type: component
+ component: "ui_suite_bootstrap:list_group_item"
+ props:
+ variant: light
+ url: "#"
+ slots:
+ content: "A simple light list group item"
+ - type: component
+ component: "ui_suite_bootstrap:list_group_item"
+ props:
+ variant: dark
+ url: "#"
+ slots:
+ content: "A simple dark list group item"
+props:
+ variant: default
diff --git a/components/list_group/list_group.color_link_active.story.yml b/components/list_group/list_group.color_link_active.story.yml
new file mode 100644
index 00000000..d96e45a9
--- /dev/null
+++ b/components/list_group/list_group.color_link_active.story.yml
@@ -0,0 +1,77 @@
+name: "Color variants with active links"
+slots:
+ items:
+ - type: component
+ component: "ui_suite_bootstrap:list_group_item"
+ props:
+ variant: default
+ active: true
+ url: "#"
+ slots:
+ content: "A simple default list group item"
+ - type: component
+ component: "ui_suite_bootstrap:list_group_item"
+ props:
+ variant: primary
+ active: true
+ url: "#"
+ slots:
+ content: "A simple primary list group item"
+ - type: component
+ component: "ui_suite_bootstrap:list_group_item"
+ props:
+ variant: secondary
+ active: true
+ url: "#"
+ slots:
+ content: "A simple secondary list group item"
+ - type: component
+ component: "ui_suite_bootstrap:list_group_item"
+ props:
+ variant: success
+ active: true
+ url: "#"
+ slots:
+ content: "A simple success list group item"
+ - type: component
+ component: "ui_suite_bootstrap:list_group_item"
+ props:
+ variant: danger
+ active: true
+ url: "#"
+ slots:
+ content: "A simple danger list group item"
+ - type: component
+ component: "ui_suite_bootstrap:list_group_item"
+ props:
+ variant: warning
+ active: true
+ url: "#"
+ slots:
+ content: "A simple warning list group item"
+ - type: component
+ component: "ui_suite_bootstrap:list_group_item"
+ props:
+ variant: info
+ active: true
+ url: "#"
+ slots:
+ content: "A simple info list group item"
+ - type: component
+ component: "ui_suite_bootstrap:list_group_item"
+ props:
+ variant: light
+ active: true
+ url: "#"
+ slots:
+ content: "A simple light list group item"
+ - type: component
+ component: "ui_suite_bootstrap:list_group_item"
+ props:
+ variant: dark
+ active: true
+ url: "#"
+ slots:
+ content: "A simple dark list group item"
+props:
+ variant: default
diff --git a/components/list_group/list_group.color_link_disabled.story.yml b/components/list_group/list_group.color_link_disabled.story.yml
new file mode 100644
index 00000000..bdba14fe
--- /dev/null
+++ b/components/list_group/list_group.color_link_disabled.story.yml
@@ -0,0 +1,77 @@
+name: "Color variants with disabled links"
+slots:
+ items:
+ - type: component
+ component: "ui_suite_bootstrap:list_group_item"
+ props:
+ variant: default
+ disabled: true
+ url: "#"
+ slots:
+ content: "A simple default list group item"
+ - type: component
+ component: "ui_suite_bootstrap:list_group_item"
+ props:
+ variant: primary
+ disabled: true
+ url: "#"
+ slots:
+ content: "A simple primary list group item"
+ - type: component
+ component: "ui_suite_bootstrap:list_group_item"
+ props:
+ variant: secondary
+ disabled: true
+ url: "#"
+ slots:
+ content: "A simple secondary list group item"
+ - type: component
+ component: "ui_suite_bootstrap:list_group_item"
+ props:
+ variant: success
+ disabled: true
+ url: "#"
+ slots:
+ content: "A simple success list group item"
+ - type: component
+ component: "ui_suite_bootstrap:list_group_item"
+ props:
+ variant: danger
+ disabled: true
+ url: "#"
+ slots:
+ content: "A simple danger list group item"
+ - type: component
+ component: "ui_suite_bootstrap:list_group_item"
+ props:
+ variant: warning
+ disabled: true
+ url: "#"
+ slots:
+ content: "A simple warning list group item"
+ - type: component
+ component: "ui_suite_bootstrap:list_group_item"
+ props:
+ variant: info
+ disabled: true
+ url: "#"
+ slots:
+ content: "A simple info list group item"
+ - type: component
+ component: "ui_suite_bootstrap:list_group_item"
+ props:
+ variant: light
+ disabled: true
+ url: "#"
+ slots:
+ content: "A simple light list group item"
+ - type: component
+ component: "ui_suite_bootstrap:list_group_item"
+ props:
+ variant: dark
+ disabled: true
+ url: "#"
+ slots:
+ content: "A simple dark list group item"
+props:
+ variant: default
diff --git a/components/list_group/list_group.custom_content_1.story.yml b/components/list_group/list_group.custom_content_1.story.yml
new file mode 100644
index 00000000..24d88b8a
--- /dev/null
+++ b/components/list_group/list_group.custom_content_1.story.yml
@@ -0,0 +1,101 @@
+name: "Custom content 1"
+slots:
+ items:
+ - type: component
+ component: "ui_suite_bootstrap:list_group_item"
+ slots:
+ content:
+ - type: html_tag
+ tag: div
+ 0:
+ type: html_tag
+ tag: div
+ value: "Subheading"
+ attributes:
+ class:
+ - fw-bold
+ 1:
+ markup: "Content for list item"
+ attributes:
+ class:
+ - ms-2
+ - me-auto
+ - type: component
+ component: "ui_suite_bootstrap:badge"
+ slots:
+ label: "14"
+ attributes:
+ class:
+ - text-bg-primary
+ - rounded-pill
+ attributes:
+ class:
+ - d-flex
+ - justify-content-between
+ - align-items-start
+ - type: component
+ component: "ui_suite_bootstrap:list_group_item"
+ slots:
+ content:
+ - type: html_tag
+ tag: div
+ 0:
+ type: html_tag
+ tag: div
+ value: "Subheading"
+ attributes:
+ class:
+ - fw-bold
+ 1:
+ markup: "Content for list item"
+ attributes:
+ class:
+ - ms-2
+ - me-auto
+ - type: component
+ component: "ui_suite_bootstrap:badge"
+ slots:
+ label: "14"
+ attributes:
+ class:
+ - text-bg-primary
+ - rounded-pill
+ attributes:
+ class:
+ - d-flex
+ - justify-content-between
+ - align-items-start
+ - type: component
+ component: "ui_suite_bootstrap:list_group_item"
+ slots:
+ content:
+ - type: html_tag
+ tag: div
+ 0:
+ type: html_tag
+ tag: div
+ value: "Subheading"
+ attributes:
+ class:
+ - fw-bold
+ 1:
+ markup: "Content for list item"
+ attributes:
+ class:
+ - ms-2
+ - me-auto
+ - type: component
+ component: "ui_suite_bootstrap:badge"
+ slots:
+ label: "14"
+ attributes:
+ class:
+ - text-bg-primary
+ - rounded-pill
+ attributes:
+ class:
+ - d-flex
+ - justify-content-between
+ - align-items-start
+props:
+ variant: numbered
diff --git a/components/list_group/list_group.custom_content_2.story.yml b/components/list_group/list_group.custom_content_2.story.yml
new file mode 100644
index 00000000..9e88b667
--- /dev/null
+++ b/components/list_group/list_group.custom_content_2.story.yml
@@ -0,0 +1,117 @@
+name: "Custom content 2"
+slots:
+ items:
+ - type: component
+ component: "ui_suite_bootstrap:list_group_item"
+ props:
+ active: true
+ url: "#"
+ slots:
+ content:
+ - type: html_tag
+ tag: div
+ attributes:
+ class:
+ - d-flex
+ - justify-content-between
+ - w-100
+ 0:
+ type: html_tag
+ tag: h5
+ value: "List group item heading"
+ attributes:
+ class:
+ - mb-1
+ 1:
+ type: html_tag
+ tag: small
+ value: "3 days ago"
+ - type: html_tag
+ tag: p
+ value: "Some placeholder content in a paragraph."
+ attributes:
+ class:
+ - mb-1
+ - type: html_tag
+ tag: small
+ value: "And some small print."
+ - type: component
+ component: "ui_suite_bootstrap:list_group_item"
+ props:
+ url: "#"
+ slots:
+ content:
+ - type: html_tag
+ tag: div
+ attributes:
+ class:
+ - d-flex
+ - justify-content-between
+ - w-100
+ 0:
+ type: html_tag
+ tag: h5
+ value: "List group item heading"
+ attributes:
+ class:
+ - mb-1
+ 1:
+ type: html_tag
+ tag: small
+ value: "3 days ago"
+ attributes:
+ class:
+ - text-body-secondary
+ - type: html_tag
+ tag: p
+ value: "Some placeholder content in a paragraph."
+ attributes:
+ class:
+ - mb-1
+ - type: html_tag
+ tag: small
+ value: "And some small print."
+ attributes:
+ class:
+ - text-body-secondary
+ - type: component
+ component: "ui_suite_bootstrap:list_group_item"
+ props:
+ url: "#"
+ slots:
+ content:
+ - type: html_tag
+ tag: div
+ attributes:
+ class:
+ - d-flex
+ - justify-content-between
+ - w-100
+ 0:
+ type: html_tag
+ tag: h5
+ value: "List group item heading"
+ attributes:
+ class:
+ - mb-1
+ 1:
+ type: html_tag
+ tag: small
+ value: "3 days ago"
+ attributes:
+ class:
+ - text-body-secondary
+ - type: html_tag
+ tag: p
+ value: "Some placeholder content in a paragraph."
+ attributes:
+ class:
+ - mb-1
+ - type: html_tag
+ tag: small
+ value: "And some small print."
+ attributes:
+ class:
+ - text-body-secondary
+props:
+ variant: default
diff --git a/components/list_group/list_group.default.story.yml b/components/list_group/list_group.default.story.yml
new file mode 100644
index 00000000..d1606b81
--- /dev/null
+++ b/components/list_group/list_group.default.story.yml
@@ -0,0 +1,23 @@
+name: Default
+slots:
+ items:
+ - type: component
+ component: "ui_suite_bootstrap:list_group_item"
+ slots:
+ content: "An item"
+ - type: component
+ component: "ui_suite_bootstrap:list_group_item"
+ slots:
+ content: "A second item"
+ - type: component
+ component: "ui_suite_bootstrap:list_group_item"
+ slots:
+ content: "A third item"
+ - type: component
+ component: "ui_suite_bootstrap:list_group_item"
+ slots:
+ content: "A fourth item"
+ - type: component
+ component: "ui_suite_bootstrap:list_group_item"
+ slots:
+ content: "And a fifth one"
diff --git a/components/list_group/list_group.preview.story.yml b/components/list_group/list_group.links.story.yml
similarity index 74%
rename from components/list_group/list_group.preview.story.yml
rename to components/list_group/list_group.links.story.yml
index 73a94ba6..4a53457b 100644
--- a/components/list_group/list_group.preview.story.yml
+++ b/components/list_group/list_group.links.story.yml
@@ -1,4 +1,4 @@
-name: Preview
+name: Links
slots:
items:
- type: component
@@ -7,23 +7,31 @@ slots:
content: "The current link item"
props:
active: true
+ url: "#"
- type: component
component: "ui_suite_bootstrap:list_group_item"
slots:
content: "A second link item"
+ props:
+ url: "#"
- type: component
component: "ui_suite_bootstrap:list_group_item"
slots:
content: "A third link item"
+ props:
+ url: "#"
- type: component
component: "ui_suite_bootstrap:list_group_item"
slots:
- content: "A fourth link item, with a link"
+ content: "A fourth link item"
props:
- url: "https://example.com"
+ url: "#"
- type: component
component: "ui_suite_bootstrap:list_group_item"
slots:
- content: "The disabled link item"
+ content: "A disabled link item"
props:
disabled: true
+ url: "#"
+props:
+ variant: default
diff --git a/components/list_group/list_group.state.story.yml b/components/list_group/list_group.state.story.yml
new file mode 100644
index 00000000..684e40c9
--- /dev/null
+++ b/components/list_group/list_group.state.story.yml
@@ -0,0 +1,29 @@
+name: "Active and disabled items"
+slots:
+ items:
+ - type: component
+ component: "ui_suite_bootstrap:list_group_item"
+ slots:
+ content: "An active item"
+ props:
+ active: true
+ - type: component
+ component: "ui_suite_bootstrap:list_group_item"
+ slots:
+ content: "A second item"
+ - type: component
+ component: "ui_suite_bootstrap:list_group_item"
+ slots:
+ content: "A third item"
+ - type: component
+ component: "ui_suite_bootstrap:list_group_item"
+ slots:
+ content: "A fourth item"
+ - type: component
+ component: "ui_suite_bootstrap:list_group_item"
+ slots:
+ content: "A disabled item"
+ props:
+ disabled: true
+props:
+ variant: default
diff --git a/components/list_group_item/list_group_item.preview.story.yml b/components/list_group_item/list_group_item.preview.story.yml
deleted file mode 100644
index 5829e0c7..00000000
--- a/components/list_group_item/list_group_item.preview.story.yml
+++ /dev/null
@@ -1,6 +0,0 @@
-name: Preview
-slots:
- content: "An item"
-props:
- active: false
- disabled: false
--
GitLab
From 0cf047b63f1be8670f5276e7f0c7aa36aee125de Mon Sep 17 00:00:00 2001
From: Florent Torregrosa <florent.torregrosa@gmail.com>
Date: Wed, 5 Mar 2025 19:00:43 +0100
Subject: [PATCH 06/15] Issue #3485834 by grimreaper: modal
---
components/modal/modal.default.story.yml | 41 +++++++++++
components/modal/modal.fullscreen.story.yml | 73 +++++++++++++++++++
.../modal.long_content_default.story.yml | 43 +++++++++++
.../modal.long_content_scrollable.story.yml | 44 +++++++++++
...review.story.yml => modal.sizes.story.yml} | 7 +-
.../modal/modal.static_backdrop.story.yml | 41 +++++++++++
.../modal/modal.vertical_centered.story.yml | 41 +++++++++++
...dal.vertical_centered_scrollable.story.yml | 44 +++++++++++
8 files changed, 332 insertions(+), 2 deletions(-)
create mode 100644 components/modal/modal.default.story.yml
create mode 100644 components/modal/modal.fullscreen.story.yml
create mode 100644 components/modal/modal.long_content_default.story.yml
create mode 100644 components/modal/modal.long_content_scrollable.story.yml
rename components/modal/{modal.preview.story.yml => modal.sizes.story.yml} (90%)
create mode 100644 components/modal/modal.static_backdrop.story.yml
create mode 100644 components/modal/modal.vertical_centered.story.yml
create mode 100644 components/modal/modal.vertical_centered_scrollable.story.yml
diff --git a/components/modal/modal.default.story.yml b/components/modal/modal.default.story.yml
new file mode 100644
index 00000000..94241cda
--- /dev/null
+++ b/components/modal/modal.default.story.yml
@@ -0,0 +1,41 @@
+name: Default
+slots:
+ title: "Modal title"
+ body: "Woo-hoo, you're reading this text in a modal!"
+ footer:
+ - type: component
+ component: "ui_suite_bootstrap:button"
+ slots:
+ label: "Close"
+ props:
+ variant: secondary__sm
+ attributes:
+ data-bs-dismiss: modal
+ - type: component
+ component: "ui_suite_bootstrap:button"
+ slots:
+ label: "Save changes"
+ props:
+ variant: primary__sm
+props:
+ variant: default
+ animation: true
+ static: false
+ centered: false
+ scrollable: false
+ heading_level: 1
+ heading_attributes:
+ class:
+ - fs-5
+library_wrapper: >
+ {% set modal_id = modal_id|default("modal-" ~ random()) %}
+ {% set props = {'#props': _story['#props']|merge({'modal_id': modal_id})} %}
+ {{ include('ui_suite_bootstrap:button', {
+ 'label': 'Launch demo modal'|t,
+ 'variant': 'primary',
+ 'attributes': {
+ 'data-bs-target': '#' ~ modal_id,
+ 'data-bs-toggle': 'modal',
+ },
+ }, with_context = false) }}
+ {{ _story|merge(props) }}
diff --git a/components/modal/modal.fullscreen.story.yml b/components/modal/modal.fullscreen.story.yml
new file mode 100644
index 00000000..1dcc5233
--- /dev/null
+++ b/components/modal/modal.fullscreen.story.yml
@@ -0,0 +1,73 @@
+name: Fullscreen
+slots:
+ body: "..."
+ footer:
+ - type: component
+ component: "ui_suite_bootstrap:button"
+ slots:
+ label: "Close"
+ props:
+ variant: secondary__sm
+ attributes:
+ data-bs-dismiss: modal
+props:
+ variant: default
+ animation: true
+ static: false
+ centered: false
+ scrollable: false
+ heading_level: 1
+ heading_attributes:
+ class:
+ - fs-4
+library_wrapper: >
+ {% set examples = [
+ {
+ label: 'Full screen'|t,
+ fullscreen: 'modal-fullscreen',
+ },
+ {
+ label: 'Full screen below sm'|t,
+ fullscreen: 'modal-fullscreen-sm-down',
+ },
+ {
+ label: 'Full screen below md'|t,
+ fullscreen: 'modal-fullscreen-md-down',
+ },
+ {
+ label: 'Full screen below lg'|t,
+ fullscreen: 'modal-fullscreen-lg-down',
+ },
+ {
+ label: 'Full screen below xl'|t,
+ fullscreen: 'modal-fullscreen-xl-down',
+ },
+ {
+ label: 'Full screen below xxl'|t,
+ fullscreen: 'modal-fullscreen-xxl-down',
+ },
+ ] %}
+ {% for example in examples %}
+ {% set modal_id = "modal-" ~ random() %}
+ {% set example_props = {'#props': _story['#props']|merge({
+ 'modal_id': modal_id,
+ 'fullscreen': example.fullscreen,
+ })} %}
+ {% set example_slots = {'#slots': _story['#slots']|merge({
+ 'title': example.label,
+ })} %}
+ {% set example_story = _story %}
+
+ {{ include('ui_suite_bootstrap:button', {
+ 'label': example.label,
+ 'variant': 'primary',
+ 'attributes': {
+ 'data-bs-target': '#' ~ modal_id,
+ 'data-bs-toggle': 'modal',
+ 'class': [
+ 'm-1',
+ ],
+ },
+ }, with_context = false) }}
+ {{ example_story|merge(example_props)|merge(example_slots) }}
+ {% endfor %}
diff --git a/components/modal/modal.long_content_default.story.yml b/components/modal/modal.long_content_default.story.yml
new file mode 100644
index 00000000..09e1b90f
--- /dev/null
+++ b/components/modal/modal.long_content_default.story.yml
@@ -0,0 +1,43 @@
+name: "Scrolling long content: default"
+slots:
+ title: "Modal title"
+ body: "This is some placeholder content to show the scrolling behavior for modals. Instead of repeating the text in the modal, we use an inline style to set a minimum height, thereby extending the length of the overall modal and demonstrating the overflow scrolling. When content becomes longer than the height of the viewport, scrolling will move the modal as needed."
+ footer:
+ - type: component
+ component: "ui_suite_bootstrap:button"
+ slots:
+ label: "Close"
+ props:
+ variant: secondary__sm
+ attributes:
+ data-bs-dismiss: modal
+ - type: component
+ component: "ui_suite_bootstrap:button"
+ slots:
+ label: "Save changes"
+ props:
+ variant: primary__sm
+props:
+ variant: default
+ animation: true
+ static: false
+ centered: false
+ scrollable: false
+ heading_level: 1
+ heading_attributes:
+ class:
+ - fs-5
+ body_attributes:
+ style: "min-height: 1500px"
+library_wrapper: >
+ {% set modal_id = modal_id|default("modal-" ~ random()) %}
+ {% set props = {'#props': _story['#props']|merge({'modal_id': modal_id})} %}
+ {{ include('ui_suite_bootstrap:button', {
+ 'label': 'Launch demo modal'|t,
+ 'variant': 'primary',
+ 'attributes': {
+ 'data-bs-target': '#' ~ modal_id,
+ 'data-bs-toggle': 'modal',
+ },
+ }, with_context = false) }}
+ {{ _story|merge(props) }}
diff --git a/components/modal/modal.long_content_scrollable.story.yml b/components/modal/modal.long_content_scrollable.story.yml
new file mode 100644
index 00000000..316a22f4
--- /dev/null
+++ b/components/modal/modal.long_content_scrollable.story.yml
@@ -0,0 +1,44 @@
+name: "Scrolling long content: scrollable"
+slots:
+ title: "Modal title"
+ body: |
+ <p>This is some placeholder content to show the scrolling behavior for modals. We use repeated line breaks to demonstrate how content can exceed minimum inner height, thereby showing inner scrolling. When content becomes longer than the predefined max-height of modal, content will be cropped and scrollable within the modal.</p>
+ <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
+ <p>This content should appear at the bottom after you scroll.</p>
+ footer:
+ - type: component
+ component: "ui_suite_bootstrap:button"
+ slots:
+ label: "Close"
+ props:
+ variant: secondary__sm
+ attributes:
+ data-bs-dismiss: modal
+ - type: component
+ component: "ui_suite_bootstrap:button"
+ slots:
+ label: "Save changes"
+ props:
+ variant: primary__sm
+props:
+ variant: default
+ animation: true
+ static: false
+ centered: false
+ scrollable: true
+ heading_level: 1
+ heading_attributes:
+ class:
+ - fs-5
+library_wrapper: >
+ {% set modal_id = modal_id|default("modal-" ~ random()) %}
+ {% set props = {'#props': _story['#props']|merge({'modal_id': modal_id})} %}
+ {{ include('ui_suite_bootstrap:button', {
+ 'label': 'Launch demo modal'|t,
+ 'variant': 'primary',
+ 'attributes': {
+ 'data-bs-target': '#' ~ modal_id,
+ 'data-bs-toggle': 'modal',
+ },
+ }, with_context = false) }}
+ {{ _story|merge(props) }}
diff --git a/components/modal/modal.preview.story.yml b/components/modal/modal.sizes.story.yml
similarity index 90%
rename from components/modal/modal.preview.story.yml
rename to components/modal/modal.sizes.story.yml
index 816152ad..98f385b6 100644
--- a/components/modal/modal.preview.story.yml
+++ b/components/modal/modal.sizes.story.yml
@@ -1,4 +1,4 @@
-name: Preview
+name: Sizes
slots:
title: "Modal title"
body: "Modal body text goes here."
@@ -23,6 +23,9 @@ props:
centered: false
scrollable: false
heading_level: 1
+ heading_attributes:
+ class:
+ - fs-5
library_wrapper: >
{% set modal_id = modal_id|default("modal-" ~ random()) %}
{% set props = {'#props': _story['#props']|merge({'modal_id': modal_id})} %}
@@ -31,7 +34,7 @@ library_wrapper: >
'variant': 'primary',
'attributes': {
'data-bs-target': '#' ~ modal_id,
- 'data-bs-toggle':'modal',
+ 'data-bs-toggle': 'modal',
},
}, with_context = false) }}
{{ _story|merge(props) }}
diff --git a/components/modal/modal.static_backdrop.story.yml b/components/modal/modal.static_backdrop.story.yml
new file mode 100644
index 00000000..18a29ffe
--- /dev/null
+++ b/components/modal/modal.static_backdrop.story.yml
@@ -0,0 +1,41 @@
+name: "Static backdrop"
+slots:
+ title: "Modal title"
+ body: "I will not close if you click outside of me. Don't even try to press escape key."
+ footer:
+ - type: component
+ component: "ui_suite_bootstrap:button"
+ slots:
+ label: "Close"
+ props:
+ variant: secondary__sm
+ attributes:
+ data-bs-dismiss: modal
+ - type: component
+ component: "ui_suite_bootstrap:button"
+ slots:
+ label: "Understood"
+ props:
+ variant: primary__sm
+props:
+ variant: default
+ animation: true
+ static: true
+ centered: false
+ scrollable: false
+ heading_level: 1
+ heading_attributes:
+ class:
+ - fs-5
+library_wrapper: >
+ {% set modal_id = modal_id|default("modal-" ~ random()) %}
+ {% set props = {'#props': _story['#props']|merge({'modal_id': modal_id})} %}
+ {{ include('ui_suite_bootstrap:button', {
+ 'label': 'Launch static backdrop modal'|t,
+ 'variant': 'primary',
+ 'attributes': {
+ 'data-bs-target': '#' ~ modal_id,
+ 'data-bs-toggle': 'modal',
+ },
+ }, with_context = false) }}
+ {{ _story|merge(props) }}
diff --git a/components/modal/modal.vertical_centered.story.yml b/components/modal/modal.vertical_centered.story.yml
new file mode 100644
index 00000000..0dd77b2c
--- /dev/null
+++ b/components/modal/modal.vertical_centered.story.yml
@@ -0,0 +1,41 @@
+name: "Vertically centered"
+slots:
+ title: "Modal title"
+ body: "This is a vertically centered modal."
+ footer:
+ - type: component
+ component: "ui_suite_bootstrap:button"
+ slots:
+ label: "Close"
+ props:
+ variant: secondary__sm
+ attributes:
+ data-bs-dismiss: modal
+ - type: component
+ component: "ui_suite_bootstrap:button"
+ slots:
+ label: "Save changes"
+ props:
+ variant: primary__sm
+props:
+ variant: default
+ animation: true
+ static: false
+ centered: true
+ scrollable: false
+ heading_level: 1
+ heading_attributes:
+ class:
+ - fs-5
+library_wrapper: >
+ {% set modal_id = modal_id|default("modal-" ~ random()) %}
+ {% set props = {'#props': _story['#props']|merge({'modal_id': modal_id})} %}
+ {{ include('ui_suite_bootstrap:button', {
+ 'label': 'Vertically centered modal'|t,
+ 'variant': 'primary',
+ 'attributes': {
+ 'data-bs-target': '#' ~ modal_id,
+ 'data-bs-toggle': 'modal',
+ },
+ }, with_context = false) }}
+ {{ _story|merge(props) }}
diff --git a/components/modal/modal.vertical_centered_scrollable.story.yml b/components/modal/modal.vertical_centered_scrollable.story.yml
new file mode 100644
index 00000000..3b22cfca
--- /dev/null
+++ b/components/modal/modal.vertical_centered_scrollable.story.yml
@@ -0,0 +1,44 @@
+name: "Vertically centered scrollable"
+slots:
+ title: "Modal title"
+ body: |
+ <p>This is some placeholder content to show a vertically centered modal. We've added some extra copy here to show how vertically centering the modal works when combined with scrollable modals. We also use some repeated line breaks to quickly extend the height of the content, thereby triggering the scrolling. When content becomes longer than the predefined max-height of modal, content will be cropped and scrollable within the modal.</p>
+ <br><br><br><br><br><br><br><br><br><br>
+ <p>Just like that.</p>
+ footer:
+ - type: component
+ component: "ui_suite_bootstrap:button"
+ slots:
+ label: "Close"
+ props:
+ variant: secondary__sm
+ attributes:
+ data-bs-dismiss: modal
+ - type: component
+ component: "ui_suite_bootstrap:button"
+ slots:
+ label: "Save changes"
+ props:
+ variant: primary__sm
+props:
+ variant: default
+ animation: true
+ static: false
+ centered: true
+ scrollable: true
+ heading_level: 1
+ heading_attributes:
+ class:
+ - fs-5
+library_wrapper: >
+ {% set modal_id = modal_id|default("modal-" ~ random()) %}
+ {% set props = {'#props': _story['#props']|merge({'modal_id': modal_id})} %}
+ {{ include('ui_suite_bootstrap:button', {
+ 'label': 'Vertically centered scrollable modal'|t,
+ 'variant': 'primary',
+ 'attributes': {
+ 'data-bs-target': '#' ~ modal_id,
+ 'data-bs-toggle': 'modal',
+ },
+ }, with_context = false) }}
+ {{ _story|merge(props) }}
--
GitLab
From 9fce4ef867eb0fa480ccc98c186dbeec7269593f Mon Sep 17 00:00:00 2001
From: Florent Torregrosa <florent.torregrosa@gmail.com>
Date: Fri, 7 Mar 2025 10:49:53 +0100
Subject: [PATCH 07/15] Issue #3485834 by grimreaper: offcanvas
---
.../offcanvas.body_scrolling.story.yml | 26 ++++++++++++
...ffcanvas.body_scrolling_backdrop.story.yml | 25 +++++++++++
components/offcanvas/offcanvas.dark.story.yml | 26 ++++++++++++
.../offcanvas/offcanvas.default.story.yml | 41 +++++++++++++++++++
...tory.yml => offcanvas.placement.story.yml} | 4 +-
.../offcanvas/offcanvas.responsive.story.yml | 34 +++++++++++++++
.../offcanvas.static_backdrop.story.yml | 26 ++++++++++++
7 files changed, 180 insertions(+), 2 deletions(-)
create mode 100644 components/offcanvas/offcanvas.body_scrolling.story.yml
create mode 100644 components/offcanvas/offcanvas.body_scrolling_backdrop.story.yml
create mode 100644 components/offcanvas/offcanvas.dark.story.yml
create mode 100644 components/offcanvas/offcanvas.default.story.yml
rename components/offcanvas/{offcanvas.preview.story.yml => offcanvas.placement.story.yml} (81%)
create mode 100644 components/offcanvas/offcanvas.responsive.story.yml
create mode 100644 components/offcanvas/offcanvas.static_backdrop.story.yml
diff --git a/components/offcanvas/offcanvas.body_scrolling.story.yml b/components/offcanvas/offcanvas.body_scrolling.story.yml
new file mode 100644
index 00000000..339622bf
--- /dev/null
+++ b/components/offcanvas/offcanvas.body_scrolling.story.yml
@@ -0,0 +1,26 @@
+name: "Body scrolling"
+slots:
+ title: "Offcanvas with body scrolling"
+ body:
+ - type: html_tag
+ tag: p
+ value: "Try scrolling the rest of the page to see this option in action."
+props:
+ variant: start
+ scroll: true
+ backdrop: false
+ heading_level: 5
+library_wrapper: >
+ {% set offcanvas_id = offcanvas_id|default("offcanvas-" ~ random()) %}
+ {% set props = {'#props': _story['#props']|merge({'offcanvas_id': offcanvas_id})} %}
+ {{ include('ui_suite_bootstrap:button', {
+ 'label': 'Enable body scrolling'|t,
+ 'variant': 'primary',
+ 'attributes': {
+ 'data-bs-target': '#' ~ offcanvas_id,
+ 'data-bs-toggle': 'offcanvas',
+ 'aria-controls': offcanvas_id,
+ 'aria-expanded': 'false',
+ },
+ }, with_context = false) }}
+ {{ _story|merge(props) }}
diff --git a/components/offcanvas/offcanvas.body_scrolling_backdrop.story.yml b/components/offcanvas/offcanvas.body_scrolling_backdrop.story.yml
new file mode 100644
index 00000000..18732bc5
--- /dev/null
+++ b/components/offcanvas/offcanvas.body_scrolling_backdrop.story.yml
@@ -0,0 +1,25 @@
+name: "Body scrolling and backdrop"
+slots:
+ title: "Backdrop with scrolling"
+ body:
+ - type: html_tag
+ tag: p
+ value: "Try scrolling the rest of the page to see this option in action."
+props:
+ variant: start
+ scroll: true
+ heading_level: 5
+library_wrapper: >
+ {% set offcanvas_id = offcanvas_id|default("offcanvas-" ~ random()) %}
+ {% set props = {'#props': _story['#props']|merge({'offcanvas_id': offcanvas_id})} %}
+ {{ include('ui_suite_bootstrap:button', {
+ 'label': 'Enable both scrolling & backdrop'|t,
+ 'variant': 'primary',
+ 'attributes': {
+ 'data-bs-target': '#' ~ offcanvas_id,
+ 'data-bs-toggle': 'offcanvas',
+ 'aria-controls': offcanvas_id,
+ 'aria-expanded': 'false',
+ },
+ }, with_context = false) }}
+ {{ _story|merge(props) }}
diff --git a/components/offcanvas/offcanvas.dark.story.yml b/components/offcanvas/offcanvas.dark.story.yml
new file mode 100644
index 00000000..b33f8d2d
--- /dev/null
+++ b/components/offcanvas/offcanvas.dark.story.yml
@@ -0,0 +1,26 @@
+name: "Dark offcanvas"
+slots:
+ title: Offcanvas
+ body:
+ - type: html_tag
+ tag: p
+ value: "Place offcanvas content here."
+props:
+ variant: start
+ heading_level: 5
+library_wrapper: >
+ {% set offcanvas_id = offcanvas_id|default("offcanvas-" ~ random()) %}
+ {% set props = {'#props': _story['#props']|merge({'offcanvas_id': offcanvas_id})} %}
+ {{ include('ui_suite_bootstrap:button', {
+ 'label': 'Launch dark offcanvas'|t,
+ 'variant': 'dark',
+ 'attributes': {
+ 'data-bs-target': '#' ~ offcanvas_id,
+ 'data-bs-toggle': 'offcanvas',
+ 'aria-controls': offcanvas_id,
+ 'aria-expanded': 'false',
+ },
+ }, with_context = false) }}
+ <div data-bs-theme="dark">
+ {{ _story|merge(props) }}
+ </div>
diff --git a/components/offcanvas/offcanvas.default.story.yml b/components/offcanvas/offcanvas.default.story.yml
new file mode 100644
index 00000000..f26f3744
--- /dev/null
+++ b/components/offcanvas/offcanvas.default.story.yml
@@ -0,0 +1,41 @@
+name: Default
+slots:
+ title: Offcanvas
+ body:
+ - type: html_tag
+ tag: div
+ value: "Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc."
+ - type: component
+ component: "ui_suite_bootstrap:dropdown"
+ slots:
+ title: "Dropdown button "
+ props:
+ attributes:
+ class:
+ - mt-3
+ content:
+ - title: "Action"
+ url: "#"
+ - title: "Another action"
+ url: "#"
+ - title: "Something else here"
+ url: "#"
+ button_variant: secondary
+props:
+ variant: start
+ scroll: false
+ heading_level: 5
+library_wrapper: >
+ {% set offcanvas_id = offcanvas_id|default("offcanvas-" ~ random()) %}
+ {% set props = {'#props': _story['#props']|merge({'offcanvas_id': offcanvas_id})} %}
+ {{ include('ui_suite_bootstrap:button', {
+ 'label': 'Button with data-bs-target'|t,
+ 'variant': 'primary',
+ 'attributes': {
+ 'data-bs-target': '#' ~ offcanvas_id,
+ 'data-bs-toggle': 'offcanvas',
+ 'aria-controls': offcanvas_id,
+ 'aria-expanded': 'false',
+ },
+ }, with_context = false) }}
+ {{ _story|merge(props) }}
diff --git a/components/offcanvas/offcanvas.preview.story.yml b/components/offcanvas/offcanvas.placement.story.yml
similarity index 81%
rename from components/offcanvas/offcanvas.preview.story.yml
rename to components/offcanvas/offcanvas.placement.story.yml
index bbe07673..de04b208 100644
--- a/components/offcanvas/offcanvas.preview.story.yml
+++ b/components/offcanvas/offcanvas.placement.story.yml
@@ -1,7 +1,7 @@
-name: Preview
+name: Placement
slots:
title: Offcanvas
- body: "Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here."
+ body: "..."
props:
scroll: false
heading_level: 5
diff --git a/components/offcanvas/offcanvas.responsive.story.yml b/components/offcanvas/offcanvas.responsive.story.yml
new file mode 100644
index 00000000..3209a17e
--- /dev/null
+++ b/components/offcanvas/offcanvas.responsive.story.yml
@@ -0,0 +1,34 @@
+name: Responsive
+slots:
+ title: "Responsive offcanvas"
+ body:
+ - type: html_tag
+ tag: p
+ value: "This is content within an <code>.offcanvas-lg</code>."
+ attributes:
+ class:
+ - mb-0
+props:
+ variant: end
+ scroll: false
+ heading_level: 5
+ responsive: "offcanvas-lg"
+library_wrapper: >
+ {% set offcanvas_id = offcanvas_id|default("offcanvas-" ~ random()) %}
+ {% set props = {'#props': _story['#props']|merge({'offcanvas_id': offcanvas_id})} %}
+ {{ include('ui_suite_bootstrap:button', {
+ 'label': 'Toggle offcanvas'|t,
+ 'variant': 'primary',
+ 'attributes': {
+ 'class': [
+ 'd-lg-none',
+ ],
+ 'data-bs-target': '#' ~ offcanvas_id,
+ 'data-bs-toggle': 'offcanvas',
+ 'aria-controls': offcanvas_id,
+ 'aria-expanded': 'false',
+ },
+ }, with_context = false) }}
+
+ <div class="alert alert-info d-none d-lg-block">{{ 'Resize your browser to show the responsive offcanvas toggle.'|t }}</div>
+ {{ _story|merge(props) }}
diff --git a/components/offcanvas/offcanvas.static_backdrop.story.yml b/components/offcanvas/offcanvas.static_backdrop.story.yml
new file mode 100644
index 00000000..8805a7d5
--- /dev/null
+++ b/components/offcanvas/offcanvas.static_backdrop.story.yml
@@ -0,0 +1,26 @@
+name: "Static backdrop"
+slots:
+ title: "Offcanvas"
+ body:
+ - type: html_tag
+ tag: div
+ value: "I will not close if you click outside of me."
+props:
+ variant: start
+ scroll: false
+ backdrop: static
+ heading_level: 5
+library_wrapper: >
+ {% set offcanvas_id = offcanvas_id|default("offcanvas-" ~ random()) %}
+ {% set props = {'#props': _story['#props']|merge({'offcanvas_id': offcanvas_id})} %}
+ {{ include('ui_suite_bootstrap:button', {
+ 'label': 'Toggle static offcanvas'|t,
+ 'variant': 'primary',
+ 'attributes': {
+ 'data-bs-target': '#' ~ offcanvas_id,
+ 'data-bs-toggle': 'offcanvas',
+ 'aria-controls': offcanvas_id,
+ 'aria-expanded': 'false',
+ },
+ }, with_context = false) }}
+ {{ _story|merge(props) }}
--
GitLab
From 9a03d814f4ce6a2f07a12654223342db2c1be3a4 Mon Sep 17 00:00:00 2001
From: Florent Torregrosa <florent.torregrosa@gmail.com>
Date: Mon, 10 Mar 2025 11:48:01 +0100
Subject: [PATCH 08/15] Issue #3485834 by grimreaper: Toast, toast container,
card, card group, card overlay
---
...preview.story.yml => card.basic.story.yml} | 24 ++----
.../card/card.content_types_body.story.yml | 9 +++
.../card/card.content_types_header.story.yml | 19 +++++
...card.content_types_header_footer.story.yml | 29 +++++++
.../card.content_types_header_quote.story.yml | 28 +++++++
.../card.content_types_header_title.story.yml | 25 +++++++
.../card/card.content_types_images.story.yml | 30 ++++++++
.../card/card.content_types_kitchen.story.yml | 50 +++++++++++++
.../card.content_types_list_groups.story.yml | 25 +++++++
...content_types_list_groups_footer.story.yml | 26 +++++++
...content_types_list_groups_header.story.yml | 26 +++++++
....content_types_titles_text_links.story.yml | 29 +++++++
components/card/card.horizontal.story.yml | 30 +++-----
.../card/card.navigation_pills.story.yml | 41 ++++++++++
.../card/card.navigation_tabs.story.yml | 41 ++++++++++
.../card/card.styles_background.story.yml | 34 +++++++++
components/card/card.styles_border.story.yml | 34 +++++++++
components/card/card.styles_mixins.story.yml | 27 +++++++
components/card/card.text_alignment.story.yml | 36 +++++++++
.../card_group/card_group.preview.story.yml | 75 ++++++++++++++++++-
.../card_overlay.preview.story.yml | 12 ---
...review.story.yml => toast.basic.story.yml} | 7 +-
components/toast/toast.color.story.yml | 12 +++
.../toast/toast.custom_content.story.yml | 9 +++
.../toast.custom_content_control.story.yml | 30 ++++++++
components/toast/toast.translucent.story.yml | 36 +++++++++
.../toast_container.preview.story.yml | 57 +-------------
27 files changed, 692 insertions(+), 109 deletions(-)
rename components/card/{card.preview.story.yml => card.basic.story.yml} (63%)
create mode 100644 components/card/card.content_types_body.story.yml
create mode 100644 components/card/card.content_types_header.story.yml
create mode 100644 components/card/card.content_types_header_footer.story.yml
create mode 100644 components/card/card.content_types_header_quote.story.yml
create mode 100644 components/card/card.content_types_header_title.story.yml
create mode 100644 components/card/card.content_types_images.story.yml
create mode 100644 components/card/card.content_types_kitchen.story.yml
create mode 100644 components/card/card.content_types_list_groups.story.yml
create mode 100644 components/card/card.content_types_list_groups_footer.story.yml
create mode 100644 components/card/card.content_types_list_groups_header.story.yml
create mode 100644 components/card/card.content_types_titles_text_links.story.yml
create mode 100644 components/card/card.navigation_pills.story.yml
create mode 100644 components/card/card.navigation_tabs.story.yml
create mode 100644 components/card/card.styles_background.story.yml
create mode 100644 components/card/card.styles_border.story.yml
create mode 100644 components/card/card.styles_mixins.story.yml
create mode 100644 components/card/card.text_alignment.story.yml
rename components/toast/{toast.preview.story.yml => toast.basic.story.yml} (89%)
create mode 100644 components/toast/toast.color.story.yml
create mode 100644 components/toast/toast.custom_content.story.yml
create mode 100644 components/toast/toast.custom_content_control.story.yml
create mode 100644 components/toast/toast.translucent.story.yml
diff --git a/components/card/card.preview.story.yml b/components/card/card.basic.story.yml
similarity index 63%
rename from components/card/card.preview.story.yml
rename to components/card/card.basic.story.yml
index e27538aa..ce126ac8 100644
--- a/components/card/card.preview.story.yml
+++ b/components/card/card.basic.story.yml
@@ -1,17 +1,15 @@
-name: Preview
+name: Basic
slots:
image:
theme: image
uri: "data:image/svg+xml;base64,PHN2ZyBzdHlsZT0iZm9udC1zaXplOiAxLjEyNXJlbTsgdGV4dC1hbmNob3I6IG1pZGRsZTsgdXNlci1zZWxlY3Q6IG5vbmU7IiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIyNTQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQgc2xpY2UiIGZvY3VzYWJsZT0iZmFsc2UiIHJvbGU9ImltZyIgYXJpYS1sYWJlbD0iUGxhY2Vob2xkZXI6IEltYWdlIGNhcCI+PHRpdGxlPlBsYWNlaG9sZGVyPC90aXRsZT48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjODY4ZTk2Ij48L3JlY3Q+PHRleHQgeD0iNTAlIiB5PSI1MCUiIGZpbGw9IiNkZWUyZTYiIGR5PSIuM2VtIj5JbWFnZSBjYXA8L3RleHQ+PC9zdmc+Cg=="
alt: "© 2017 John Smith photography"
- header: Featured
content:
- type: component
component: "ui_suite_bootstrap:card_body"
slots:
title: "Card title"
- subtitle: "Card subtitle"
- text: "Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit."
+ text: "Some quick example text to build on the card title and make up the bulk of the card's content."
content:
type: component
component: "ui_suite_bootstrap:button"
@@ -19,21 +17,9 @@ slots:
label: "Go somewhere"
props:
variant: primary
- links:
- - type: html_tag
- tag: a
- value: "Card link"
- attributes:
- href: "#"
- - type: html_tag
- tag: a
- value: "Another link"
- attributes:
- href: "#"
- footer:
- type: html_tag
- tag: span
- value: "2 days ago"
+ url: "#"
props:
+ attributes:
+ style: "width: 18rem;"
variant: default
image_position: top
diff --git a/components/card/card.content_types_body.story.yml b/components/card/card.content_types_body.story.yml
new file mode 100644
index 00000000..ccfc5158
--- /dev/null
+++ b/components/card/card.content_types_body.story.yml
@@ -0,0 +1,9 @@
+name: "Content types: body"
+slots:
+ content:
+ - type: component
+ component: "ui_suite_bootstrap:card_body"
+ slots:
+ content: "This is some text within a card body."
+props:
+ variant: default
diff --git a/components/card/card.content_types_header.story.yml b/components/card/card.content_types_header.story.yml
new file mode 100644
index 00000000..7e7f071f
--- /dev/null
+++ b/components/card/card.content_types_header.story.yml
@@ -0,0 +1,19 @@
+name: "Content types: header"
+slots:
+ header: "Featured"
+ content:
+ - type: component
+ component: "ui_suite_bootstrap:card_body"
+ slots:
+ title: "Special title treatment"
+ text: "With supporting text below as a natural lead-in to additional content."
+ content:
+ type: component
+ component: "ui_suite_bootstrap:button"
+ slots:
+ label: "Go somewhere"
+ props:
+ variant: primary
+ url: "#"
+props:
+ variant: default
diff --git a/components/card/card.content_types_header_footer.story.yml b/components/card/card.content_types_header_footer.story.yml
new file mode 100644
index 00000000..13a8436d
--- /dev/null
+++ b/components/card/card.content_types_header_footer.story.yml
@@ -0,0 +1,29 @@
+name: "Content types: header and footer centered"
+slots:
+ header: "Featured"
+ content:
+ - type: component
+ component: "ui_suite_bootstrap:card_body"
+ slots:
+ title: "Special title treatment"
+ text: "With supporting text below as a natural lead-in to additional content."
+ content:
+ type: component
+ component: "ui_suite_bootstrap:button"
+ slots:
+ label: "Go somewhere"
+ props:
+ variant: primary
+ url: "#"
+ footer:
+ type: html_tag
+ tag: span
+ value: "2 days ago"
+props:
+ variant: default
+ attributes:
+ class:
+ - text-center
+ footer_attributes:
+ class:
+ - text-body-secondary
diff --git a/components/card/card.content_types_header_quote.story.yml b/components/card/card.content_types_header_quote.story.yml
new file mode 100644
index 00000000..30b46257
--- /dev/null
+++ b/components/card/card.content_types_header_quote.story.yml
@@ -0,0 +1,28 @@
+# @todo the blockquote component is not providing the expected HTML.
+name: "Content types: header quote"
+slots:
+ header: "Quote"
+ content:
+ - type: component
+ component: "ui_suite_bootstrap:card_body"
+ slots:
+ content:
+ type: component
+ component: "ui_suite_bootstrap:blockquote"
+ attributes:
+ class:
+ - mb-0
+ slots:
+ content:
+ - type: html_tag
+ tag: p
+ value: "A well-known quote, contained in a blockquote element."
+ footer:
+ - markup: "Someone famous in "
+ - type: html_tag
+ tag: cite
+ value: "Source Title"
+ attributes:
+ title: "Source Title"
+props:
+ variant: default
diff --git a/components/card/card.content_types_header_title.story.yml b/components/card/card.content_types_header_title.story.yml
new file mode 100644
index 00000000..c5c03d9b
--- /dev/null
+++ b/components/card/card.content_types_header_title.story.yml
@@ -0,0 +1,25 @@
+name: "Content types: header title"
+description: "Card headers can be styled by adding .card-header to <h*> elements."
+slots:
+ content:
+ - type: html_tag
+ tag: h5
+ value: "Featured"
+ attributes:
+ class:
+ - card-header
+ - type: component
+ component: "ui_suite_bootstrap:card_body"
+ slots:
+ title: "Special title treatment"
+ text: "With supporting text below as a natural lead-in to additional content."
+ content:
+ type: component
+ component: "ui_suite_bootstrap:button"
+ slots:
+ label: "Go somewhere"
+ props:
+ variant: primary
+ url: "#"
+props:
+ variant: default
diff --git a/components/card/card.content_types_images.story.yml b/components/card/card.content_types_images.story.yml
new file mode 100644
index 00000000..47bca699
--- /dev/null
+++ b/components/card/card.content_types_images.story.yml
@@ -0,0 +1,30 @@
+name: "Content types: images"
+slots:
+ image:
+ theme: image
+ uri: "data:image/svg+xml;base64,PHN2ZyBzdHlsZT0iZm9udC1zaXplOiAxLjEyNXJlbTsgdGV4dC1hbmNob3I6IG1pZGRsZTsgdXNlci1zZWxlY3Q6IG5vbmU7IiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIyNTQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQgc2xpY2UiIGZvY3VzYWJsZT0iZmFsc2UiIHJvbGU9ImltZyIgYXJpYS1sYWJlbD0iUGxhY2Vob2xkZXI6IEltYWdlIGNhcCI+PHRpdGxlPlBsYWNlaG9sZGVyPC90aXRsZT48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjODY4ZTk2Ij48L3JlY3Q+PHRleHQgeD0iNTAlIiB5PSI1MCUiIGZpbGw9IiNkZWUyZTYiIGR5PSIuM2VtIj5JbWFnZSBjYXA8L3RleHQ+PC9zdmc+Cg=="
+ alt: "© 2017 John Smith photography"
+ content:
+ - type: component
+ component: "ui_suite_bootstrap:card_body"
+ slots:
+ text: "Some quick example text to build on the card title and make up the bulk of the card's content."
+props:
+ attributes:
+ style: "width: 18rem;"
+ variant: default
+library_wrapper: >
+ {% set examples = [
+ 'top',
+ 'bottom',
+ ] %}
+ {% for example in examples %}
+ {% set example_props = {'#props': _story['#props']|merge({
+ 'image_position': example,
+ })} %}
+
+ {% set example_story = _story %}
+ <div class="mt-3">
+ {{ example_story|merge(example_props) }}
+ </div>
+ {% endfor %}
diff --git a/components/card/card.content_types_kitchen.story.yml b/components/card/card.content_types_kitchen.story.yml
new file mode 100644
index 00000000..a58200d5
--- /dev/null
+++ b/components/card/card.content_types_kitchen.story.yml
@@ -0,0 +1,50 @@
+name: "Content types: kitchen sink"
+description: "Mix and match multiple content types to create the card you need, or throw everything in there. Shown below are image styles, blocks, text styles, and a list group—all wrapped in a fixed-width card."
+slots:
+ image:
+ theme: image
+ uri: "data:image/svg+xml;base64,PHN2ZyBzdHlsZT0iZm9udC1zaXplOiAxLjEyNXJlbTsgdGV4dC1hbmNob3I6IG1pZGRsZTsgdXNlci1zZWxlY3Q6IG5vbmU7IiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIyNTQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQgc2xpY2UiIGZvY3VzYWJsZT0iZmFsc2UiIHJvbGU9ImltZyIgYXJpYS1sYWJlbD0iUGxhY2Vob2xkZXI6IEltYWdlIGNhcCI+PHRpdGxlPlBsYWNlaG9sZGVyPC90aXRsZT48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjODY4ZTk2Ij48L3JlY3Q+PHRleHQgeD0iNTAlIiB5PSI1MCUiIGZpbGw9IiNkZWUyZTYiIGR5PSIuM2VtIj5JbWFnZSBjYXA8L3RleHQ+PC9zdmc+Cg=="
+ alt: "© 2017 John Smith photography"
+ content:
+ - type: component
+ component: "ui_suite_bootstrap:card_body"
+ slots:
+ title: "Card title"
+ text: "Some quick example text to build on the card title and make up the bulk of the card's content."
+ - type: component
+ component: "ui_suite_bootstrap:list_group"
+ props:
+ variant: flush
+ slots:
+ items:
+ - type: component
+ component: "ui_suite_bootstrap:list_group_item"
+ slots:
+ content: "An item"
+ - type: component
+ component: "ui_suite_bootstrap:list_group_item"
+ slots:
+ content: "A second item"
+ - type: component
+ component: "ui_suite_bootstrap:list_group_item"
+ slots:
+ content: "A third item"
+ - type: component
+ component: "ui_suite_bootstrap:card_body"
+ slots:
+ links:
+ - type: html_tag
+ tag: a
+ value: "Card link"
+ attributes:
+ href: "#"
+ - type: html_tag
+ tag: a
+ value: "Another link"
+ attributes:
+ href: "#"
+props:
+ variant: default
+ attributes:
+ style: "width: 18rem;"
+ image_position: top
diff --git a/components/card/card.content_types_list_groups.story.yml b/components/card/card.content_types_list_groups.story.yml
new file mode 100644
index 00000000..21738344
--- /dev/null
+++ b/components/card/card.content_types_list_groups.story.yml
@@ -0,0 +1,25 @@
+name: "Content types: list groups"
+slots:
+ content:
+ - type: component
+ component: "ui_suite_bootstrap:list_group"
+ props:
+ variant: flush
+ slots:
+ items:
+ - type: component
+ component: "ui_suite_bootstrap:list_group_item"
+ slots:
+ content: "An item"
+ - type: component
+ component: "ui_suite_bootstrap:list_group_item"
+ slots:
+ content: "A second item"
+ - type: component
+ component: "ui_suite_bootstrap:list_group_item"
+ slots:
+ content: "A third item"
+props:
+ attributes:
+ style: "width: 18rem;"
+ variant: default
diff --git a/components/card/card.content_types_list_groups_footer.story.yml b/components/card/card.content_types_list_groups_footer.story.yml
new file mode 100644
index 00000000..3d3a866a
--- /dev/null
+++ b/components/card/card.content_types_list_groups_footer.story.yml
@@ -0,0 +1,26 @@
+name: "Content types: list groups with footer"
+slots:
+ content:
+ - type: component
+ component: "ui_suite_bootstrap:list_group"
+ props:
+ variant: flush
+ slots:
+ items:
+ - type: component
+ component: "ui_suite_bootstrap:list_group_item"
+ slots:
+ content: "An item"
+ - type: component
+ component: "ui_suite_bootstrap:list_group_item"
+ slots:
+ content: "A second item"
+ - type: component
+ component: "ui_suite_bootstrap:list_group_item"
+ slots:
+ content: "A third item"
+ footer: "Card footer"
+props:
+ attributes:
+ style: "width: 18rem;"
+ variant: default
diff --git a/components/card/card.content_types_list_groups_header.story.yml b/components/card/card.content_types_list_groups_header.story.yml
new file mode 100644
index 00000000..17984629
--- /dev/null
+++ b/components/card/card.content_types_list_groups_header.story.yml
@@ -0,0 +1,26 @@
+name: "Content types: list groups with header"
+slots:
+ header: "Featured"
+ content:
+ - type: component
+ component: "ui_suite_bootstrap:list_group"
+ props:
+ variant: flush
+ slots:
+ items:
+ - type: component
+ component: "ui_suite_bootstrap:list_group_item"
+ slots:
+ content: "An item"
+ - type: component
+ component: "ui_suite_bootstrap:list_group_item"
+ slots:
+ content: "A second item"
+ - type: component
+ component: "ui_suite_bootstrap:list_group_item"
+ slots:
+ content: "A third item"
+props:
+ attributes:
+ style: "width: 18rem;"
+ variant: default
diff --git a/components/card/card.content_types_titles_text_links.story.yml b/components/card/card.content_types_titles_text_links.story.yml
new file mode 100644
index 00000000..b724dd46
--- /dev/null
+++ b/components/card/card.content_types_titles_text_links.story.yml
@@ -0,0 +1,29 @@
+name: "Content types: titles, text, and links"
+slots:
+ content:
+ - type: component
+ component: "ui_suite_bootstrap:card_body"
+ slots:
+ title: "Card title"
+ subtitle: "Card subtitle"
+ text: "Some quick example text to build on the card title and make up the bulk of the card's content."
+ links:
+ - type: html_tag
+ tag: a
+ value: "Card link"
+ attributes:
+ href: "#"
+ - type: html_tag
+ tag: a
+ value: "Another link"
+ attributes:
+ href: "#"
+ props:
+ subtitle_attributes:
+ class:
+ - mb-2
+ - text-body-secondary
+props:
+ attributes:
+ style: "width: 18rem;"
+ variant: default
diff --git a/components/card/card.horizontal.story.yml b/components/card/card.horizontal.story.yml
index e9f4e667..c7001470 100644
--- a/components/card/card.horizontal.story.yml
+++ b/components/card/card.horizontal.story.yml
@@ -9,26 +9,20 @@ slots:
component: "ui_suite_bootstrap:card_body"
slots:
title: "Card title"
- subtitle: "Card subtitle"
- text: "Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit."
+ text: "This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer."
content:
- type: component
- component: "ui_suite_bootstrap:button"
- slots:
- label: "Go somewhere"
- props:
- variant: primary
- links:
- - type: html_tag
- tag: a
- value: "Card link"
+ type: html_tag
+ tag: p
+ 0:
+ type: html_tag
+ tag: small
+ value: Last updated 3 mins ago
attributes:
- href: "#"
- - type: html_tag
- tag: a
- value: "Another link"
- attributes:
- href: "#"
+ class:
+ - text-body-secondary
+ attributes:
+ class:
+ - card-text
props:
attributes:
style: "max-width: 540px;"
diff --git a/components/card/card.navigation_pills.story.yml b/components/card/card.navigation_pills.story.yml
new file mode 100644
index 00000000..475f3f0e
--- /dev/null
+++ b/components/card/card.navigation_pills.story.yml
@@ -0,0 +1,41 @@
+name: "Navigation: pills"
+slots:
+ header:
+ - type: component
+ component: "ui_suite_bootstrap:nav"
+ props:
+ variant: pills
+ nav_type: ul
+ card_header: true
+ items:
+ - url: "#"
+ title: Active
+ link_attributes:
+ class:
+ - active
+ - url: "#"
+ title: Link
+ - url: "#"
+ title: Disabled
+ link_attributes:
+ class:
+ - disabled
+ content:
+ - type: component
+ component: "ui_suite_bootstrap:card_body"
+ slots:
+ title: "Special title treatment"
+ text: "With supporting text below as a natural lead-in to additional content."
+ content:
+ type: component
+ component: "ui_suite_bootstrap:button"
+ slots:
+ label: "Go somewhere"
+ props:
+ variant: primary
+ url: "#"
+props:
+ variant: default
+ attributes:
+ class:
+ - text-center
diff --git a/components/card/card.navigation_tabs.story.yml b/components/card/card.navigation_tabs.story.yml
new file mode 100644
index 00000000..d4d0ea35
--- /dev/null
+++ b/components/card/card.navigation_tabs.story.yml
@@ -0,0 +1,41 @@
+name: "Navigation: tabs"
+slots:
+ header:
+ - type: component
+ component: "ui_suite_bootstrap:nav"
+ props:
+ variant: tabs
+ nav_type: ul
+ card_header: true
+ items:
+ - url: "#"
+ title: Active
+ link_attributes:
+ class:
+ - active
+ - url: "#"
+ title: Link
+ - url: "#"
+ title: Disabled
+ link_attributes:
+ class:
+ - disabled
+ content:
+ - type: component
+ component: "ui_suite_bootstrap:card_body"
+ slots:
+ title: "Special title treatment"
+ text: "With supporting text below as a natural lead-in to additional content."
+ content:
+ type: component
+ component: "ui_suite_bootstrap:button"
+ slots:
+ label: "Go somewhere"
+ props:
+ variant: primary
+ url: "#"
+props:
+ variant: default
+ attributes:
+ class:
+ - text-center
diff --git a/components/card/card.styles_background.story.yml b/components/card/card.styles_background.story.yml
new file mode 100644
index 00000000..b70d3372
--- /dev/null
+++ b/components/card/card.styles_background.story.yml
@@ -0,0 +1,34 @@
+name: "Card styles: background and color"
+slots:
+ header: "Header"
+ content:
+ - type: component
+ component: "ui_suite_bootstrap:card_body"
+ slots:
+ title: "Card title"
+ text: "Some quick example text to build on the card title and make up the bulk of the card's content."
+props:
+ variant: default
+library_wrapper: >
+ {% set examples = [
+ 'primary',
+ 'secondary',
+ 'success',
+ 'danger',
+ 'warning',
+ 'info',
+ 'light',
+ 'dark',
+ ] %}
+ {% for example in examples %}
+ {% set example_props = {'#props': _story['#props']|merge({'attributes': create_attribute({
+ style: 'width: 18rem;',
+ class: [
+ 'mb-3',
+ 'text-bg-' ~example,
+ ]
+ })})} %}
+
+ {% set example_story = _story %}
+ {{ example_story|merge(example_props) }}
+ {% endfor %}
diff --git a/components/card/card.styles_border.story.yml b/components/card/card.styles_border.story.yml
new file mode 100644
index 00000000..61aebee5
--- /dev/null
+++ b/components/card/card.styles_border.story.yml
@@ -0,0 +1,34 @@
+name: "Card styles: border"
+slots:
+ header: "Header"
+ content:
+ - type: component
+ component: "ui_suite_bootstrap:card_body"
+ slots:
+ title: "Card title"
+ text: "Some quick example text to build on the card title and make up the bulk of the card's content."
+props:
+ variant: default
+library_wrapper: >
+ {% set examples = [
+ 'primary',
+ 'secondary',
+ 'success',
+ 'danger',
+ 'warning',
+ 'info',
+ 'light',
+ 'dark',
+ ] %}
+ {% for example in examples %}
+ {% set example_props = {'#props': _story['#props']|merge({'attributes': create_attribute({
+ style: 'width: 18rem;',
+ class: [
+ 'mb-3',
+ 'border-' ~example,
+ ]
+ })})} %}
+
+ {% set example_story = _story %}
+ {{ example_story|merge(example_props) }}
+ {% endfor %}
diff --git a/components/card/card.styles_mixins.story.yml b/components/card/card.styles_mixins.story.yml
new file mode 100644
index 00000000..e5018c2f
--- /dev/null
+++ b/components/card/card.styles_mixins.story.yml
@@ -0,0 +1,27 @@
+name: "Card styles: mixins utilities"
+slots:
+ header: "Header"
+ content:
+ - type: component
+ component: "ui_suite_bootstrap:card_body"
+ slots:
+ title: "Card title"
+ text: "Some quick example text to build on the card title and make up the bulk of the card's content."
+ attributes:
+ class:
+ - text-success
+ footer: "Footer"
+props:
+ variant: default
+ attributes:
+ style: "width: 18rem;"
+ class:
+ - border-success
+ header_attributes:
+ class:
+ - bg-transparent
+ - border-success
+ footer_attributes:
+ class:
+ - bg-transparent
+ - border-success
diff --git a/components/card/card.text_alignment.story.yml b/components/card/card.text_alignment.story.yml
new file mode 100644
index 00000000..b254b32e
--- /dev/null
+++ b/components/card/card.text_alignment.story.yml
@@ -0,0 +1,36 @@
+name: "Text alignment"
+slots:
+ content:
+ - type: component
+ component: "ui_suite_bootstrap:card_body"
+ slots:
+ title: "Special title treatment"
+ text: "With supporting text below as a natural lead-in to additional content."
+ content:
+ type: component
+ component: "ui_suite_bootstrap:button"
+ slots:
+ label: "Go somewhere"
+ props:
+ variant: primary
+ url: "#"
+props:
+ variant: default
+library_wrapper: >
+ {% set examples = [
+ 'text-start',
+ 'text-center',
+ 'text-end',
+ ] %}
+ {% for example in examples %}
+ {% set example_props = {'#props': _story['#props']|merge({'attributes': create_attribute({
+ style: 'width: 18rem;',
+ class: [
+ 'mb-3',
+ example,
+ ]
+ })})} %}
+
+ {% set example_story = _story %}
+ {{ example_story|merge(example_props) }}
+ {% endfor %}
diff --git a/components/card_group/card_group.preview.story.yml b/components/card_group/card_group.preview.story.yml
index 31ba81bc..1cb26ffb 100644
--- a/components/card_group/card_group.preview.story.yml
+++ b/components/card_group/card_group.preview.story.yml
@@ -3,16 +3,85 @@ slots:
cards:
- type: component
component: "ui_suite_bootstrap:card"
- story: preview
+ slots:
+ image:
+ theme: image
+ uri: "data:image/svg+xml;base64,PHN2ZyBzdHlsZT0iZm9udC1zaXplOiAxLjEyNXJlbTsgdGV4dC1hbmNob3I6IG1pZGRsZTsgdXNlci1zZWxlY3Q6IG5vbmU7IiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIyNTQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQgc2xpY2UiIGZvY3VzYWJsZT0iZmFsc2UiIHJvbGU9ImltZyIgYXJpYS1sYWJlbD0iUGxhY2Vob2xkZXI6IEltYWdlIGNhcCI+PHRpdGxlPlBsYWNlaG9sZGVyPC90aXRsZT48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjODY4ZTk2Ij48L3JlY3Q+PHRleHQgeD0iNTAlIiB5PSI1MCUiIGZpbGw9IiNkZWUyZTYiIGR5PSIuM2VtIj5JbWFnZSBjYXA8L3RleHQ+PC9zdmc+Cg=="
+ alt: "© 2017 John Smith photography"
+ content:
+ - type: component
+ component: "ui_suite_bootstrap:card_body"
+ slots:
+ title: "Card title"
+ text: "This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer."
+ content:
+ type: html_tag
+ tag: p
+ 0:
+ type: html_tag
+ tag: small
+ value: Last updated 3 mins ago
+ attributes:
+ class:
+ - text-body-secondary
+ attributes:
+ class:
+ - card-text
props:
variant: default
- type: component
component: "ui_suite_bootstrap:card"
- story: preview
+ slots:
+ image:
+ theme: image
+ uri: "data:image/svg+xml;base64,PHN2ZyBzdHlsZT0iZm9udC1zaXplOiAxLjEyNXJlbTsgdGV4dC1hbmNob3I6IG1pZGRsZTsgdXNlci1zZWxlY3Q6IG5vbmU7IiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIyNTQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQgc2xpY2UiIGZvY3VzYWJsZT0iZmFsc2UiIHJvbGU9ImltZyIgYXJpYS1sYWJlbD0iUGxhY2Vob2xkZXI6IEltYWdlIGNhcCI+PHRpdGxlPlBsYWNlaG9sZGVyPC90aXRsZT48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjODY4ZTk2Ij48L3JlY3Q+PHRleHQgeD0iNTAlIiB5PSI1MCUiIGZpbGw9IiNkZWUyZTYiIGR5PSIuM2VtIj5JbWFnZSBjYXA8L3RleHQ+PC9zdmc+Cg=="
+ alt: "© 2017 John Smith photography"
+ content:
+ - type: component
+ component: "ui_suite_bootstrap:card_body"
+ slots:
+ title: "Card title"
+ text: "This card has supporting text below as a natural lead-in to additional content."
+ content:
+ type: html_tag
+ tag: p
+ 0:
+ type: html_tag
+ tag: small
+ value: Last updated 3 mins ago
+ attributes:
+ class:
+ - text-body-secondary
+ attributes:
+ class:
+ - card-text
props:
variant: default
- type: component
component: "ui_suite_bootstrap:card"
- story: preview
+ slots:
+ image:
+ theme: image
+ uri: "data:image/svg+xml;base64,PHN2ZyBzdHlsZT0iZm9udC1zaXplOiAxLjEyNXJlbTsgdGV4dC1hbmNob3I6IG1pZGRsZTsgdXNlci1zZWxlY3Q6IG5vbmU7IiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIyNTQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQgc2xpY2UiIGZvY3VzYWJsZT0iZmFsc2UiIHJvbGU9ImltZyIgYXJpYS1sYWJlbD0iUGxhY2Vob2xkZXI6IEltYWdlIGNhcCI+PHRpdGxlPlBsYWNlaG9sZGVyPC90aXRsZT48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjODY4ZTk2Ij48L3JlY3Q+PHRleHQgeD0iNTAlIiB5PSI1MCUiIGZpbGw9IiNkZWUyZTYiIGR5PSIuM2VtIj5JbWFnZSBjYXA8L3RleHQ+PC9zdmc+Cg=="
+ alt: "© 2017 John Smith photography"
+ content:
+ - type: component
+ component: "ui_suite_bootstrap:card_body"
+ slots:
+ title: "Card title"
+ text: "This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action."
+ content:
+ type: html_tag
+ tag: p
+ 0:
+ type: html_tag
+ tag: small
+ value: Last updated 3 mins ago
+ attributes:
+ class:
+ - text-body-secondary
+ attributes:
+ class:
+ - card-text
props:
variant: default
diff --git a/components/card_overlay/card_overlay.preview.story.yml b/components/card_overlay/card_overlay.preview.story.yml
index 77e917da..e5c9bc02 100644
--- a/components/card_overlay/card_overlay.preview.story.yml
+++ b/components/card_overlay/card_overlay.preview.story.yml
@@ -5,7 +5,6 @@ slots:
uri: "data:image/svg+xml;base64,PHN2ZyBzdHlsZT0iZm9udC1zaXplOiAxLjEyNXJlbTsgdGV4dC1hbmNob3I6IG1pZGRsZTsgdXNlci1zZWxlY3Q6IG5vbmU7IiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIyNTQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQgc2xpY2UiIGZvY3VzYWJsZT0iZmFsc2UiIHJvbGU9ImltZyIgYXJpYS1sYWJlbD0iUGxhY2Vob2xkZXI6IEltYWdlIGNhcCI+PHRpdGxlPlBsYWNlaG9sZGVyPC90aXRsZT48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjODY4ZTk2Ij48L3JlY3Q+PHRleHQgeD0iNTAlIiB5PSI1MCUiIGZpbGw9IiNkZWUyZTYiIGR5PSIuM2VtIj5JbWFnZSBjYXA8L3RleHQ+PC9zdmc+Cg=="
alt: "© 2017 John Smith photography"
title: "Card title"
- subtitle: "Card subtitle"
text: "This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer."
content:
type: html_tag
@@ -14,17 +13,6 @@ slots:
attributes:
class:
- card-text
- links:
- - type: html_tag
- tag: a
- value: "Card link"
- attributes:
- href: "#"
- - type: html_tag
- tag: a
- value: "Another link"
- attributes:
- href: "#"
props:
attributes:
class:
diff --git a/components/toast/toast.preview.story.yml b/components/toast/toast.basic.story.yml
similarity index 89%
rename from components/toast/toast.preview.story.yml
rename to components/toast/toast.basic.story.yml
index d303bd0f..0acff25a 100644
--- a/components/toast/toast.preview.story.yml
+++ b/components/toast/toast.basic.story.yml
@@ -1,4 +1,4 @@
-name: Preview
+name: Basic
slots:
header:
- theme: image
@@ -26,4 +26,7 @@ props:
flex_wrapper: false
hide_close_button: false
close_button_variant: default
-library_wrapper: "<div class=\"toast-container position-static\">{{ _story }}</div"
+library_wrapper: >
+ <div class="toast-container position-static">
+ {{ _story }}
+ </div>
diff --git a/components/toast/toast.color.story.yml b/components/toast/toast.color.story.yml
new file mode 100644
index 00000000..9055f64b
--- /dev/null
+++ b/components/toast/toast.color.story.yml
@@ -0,0 +1,12 @@
+name: "Color schemes"
+slots:
+ content: "Hello, world! This is a toast message."
+props:
+ attributes:
+ class:
+ - show
+ - align-items-center
+ - text-bg-primary
+ - border-0
+ flex_wrapper: true
+ close_button_variant: white
diff --git a/components/toast/toast.custom_content.story.yml b/components/toast/toast.custom_content.story.yml
new file mode 100644
index 00000000..e72314ef
--- /dev/null
+++ b/components/toast/toast.custom_content.story.yml
@@ -0,0 +1,9 @@
+name: "Custom content"
+slots:
+ content: "Hello, world! This is a toast message."
+props:
+ attributes:
+ class:
+ - show
+ - align-items-center
+ flex_wrapper: true
diff --git a/components/toast/toast.custom_content_control.story.yml b/components/toast/toast.custom_content_control.story.yml
new file mode 100644
index 00000000..5824b234
--- /dev/null
+++ b/components/toast/toast.custom_content_control.story.yml
@@ -0,0 +1,30 @@
+name: "Custom content with controls"
+slots:
+ content:
+ - markup: "Hello, world! This is a toast message."
+ - type: html_tag
+ tag: div
+ attributes:
+ class:
+ - mt-2
+ - pt-2
+ - border-top
+ - type: component
+ component: "ui_suite_bootstrap:button"
+ slots:
+ label: "Take action"
+ props:
+ variant: primary__sm
+ - type: component
+ attributes:
+ data-bs-dismiss: toast
+ component: "ui_suite_bootstrap:button"
+ slots:
+ label: Close
+ props:
+ variant: secondary__sm
+props:
+ attributes:
+ class:
+ - show
+ hide_close_button: true
diff --git a/components/toast/toast.translucent.story.yml b/components/toast/toast.translucent.story.yml
new file mode 100644
index 00000000..c733b233
--- /dev/null
+++ b/components/toast/toast.translucent.story.yml
@@ -0,0 +1,36 @@
+name: Translucent
+description: "Toasts are slightly translucent to blend in with what’s below them."
+slots:
+ header:
+ - theme: image
+ uri: "data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iYmQtcGxhY2Vob2xkZXItaW1nIHJvdW5kZWQgbWUtMiIgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGFyaWEtaGlkZGVuPSJ0cnVlIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCBzbGljZSIgZm9jdXNhYmxlPSJmYWxzZSI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iIzAwN2FmZiI+PC9yZWN0Pjwvc3ZnPg=="
+ attributes:
+ class:
+ - rounded
+ - me-2
+ - type: html_tag
+ tag: strong
+ value: Bootstrap
+ attributes:
+ class:
+ - me-auto
+ - type: html_tag
+ tag: small
+ value: "11 mins ago"
+ attributes:
+ class:
+ - text-body-secondary
+ content: "Hello, world! This is a toast message."
+props:
+ attributes:
+ class:
+ - show
+ delay: 5000
+ role: alert
+ flex_wrapper: false
+ hide_close_button: false
+ close_button_variant: default
+library_wrapper: >
+ <div class="p-3 bg-dark">
+ {{ _story }}
+ </div>
diff --git a/components/toast_container/toast_container.preview.story.yml b/components/toast_container/toast_container.preview.story.yml
index 81525a16..f537bd91 100644
--- a/components/toast_container/toast_container.preview.story.yml
+++ b/components/toast_container/toast_container.preview.story.yml
@@ -25,7 +25,7 @@ slots:
value: "just now"
attributes:
class:
- - text-muted
+ - text-body-secondary
content: "See? Just like this."
- type: component
attributes:
@@ -51,61 +51,8 @@ slots:
value: "2 seconds ago"
attributes:
class:
- - text-muted
+ - text-body-secondary
content: "Heads up, toasts will stack automatically"
- - type: component
- attributes:
- class:
- - show
- component: "ui_suite_bootstrap:toast"
- slots:
- content: "Hello, world! This is a toast message."
- props:
- flex_wrapper: true
- - type: component
- attributes:
- class:
- - show
- component: "ui_suite_bootstrap:toast"
- slots:
- content:
- - markup: "Hello, world! This is a toast message."
- - type: html_tag
- tag: div
- attributes:
- class:
- - mt-2
- - pt-2
- - border-top
- - type: component
- component: "ui_suite_bootstrap:button"
- slots:
- label: "Take action"
- props:
- variant: primary__sm
- - type: component
- attributes:
- data-bs-dismiss: toast
- component: "ui_suite_bootstrap:button"
- slots:
- label: Close
- props:
- variant: secondary__sm
- props:
- hide_close_button: true
- - type: component
- attributes:
- class:
- - show
- - align-items-center
- - text-bg-primary
- - border-0
- component: "ui_suite_bootstrap:toast"
- slots:
- content: "Hello, world! This is a toast message."
- props:
- flex_wrapper: true
- close_button_variant: white
props:
attributes:
class:
--
GitLab
From fca2d4cd91891d7b2aa77bb1f0ac6958771a3569 Mon Sep 17 00:00:00 2001
From: Florent Torregrosa <florent.torregrosa@gmail.com>
Date: Mon, 10 Mar 2025 16:22:55 +0100
Subject: [PATCH 09/15] Issue #3485834 by grimreaper: dropdown, nav
---
.../dropdown/dropdown.auto_close.story.yml | 46 +++++++++++++++++
components/dropdown/dropdown.color.story.yml | 41 +++++++++++++++
components/dropdown/dropdown.dark.story.yml | 45 ++++++++++++++++
.../dropdown/dropdown.directions.story.yml | 34 +++++++++++++
.../dropdown.menu_content_divider.story.yml | 17 +++++++
.../dropdown.menu_content_header.story.yml | 17 +++++++
.../dropdown.menu_content_text.story.yml | 12 +++++
.../dropdown.menu_items_active.story.yml | 17 +++++++
.../dropdown.menu_items_disabled.story.yml | 17 +++++++
.../dropdown.menu_items_text.story.yml | 14 +++++
.../dropdown.options_offset.story.yml | 15 ++++++
.../dropdown/dropdown.preview.story.yml | 36 -------------
.../dropdown.responsive_alignment.story.yml | 51 +++++++++++++++++++
.../dropdown.single_button_button.story.yml | 13 +++++
.../dropdown.single_button_link.story.yml | 15 ++++++
.../dropdown/dropdown.sizing_large.story.yml | 35 +++++++++++++
.../dropdown/dropdown.sizing_small.story.yml | 35 +++++++++++++
.../dropdown/dropdown.split_button.story.yml | 42 +++++++++++++++
components/dropdown/dropdown.twig | 20 +++++++-
components/nav/nav.alignment_center.story.yml | 22 ++++++++
components/nav/nav.alignment_end.story.yml | 22 ++++++++
.../nav/nav.alignment_vertical.story.yml | 22 ++++++++
components/nav/nav.custom_content.story.yml | 31 +++++++++++
.../nav/nav.custom_content_vertical.story.yml | 42 +++++++++++++++
components/nav/nav.preview.story.yml | 15 ------
25 files changed, 624 insertions(+), 52 deletions(-)
create mode 100644 components/dropdown/dropdown.auto_close.story.yml
create mode 100644 components/dropdown/dropdown.color.story.yml
create mode 100644 components/dropdown/dropdown.dark.story.yml
create mode 100644 components/dropdown/dropdown.directions.story.yml
create mode 100644 components/dropdown/dropdown.menu_content_divider.story.yml
create mode 100644 components/dropdown/dropdown.menu_content_header.story.yml
create mode 100644 components/dropdown/dropdown.menu_content_text.story.yml
create mode 100644 components/dropdown/dropdown.menu_items_active.story.yml
create mode 100644 components/dropdown/dropdown.menu_items_disabled.story.yml
create mode 100644 components/dropdown/dropdown.menu_items_text.story.yml
create mode 100644 components/dropdown/dropdown.options_offset.story.yml
delete mode 100644 components/dropdown/dropdown.preview.story.yml
create mode 100644 components/dropdown/dropdown.responsive_alignment.story.yml
create mode 100644 components/dropdown/dropdown.single_button_button.story.yml
create mode 100644 components/dropdown/dropdown.single_button_link.story.yml
create mode 100644 components/dropdown/dropdown.sizing_large.story.yml
create mode 100644 components/dropdown/dropdown.sizing_small.story.yml
create mode 100644 components/dropdown/dropdown.split_button.story.yml
create mode 100644 components/nav/nav.alignment_center.story.yml
create mode 100644 components/nav/nav.alignment_end.story.yml
create mode 100644 components/nav/nav.alignment_vertical.story.yml
create mode 100644 components/nav/nav.custom_content.story.yml
create mode 100644 components/nav/nav.custom_content_vertical.story.yml
diff --git a/components/dropdown/dropdown.auto_close.story.yml b/components/dropdown/dropdown.auto_close.story.yml
new file mode 100644
index 00000000..4ec34170
--- /dev/null
+++ b/components/dropdown/dropdown.auto_close.story.yml
@@ -0,0 +1,46 @@
+name: "Auto close behavior"
+props:
+ variant: dropdown
+ attributes:
+ class:
+ - m-1
+ button_variant: secondary
+ content:
+ - title: "Action"
+ url: "#"
+ - title: "Another action"
+ url: "#"
+ - title: "Something else here"
+ url: "#"
+library_wrapper: >
+ {% set examples = [
+ {
+ title: 'Default dropdown'|t,
+ auto_close: 'true',
+ },
+ {
+ title: 'Clickable inside'|t,
+ auto_close: 'inside',
+ },
+ {
+ title: 'Clickable outside'|t,
+ auto_close: 'outside',
+ },
+ {
+ title: 'Manual close'|t,
+ auto_close: 'false',
+ },
+ ] %}
+ <div class="d-inline-flex">
+ {% for example in examples %}
+ {% set example_props = {'#props': _story['#props']|merge({
+ 'auto_close': example.auto_close,
+ })} %}
+ {% set example_slots = {'#slots': _story['#slots']|merge({
+ 'title': example.title,
+ })} %}
+
+ {% set example_story = _story %}
+ {{ example_story|merge(example_props)|merge(example_slots) }}
+ {% endfor %}
+ </div>
diff --git a/components/dropdown/dropdown.color.story.yml b/components/dropdown/dropdown.color.story.yml
new file mode 100644
index 00000000..58a6f570
--- /dev/null
+++ b/components/dropdown/dropdown.color.story.yml
@@ -0,0 +1,41 @@
+name: "Colors"
+props:
+ variant: dropdown
+ attributes:
+ class:
+ - m-1
+ content:
+ - title: "Action"
+ url: "#"
+ - title: "Another action"
+ url: "#"
+ - title: "Something else here"
+ url: "#"
+ - {}
+ - title: "Separated link"
+ url: "#"
+library_wrapper: >
+ {% set examples = [
+ 'primary',
+ 'secondary',
+ 'success',
+ 'danger',
+ 'warning',
+ 'info',
+ 'light',
+ 'dark',
+ ] %}
+
+ <div class="d-inline-flex">
+ {% for example in examples %}
+ {% set example_props = {'#props': _story['#props']|merge({
+ 'button_variant': example,
+ })} %}
+ {% set example_slots = {'#slots': _story['#slots']|merge({
+ 'title': example|capitalize,
+ })} %}
+
+ {% set example_story = _story %}
+ {{ example_story|merge(example_props)|merge(example_slots) }}
+ {% endfor %}
+ </div>
diff --git a/components/dropdown/dropdown.dark.story.yml b/components/dropdown/dropdown.dark.story.yml
new file mode 100644
index 00000000..22af3fa9
--- /dev/null
+++ b/components/dropdown/dropdown.dark.story.yml
@@ -0,0 +1,45 @@
+name: "Dark dropdown"
+slots:
+ title: "Dropdown button"
+props:
+ variant: dropdown
+ button_variant: secondary
+ dark: true
+ content:
+ - title: "Action"
+ url: "#"
+ link_attributes:
+ class:
+ - active
+ - title: "Another action"
+ url: "#"
+ - title: "Something else here"
+ url: "#"
+ - {}
+ - title: "Separated link"
+ url: "#"
+#library_wrapper: >
+# {% set examples = [
+# 'primary',
+# 'secondary',
+# 'success',
+# 'danger',
+# 'warning',
+# 'info',
+# 'light',
+# 'dark',
+# ] %}
+#
+# <div class="d-inline-flex">
+# {% for example in examples %}
+# {% set example_props = {'#props': _story['#props']|merge({
+# 'button_variant': example,
+# })} %}
+# {% set example_slots = {'#slots': _story['#slots']|merge({
+# 'title': example|capitalize,
+# })} %}
+#
+# {% set example_story = _story %}
+# {{ example_story|merge(example_props)|merge(example_slots) }}
+# {% endfor %}
+# </div>
diff --git a/components/dropdown/dropdown.directions.story.yml b/components/dropdown/dropdown.directions.story.yml
new file mode 100644
index 00000000..e813f4b7
--- /dev/null
+++ b/components/dropdown/dropdown.directions.story.yml
@@ -0,0 +1,34 @@
+name: Directions
+slots:
+ title: "Long button label"
+props:
+ attributes:
+ class:
+ - m-1
+ content:
+ - title: "Action"
+ url: "#"
+ - title: "Another action"
+ url: "#"
+ - title: "Something else here"
+ url: "#"
+ - {}
+ - title: "Separated link"
+ url: "#"
+ button_variant: secondary
+library_wrapper: >
+ {% set splits = [
+ false,
+ true,
+ ] %}
+
+ <div class="d-inline-flex">
+ {% for split in splits %}
+ {% set example_props = {'#props': _story['#props']|merge({
+ 'button_split': split,
+ })} %}
+
+ {% set example_story = _story %}
+ {{ example_story|merge(example_props) }}
+ {% endfor %}
+ </div>
diff --git a/components/dropdown/dropdown.menu_content_divider.story.yml b/components/dropdown/dropdown.menu_content_divider.story.yml
new file mode 100644
index 00000000..3b949a21
--- /dev/null
+++ b/components/dropdown/dropdown.menu_content_divider.story.yml
@@ -0,0 +1,17 @@
+name: "Menu content: dividers"
+slots:
+ title: "Dropdown with divider"
+props:
+ variant: dropdown
+ content:
+ - title: "Action"
+ url: "#"
+ - title: "Another action"
+ url: "#"
+ - title: "Something else here"
+ url: "#"
+ - {}
+ - title: "Separated link"
+ url: "#"
+ button_variant: secondary
+
diff --git a/components/dropdown/dropdown.menu_content_header.story.yml b/components/dropdown/dropdown.menu_content_header.story.yml
new file mode 100644
index 00000000..98c564a7
--- /dev/null
+++ b/components/dropdown/dropdown.menu_content_header.story.yml
@@ -0,0 +1,17 @@
+name: "Menu content: headers"
+slots:
+ title: "Dropdown with header"
+props:
+ variant: dropdown
+ content:
+ - title: "Dropdown header"
+ link_attributes:
+ class:
+ - dropdown-header
+ - title: "Action"
+ url: "#"
+ - title: "Another action"
+ url: "#"
+ button_variant: secondary
+ heading_level: 6
+
diff --git a/components/dropdown/dropdown.menu_content_text.story.yml b/components/dropdown/dropdown.menu_content_text.story.yml
new file mode 100644
index 00000000..08aac55b
--- /dev/null
+++ b/components/dropdown/dropdown.menu_content_text.story.yml
@@ -0,0 +1,12 @@
+name: "Menu content: text"
+slots:
+ title: "Dropdown with text"
+props:
+ variant: dropdown
+ content:
+ - title: "Some example text that's free-flowing within the dropdown menu."
+ - title: "And this is more example text."
+ button_variant: secondary
+
+# @todo make dropdown menu attributes a prop? And add a new slot for free content?
+
diff --git a/components/dropdown/dropdown.menu_items_active.story.yml b/components/dropdown/dropdown.menu_items_active.story.yml
new file mode 100644
index 00000000..5da93626
--- /dev/null
+++ b/components/dropdown/dropdown.menu_items_active.story.yml
@@ -0,0 +1,17 @@
+name: "Menu items: active"
+slots:
+ title: "Dropdown with an active link"
+props:
+ variant: dropdown
+ content:
+ - title: "Regular link"
+ url: "#"
+ - title: "Active link"
+ url: "#"
+ link_attributes:
+ class:
+ - active
+ - title: "Another link"
+ url: "#"
+ button_variant: secondary
+ button_url: "#"
diff --git a/components/dropdown/dropdown.menu_items_disabled.story.yml b/components/dropdown/dropdown.menu_items_disabled.story.yml
new file mode 100644
index 00000000..6b6bb5e3
--- /dev/null
+++ b/components/dropdown/dropdown.menu_items_disabled.story.yml
@@ -0,0 +1,17 @@
+name: "Menu items: disabled"
+slots:
+ title: "Dropdown with a disabled link"
+props:
+ variant: dropdown
+ content:
+ - title: "Regular link"
+ url: "#"
+ - title: "Disabled link"
+ url: "#"
+ link_attributes:
+ class:
+ - disabled
+ - title: "Another link"
+ url: "#"
+ button_variant: secondary
+ button_url: "#"
diff --git a/components/dropdown/dropdown.menu_items_text.story.yml b/components/dropdown/dropdown.menu_items_text.story.yml
new file mode 100644
index 00000000..470557f8
--- /dev/null
+++ b/components/dropdown/dropdown.menu_items_text.story.yml
@@ -0,0 +1,14 @@
+name: "Menu items: text"
+slots:
+ title: "Dropdown with text"
+props:
+ variant: dropdown
+ content:
+ - title: "Dropdown item text"
+ - title: "Action"
+ url: "#"
+ - title: "Another action"
+ url: "#"
+ - title: "Something else here"
+ url: "#"
+ button_variant: secondary
diff --git a/components/dropdown/dropdown.options_offset.story.yml b/components/dropdown/dropdown.options_offset.story.yml
new file mode 100644
index 00000000..5d97a4f9
--- /dev/null
+++ b/components/dropdown/dropdown.options_offset.story.yml
@@ -0,0 +1,15 @@
+name: "Dropdown options: offset"
+slots:
+ title: "Offset"
+props:
+ variant: dropdown
+ content:
+ - title: "Action"
+ url: "#"
+ - title: "Another action"
+ url: "#"
+ - title: "Something else here"
+ url: "#"
+ button_variant: secondary
+ button_attributes:
+ data-bs-offset: "10,20"
diff --git a/components/dropdown/dropdown.preview.story.yml b/components/dropdown/dropdown.preview.story.yml
deleted file mode 100644
index 8e42f73a..00000000
--- a/components/dropdown/dropdown.preview.story.yml
+++ /dev/null
@@ -1,36 +0,0 @@
-name: Preview
-slots:
- title: Button
-props:
- content:
- - title: "Dropdown header"
- link_attributes:
- class:
- - dropdown-header
- - title: Action
- url: "#"
- - title: "Dropdown item text"
- - title: "Another action"
- url: "#"
- - title: "Something else here"
- url: "#"
- - {}
- - title: "Separated link"
- url: "#"
- - title: "Action (button)"
- link_attributes:
- class:
- - dropdown-item
- - title: "Another action (button)"
- link_attributes:
- class:
- - dropdown-item
- - title: "Something else here (text)"
- button_variant: primary
- button_split: true
- button_url: /
- button_attributes: {}
- dark: false
- auto_close: "true"
- dropdown_navbar: false
- heading_level: 6
diff --git a/components/dropdown/dropdown.responsive_alignment.story.yml b/components/dropdown/dropdown.responsive_alignment.story.yml
new file mode 100644
index 00000000..6fb6dddf
--- /dev/null
+++ b/components/dropdown/dropdown.responsive_alignment.story.yml
@@ -0,0 +1,51 @@
+name: "Responsive alignment"
+props:
+ variant: dropdown
+ attributes:
+ class:
+ - m-1
+ button_variant: secondary
+ content:
+ - title: "Action"
+ url: "#"
+ - title: "Another action"
+ url: "#"
+ - title: "Something else here"
+ url: "#"
+library_wrapper: >
+ {% set examples = [
+ {
+ title: 'Dropdown'|t,
+ dropdown_menu_start: '',
+ dropdown_menu_end: '',
+ },
+ {
+ title: 'Right-aligned menu'|t,
+ dropdown_menu_start: '',
+ dropdown_menu_end: 'end',
+ },
+ {
+ title: 'Left-aligned but right aligned when large screen'|t,
+ dropdown_menu_start: '',
+ dropdown_menu_end: 'lg-end',
+ },
+ {
+ title: 'Right-aligned but left aligned when large screen'|t,
+ dropdown_menu_start: 'lg-start',
+ dropdown_menu_end: 'end',
+ },
+ ] %}
+ <div class="d-inline-flex">
+ {% for example in examples %}
+ {% set example_props = {'#props': _story['#props']|merge({
+ 'dropdown_menu_start': example.dropdown_menu_start,
+ 'dropdown_menu_end': example.dropdown_menu_end,
+ })} %}
+ {% set example_slots = {'#slots': _story['#slots']|merge({
+ 'title': example.title,
+ })} %}
+
+ {% set example_story = _story %}
+ {{ example_story|merge(example_props)|merge(example_slots) }}
+ {% endfor %}
+ </div>
diff --git a/components/dropdown/dropdown.single_button_button.story.yml b/components/dropdown/dropdown.single_button_button.story.yml
new file mode 100644
index 00000000..596d9b7c
--- /dev/null
+++ b/components/dropdown/dropdown.single_button_button.story.yml
@@ -0,0 +1,13 @@
+name: "Single button: button"
+slots:
+ title: "Dropdown button"
+props:
+ variant: dropdown
+ content:
+ - title: "Action"
+ url: "#"
+ - title: "Another action"
+ url: "#"
+ - title: "Something else here"
+ url: "#"
+ button_variant: secondary
diff --git a/components/dropdown/dropdown.single_button_link.story.yml b/components/dropdown/dropdown.single_button_link.story.yml
new file mode 100644
index 00000000..2c7af6db
--- /dev/null
+++ b/components/dropdown/dropdown.single_button_link.story.yml
@@ -0,0 +1,15 @@
+name: "Single button: link"
+description: "While <button> is the recommended control for a dropdown toggle, there might be situations where you have to use an <a> element."
+slots:
+ title: "Dropdown link"
+props:
+ variant: dropdown
+ content:
+ - title: "Action"
+ url: "#"
+ - title: "Another action"
+ url: "#"
+ - title: "Something else here"
+ url: "#"
+ button_variant: secondary
+ button_url: "#"
diff --git a/components/dropdown/dropdown.sizing_large.story.yml b/components/dropdown/dropdown.sizing_large.story.yml
new file mode 100644
index 00000000..dfcb9ebb
--- /dev/null
+++ b/components/dropdown/dropdown.sizing_large.story.yml
@@ -0,0 +1,35 @@
+name: "Sizing: large"
+slots:
+ title: "Large button"
+props:
+ variant: dropdown
+ attributes:
+ class:
+ - m-1
+ button_variant: secondary__lg
+ content:
+ - title: "Action"
+ url: "#"
+ - title: "Another action"
+ url: "#"
+ - title: "Something else here"
+ url: "#"
+ - {}
+ - title: "Separated link"
+ url: "#"
+library_wrapper: >
+ {% set splits = [
+ false,
+ true,
+ ] %}
+
+ <div class="d-inline-flex">
+ {% for split in splits %}
+ {% set size_props = {'#props': _story['#props']|merge({
+ 'button_split': split,
+ })} %}
+
+ {% set size_story = _story %}
+ {{ size_story|merge(size_props) }}
+ {% endfor %}
+ </div>
diff --git a/components/dropdown/dropdown.sizing_small.story.yml b/components/dropdown/dropdown.sizing_small.story.yml
new file mode 100644
index 00000000..0cb2aceb
--- /dev/null
+++ b/components/dropdown/dropdown.sizing_small.story.yml
@@ -0,0 +1,35 @@
+name: "Sizing: small"
+slots:
+ title: "Small button"
+props:
+ variant: dropdown
+ attributes:
+ class:
+ - m-1
+ button_variant: secondary__sm
+ content:
+ - title: "Action"
+ url: "#"
+ - title: "Another action"
+ url: "#"
+ - title: "Something else here"
+ url: "#"
+ - {}
+ - title: "Separated link"
+ url: "#"
+library_wrapper: >
+ {% set splits = [
+ false,
+ true,
+ ] %}
+
+ <div class="d-inline-flex">
+ {% for split in splits %}
+ {% set size_props = {'#props': _story['#props']|merge({
+ 'button_split': split,
+ })} %}
+
+ {% set size_story = _story %}
+ {{ size_story|merge(size_props) }}
+ {% endfor %}
+ </div>
diff --git a/components/dropdown/dropdown.split_button.story.yml b/components/dropdown/dropdown.split_button.story.yml
new file mode 100644
index 00000000..ff61da26
--- /dev/null
+++ b/components/dropdown/dropdown.split_button.story.yml
@@ -0,0 +1,42 @@
+name: "Split button"
+props:
+ variant: dropdown
+ attributes:
+ class:
+ - m-1
+ content:
+ - title: "Action"
+ url: "#"
+ - title: "Another action"
+ url: "#"
+ - title: "Something else here"
+ url: "#"
+ - {}
+ - title: "Separated link"
+ url: "#"
+ button_split: true
+library_wrapper: >
+ {% set examples = [
+ 'primary',
+ 'secondary',
+ 'success',
+ 'danger',
+ 'warning',
+ 'info',
+ 'light',
+ 'dark',
+ ] %}
+
+ <div class="d-inline-flex">
+ {% for example in examples %}
+ {% set example_props = {'#props': _story['#props']|merge({
+ 'button_variant': example,
+ })} %}
+ {% set example_slots = {'#slots': _story['#slots']|merge({
+ 'title': example|capitalize,
+ })} %}
+
+ {% set example_story = _story %}
+ {{ example_story|merge(example_props)|merge(example_slots) }}
+ {% endfor %}
+ </div>
diff --git a/components/dropdown/dropdown.twig b/components/dropdown/dropdown.twig
index 3630a3c1..2f8ec12e 100644
--- a/components/dropdown/dropdown.twig
+++ b/components/dropdown/dropdown.twig
@@ -30,7 +30,14 @@
<{{ dropdown_tag }}{{ attributes.addClass(variant) }}>
-{% if button_split %}
+{% if button_split and variant == 'dropstart' %}
+ {{ include('ui_suite_bootstrap:button', {
+ label: 'Toggle dropdown'|t,
+ attributes: button_attributes.addClass('dropdown-toggle-split'),
+ variant: button_variant,
+ label_visually_hidden: true,
+ }, with_context = false) }}
+{% elseif button_split %}
{{ include('ui_suite_bootstrap:button', {
label: title,
attributes: {
@@ -78,4 +85,15 @@
</ul>
{% endif %}
+{% if button_split and variant == 'dropstart' %}
+ {{ include('ui_suite_bootstrap:button', {
+ label: title,
+ attributes: {
+ id: dropdown_id,
+ },
+ variant: button_variant,
+ url: button_url,
+ }, with_context = false) }}
+{% endif %}
+
</{{ dropdown_tag }}>
diff --git a/components/nav/nav.alignment_center.story.yml b/components/nav/nav.alignment_center.story.yml
new file mode 100644
index 00000000..edc14545
--- /dev/null
+++ b/components/nav/nav.alignment_center.story.yml
@@ -0,0 +1,22 @@
+name: "Alignment: center"
+props:
+ variant: default
+ nav_type: ul
+ attributes:
+ class:
+ - justify-content-center
+ items:
+ - url: "#"
+ title: Active
+ link_attributes:
+ class:
+ - active
+ - url: "#"
+ title: "Link"
+ - url: "#"
+ title: "Link"
+ - url: "#"
+ title: Disabled
+ link_attributes:
+ class:
+ - disabled
diff --git a/components/nav/nav.alignment_end.story.yml b/components/nav/nav.alignment_end.story.yml
new file mode 100644
index 00000000..816c0bf9
--- /dev/null
+++ b/components/nav/nav.alignment_end.story.yml
@@ -0,0 +1,22 @@
+name: "Alignment: right"
+props:
+ variant: default
+ nav_type: ul
+ attributes:
+ class:
+ - justify-content-end
+ items:
+ - url: "#"
+ title: Active
+ link_attributes:
+ class:
+ - active
+ - url: "#"
+ title: "Link"
+ - url: "#"
+ title: "Link"
+ - url: "#"
+ title: Disabled
+ link_attributes:
+ class:
+ - disabled
diff --git a/components/nav/nav.alignment_vertical.story.yml b/components/nav/nav.alignment_vertical.story.yml
new file mode 100644
index 00000000..1bacdf9e
--- /dev/null
+++ b/components/nav/nav.alignment_vertical.story.yml
@@ -0,0 +1,22 @@
+name: "Alignment: vertical"
+props:
+ variant: default
+ nav_type: ul
+ attributes:
+ class:
+ - flex-column
+ items:
+ - url: "#"
+ title: Active
+ link_attributes:
+ class:
+ - active
+ - url: "#"
+ title: "Link"
+ - url: "#"
+ title: "Link"
+ - url: "#"
+ title: Disabled
+ link_attributes:
+ class:
+ - disabled
diff --git a/components/nav/nav.custom_content.story.yml b/components/nav/nav.custom_content.story.yml
new file mode 100644
index 00000000..af4690cb
--- /dev/null
+++ b/components/nav/nav.custom_content.story.yml
@@ -0,0 +1,31 @@
+name: "Custom content"
+props:
+ nav_type: ul
+ attributes:
+ class:
+ - mb-3
+ items:
+ - title: Home
+ link_attributes:
+ class:
+ - active
+ - title: Profile
+ - title: Contact
+ - title: Disabled
+ link_attributes:
+ class:
+ - disabled
+slots:
+ tab_content:
+ - type: html_tag
+ tag: p
+ value: "This is some placeholder content the <strong>Home tab's</strong> associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other <code>.nav</code>-powered navigation."
+ - type: html_tag
+ tag: p
+ value: "This is some placeholder content the <strong>Profile tab's</strong> associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other <code>.nav</code>-powered navigation."
+ - type: html_tag
+ tag: p
+ value: "This is some placeholder content the <strong>Contact tab's</strong> associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other <code>.nav</code>-powered navigation."
+ - type: html_tag
+ tag: p
+ value: "This is some placeholder content the <strong>Disabled tab's</strong> associated content."
diff --git a/components/nav/nav.custom_content_vertical.story.yml b/components/nav/nav.custom_content_vertical.story.yml
new file mode 100644
index 00000000..e432e3b1
--- /dev/null
+++ b/components/nav/nav.custom_content_vertical.story.yml
@@ -0,0 +1,42 @@
+name: "Custom content: vertical"
+props:
+ nav_type: ul
+ variant: pills
+ attributes:
+ class:
+ - me-3
+ - flex-column
+ aria-orientation: vertical
+ items:
+ - title: Home
+ link_attributes:
+ class:
+ - active
+ - title: Profile
+ - title: Disabled
+ link_attributes:
+ class:
+ - disabled
+ - title: Messages
+ - title: Settings
+slots:
+ tab_content:
+ - type: html_tag
+ tag: p
+ value: "This is some placeholder content the <strong>Home tab's</strong> associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other <code>.nav</code>-powered navigation."
+ - type: html_tag
+ tag: p
+ value: "This is some placeholder content the <strong>Profile tab's</strong> associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other <code>.nav</code>-powered navigation."
+ - type: html_tag
+ tag: p
+ value: "This is some placeholder content the <strong>Disabled tab's</strong> associated content."
+ - type: html_tag
+ tag: p
+ value: "This is some placeholder content the <strong>Messages tab's</strong> associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other <code>.nav</code>-powered navigation."
+ - type: html_tag
+ tag: p
+ value: "This is some placeholder content the <strong>Settings tab's</strong> associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other <code>.nav</code>-powered navigation."
+library_wrapper: >
+ <div class="d-flex align-items-start">
+ {{ _story }}
+ </div>
diff --git a/components/nav/nav.preview.story.yml b/components/nav/nav.preview.story.yml
index 2867986e..99210d77 100644
--- a/components/nav/nav.preview.story.yml
+++ b/components/nav/nav.preview.story.yml
@@ -1,7 +1,6 @@
name: Preview
props:
nav_type: ul
- card_header: false
items:
- url: "#"
title: Active
@@ -11,13 +10,8 @@ props:
- title: Dropdown
url: "#"
below:
- - title: "Dropdown header"
- link_attributes:
- class:
- - dropdown-header
- title: Action
url: "#"
- - title: "Dropdown item text"
- title: "Another action"
url: "#"
- title: "Something else here"
@@ -25,15 +19,6 @@ props:
- {}
- title: "Separated link"
url: "#"
- - title: "Action (button)"
- link_attributes:
- class:
- - dropdown-item
- - title: "Another action (button)"
- link_attributes:
- class:
- - dropdown-item
- - title: "Something else here (text)"
- url: "#"
title: "Much longer nav link"
- url: "#"
--
GitLab
From 5a1da7943a5c5bbba1398bf9b157e77b3fb89781 Mon Sep 17 00:00:00 2001
From: Florent Torregrosa <florent.torregrosa@gmail.com>
Date: Mon, 10 Mar 2025 18:04:38 +0100
Subject: [PATCH 10/15] Issue #3485834 by grimreaper: navbar
---
.../navbar/navbar.brand_image.story.yml | 19 ++++++
.../navbar/navbar.brand_image_text.story.yml | 21 +++++++
components/navbar/navbar.brand_text.story.yml | 38 +++++++++++
components/navbar/navbar.color.story.yml | 63 +++++++++++++++++++
components/navbar/navbar.component.yml | 3 +
components/navbar/navbar.dark.story.yml | 35 +++++++++--
components/navbar/navbar.default.story.yml | 47 ++++++++++++++
.../navbar/navbar.external_content.story.yml | 17 +++++
components/navbar/navbar.offcanvas.story.yml | 50 +++++++++++++++
.../navbar/navbar.offcanvas_dark.story.yml | 50 +++++++++++++++
....story.yml => navbar.responsive.story.yml} | 36 ++++++++---
.../navbar.responsive_hidden_brand.story.yml | 38 +++++++++++
.../navbar.responsive_toggler_start.story.yml | 37 +++++++++++
components/navbar/navbar.scrolling.story.yml | 48 ++++++++++++++
components/navbar/navbar.text.story.yml | 15 +++++
.../navbar/navbar.text_collapsible.story.yml | 40 ++++++++++++
components/navbar/navbar.twig | 4 +-
.../navbar_nav/navbar_nav.preview.story.yml | 19 ------
18 files changed, 545 insertions(+), 35 deletions(-)
create mode 100644 components/navbar/navbar.brand_image.story.yml
create mode 100644 components/navbar/navbar.brand_image_text.story.yml
create mode 100644 components/navbar/navbar.brand_text.story.yml
create mode 100644 components/navbar/navbar.color.story.yml
create mode 100644 components/navbar/navbar.default.story.yml
create mode 100644 components/navbar/navbar.external_content.story.yml
create mode 100644 components/navbar/navbar.offcanvas.story.yml
create mode 100644 components/navbar/navbar.offcanvas_dark.story.yml
rename components/navbar/{navbar.preview.story.yml => navbar.responsive.story.yml} (83%)
create mode 100644 components/navbar/navbar.responsive_hidden_brand.story.yml
create mode 100644 components/navbar/navbar.responsive_toggler_start.story.yml
create mode 100644 components/navbar/navbar.scrolling.story.yml
create mode 100644 components/navbar/navbar.text.story.yml
create mode 100644 components/navbar/navbar.text_collapsible.story.yml
delete mode 100644 components/navbar_nav/navbar_nav.preview.story.yml
diff --git a/components/navbar/navbar.brand_image.story.yml b/components/navbar/navbar.brand_image.story.yml
new file mode 100644
index 00000000..3fd9dc78
--- /dev/null
+++ b/components/navbar/navbar.brand_image.story.yml
@@ -0,0 +1,19 @@
+name: "Brand: image"
+slots:
+ brand:
+ - type: html_tag
+ tag: a
+ attributes:
+ href: "#"
+ 0:
+ theme: image
+ uri: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1MTIiIGhlaWdodD0iNDA4Ij48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImJzLWxvZ28tYSIgeDE9Ijc2LjA3OSIgeDI9IjUyMy40OCIgeTE9IjEwLjc5OCIgeTI9IjM2NS45NDUiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj48c3RvcCBzdG9wLWNvbG9yPSIjOTAxM2ZlIi8+PHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjNjYxMGYyIi8+PC9saW5lYXJHcmFkaWVudD48bGluZWFyR3JhZGllbnQgaWQ9ImJzLWxvZ28tYiIgeDE9IjE5My41MDgiIHgyPSIyOTMuNTE0IiB5MT0iMTA5Ljc0IiB5Mj0iMjc4Ljg3MiIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPjxzdG9wIHN0b3AtY29sb3I9IiNmZmYiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiNmMWU1ZmMiLz48L2xpbmVhckdyYWRpZW50PjxmaWx0ZXIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBpZD0iYnMtbG9nby1jIiB3aWR0aD0iMTk3IiBoZWlnaHQ9IjI0OSIgeD0iMTYxLjkwMSIgeT0iODMuNDU3IiBjb2xvci1pbnRlcnBvbGF0aW9uLWZpbHRlcnM9InNSR0IiIGZpbHRlclVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PGZlRmxvb2QgZmxvb2Qtb3BhY2l0eT0iMCIgcmVzdWx0PSJCYWNrZ3JvdW5kSW1hZ2VGaXgiLz48ZmVDb2xvck1hdHJpeCBpbj0iU291cmNlQWxwaGEiIHZhbHVlcz0iMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMTI3IDAiLz48ZmVPZmZzZXQgZHk9IjQiLz48ZmVHYXVzc2lhbkJsdXIgc3RkRGV2aWF0aW9uPSI4Ii8+PGZlQ29sb3JNYXRyaXggdmFsdWVzPSIwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwLjE1IDAiLz48ZmVCbGVuZCBpbjI9IkJhY2tncm91bmRJbWFnZUZpeCIgcmVzdWx0PSJlZmZlY3QxX2Ryb3BTaGFkb3ciLz48ZmVCbGVuZCBpbj0iU291cmNlR3JhcGhpYyIgaW4yPSJlZmZlY3QxX2Ryb3BTaGFkb3ciIHJlc3VsdD0ic2hhcGUiLz48L2ZpbHRlcj48L2RlZnM+PHBhdGggZmlsbD0idXJsKCNicy1sb2dvLWEpIiBkPSJNNTYuNDgxIDUzLjMyQzU1LjUxNSAyNS41OCA3Ny4xMjggMCAxMDYuMzQyIDBoMjk5LjM1M2MyOS4yMTQgMCA1MC44MjcgMjUuNTggNDkuODYxIDUzLjMyLS45MjggMjYuNjQ3LjI3NyA2MS4xNjUgOC45NjQgODkuMzEgOC43MTUgMjguMjMyIDIzLjQxMSA0Ni4wNzcgNDcuNDggNDguMzd2MjZjLTI0LjA2OSAyLjI5My0zOC43NjUgMjAuMTM4LTQ3LjQ4IDQ4LjM3LTguNjg3IDI4LjE0NS05Ljg5MiA2Mi42NjMtOC45NjQgODkuMzExLjk2NiAyNy43MzktMjAuNjQ3IDUzLjMxOS00OS44NjEgNTMuMzE5SDEwNi4zNDJjLTI5LjIxNCAwLTUwLjgyNy0yNS41OC00OS44Ni01My4zMTkuOTI3LTI2LjY0OC0uMjc4LTYxLjE2Ni04Ljk2Ni04OS4zMTFDMzguODAyIDIzNy4xMzggMjQuMDcgMjE5LjI5MyAwIDIxN3YtMjZjMjQuMDY5LTIuMjkzIDM4LjgwMi0yMC4xMzggNDcuNTE2LTQ4LjM3IDguNjg4LTI4LjE0NSA5Ljg5My02Mi42NjMgOC45NjUtODkuMzF6Ii8+PHBhdGggZmlsbD0idXJsKCNicy1sb2dvLWIpIiBmaWx0ZXI9InVybCgjYnMtbG9nby1jKSIgc3Ryb2tlPSIjZmZmIiBkPSJNMjY3LjEwMyAzMTIuNDU3YzQ3LjI5NyAwIDc1Ljc5OC0yMy4xNTggNzUuNzk4LTYxLjM1NSAwLTI4Ljg3My0yMC4zMzYtNDkuNzc2LTUwLjUzMi01My4wODV2LTEuMjAzYzIyLjE4NS0zLjYwOSAzOS41OTQtMjQuMjExIDM5LjU5NC00Ny4yMTkgMC0zMi43ODMtMjUuODgyLTU0LjEzOC02NS4zMjItNTQuMTM4aC04OC43NHYyMTdoODkuMjAyem0tNTQuNjkyLTE4OS40OGg0NS45MTFjMjQuOTU4IDAgMzkuMTMxIDExLjEyOCAzOS4xMzEgMzEuMjc5IDAgMjEuNTA1LTE2LjQ4NCAzMy41MzUtNDYuMzcyIDMzLjUzNWgtMzguNjd2LTY0LjgxNHptMCAxNjEuOTYxdi03MS40MzFoNDUuNjAyYzMyLjY2MSAwIDQ5LjYwOCAxMi4wMyA0OS42MDggMzUuNDkgMCAyMy40NTktMTYuNDg0IDM1Ljk0MS00Ny42MDUgMzUuOTQxaC00Ny42MDV6Ii8+PC9zdmc+Cg=="
+ attributes:
+ width: 30px
+ height: 24px
+props:
+ attributes:
+ class:
+ - bg-body-tertiary
+ variant: default
+ toggler_position: none
diff --git a/components/navbar/navbar.brand_image_text.story.yml b/components/navbar/navbar.brand_image_text.story.yml
new file mode 100644
index 00000000..152e2e3f
--- /dev/null
+++ b/components/navbar/navbar.brand_image_text.story.yml
@@ -0,0 +1,21 @@
+name: "Brand: image and text"
+slots:
+ brand:
+ - type: html_tag
+ tag: a
+ attributes:
+ href: "#"
+ 0:
+ theme: image
+ uri: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1MTIiIGhlaWdodD0iNDA4Ij48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImJzLWxvZ28tYSIgeDE9Ijc2LjA3OSIgeDI9IjUyMy40OCIgeTE9IjEwLjc5OCIgeTI9IjM2NS45NDUiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj48c3RvcCBzdG9wLWNvbG9yPSIjOTAxM2ZlIi8+PHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjNjYxMGYyIi8+PC9saW5lYXJHcmFkaWVudD48bGluZWFyR3JhZGllbnQgaWQ9ImJzLWxvZ28tYiIgeDE9IjE5My41MDgiIHgyPSIyOTMuNTE0IiB5MT0iMTA5Ljc0IiB5Mj0iMjc4Ljg3MiIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPjxzdG9wIHN0b3AtY29sb3I9IiNmZmYiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiNmMWU1ZmMiLz48L2xpbmVhckdyYWRpZW50PjxmaWx0ZXIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBpZD0iYnMtbG9nby1jIiB3aWR0aD0iMTk3IiBoZWlnaHQ9IjI0OSIgeD0iMTYxLjkwMSIgeT0iODMuNDU3IiBjb2xvci1pbnRlcnBvbGF0aW9uLWZpbHRlcnM9InNSR0IiIGZpbHRlclVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PGZlRmxvb2QgZmxvb2Qtb3BhY2l0eT0iMCIgcmVzdWx0PSJCYWNrZ3JvdW5kSW1hZ2VGaXgiLz48ZmVDb2xvck1hdHJpeCBpbj0iU291cmNlQWxwaGEiIHZhbHVlcz0iMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMTI3IDAiLz48ZmVPZmZzZXQgZHk9IjQiLz48ZmVHYXVzc2lhbkJsdXIgc3RkRGV2aWF0aW9uPSI4Ii8+PGZlQ29sb3JNYXRyaXggdmFsdWVzPSIwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwLjE1IDAiLz48ZmVCbGVuZCBpbjI9IkJhY2tncm91bmRJbWFnZUZpeCIgcmVzdWx0PSJlZmZlY3QxX2Ryb3BTaGFkb3ciLz48ZmVCbGVuZCBpbj0iU291cmNlR3JhcGhpYyIgaW4yPSJlZmZlY3QxX2Ryb3BTaGFkb3ciIHJlc3VsdD0ic2hhcGUiLz48L2ZpbHRlcj48L2RlZnM+PHBhdGggZmlsbD0idXJsKCNicy1sb2dvLWEpIiBkPSJNNTYuNDgxIDUzLjMyQzU1LjUxNSAyNS41OCA3Ny4xMjggMCAxMDYuMzQyIDBoMjk5LjM1M2MyOS4yMTQgMCA1MC44MjcgMjUuNTggNDkuODYxIDUzLjMyLS45MjggMjYuNjQ3LjI3NyA2MS4xNjUgOC45NjQgODkuMzEgOC43MTUgMjguMjMyIDIzLjQxMSA0Ni4wNzcgNDcuNDggNDguMzd2MjZjLTI0LjA2OSAyLjI5My0zOC43NjUgMjAuMTM4LTQ3LjQ4IDQ4LjM3LTguNjg3IDI4LjE0NS05Ljg5MiA2Mi42NjMtOC45NjQgODkuMzExLjk2NiAyNy43MzktMjAuNjQ3IDUzLjMxOS00OS44NjEgNTMuMzE5SDEwNi4zNDJjLTI5LjIxNCAwLTUwLjgyNy0yNS41OC00OS44Ni01My4zMTkuOTI3LTI2LjY0OC0uMjc4LTYxLjE2Ni04Ljk2Ni04OS4zMTFDMzguODAyIDIzNy4xMzggMjQuMDcgMjE5LjI5MyAwIDIxN3YtMjZjMjQuMDY5LTIuMjkzIDM4LjgwMi0yMC4xMzggNDcuNTE2LTQ4LjM3IDguNjg4LTI4LjE0NSA5Ljg5My02Mi42NjMgOC45NjUtODkuMzF6Ii8+PHBhdGggZmlsbD0idXJsKCNicy1sb2dvLWIpIiBmaWx0ZXI9InVybCgjYnMtbG9nby1jKSIgc3Ryb2tlPSIjZmZmIiBkPSJNMjY3LjEwMyAzMTIuNDU3YzQ3LjI5NyAwIDc1Ljc5OC0yMy4xNTggNzUuNzk4LTYxLjM1NSAwLTI4Ljg3My0yMC4zMzYtNDkuNzc2LTUwLjUzMi01My4wODV2LTEuMjAzYzIyLjE4NS0zLjYwOSAzOS41OTQtMjQuMjExIDM5LjU5NC00Ny4yMTkgMC0zMi43ODMtMjUuODgyLTU0LjEzOC02NS4zMjItNTQuMTM4aC04OC43NHYyMTdoODkuMjAyem0tNTQuNjkyLTE4OS40OGg0NS45MTFjMjQuOTU4IDAgMzkuMTMxIDExLjEyOCAzOS4xMzEgMzEuMjc5IDAgMjEuNTA1LTE2LjQ4NCAzMy41MzUtNDYuMzcyIDMzLjUzNWgtMzguNjd2LTY0LjgxNHptMCAxNjEuOTYxdi03MS40MzFoNDUuNjAyYzMyLjY2MSAwIDQ5LjYwOCAxMi4wMyA0OS42MDggMzUuNDkgMCAyMy40NTktMTYuNDg0IDM1Ljk0MS00Ny42MDUgMzUuOTQxaC00Ny42MDV6Ii8+PC9zdmc+Cg=="
+ attributes:
+ width: 30px
+ height: 24px
+ 1:
+ markup: Bootstrap
+props:
+ attributes:
+ class:
+ - bg-body-tertiary
+ variant: default
+ toggler_position: none
diff --git a/components/navbar/navbar.brand_text.story.yml b/components/navbar/navbar.brand_text.story.yml
new file mode 100644
index 00000000..e4969ee0
--- /dev/null
+++ b/components/navbar/navbar.brand_text.story.yml
@@ -0,0 +1,38 @@
+name: "Brand: text"
+props:
+ attributes:
+ class:
+ - bg-body-tertiary
+ - mb-3
+ variant: default
+ toggler_position: none
+library_wrapper: >
+ {% set examples = [
+ {
+ type: "html_tag",
+ tag: "a",
+ attributes: {
+ href: "#",
+ },
+ value: "As a link",
+ },
+ {
+ type: "html_tag",
+ tag: "span",
+ attributes: {
+ class: [
+ 'mb-0',
+ 'h1',
+ ],
+ },
+ value: "As a heading",
+ },
+ ] %}
+ {% for example in examples %}
+ {% set example_slots = {'#slots': _story['#slots']|merge({
+ 'brand': example,
+ })} %}
+
+ {% set example_story = _story %}
+ {{ example_story|merge(example_slots) }}
+ {% endfor %}
diff --git a/components/navbar/navbar.color.story.yml b/components/navbar/navbar.color.story.yml
new file mode 100644
index 00000000..455102a2
--- /dev/null
+++ b/components/navbar/navbar.color.story.yml
@@ -0,0 +1,63 @@
+name: "Color schemes"
+slots:
+ brand:
+ - type: html_tag
+ tag: a
+ attributes:
+ href: "#"
+ value: "Navbar"
+ navigation_collapsible:
+ - type: component
+ component: "ui_suite_bootstrap:navbar_nav"
+ props:
+ variant: default
+ attributes:
+ class:
+ - me-auto
+ - mb-2
+ - mb-lg-0
+ items:
+ - title: Home
+ url: "#"
+ link_attributes:
+ class:
+ - active
+ - title: Features
+ url: "#"
+ - title: Pricing
+ url: "#"
+ - title: About
+ url: "#"
+props:
+ variant: expand_lg
+ toggler_position: end
+library_wrapper: >
+ {% set colors = [
+ {
+ class: [
+ 'bg-dark',
+ 'border-bottom',
+ 'border-body',
+ 'mb-3',
+ ],
+ 'data-bs-theme': 'dark',
+ },
+ {
+ class: [
+ 'bg-primary',
+ 'mb-3',
+ ],
+ 'data-bs-theme': 'dark',
+ },
+ {
+ class: [
+ 'mb-3',
+ ],
+ 'style': 'background-color: #e3f2fd;',
+ },
+ ] %}
+ {% for color in colors %}
+ {% set color_props = {'#props': _story['#props']|merge({'attributes': create_attribute(color)})} %}
+ {% set color_story = _story %}
+ {{ color_story|merge(color_props) }}
+ {% endfor %}
diff --git a/components/navbar/navbar.component.yml b/components/navbar/navbar.component.yml
index 9bb620d3..43bf8e86 100644
--- a/components/navbar/navbar.component.yml
+++ b/components/navbar/navbar.component.yml
@@ -48,6 +48,7 @@ props:
description: "Must start with a letter. Randomly generated if empty."
$ref: "ui-patterns://identifier"
placement:
+ # @todo deprecate now that it is possible to control the component attributes and the link with styles is done?
title: Placement
type: string
enum:
@@ -69,9 +70,11 @@ props:
enum:
- start
- end
+ - none
"meta:enum":
start: Start
end: End
+ none: None
toggle_action:
title: "Toggle action"
description: "Transform your expanding and collapsing navbar into an offcanvas drawer with the offcanvas plugin."
diff --git a/components/navbar/navbar.dark.story.yml b/components/navbar/navbar.dark.story.yml
index 50ad1f43..1cda835e 100644
--- a/components/navbar/navbar.dark.story.yml
+++ b/components/navbar/navbar.dark.story.yml
@@ -21,17 +21,40 @@ slots:
navigation_collapsible:
type: component
component: "ui_suite_bootstrap:navbar_nav"
- story: preview
props:
variant: default
- offcanvas_label: Offcanvas
+ attributes:
+ class:
+ - me-auto
+ - mb-2
+ - mb-lg-0
+ items:
+ - title: Home
+ url: "#"
+ link_attributes:
+ class:
+ - active
+ - title: Link
+ url: "#"
+ - title: Dropdown
+ url: "#"
+ below:
+ - title: "Action"
+ url: "#"
+ - title: "Another action"
+ url: "#"
+ - {}
+ - title: "Something else here"
+ url: "#"
+ - title: Disabled
+ url: "#"
+ link_attributes:
+ class:
+ - disabled
props:
attributes:
class:
- bg-dark
data-bs-theme: dark
- variant: default
- placement: default
+ variant: expand_lg
toggler_position: end
- toggle_action: collapse
- offcanvas_position: end
diff --git a/components/navbar/navbar.default.story.yml b/components/navbar/navbar.default.story.yml
new file mode 100644
index 00000000..fb9348dd
--- /dev/null
+++ b/components/navbar/navbar.default.story.yml
@@ -0,0 +1,47 @@
+name: Default
+slots:
+ brand:
+ - type: html_tag
+ tag: a
+ attributes:
+ href: "#"
+ value: Navbar
+ navigation_collapsible:
+ - type: component
+ component: "ui_suite_bootstrap:navbar_nav"
+ props:
+ variant: default
+ attributes:
+ class:
+ - me-auto
+ - mb-2
+ - mb-lg-0
+ items:
+ - title: Home
+ url: "#"
+ link_attributes:
+ class:
+ - active
+ - title: Link
+ url: "#"
+ - title: Dropdown
+ url: "#"
+ below:
+ - title: "Action"
+ url: "#"
+ - title: "Another action"
+ url: "#"
+ - {}
+ - title: "Something else here"
+ url: "#"
+ - title: Disabled
+ url: "#"
+ link_attributes:
+ class:
+ - disabled
+props:
+ attributes:
+ class:
+ - bg-body-tertiary
+ variant: expand_lg
+ toggler_position: end
diff --git a/components/navbar/navbar.external_content.story.yml b/components/navbar/navbar.external_content.story.yml
new file mode 100644
index 00000000..484443c2
--- /dev/null
+++ b/components/navbar/navbar.external_content.story.yml
@@ -0,0 +1,17 @@
+name: "External content"
+slots:
+props:
+ variant: dark
+ attributes:
+ class:
+ - bg-dark
+ toggler_position: start
+ navbar_id: "navbarToggleExternalContent"
+library_wrapper: >
+ <div class="collapse" id="navbarToggleExternalContent" data-bs-theme="dark">
+ <div class="bg-dark p-4">
+ <h5 class="text-body-emphasis h4">Collapsed content</h5>
+ <span class="text-body-secondary">Toggleable via the navbar brand.</span>
+ </div>
+ </div>
+ {{ _story }}
diff --git a/components/navbar/navbar.offcanvas.story.yml b/components/navbar/navbar.offcanvas.story.yml
new file mode 100644
index 00000000..dbb7066c
--- /dev/null
+++ b/components/navbar/navbar.offcanvas.story.yml
@@ -0,0 +1,50 @@
+name: Offcanvas
+slots:
+ brand:
+ - type: html_tag
+ tag: a
+ attributes:
+ href: "#"
+ value: "Offcanvas navbar"
+ navigation_collapsible:
+ - type: component
+ component: "ui_suite_bootstrap:navbar_nav"
+ props:
+ variant: default
+ attributes:
+ class:
+ - justify-content-end
+ - flex-grow-1
+ - pe-3
+ items:
+ - title: Home
+ url: "#"
+ link_attributes:
+ class:
+ - active
+ - title: Link
+ url: "#"
+ - title: Dropdown
+ url: "#"
+ below:
+ - title: "Action"
+ url: "#"
+ - title: "Another action"
+ url: "#"
+ - {}
+ - title: "Something else here"
+ url: "#"
+ - title: Disabled
+ url: "#"
+ link_attributes:
+ class:
+ - disabled
+ offcanvas_label: "Offcanvas"
+props:
+ attributes:
+ class:
+ - bg-body-tertiary
+ variant: default
+ toggler_position: end
+ toggle_action: offcanvas
+ offcanvas_position: end
diff --git a/components/navbar/navbar.offcanvas_dark.story.yml b/components/navbar/navbar.offcanvas_dark.story.yml
new file mode 100644
index 00000000..c7fe95a3
--- /dev/null
+++ b/components/navbar/navbar.offcanvas_dark.story.yml
@@ -0,0 +1,50 @@
+name: "Offcanvas dark"
+slots:
+ brand:
+ - type: html_tag
+ tag: a
+ attributes:
+ href: "#"
+ value: "Offcanvas dark navbar"
+ navigation_collapsible:
+ - type: component
+ component: "ui_suite_bootstrap:navbar_nav"
+ props:
+ variant: default
+ attributes:
+ class:
+ - justify-content-end
+ - flex-grow-1
+ - pe-3
+ items:
+ - title: Home
+ url: "#"
+ link_attributes:
+ class:
+ - active
+ - title: Link
+ url: "#"
+ - title: Dropdown
+ url: "#"
+ below:
+ - title: "Action"
+ url: "#"
+ - title: "Another action"
+ url: "#"
+ - {}
+ - title: "Something else here"
+ url: "#"
+ - title: Disabled
+ url: "#"
+ link_attributes:
+ class:
+ - disabled
+ offcanvas_label: "Dark offcanvas"
+props:
+ attributes:
+ class:
+ - bg-dark
+ variant: dark
+ toggler_position: end
+ toggle_action: offcanvas
+ offcanvas_position: end
diff --git a/components/navbar/navbar.preview.story.yml b/components/navbar/navbar.responsive.story.yml
similarity index 83%
rename from components/navbar/navbar.preview.story.yml
rename to components/navbar/navbar.responsive.story.yml
index 6bfd9a91..ac7f1e6e 100644
--- a/components/navbar/navbar.preview.story.yml
+++ b/components/navbar/navbar.responsive.story.yml
@@ -1,4 +1,4 @@
-name: Preview
+name: "Responsive behaviors"
slots:
brand:
- theme: image
@@ -21,16 +21,36 @@ slots:
navigation_collapsible:
type: component
component: "ui_suite_bootstrap:navbar_nav"
- story: preview
props:
variant: default
- offcanvas_label: Offcanvas
+ attributes:
+ class:
+ - me-auto
+ items:
+ - title: Home
+ url: "#"
+ link_attributes:
+ class:
+ - active
+ - title: Link
+ url: "#"
+ - title: Dropdown
+ url: "#"
+ below:
+ - title: "Action"
+ url: "#"
+ - title: "Another action"
+ url: "#"
+ - {}
+ - title: "Something else here"
+ url: "#"
+ - title: Disabled
+ url: "#"
+ link_attributes:
+ class:
+ - disabled
props:
attributes:
class:
- - bg-light
- variant: default
- placement: default
+ - bg-body-tertiary
toggler_position: end
- toggle_action: collapse
- offcanvas_position: end
diff --git a/components/navbar/navbar.responsive_hidden_brand.story.yml b/components/navbar/navbar.responsive_hidden_brand.story.yml
new file mode 100644
index 00000000..1a9386fe
--- /dev/null
+++ b/components/navbar/navbar.responsive_hidden_brand.story.yml
@@ -0,0 +1,38 @@
+name: "Responsive behaviors: hidden brand"
+slots:
+ navigation_collapsible:
+ - type: html_tag
+ tag: a
+ attributes:
+ href: "#"
+ class:
+ - navbar-brand
+ value: "Hidden brand"
+ - type: component
+ component: "ui_suite_bootstrap:navbar_nav"
+ props:
+ variant: default
+ attributes:
+ class:
+ - me-auto
+ - mb-2
+ - mb-lg-0
+ items:
+ - title: Home
+ url: "#"
+ link_attributes:
+ class:
+ - active
+ - title: Link
+ url: "#"
+ - title: Disabled
+ url: "#"
+ link_attributes:
+ class:
+ - disabled
+props:
+ variant: expand_lg
+ attributes:
+ class:
+ - bg-body-tertiary
+ toggler_position: end
diff --git a/components/navbar/navbar.responsive_toggler_start.story.yml b/components/navbar/navbar.responsive_toggler_start.story.yml
new file mode 100644
index 00000000..4f46976a
--- /dev/null
+++ b/components/navbar/navbar.responsive_toggler_start.story.yml
@@ -0,0 +1,37 @@
+name: "Responsive behaviors: toggler start"
+slots:
+ brand:
+ - type: html_tag
+ tag: a
+ attributes:
+ href: "#"
+ value: "Navbar"
+ navigation_collapsible:
+ - type: component
+ component: "ui_suite_bootstrap:navbar_nav"
+ props:
+ variant: default
+ attributes:
+ class:
+ - me-auto
+ - mb-2
+ - mb-lg-0
+ items:
+ - title: Home
+ url: "#"
+ link_attributes:
+ class:
+ - active
+ - title: Link
+ url: "#"
+ - title: Disabled
+ url: "#"
+ link_attributes:
+ class:
+ - disabled
+props:
+ variant: expand_lg
+ attributes:
+ class:
+ - bg-body-tertiary
+ toggler_position: start
diff --git a/components/navbar/navbar.scrolling.story.yml b/components/navbar/navbar.scrolling.story.yml
new file mode 100644
index 00000000..8f6276b0
--- /dev/null
+++ b/components/navbar/navbar.scrolling.story.yml
@@ -0,0 +1,48 @@
+name: Scrolling
+slots:
+ brand:
+ - type: html_tag
+ tag: a
+ attributes:
+ href: "#"
+ value: "Navbar scroll"
+ navigation_collapsible:
+ - type: component
+ component: "ui_suite_bootstrap:navbar_nav"
+ props:
+ variant: scroll
+ attributes:
+ style: "--bs-scroll-height: 100px;"
+ class:
+ - me-auto
+ - mb-2
+ - mb-lg-0
+ items:
+ - title: Home
+ url: "#"
+ link_attributes:
+ class:
+ - active
+ - title: Link
+ url: "#"
+ - title: Dropdown
+ url: "#"
+ below:
+ - title: "Action"
+ url: "#"
+ - title: "Another action"
+ url: "#"
+ - {}
+ - title: "Something else here"
+ url: "#"
+ - title: Disabled
+ url: "#"
+ link_attributes:
+ class:
+ - disabled
+props:
+ attributes:
+ class:
+ - bg-body-tertiary
+ variant: expand_lg
+ toggler_position: end
diff --git a/components/navbar/navbar.text.story.yml b/components/navbar/navbar.text.story.yml
new file mode 100644
index 00000000..8fa6e31e
--- /dev/null
+++ b/components/navbar/navbar.text.story.yml
@@ -0,0 +1,15 @@
+name: Text
+slots:
+ navigation:
+ type: html_tag
+ tag: span
+ attributes:
+ class:
+ - navbar-text
+ value: "Navbar text with an inline element"
+props:
+ attributes:
+ class:
+ - bg-body-tertiary
+ variant: default
+ toggler_position: none
diff --git a/components/navbar/navbar.text_collapsible.story.yml b/components/navbar/navbar.text_collapsible.story.yml
new file mode 100644
index 00000000..a862d1f4
--- /dev/null
+++ b/components/navbar/navbar.text_collapsible.story.yml
@@ -0,0 +1,40 @@
+name: "Text: collapsible"
+slots:
+ brand:
+ - type: html_tag
+ tag: a
+ attributes:
+ href: "#"
+ value: "Navbar w/ text"
+ navigation_collapsible:
+ - type: component
+ component: "ui_suite_bootstrap:navbar_nav"
+ props:
+ variant: default
+ attributes:
+ class:
+ - me-auto
+ - mb-2
+ - mb-lg-0
+ items:
+ - title: Home
+ url: "#"
+ link_attributes:
+ class:
+ - active
+ - title: Features
+ url: "#"
+ - title: Pricing
+ url: "#"
+ - type: html_tag
+ tag: span
+ attributes:
+ class:
+ - navbar-text
+ value: "Navbar text with an inline element"
+props:
+ attributes:
+ class:
+ - bg-body-tertiary
+ variant: expand_lg
+ toggler_position: end
diff --git a/components/navbar/navbar.twig b/components/navbar/navbar.twig
index d16f711e..2ae9c0ec 100644
--- a/components/navbar/navbar.twig
+++ b/components/navbar/navbar.twig
@@ -27,12 +27,12 @@
<nav{{ attributes }}>
<div class="container-fluid">
- {% if navigation_collapsible and toggler_position == 'start' %}
+ {% if toggler_position == 'start' %}
{{ toggler }}
{% endif %}
{{ brand|add_class('navbar-brand') }}
{{ navigation }}
- {% if navigation_collapsible and toggler_position == 'end' %}
+ {% if toggler_position == 'end' %}
{{ toggler }}
{% endif %}
diff --git a/components/navbar_nav/navbar_nav.preview.story.yml b/components/navbar_nav/navbar_nav.preview.story.yml
deleted file mode 100644
index 61f67487..00000000
--- a/components/navbar_nav/navbar_nav.preview.story.yml
+++ /dev/null
@@ -1,19 +0,0 @@
-name: Preview
-props:
- items:
- - title: Home
- url: "https://example.com"
- - title: Library
- url: "https://example.com"
- below:
- - title: "Dropdown header"
- link_attributes:
- class:
- - dropdown-header
- - title: "Sub 1"
- url: "https://example.com"
- - {}
- - title: "Sub 2 after divider"
- url: "https://example.com"
- - title: "Dropdown text"
- - title: Data
--
GitLab
From abf45a30b316eeec4e4665df1bba40775cca4990 Mon Sep 17 00:00:00 2001
From: Florent Torregrosa <florent.torregrosa@gmail.com>
Date: Wed, 12 Mar 2025 09:23:17 +0100
Subject: [PATCH 11/15] Issue #3485834 by grimreaper: Place stories in
subfolder.
---
.../accordion/{ => stories}/accordion.always_open.story.yml | 0
components/accordion/{ => stories}/accordion.default.story.yml | 0
components/alert/{ => stories}/alert.complete.story.yml | 0
components/alert/{ => stories}/alert.default.story.yml | 0
components/alert/{ => stories}/alert.dismissing.story.yml | 0
components/alert/{ => stories}/alert.icon.story.yml | 0
components/alert/{ => stories}/alert.link.story.yml | 0
components/badge/{ => stories}/badge.background.story.yml | 0
components/badge/{ => stories}/badge.button.story.yml | 0
components/badge/{ => stories}/badge.button_positioned.story.yml | 0
.../badge/{ => stories}/badge.button_positioned_generic.story.yml | 0
components/badge/{ => stories}/badge.headings.story.yml | 0
components/badge/{ => stories}/badge.pill.story.yml | 0
components/blockquote/{ => stories}/blockquote.default.story.yml | 0
.../blockquote/{ => stories}/blockquote.source_center.story.yml | 0
.../blockquote/{ => stories}/blockquote.source_end.story.yml | 0
.../blockquote/{ => stories}/blockquote.source_start.story.yml | 0
components/breadcrumb/{ => stories}/breadcrumb.1_item.story.yml | 0
components/breadcrumb/{ => stories}/breadcrumb.2_items.story.yml | 0
components/breadcrumb/{ => stories}/breadcrumb.3_items.story.yml | 0
components/button/{ => stories}/button.default.story.yml | 0
components/button/{ => stories}/button.disabled.story.yml | 0
components/button/{ => stories}/button.disabled_link.story.yml | 0
components/button/{ => stories}/button.tags.story.yml | 0
.../button_group/{ => stories}/button_group.default.story.yml | 0
components/button_group/{ => stories}/button_group.link.story.yml | 0
.../button_group/{ => stories}/button_group.mixed.story.yml | 0
.../button_group/{ => stories}/button_group.nesting.story.yml | 0
.../button_group/{ => stories}/button_group.outlined.story.yml | 0
.../button_toolbar/{ => stories}/button_toolbar.default.story.yml | 0
components/card/{ => stories}/card.basic.story.yml | 0
components/card/{ => stories}/card.content_types_body.story.yml | 0
components/card/{ => stories}/card.content_types_header.story.yml | 0
.../card/{ => stories}/card.content_types_header_footer.story.yml | 0
.../card/{ => stories}/card.content_types_header_quote.story.yml | 0
.../card/{ => stories}/card.content_types_header_title.story.yml | 0
components/card/{ => stories}/card.content_types_images.story.yml | 0
.../card/{ => stories}/card.content_types_kitchen.story.yml | 0
.../card/{ => stories}/card.content_types_list_groups.story.yml | 0
.../{ => stories}/card.content_types_list_groups_footer.story.yml | 0
.../{ => stories}/card.content_types_list_groups_header.story.yml | 0
.../{ => stories}/card.content_types_titles_text_links.story.yml | 0
components/card/{ => stories}/card.horizontal.story.yml | 0
components/card/{ => stories}/card.navigation_pills.story.yml | 0
components/card/{ => stories}/card.navigation_tabs.story.yml | 0
components/card/{ => stories}/card.styles_background.story.yml | 0
components/card/{ => stories}/card.styles_border.story.yml | 0
components/card/{ => stories}/card.styles_mixins.story.yml | 0
components/card/{ => stories}/card.text_alignment.story.yml | 0
components/card_group/{ => stories}/card_group.preview.story.yml | 0
.../card_overlay/{ => stories}/card_overlay.preview.story.yml | 0
components/carousel/{ => stories}/carousel.autoplay.story.yml | 0
.../{ => stories}/carousel.autoplay_individual_interval.story.yml | 0
.../{ => stories}/carousel.autoplay_no_controls.story.yml | 0
components/carousel/{ => stories}/carousel.captions.story.yml | 0
components/carousel/{ => stories}/carousel.default.story.yml | 0
components/carousel/{ => stories}/carousel.indicators.story.yml | 0
components/carousel/{ => stories}/carousel.no_touch.story.yml | 0
components/close_button/{ => stories}/close_button.dark.story.yml | 0
.../close_button/{ => stories}/close_button.light.story.yml | 0
.../close_button/{ => stories}/close_button.white.story.yml | 0
components/dropdown/{ => stories}/dropdown.auto_close.story.yml | 0
components/dropdown/{ => stories}/dropdown.color.story.yml | 0
components/dropdown/{ => stories}/dropdown.dark.story.yml | 0
components/dropdown/{ => stories}/dropdown.directions.story.yml | 0
.../{ => stories}/dropdown.menu_content_divider.story.yml | 0
.../dropdown/{ => stories}/dropdown.menu_content_header.story.yml | 0
.../dropdown/{ => stories}/dropdown.menu_content_text.story.yml | 0
.../dropdown/{ => stories}/dropdown.menu_items_active.story.yml | 0
.../dropdown/{ => stories}/dropdown.menu_items_disabled.story.yml | 0
.../dropdown/{ => stories}/dropdown.menu_items_text.story.yml | 0
.../dropdown/{ => stories}/dropdown.options_offset.story.yml | 0
.../{ => stories}/dropdown.responsive_alignment.story.yml | 0
.../{ => stories}/dropdown.single_button_button.story.yml | 0
.../dropdown/{ => stories}/dropdown.single_button_link.story.yml | 0
components/dropdown/{ => stories}/dropdown.sizing_large.story.yml | 0
components/dropdown/{ => stories}/dropdown.sizing_small.story.yml | 0
components/dropdown/{ => stories}/dropdown.split_button.story.yml | 0
components/figure/{ => stories}/figure.alignment.story.yml | 0
components/figure/{ => stories}/figure.default.story.yml | 0
components/grid_row/{ => stories}/grid_row.preview.story.yml | 0
components/grid_row_1/{ => stories}/grid_row_1.preview.story.yml | 0
components/grid_row_2/{ => stories}/grid_row_2.preview.story.yml | 0
components/grid_row_3/{ => stories}/grid_row_3.preview.story.yml | 0
components/grid_row_4/{ => stories}/grid_row_4.preview.story.yml | 0
components/list/{ => stories}/list.default_ol.story.yml | 0
components/list/{ => stories}/list.default_ul.story.yml | 0
components/list/{ => stories}/list.inline.story.yml | 0
components/list/{ => stories}/list.unstyled.story.yml | 0
components/list_group/{ => stories}/list_group.badge.story.yml | 0
components/list_group/{ => stories}/list_group.color.story.yml | 0
.../list_group/{ => stories}/list_group.color_link.story.yml | 0
.../{ => stories}/list_group.color_link_active.story.yml | 0
.../{ => stories}/list_group.color_link_disabled.story.yml | 0
.../{ => stories}/list_group.custom_content_1.story.yml | 0
.../{ => stories}/list_group.custom_content_2.story.yml | 0
components/list_group/{ => stories}/list_group.default.story.yml | 0
components/list_group/{ => stories}/list_group.links.story.yml | 0
components/list_group/{ => stories}/list_group.state.story.yml | 0
components/modal/{ => stories}/modal.default.story.yml | 0
components/modal/{ => stories}/modal.fullscreen.story.yml | 0
.../modal/{ => stories}/modal.long_content_default.story.yml | 0
.../modal/{ => stories}/modal.long_content_scrollable.story.yml | 0
components/modal/{ => stories}/modal.sizes.story.yml | 0
components/modal/{ => stories}/modal.static_backdrop.story.yml | 0
components/modal/{ => stories}/modal.vertical_centered.story.yml | 0
.../{ => stories}/modal.vertical_centered_scrollable.story.yml | 0
components/nav/{ => stories}/nav.alignment_center.story.yml | 0
components/nav/{ => stories}/nav.alignment_end.story.yml | 0
components/nav/{ => stories}/nav.alignment_vertical.story.yml | 0
components/nav/{ => stories}/nav.custom_content.story.yml | 0
.../nav/{ => stories}/nav.custom_content_vertical.story.yml | 0
components/nav/{ => stories}/nav.preview.story.yml | 0
components/navbar/{ => stories}/navbar.brand_image.story.yml | 0
components/navbar/{ => stories}/navbar.brand_image_text.story.yml | 0
components/navbar/{ => stories}/navbar.brand_text.story.yml | 0
components/navbar/{ => stories}/navbar.color.story.yml | 0
components/navbar/{ => stories}/navbar.dark.story.yml | 0
components/navbar/{ => stories}/navbar.default.story.yml | 0
components/navbar/{ => stories}/navbar.external_content.story.yml | 0
components/navbar/{ => stories}/navbar.offcanvas.story.yml | 0
components/navbar/{ => stories}/navbar.offcanvas_dark.story.yml | 0
components/navbar/{ => stories}/navbar.responsive.story.yml | 0
.../navbar/{ => stories}/navbar.responsive_hidden_brand.story.yml | 0
.../{ => stories}/navbar.responsive_toggler_start.story.yml | 0
components/navbar/{ => stories}/navbar.scrolling.story.yml | 0
components/navbar/{ => stories}/navbar.text.story.yml | 0
components/navbar/{ => stories}/navbar.text_collapsible.story.yml | 0
.../offcanvas/{ => stories}/offcanvas.body_scrolling.story.yml | 0
.../{ => stories}/offcanvas.body_scrolling_backdrop.story.yml | 0
components/offcanvas/{ => stories}/offcanvas.dark.story.yml | 0
components/offcanvas/{ => stories}/offcanvas.default.story.yml | 0
components/offcanvas/{ => stories}/offcanvas.placement.story.yml | 0
components/offcanvas/{ => stories}/offcanvas.responsive.story.yml | 0
.../offcanvas/{ => stories}/offcanvas.static_backdrop.story.yml | 0
.../{ => stories}/pagination.alignment_center.story.yml | 0
.../pagination/{ => stories}/pagination.alignment_end.story.yml | 0
components/pagination/{ => stories}/pagination.default.story.yml | 0
.../pagination/{ => stories}/pagination.sizing_large.story.yml | 0
.../pagination/{ => stories}/pagination.sizing_small.story.yml | 0
components/pagination/{ => stories}/pagination.states.story.yml | 0
components/progress/{ => stories}/progress.background.story.yml | 0
.../{ => stories}/progress.background_with_label.story.yml | 0
components/progress/{ => stories}/progress.default.story.yml | 0
components/progress/{ => stories}/progress.height_1.story.yml | 0
components/progress/{ => stories}/progress.height_20.story.yml | 0
components/progress/{ => stories}/progress.label.story.yml | 0
components/progress/{ => stories}/progress.label_long.story.yml | 0
.../{ => stories}/progress_stacked.default.story.yml | 0
components/spinner/{ => stories}/spinner.buttons.story.yml | 0
components/spinner/{ => stories}/spinner.color.story.yml | 0
components/spinner/{ => stories}/spinner.default.story.yml | 0
components/spinner/{ => stories}/spinner.margin.story.yml | 0
components/spinner/{ => stories}/spinner.placement_flex.story.yml | 0
.../spinner/{ => stories}/spinner.placement_flex_2.story.yml | 0
.../spinner/{ => stories}/spinner.placement_float.story.yml | 0
components/spinner/{ => stories}/spinner.placement_text.story.yml | 0
components/table/{ => stories}/table.preview.story.yml | 0
components/table_cell/{ => stories}/table_cell.preview.story.yml | 0
components/table_row/{ => stories}/table_row.preview.story.yml | 0
components/toast/{ => stories}/toast.basic.story.yml | 0
components/toast/{ => stories}/toast.color.story.yml | 0
components/toast/{ => stories}/toast.custom_content.story.yml | 0
.../toast/{ => stories}/toast.custom_content_control.story.yml | 0
components/toast/{ => stories}/toast.translucent.story.yml | 0
.../{ => stories}/toast_container.preview.story.yml | 0
166 files changed, 0 insertions(+), 0 deletions(-)
rename components/accordion/{ => stories}/accordion.always_open.story.yml (100%)
rename components/accordion/{ => stories}/accordion.default.story.yml (100%)
rename components/alert/{ => stories}/alert.complete.story.yml (100%)
rename components/alert/{ => stories}/alert.default.story.yml (100%)
rename components/alert/{ => stories}/alert.dismissing.story.yml (100%)
rename components/alert/{ => stories}/alert.icon.story.yml (100%)
rename components/alert/{ => stories}/alert.link.story.yml (100%)
rename components/badge/{ => stories}/badge.background.story.yml (100%)
rename components/badge/{ => stories}/badge.button.story.yml (100%)
rename components/badge/{ => stories}/badge.button_positioned.story.yml (100%)
rename components/badge/{ => stories}/badge.button_positioned_generic.story.yml (100%)
rename components/badge/{ => stories}/badge.headings.story.yml (100%)
rename components/badge/{ => stories}/badge.pill.story.yml (100%)
rename components/blockquote/{ => stories}/blockquote.default.story.yml (100%)
rename components/blockquote/{ => stories}/blockquote.source_center.story.yml (100%)
rename components/blockquote/{ => stories}/blockquote.source_end.story.yml (100%)
rename components/blockquote/{ => stories}/blockquote.source_start.story.yml (100%)
rename components/breadcrumb/{ => stories}/breadcrumb.1_item.story.yml (100%)
rename components/breadcrumb/{ => stories}/breadcrumb.2_items.story.yml (100%)
rename components/breadcrumb/{ => stories}/breadcrumb.3_items.story.yml (100%)
rename components/button/{ => stories}/button.default.story.yml (100%)
rename components/button/{ => stories}/button.disabled.story.yml (100%)
rename components/button/{ => stories}/button.disabled_link.story.yml (100%)
rename components/button/{ => stories}/button.tags.story.yml (100%)
rename components/button_group/{ => stories}/button_group.default.story.yml (100%)
rename components/button_group/{ => stories}/button_group.link.story.yml (100%)
rename components/button_group/{ => stories}/button_group.mixed.story.yml (100%)
rename components/button_group/{ => stories}/button_group.nesting.story.yml (100%)
rename components/button_group/{ => stories}/button_group.outlined.story.yml (100%)
rename components/button_toolbar/{ => stories}/button_toolbar.default.story.yml (100%)
rename components/card/{ => stories}/card.basic.story.yml (100%)
rename components/card/{ => stories}/card.content_types_body.story.yml (100%)
rename components/card/{ => stories}/card.content_types_header.story.yml (100%)
rename components/card/{ => stories}/card.content_types_header_footer.story.yml (100%)
rename components/card/{ => stories}/card.content_types_header_quote.story.yml (100%)
rename components/card/{ => stories}/card.content_types_header_title.story.yml (100%)
rename components/card/{ => stories}/card.content_types_images.story.yml (100%)
rename components/card/{ => stories}/card.content_types_kitchen.story.yml (100%)
rename components/card/{ => stories}/card.content_types_list_groups.story.yml (100%)
rename components/card/{ => stories}/card.content_types_list_groups_footer.story.yml (100%)
rename components/card/{ => stories}/card.content_types_list_groups_header.story.yml (100%)
rename components/card/{ => stories}/card.content_types_titles_text_links.story.yml (100%)
rename components/card/{ => stories}/card.horizontal.story.yml (100%)
rename components/card/{ => stories}/card.navigation_pills.story.yml (100%)
rename components/card/{ => stories}/card.navigation_tabs.story.yml (100%)
rename components/card/{ => stories}/card.styles_background.story.yml (100%)
rename components/card/{ => stories}/card.styles_border.story.yml (100%)
rename components/card/{ => stories}/card.styles_mixins.story.yml (100%)
rename components/card/{ => stories}/card.text_alignment.story.yml (100%)
rename components/card_group/{ => stories}/card_group.preview.story.yml (100%)
rename components/card_overlay/{ => stories}/card_overlay.preview.story.yml (100%)
rename components/carousel/{ => stories}/carousel.autoplay.story.yml (100%)
rename components/carousel/{ => stories}/carousel.autoplay_individual_interval.story.yml (100%)
rename components/carousel/{ => stories}/carousel.autoplay_no_controls.story.yml (100%)
rename components/carousel/{ => stories}/carousel.captions.story.yml (100%)
rename components/carousel/{ => stories}/carousel.default.story.yml (100%)
rename components/carousel/{ => stories}/carousel.indicators.story.yml (100%)
rename components/carousel/{ => stories}/carousel.no_touch.story.yml (100%)
rename components/close_button/{ => stories}/close_button.dark.story.yml (100%)
rename components/close_button/{ => stories}/close_button.light.story.yml (100%)
rename components/close_button/{ => stories}/close_button.white.story.yml (100%)
rename components/dropdown/{ => stories}/dropdown.auto_close.story.yml (100%)
rename components/dropdown/{ => stories}/dropdown.color.story.yml (100%)
rename components/dropdown/{ => stories}/dropdown.dark.story.yml (100%)
rename components/dropdown/{ => stories}/dropdown.directions.story.yml (100%)
rename components/dropdown/{ => stories}/dropdown.menu_content_divider.story.yml (100%)
rename components/dropdown/{ => stories}/dropdown.menu_content_header.story.yml (100%)
rename components/dropdown/{ => stories}/dropdown.menu_content_text.story.yml (100%)
rename components/dropdown/{ => stories}/dropdown.menu_items_active.story.yml (100%)
rename components/dropdown/{ => stories}/dropdown.menu_items_disabled.story.yml (100%)
rename components/dropdown/{ => stories}/dropdown.menu_items_text.story.yml (100%)
rename components/dropdown/{ => stories}/dropdown.options_offset.story.yml (100%)
rename components/dropdown/{ => stories}/dropdown.responsive_alignment.story.yml (100%)
rename components/dropdown/{ => stories}/dropdown.single_button_button.story.yml (100%)
rename components/dropdown/{ => stories}/dropdown.single_button_link.story.yml (100%)
rename components/dropdown/{ => stories}/dropdown.sizing_large.story.yml (100%)
rename components/dropdown/{ => stories}/dropdown.sizing_small.story.yml (100%)
rename components/dropdown/{ => stories}/dropdown.split_button.story.yml (100%)
rename components/figure/{ => stories}/figure.alignment.story.yml (100%)
rename components/figure/{ => stories}/figure.default.story.yml (100%)
rename components/grid_row/{ => stories}/grid_row.preview.story.yml (100%)
rename components/grid_row_1/{ => stories}/grid_row_1.preview.story.yml (100%)
rename components/grid_row_2/{ => stories}/grid_row_2.preview.story.yml (100%)
rename components/grid_row_3/{ => stories}/grid_row_3.preview.story.yml (100%)
rename components/grid_row_4/{ => stories}/grid_row_4.preview.story.yml (100%)
rename components/list/{ => stories}/list.default_ol.story.yml (100%)
rename components/list/{ => stories}/list.default_ul.story.yml (100%)
rename components/list/{ => stories}/list.inline.story.yml (100%)
rename components/list/{ => stories}/list.unstyled.story.yml (100%)
rename components/list_group/{ => stories}/list_group.badge.story.yml (100%)
rename components/list_group/{ => stories}/list_group.color.story.yml (100%)
rename components/list_group/{ => stories}/list_group.color_link.story.yml (100%)
rename components/list_group/{ => stories}/list_group.color_link_active.story.yml (100%)
rename components/list_group/{ => stories}/list_group.color_link_disabled.story.yml (100%)
rename components/list_group/{ => stories}/list_group.custom_content_1.story.yml (100%)
rename components/list_group/{ => stories}/list_group.custom_content_2.story.yml (100%)
rename components/list_group/{ => stories}/list_group.default.story.yml (100%)
rename components/list_group/{ => stories}/list_group.links.story.yml (100%)
rename components/list_group/{ => stories}/list_group.state.story.yml (100%)
rename components/modal/{ => stories}/modal.default.story.yml (100%)
rename components/modal/{ => stories}/modal.fullscreen.story.yml (100%)
rename components/modal/{ => stories}/modal.long_content_default.story.yml (100%)
rename components/modal/{ => stories}/modal.long_content_scrollable.story.yml (100%)
rename components/modal/{ => stories}/modal.sizes.story.yml (100%)
rename components/modal/{ => stories}/modal.static_backdrop.story.yml (100%)
rename components/modal/{ => stories}/modal.vertical_centered.story.yml (100%)
rename components/modal/{ => stories}/modal.vertical_centered_scrollable.story.yml (100%)
rename components/nav/{ => stories}/nav.alignment_center.story.yml (100%)
rename components/nav/{ => stories}/nav.alignment_end.story.yml (100%)
rename components/nav/{ => stories}/nav.alignment_vertical.story.yml (100%)
rename components/nav/{ => stories}/nav.custom_content.story.yml (100%)
rename components/nav/{ => stories}/nav.custom_content_vertical.story.yml (100%)
rename components/nav/{ => stories}/nav.preview.story.yml (100%)
rename components/navbar/{ => stories}/navbar.brand_image.story.yml (100%)
rename components/navbar/{ => stories}/navbar.brand_image_text.story.yml (100%)
rename components/navbar/{ => stories}/navbar.brand_text.story.yml (100%)
rename components/navbar/{ => stories}/navbar.color.story.yml (100%)
rename components/navbar/{ => stories}/navbar.dark.story.yml (100%)
rename components/navbar/{ => stories}/navbar.default.story.yml (100%)
rename components/navbar/{ => stories}/navbar.external_content.story.yml (100%)
rename components/navbar/{ => stories}/navbar.offcanvas.story.yml (100%)
rename components/navbar/{ => stories}/navbar.offcanvas_dark.story.yml (100%)
rename components/navbar/{ => stories}/navbar.responsive.story.yml (100%)
rename components/navbar/{ => stories}/navbar.responsive_hidden_brand.story.yml (100%)
rename components/navbar/{ => stories}/navbar.responsive_toggler_start.story.yml (100%)
rename components/navbar/{ => stories}/navbar.scrolling.story.yml (100%)
rename components/navbar/{ => stories}/navbar.text.story.yml (100%)
rename components/navbar/{ => stories}/navbar.text_collapsible.story.yml (100%)
rename components/offcanvas/{ => stories}/offcanvas.body_scrolling.story.yml (100%)
rename components/offcanvas/{ => stories}/offcanvas.body_scrolling_backdrop.story.yml (100%)
rename components/offcanvas/{ => stories}/offcanvas.dark.story.yml (100%)
rename components/offcanvas/{ => stories}/offcanvas.default.story.yml (100%)
rename components/offcanvas/{ => stories}/offcanvas.placement.story.yml (100%)
rename components/offcanvas/{ => stories}/offcanvas.responsive.story.yml (100%)
rename components/offcanvas/{ => stories}/offcanvas.static_backdrop.story.yml (100%)
rename components/pagination/{ => stories}/pagination.alignment_center.story.yml (100%)
rename components/pagination/{ => stories}/pagination.alignment_end.story.yml (100%)
rename components/pagination/{ => stories}/pagination.default.story.yml (100%)
rename components/pagination/{ => stories}/pagination.sizing_large.story.yml (100%)
rename components/pagination/{ => stories}/pagination.sizing_small.story.yml (100%)
rename components/pagination/{ => stories}/pagination.states.story.yml (100%)
rename components/progress/{ => stories}/progress.background.story.yml (100%)
rename components/progress/{ => stories}/progress.background_with_label.story.yml (100%)
rename components/progress/{ => stories}/progress.default.story.yml (100%)
rename components/progress/{ => stories}/progress.height_1.story.yml (100%)
rename components/progress/{ => stories}/progress.height_20.story.yml (100%)
rename components/progress/{ => stories}/progress.label.story.yml (100%)
rename components/progress/{ => stories}/progress.label_long.story.yml (100%)
rename components/progress_stacked/{ => stories}/progress_stacked.default.story.yml (100%)
rename components/spinner/{ => stories}/spinner.buttons.story.yml (100%)
rename components/spinner/{ => stories}/spinner.color.story.yml (100%)
rename components/spinner/{ => stories}/spinner.default.story.yml (100%)
rename components/spinner/{ => stories}/spinner.margin.story.yml (100%)
rename components/spinner/{ => stories}/spinner.placement_flex.story.yml (100%)
rename components/spinner/{ => stories}/spinner.placement_flex_2.story.yml (100%)
rename components/spinner/{ => stories}/spinner.placement_float.story.yml (100%)
rename components/spinner/{ => stories}/spinner.placement_text.story.yml (100%)
rename components/table/{ => stories}/table.preview.story.yml (100%)
rename components/table_cell/{ => stories}/table_cell.preview.story.yml (100%)
rename components/table_row/{ => stories}/table_row.preview.story.yml (100%)
rename components/toast/{ => stories}/toast.basic.story.yml (100%)
rename components/toast/{ => stories}/toast.color.story.yml (100%)
rename components/toast/{ => stories}/toast.custom_content.story.yml (100%)
rename components/toast/{ => stories}/toast.custom_content_control.story.yml (100%)
rename components/toast/{ => stories}/toast.translucent.story.yml (100%)
rename components/toast_container/{ => stories}/toast_container.preview.story.yml (100%)
diff --git a/components/accordion/accordion.always_open.story.yml b/components/accordion/stories/accordion.always_open.story.yml
similarity index 100%
rename from components/accordion/accordion.always_open.story.yml
rename to components/accordion/stories/accordion.always_open.story.yml
diff --git a/components/accordion/accordion.default.story.yml b/components/accordion/stories/accordion.default.story.yml
similarity index 100%
rename from components/accordion/accordion.default.story.yml
rename to components/accordion/stories/accordion.default.story.yml
diff --git a/components/alert/alert.complete.story.yml b/components/alert/stories/alert.complete.story.yml
similarity index 100%
rename from components/alert/alert.complete.story.yml
rename to components/alert/stories/alert.complete.story.yml
diff --git a/components/alert/alert.default.story.yml b/components/alert/stories/alert.default.story.yml
similarity index 100%
rename from components/alert/alert.default.story.yml
rename to components/alert/stories/alert.default.story.yml
diff --git a/components/alert/alert.dismissing.story.yml b/components/alert/stories/alert.dismissing.story.yml
similarity index 100%
rename from components/alert/alert.dismissing.story.yml
rename to components/alert/stories/alert.dismissing.story.yml
diff --git a/components/alert/alert.icon.story.yml b/components/alert/stories/alert.icon.story.yml
similarity index 100%
rename from components/alert/alert.icon.story.yml
rename to components/alert/stories/alert.icon.story.yml
diff --git a/components/alert/alert.link.story.yml b/components/alert/stories/alert.link.story.yml
similarity index 100%
rename from components/alert/alert.link.story.yml
rename to components/alert/stories/alert.link.story.yml
diff --git a/components/badge/badge.background.story.yml b/components/badge/stories/badge.background.story.yml
similarity index 100%
rename from components/badge/badge.background.story.yml
rename to components/badge/stories/badge.background.story.yml
diff --git a/components/badge/badge.button.story.yml b/components/badge/stories/badge.button.story.yml
similarity index 100%
rename from components/badge/badge.button.story.yml
rename to components/badge/stories/badge.button.story.yml
diff --git a/components/badge/badge.button_positioned.story.yml b/components/badge/stories/badge.button_positioned.story.yml
similarity index 100%
rename from components/badge/badge.button_positioned.story.yml
rename to components/badge/stories/badge.button_positioned.story.yml
diff --git a/components/badge/badge.button_positioned_generic.story.yml b/components/badge/stories/badge.button_positioned_generic.story.yml
similarity index 100%
rename from components/badge/badge.button_positioned_generic.story.yml
rename to components/badge/stories/badge.button_positioned_generic.story.yml
diff --git a/components/badge/badge.headings.story.yml b/components/badge/stories/badge.headings.story.yml
similarity index 100%
rename from components/badge/badge.headings.story.yml
rename to components/badge/stories/badge.headings.story.yml
diff --git a/components/badge/badge.pill.story.yml b/components/badge/stories/badge.pill.story.yml
similarity index 100%
rename from components/badge/badge.pill.story.yml
rename to components/badge/stories/badge.pill.story.yml
diff --git a/components/blockquote/blockquote.default.story.yml b/components/blockquote/stories/blockquote.default.story.yml
similarity index 100%
rename from components/blockquote/blockquote.default.story.yml
rename to components/blockquote/stories/blockquote.default.story.yml
diff --git a/components/blockquote/blockquote.source_center.story.yml b/components/blockquote/stories/blockquote.source_center.story.yml
similarity index 100%
rename from components/blockquote/blockquote.source_center.story.yml
rename to components/blockquote/stories/blockquote.source_center.story.yml
diff --git a/components/blockquote/blockquote.source_end.story.yml b/components/blockquote/stories/blockquote.source_end.story.yml
similarity index 100%
rename from components/blockquote/blockquote.source_end.story.yml
rename to components/blockquote/stories/blockquote.source_end.story.yml
diff --git a/components/blockquote/blockquote.source_start.story.yml b/components/blockquote/stories/blockquote.source_start.story.yml
similarity index 100%
rename from components/blockquote/blockquote.source_start.story.yml
rename to components/blockquote/stories/blockquote.source_start.story.yml
diff --git a/components/breadcrumb/breadcrumb.1_item.story.yml b/components/breadcrumb/stories/breadcrumb.1_item.story.yml
similarity index 100%
rename from components/breadcrumb/breadcrumb.1_item.story.yml
rename to components/breadcrumb/stories/breadcrumb.1_item.story.yml
diff --git a/components/breadcrumb/breadcrumb.2_items.story.yml b/components/breadcrumb/stories/breadcrumb.2_items.story.yml
similarity index 100%
rename from components/breadcrumb/breadcrumb.2_items.story.yml
rename to components/breadcrumb/stories/breadcrumb.2_items.story.yml
diff --git a/components/breadcrumb/breadcrumb.3_items.story.yml b/components/breadcrumb/stories/breadcrumb.3_items.story.yml
similarity index 100%
rename from components/breadcrumb/breadcrumb.3_items.story.yml
rename to components/breadcrumb/stories/breadcrumb.3_items.story.yml
diff --git a/components/button/button.default.story.yml b/components/button/stories/button.default.story.yml
similarity index 100%
rename from components/button/button.default.story.yml
rename to components/button/stories/button.default.story.yml
diff --git a/components/button/button.disabled.story.yml b/components/button/stories/button.disabled.story.yml
similarity index 100%
rename from components/button/button.disabled.story.yml
rename to components/button/stories/button.disabled.story.yml
diff --git a/components/button/button.disabled_link.story.yml b/components/button/stories/button.disabled_link.story.yml
similarity index 100%
rename from components/button/button.disabled_link.story.yml
rename to components/button/stories/button.disabled_link.story.yml
diff --git a/components/button/button.tags.story.yml b/components/button/stories/button.tags.story.yml
similarity index 100%
rename from components/button/button.tags.story.yml
rename to components/button/stories/button.tags.story.yml
diff --git a/components/button_group/button_group.default.story.yml b/components/button_group/stories/button_group.default.story.yml
similarity index 100%
rename from components/button_group/button_group.default.story.yml
rename to components/button_group/stories/button_group.default.story.yml
diff --git a/components/button_group/button_group.link.story.yml b/components/button_group/stories/button_group.link.story.yml
similarity index 100%
rename from components/button_group/button_group.link.story.yml
rename to components/button_group/stories/button_group.link.story.yml
diff --git a/components/button_group/button_group.mixed.story.yml b/components/button_group/stories/button_group.mixed.story.yml
similarity index 100%
rename from components/button_group/button_group.mixed.story.yml
rename to components/button_group/stories/button_group.mixed.story.yml
diff --git a/components/button_group/button_group.nesting.story.yml b/components/button_group/stories/button_group.nesting.story.yml
similarity index 100%
rename from components/button_group/button_group.nesting.story.yml
rename to components/button_group/stories/button_group.nesting.story.yml
diff --git a/components/button_group/button_group.outlined.story.yml b/components/button_group/stories/button_group.outlined.story.yml
similarity index 100%
rename from components/button_group/button_group.outlined.story.yml
rename to components/button_group/stories/button_group.outlined.story.yml
diff --git a/components/button_toolbar/button_toolbar.default.story.yml b/components/button_toolbar/stories/button_toolbar.default.story.yml
similarity index 100%
rename from components/button_toolbar/button_toolbar.default.story.yml
rename to components/button_toolbar/stories/button_toolbar.default.story.yml
diff --git a/components/card/card.basic.story.yml b/components/card/stories/card.basic.story.yml
similarity index 100%
rename from components/card/card.basic.story.yml
rename to components/card/stories/card.basic.story.yml
diff --git a/components/card/card.content_types_body.story.yml b/components/card/stories/card.content_types_body.story.yml
similarity index 100%
rename from components/card/card.content_types_body.story.yml
rename to components/card/stories/card.content_types_body.story.yml
diff --git a/components/card/card.content_types_header.story.yml b/components/card/stories/card.content_types_header.story.yml
similarity index 100%
rename from components/card/card.content_types_header.story.yml
rename to components/card/stories/card.content_types_header.story.yml
diff --git a/components/card/card.content_types_header_footer.story.yml b/components/card/stories/card.content_types_header_footer.story.yml
similarity index 100%
rename from components/card/card.content_types_header_footer.story.yml
rename to components/card/stories/card.content_types_header_footer.story.yml
diff --git a/components/card/card.content_types_header_quote.story.yml b/components/card/stories/card.content_types_header_quote.story.yml
similarity index 100%
rename from components/card/card.content_types_header_quote.story.yml
rename to components/card/stories/card.content_types_header_quote.story.yml
diff --git a/components/card/card.content_types_header_title.story.yml b/components/card/stories/card.content_types_header_title.story.yml
similarity index 100%
rename from components/card/card.content_types_header_title.story.yml
rename to components/card/stories/card.content_types_header_title.story.yml
diff --git a/components/card/card.content_types_images.story.yml b/components/card/stories/card.content_types_images.story.yml
similarity index 100%
rename from components/card/card.content_types_images.story.yml
rename to components/card/stories/card.content_types_images.story.yml
diff --git a/components/card/card.content_types_kitchen.story.yml b/components/card/stories/card.content_types_kitchen.story.yml
similarity index 100%
rename from components/card/card.content_types_kitchen.story.yml
rename to components/card/stories/card.content_types_kitchen.story.yml
diff --git a/components/card/card.content_types_list_groups.story.yml b/components/card/stories/card.content_types_list_groups.story.yml
similarity index 100%
rename from components/card/card.content_types_list_groups.story.yml
rename to components/card/stories/card.content_types_list_groups.story.yml
diff --git a/components/card/card.content_types_list_groups_footer.story.yml b/components/card/stories/card.content_types_list_groups_footer.story.yml
similarity index 100%
rename from components/card/card.content_types_list_groups_footer.story.yml
rename to components/card/stories/card.content_types_list_groups_footer.story.yml
diff --git a/components/card/card.content_types_list_groups_header.story.yml b/components/card/stories/card.content_types_list_groups_header.story.yml
similarity index 100%
rename from components/card/card.content_types_list_groups_header.story.yml
rename to components/card/stories/card.content_types_list_groups_header.story.yml
diff --git a/components/card/card.content_types_titles_text_links.story.yml b/components/card/stories/card.content_types_titles_text_links.story.yml
similarity index 100%
rename from components/card/card.content_types_titles_text_links.story.yml
rename to components/card/stories/card.content_types_titles_text_links.story.yml
diff --git a/components/card/card.horizontal.story.yml b/components/card/stories/card.horizontal.story.yml
similarity index 100%
rename from components/card/card.horizontal.story.yml
rename to components/card/stories/card.horizontal.story.yml
diff --git a/components/card/card.navigation_pills.story.yml b/components/card/stories/card.navigation_pills.story.yml
similarity index 100%
rename from components/card/card.navigation_pills.story.yml
rename to components/card/stories/card.navigation_pills.story.yml
diff --git a/components/card/card.navigation_tabs.story.yml b/components/card/stories/card.navigation_tabs.story.yml
similarity index 100%
rename from components/card/card.navigation_tabs.story.yml
rename to components/card/stories/card.navigation_tabs.story.yml
diff --git a/components/card/card.styles_background.story.yml b/components/card/stories/card.styles_background.story.yml
similarity index 100%
rename from components/card/card.styles_background.story.yml
rename to components/card/stories/card.styles_background.story.yml
diff --git a/components/card/card.styles_border.story.yml b/components/card/stories/card.styles_border.story.yml
similarity index 100%
rename from components/card/card.styles_border.story.yml
rename to components/card/stories/card.styles_border.story.yml
diff --git a/components/card/card.styles_mixins.story.yml b/components/card/stories/card.styles_mixins.story.yml
similarity index 100%
rename from components/card/card.styles_mixins.story.yml
rename to components/card/stories/card.styles_mixins.story.yml
diff --git a/components/card/card.text_alignment.story.yml b/components/card/stories/card.text_alignment.story.yml
similarity index 100%
rename from components/card/card.text_alignment.story.yml
rename to components/card/stories/card.text_alignment.story.yml
diff --git a/components/card_group/card_group.preview.story.yml b/components/card_group/stories/card_group.preview.story.yml
similarity index 100%
rename from components/card_group/card_group.preview.story.yml
rename to components/card_group/stories/card_group.preview.story.yml
diff --git a/components/card_overlay/card_overlay.preview.story.yml b/components/card_overlay/stories/card_overlay.preview.story.yml
similarity index 100%
rename from components/card_overlay/card_overlay.preview.story.yml
rename to components/card_overlay/stories/card_overlay.preview.story.yml
diff --git a/components/carousel/carousel.autoplay.story.yml b/components/carousel/stories/carousel.autoplay.story.yml
similarity index 100%
rename from components/carousel/carousel.autoplay.story.yml
rename to components/carousel/stories/carousel.autoplay.story.yml
diff --git a/components/carousel/carousel.autoplay_individual_interval.story.yml b/components/carousel/stories/carousel.autoplay_individual_interval.story.yml
similarity index 100%
rename from components/carousel/carousel.autoplay_individual_interval.story.yml
rename to components/carousel/stories/carousel.autoplay_individual_interval.story.yml
diff --git a/components/carousel/carousel.autoplay_no_controls.story.yml b/components/carousel/stories/carousel.autoplay_no_controls.story.yml
similarity index 100%
rename from components/carousel/carousel.autoplay_no_controls.story.yml
rename to components/carousel/stories/carousel.autoplay_no_controls.story.yml
diff --git a/components/carousel/carousel.captions.story.yml b/components/carousel/stories/carousel.captions.story.yml
similarity index 100%
rename from components/carousel/carousel.captions.story.yml
rename to components/carousel/stories/carousel.captions.story.yml
diff --git a/components/carousel/carousel.default.story.yml b/components/carousel/stories/carousel.default.story.yml
similarity index 100%
rename from components/carousel/carousel.default.story.yml
rename to components/carousel/stories/carousel.default.story.yml
diff --git a/components/carousel/carousel.indicators.story.yml b/components/carousel/stories/carousel.indicators.story.yml
similarity index 100%
rename from components/carousel/carousel.indicators.story.yml
rename to components/carousel/stories/carousel.indicators.story.yml
diff --git a/components/carousel/carousel.no_touch.story.yml b/components/carousel/stories/carousel.no_touch.story.yml
similarity index 100%
rename from components/carousel/carousel.no_touch.story.yml
rename to components/carousel/stories/carousel.no_touch.story.yml
diff --git a/components/close_button/close_button.dark.story.yml b/components/close_button/stories/close_button.dark.story.yml
similarity index 100%
rename from components/close_button/close_button.dark.story.yml
rename to components/close_button/stories/close_button.dark.story.yml
diff --git a/components/close_button/close_button.light.story.yml b/components/close_button/stories/close_button.light.story.yml
similarity index 100%
rename from components/close_button/close_button.light.story.yml
rename to components/close_button/stories/close_button.light.story.yml
diff --git a/components/close_button/close_button.white.story.yml b/components/close_button/stories/close_button.white.story.yml
similarity index 100%
rename from components/close_button/close_button.white.story.yml
rename to components/close_button/stories/close_button.white.story.yml
diff --git a/components/dropdown/dropdown.auto_close.story.yml b/components/dropdown/stories/dropdown.auto_close.story.yml
similarity index 100%
rename from components/dropdown/dropdown.auto_close.story.yml
rename to components/dropdown/stories/dropdown.auto_close.story.yml
diff --git a/components/dropdown/dropdown.color.story.yml b/components/dropdown/stories/dropdown.color.story.yml
similarity index 100%
rename from components/dropdown/dropdown.color.story.yml
rename to components/dropdown/stories/dropdown.color.story.yml
diff --git a/components/dropdown/dropdown.dark.story.yml b/components/dropdown/stories/dropdown.dark.story.yml
similarity index 100%
rename from components/dropdown/dropdown.dark.story.yml
rename to components/dropdown/stories/dropdown.dark.story.yml
diff --git a/components/dropdown/dropdown.directions.story.yml b/components/dropdown/stories/dropdown.directions.story.yml
similarity index 100%
rename from components/dropdown/dropdown.directions.story.yml
rename to components/dropdown/stories/dropdown.directions.story.yml
diff --git a/components/dropdown/dropdown.menu_content_divider.story.yml b/components/dropdown/stories/dropdown.menu_content_divider.story.yml
similarity index 100%
rename from components/dropdown/dropdown.menu_content_divider.story.yml
rename to components/dropdown/stories/dropdown.menu_content_divider.story.yml
diff --git a/components/dropdown/dropdown.menu_content_header.story.yml b/components/dropdown/stories/dropdown.menu_content_header.story.yml
similarity index 100%
rename from components/dropdown/dropdown.menu_content_header.story.yml
rename to components/dropdown/stories/dropdown.menu_content_header.story.yml
diff --git a/components/dropdown/dropdown.menu_content_text.story.yml b/components/dropdown/stories/dropdown.menu_content_text.story.yml
similarity index 100%
rename from components/dropdown/dropdown.menu_content_text.story.yml
rename to components/dropdown/stories/dropdown.menu_content_text.story.yml
diff --git a/components/dropdown/dropdown.menu_items_active.story.yml b/components/dropdown/stories/dropdown.menu_items_active.story.yml
similarity index 100%
rename from components/dropdown/dropdown.menu_items_active.story.yml
rename to components/dropdown/stories/dropdown.menu_items_active.story.yml
diff --git a/components/dropdown/dropdown.menu_items_disabled.story.yml b/components/dropdown/stories/dropdown.menu_items_disabled.story.yml
similarity index 100%
rename from components/dropdown/dropdown.menu_items_disabled.story.yml
rename to components/dropdown/stories/dropdown.menu_items_disabled.story.yml
diff --git a/components/dropdown/dropdown.menu_items_text.story.yml b/components/dropdown/stories/dropdown.menu_items_text.story.yml
similarity index 100%
rename from components/dropdown/dropdown.menu_items_text.story.yml
rename to components/dropdown/stories/dropdown.menu_items_text.story.yml
diff --git a/components/dropdown/dropdown.options_offset.story.yml b/components/dropdown/stories/dropdown.options_offset.story.yml
similarity index 100%
rename from components/dropdown/dropdown.options_offset.story.yml
rename to components/dropdown/stories/dropdown.options_offset.story.yml
diff --git a/components/dropdown/dropdown.responsive_alignment.story.yml b/components/dropdown/stories/dropdown.responsive_alignment.story.yml
similarity index 100%
rename from components/dropdown/dropdown.responsive_alignment.story.yml
rename to components/dropdown/stories/dropdown.responsive_alignment.story.yml
diff --git a/components/dropdown/dropdown.single_button_button.story.yml b/components/dropdown/stories/dropdown.single_button_button.story.yml
similarity index 100%
rename from components/dropdown/dropdown.single_button_button.story.yml
rename to components/dropdown/stories/dropdown.single_button_button.story.yml
diff --git a/components/dropdown/dropdown.single_button_link.story.yml b/components/dropdown/stories/dropdown.single_button_link.story.yml
similarity index 100%
rename from components/dropdown/dropdown.single_button_link.story.yml
rename to components/dropdown/stories/dropdown.single_button_link.story.yml
diff --git a/components/dropdown/dropdown.sizing_large.story.yml b/components/dropdown/stories/dropdown.sizing_large.story.yml
similarity index 100%
rename from components/dropdown/dropdown.sizing_large.story.yml
rename to components/dropdown/stories/dropdown.sizing_large.story.yml
diff --git a/components/dropdown/dropdown.sizing_small.story.yml b/components/dropdown/stories/dropdown.sizing_small.story.yml
similarity index 100%
rename from components/dropdown/dropdown.sizing_small.story.yml
rename to components/dropdown/stories/dropdown.sizing_small.story.yml
diff --git a/components/dropdown/dropdown.split_button.story.yml b/components/dropdown/stories/dropdown.split_button.story.yml
similarity index 100%
rename from components/dropdown/dropdown.split_button.story.yml
rename to components/dropdown/stories/dropdown.split_button.story.yml
diff --git a/components/figure/figure.alignment.story.yml b/components/figure/stories/figure.alignment.story.yml
similarity index 100%
rename from components/figure/figure.alignment.story.yml
rename to components/figure/stories/figure.alignment.story.yml
diff --git a/components/figure/figure.default.story.yml b/components/figure/stories/figure.default.story.yml
similarity index 100%
rename from components/figure/figure.default.story.yml
rename to components/figure/stories/figure.default.story.yml
diff --git a/components/grid_row/grid_row.preview.story.yml b/components/grid_row/stories/grid_row.preview.story.yml
similarity index 100%
rename from components/grid_row/grid_row.preview.story.yml
rename to components/grid_row/stories/grid_row.preview.story.yml
diff --git a/components/grid_row_1/grid_row_1.preview.story.yml b/components/grid_row_1/stories/grid_row_1.preview.story.yml
similarity index 100%
rename from components/grid_row_1/grid_row_1.preview.story.yml
rename to components/grid_row_1/stories/grid_row_1.preview.story.yml
diff --git a/components/grid_row_2/grid_row_2.preview.story.yml b/components/grid_row_2/stories/grid_row_2.preview.story.yml
similarity index 100%
rename from components/grid_row_2/grid_row_2.preview.story.yml
rename to components/grid_row_2/stories/grid_row_2.preview.story.yml
diff --git a/components/grid_row_3/grid_row_3.preview.story.yml b/components/grid_row_3/stories/grid_row_3.preview.story.yml
similarity index 100%
rename from components/grid_row_3/grid_row_3.preview.story.yml
rename to components/grid_row_3/stories/grid_row_3.preview.story.yml
diff --git a/components/grid_row_4/grid_row_4.preview.story.yml b/components/grid_row_4/stories/grid_row_4.preview.story.yml
similarity index 100%
rename from components/grid_row_4/grid_row_4.preview.story.yml
rename to components/grid_row_4/stories/grid_row_4.preview.story.yml
diff --git a/components/list/list.default_ol.story.yml b/components/list/stories/list.default_ol.story.yml
similarity index 100%
rename from components/list/list.default_ol.story.yml
rename to components/list/stories/list.default_ol.story.yml
diff --git a/components/list/list.default_ul.story.yml b/components/list/stories/list.default_ul.story.yml
similarity index 100%
rename from components/list/list.default_ul.story.yml
rename to components/list/stories/list.default_ul.story.yml
diff --git a/components/list/list.inline.story.yml b/components/list/stories/list.inline.story.yml
similarity index 100%
rename from components/list/list.inline.story.yml
rename to components/list/stories/list.inline.story.yml
diff --git a/components/list/list.unstyled.story.yml b/components/list/stories/list.unstyled.story.yml
similarity index 100%
rename from components/list/list.unstyled.story.yml
rename to components/list/stories/list.unstyled.story.yml
diff --git a/components/list_group/list_group.badge.story.yml b/components/list_group/stories/list_group.badge.story.yml
similarity index 100%
rename from components/list_group/list_group.badge.story.yml
rename to components/list_group/stories/list_group.badge.story.yml
diff --git a/components/list_group/list_group.color.story.yml b/components/list_group/stories/list_group.color.story.yml
similarity index 100%
rename from components/list_group/list_group.color.story.yml
rename to components/list_group/stories/list_group.color.story.yml
diff --git a/components/list_group/list_group.color_link.story.yml b/components/list_group/stories/list_group.color_link.story.yml
similarity index 100%
rename from components/list_group/list_group.color_link.story.yml
rename to components/list_group/stories/list_group.color_link.story.yml
diff --git a/components/list_group/list_group.color_link_active.story.yml b/components/list_group/stories/list_group.color_link_active.story.yml
similarity index 100%
rename from components/list_group/list_group.color_link_active.story.yml
rename to components/list_group/stories/list_group.color_link_active.story.yml
diff --git a/components/list_group/list_group.color_link_disabled.story.yml b/components/list_group/stories/list_group.color_link_disabled.story.yml
similarity index 100%
rename from components/list_group/list_group.color_link_disabled.story.yml
rename to components/list_group/stories/list_group.color_link_disabled.story.yml
diff --git a/components/list_group/list_group.custom_content_1.story.yml b/components/list_group/stories/list_group.custom_content_1.story.yml
similarity index 100%
rename from components/list_group/list_group.custom_content_1.story.yml
rename to components/list_group/stories/list_group.custom_content_1.story.yml
diff --git a/components/list_group/list_group.custom_content_2.story.yml b/components/list_group/stories/list_group.custom_content_2.story.yml
similarity index 100%
rename from components/list_group/list_group.custom_content_2.story.yml
rename to components/list_group/stories/list_group.custom_content_2.story.yml
diff --git a/components/list_group/list_group.default.story.yml b/components/list_group/stories/list_group.default.story.yml
similarity index 100%
rename from components/list_group/list_group.default.story.yml
rename to components/list_group/stories/list_group.default.story.yml
diff --git a/components/list_group/list_group.links.story.yml b/components/list_group/stories/list_group.links.story.yml
similarity index 100%
rename from components/list_group/list_group.links.story.yml
rename to components/list_group/stories/list_group.links.story.yml
diff --git a/components/list_group/list_group.state.story.yml b/components/list_group/stories/list_group.state.story.yml
similarity index 100%
rename from components/list_group/list_group.state.story.yml
rename to components/list_group/stories/list_group.state.story.yml
diff --git a/components/modal/modal.default.story.yml b/components/modal/stories/modal.default.story.yml
similarity index 100%
rename from components/modal/modal.default.story.yml
rename to components/modal/stories/modal.default.story.yml
diff --git a/components/modal/modal.fullscreen.story.yml b/components/modal/stories/modal.fullscreen.story.yml
similarity index 100%
rename from components/modal/modal.fullscreen.story.yml
rename to components/modal/stories/modal.fullscreen.story.yml
diff --git a/components/modal/modal.long_content_default.story.yml b/components/modal/stories/modal.long_content_default.story.yml
similarity index 100%
rename from components/modal/modal.long_content_default.story.yml
rename to components/modal/stories/modal.long_content_default.story.yml
diff --git a/components/modal/modal.long_content_scrollable.story.yml b/components/modal/stories/modal.long_content_scrollable.story.yml
similarity index 100%
rename from components/modal/modal.long_content_scrollable.story.yml
rename to components/modal/stories/modal.long_content_scrollable.story.yml
diff --git a/components/modal/modal.sizes.story.yml b/components/modal/stories/modal.sizes.story.yml
similarity index 100%
rename from components/modal/modal.sizes.story.yml
rename to components/modal/stories/modal.sizes.story.yml
diff --git a/components/modal/modal.static_backdrop.story.yml b/components/modal/stories/modal.static_backdrop.story.yml
similarity index 100%
rename from components/modal/modal.static_backdrop.story.yml
rename to components/modal/stories/modal.static_backdrop.story.yml
diff --git a/components/modal/modal.vertical_centered.story.yml b/components/modal/stories/modal.vertical_centered.story.yml
similarity index 100%
rename from components/modal/modal.vertical_centered.story.yml
rename to components/modal/stories/modal.vertical_centered.story.yml
diff --git a/components/modal/modal.vertical_centered_scrollable.story.yml b/components/modal/stories/modal.vertical_centered_scrollable.story.yml
similarity index 100%
rename from components/modal/modal.vertical_centered_scrollable.story.yml
rename to components/modal/stories/modal.vertical_centered_scrollable.story.yml
diff --git a/components/nav/nav.alignment_center.story.yml b/components/nav/stories/nav.alignment_center.story.yml
similarity index 100%
rename from components/nav/nav.alignment_center.story.yml
rename to components/nav/stories/nav.alignment_center.story.yml
diff --git a/components/nav/nav.alignment_end.story.yml b/components/nav/stories/nav.alignment_end.story.yml
similarity index 100%
rename from components/nav/nav.alignment_end.story.yml
rename to components/nav/stories/nav.alignment_end.story.yml
diff --git a/components/nav/nav.alignment_vertical.story.yml b/components/nav/stories/nav.alignment_vertical.story.yml
similarity index 100%
rename from components/nav/nav.alignment_vertical.story.yml
rename to components/nav/stories/nav.alignment_vertical.story.yml
diff --git a/components/nav/nav.custom_content.story.yml b/components/nav/stories/nav.custom_content.story.yml
similarity index 100%
rename from components/nav/nav.custom_content.story.yml
rename to components/nav/stories/nav.custom_content.story.yml
diff --git a/components/nav/nav.custom_content_vertical.story.yml b/components/nav/stories/nav.custom_content_vertical.story.yml
similarity index 100%
rename from components/nav/nav.custom_content_vertical.story.yml
rename to components/nav/stories/nav.custom_content_vertical.story.yml
diff --git a/components/nav/nav.preview.story.yml b/components/nav/stories/nav.preview.story.yml
similarity index 100%
rename from components/nav/nav.preview.story.yml
rename to components/nav/stories/nav.preview.story.yml
diff --git a/components/navbar/navbar.brand_image.story.yml b/components/navbar/stories/navbar.brand_image.story.yml
similarity index 100%
rename from components/navbar/navbar.brand_image.story.yml
rename to components/navbar/stories/navbar.brand_image.story.yml
diff --git a/components/navbar/navbar.brand_image_text.story.yml b/components/navbar/stories/navbar.brand_image_text.story.yml
similarity index 100%
rename from components/navbar/navbar.brand_image_text.story.yml
rename to components/navbar/stories/navbar.brand_image_text.story.yml
diff --git a/components/navbar/navbar.brand_text.story.yml b/components/navbar/stories/navbar.brand_text.story.yml
similarity index 100%
rename from components/navbar/navbar.brand_text.story.yml
rename to components/navbar/stories/navbar.brand_text.story.yml
diff --git a/components/navbar/navbar.color.story.yml b/components/navbar/stories/navbar.color.story.yml
similarity index 100%
rename from components/navbar/navbar.color.story.yml
rename to components/navbar/stories/navbar.color.story.yml
diff --git a/components/navbar/navbar.dark.story.yml b/components/navbar/stories/navbar.dark.story.yml
similarity index 100%
rename from components/navbar/navbar.dark.story.yml
rename to components/navbar/stories/navbar.dark.story.yml
diff --git a/components/navbar/navbar.default.story.yml b/components/navbar/stories/navbar.default.story.yml
similarity index 100%
rename from components/navbar/navbar.default.story.yml
rename to components/navbar/stories/navbar.default.story.yml
diff --git a/components/navbar/navbar.external_content.story.yml b/components/navbar/stories/navbar.external_content.story.yml
similarity index 100%
rename from components/navbar/navbar.external_content.story.yml
rename to components/navbar/stories/navbar.external_content.story.yml
diff --git a/components/navbar/navbar.offcanvas.story.yml b/components/navbar/stories/navbar.offcanvas.story.yml
similarity index 100%
rename from components/navbar/navbar.offcanvas.story.yml
rename to components/navbar/stories/navbar.offcanvas.story.yml
diff --git a/components/navbar/navbar.offcanvas_dark.story.yml b/components/navbar/stories/navbar.offcanvas_dark.story.yml
similarity index 100%
rename from components/navbar/navbar.offcanvas_dark.story.yml
rename to components/navbar/stories/navbar.offcanvas_dark.story.yml
diff --git a/components/navbar/navbar.responsive.story.yml b/components/navbar/stories/navbar.responsive.story.yml
similarity index 100%
rename from components/navbar/navbar.responsive.story.yml
rename to components/navbar/stories/navbar.responsive.story.yml
diff --git a/components/navbar/navbar.responsive_hidden_brand.story.yml b/components/navbar/stories/navbar.responsive_hidden_brand.story.yml
similarity index 100%
rename from components/navbar/navbar.responsive_hidden_brand.story.yml
rename to components/navbar/stories/navbar.responsive_hidden_brand.story.yml
diff --git a/components/navbar/navbar.responsive_toggler_start.story.yml b/components/navbar/stories/navbar.responsive_toggler_start.story.yml
similarity index 100%
rename from components/navbar/navbar.responsive_toggler_start.story.yml
rename to components/navbar/stories/navbar.responsive_toggler_start.story.yml
diff --git a/components/navbar/navbar.scrolling.story.yml b/components/navbar/stories/navbar.scrolling.story.yml
similarity index 100%
rename from components/navbar/navbar.scrolling.story.yml
rename to components/navbar/stories/navbar.scrolling.story.yml
diff --git a/components/navbar/navbar.text.story.yml b/components/navbar/stories/navbar.text.story.yml
similarity index 100%
rename from components/navbar/navbar.text.story.yml
rename to components/navbar/stories/navbar.text.story.yml
diff --git a/components/navbar/navbar.text_collapsible.story.yml b/components/navbar/stories/navbar.text_collapsible.story.yml
similarity index 100%
rename from components/navbar/navbar.text_collapsible.story.yml
rename to components/navbar/stories/navbar.text_collapsible.story.yml
diff --git a/components/offcanvas/offcanvas.body_scrolling.story.yml b/components/offcanvas/stories/offcanvas.body_scrolling.story.yml
similarity index 100%
rename from components/offcanvas/offcanvas.body_scrolling.story.yml
rename to components/offcanvas/stories/offcanvas.body_scrolling.story.yml
diff --git a/components/offcanvas/offcanvas.body_scrolling_backdrop.story.yml b/components/offcanvas/stories/offcanvas.body_scrolling_backdrop.story.yml
similarity index 100%
rename from components/offcanvas/offcanvas.body_scrolling_backdrop.story.yml
rename to components/offcanvas/stories/offcanvas.body_scrolling_backdrop.story.yml
diff --git a/components/offcanvas/offcanvas.dark.story.yml b/components/offcanvas/stories/offcanvas.dark.story.yml
similarity index 100%
rename from components/offcanvas/offcanvas.dark.story.yml
rename to components/offcanvas/stories/offcanvas.dark.story.yml
diff --git a/components/offcanvas/offcanvas.default.story.yml b/components/offcanvas/stories/offcanvas.default.story.yml
similarity index 100%
rename from components/offcanvas/offcanvas.default.story.yml
rename to components/offcanvas/stories/offcanvas.default.story.yml
diff --git a/components/offcanvas/offcanvas.placement.story.yml b/components/offcanvas/stories/offcanvas.placement.story.yml
similarity index 100%
rename from components/offcanvas/offcanvas.placement.story.yml
rename to components/offcanvas/stories/offcanvas.placement.story.yml
diff --git a/components/offcanvas/offcanvas.responsive.story.yml b/components/offcanvas/stories/offcanvas.responsive.story.yml
similarity index 100%
rename from components/offcanvas/offcanvas.responsive.story.yml
rename to components/offcanvas/stories/offcanvas.responsive.story.yml
diff --git a/components/offcanvas/offcanvas.static_backdrop.story.yml b/components/offcanvas/stories/offcanvas.static_backdrop.story.yml
similarity index 100%
rename from components/offcanvas/offcanvas.static_backdrop.story.yml
rename to components/offcanvas/stories/offcanvas.static_backdrop.story.yml
diff --git a/components/pagination/pagination.alignment_center.story.yml b/components/pagination/stories/pagination.alignment_center.story.yml
similarity index 100%
rename from components/pagination/pagination.alignment_center.story.yml
rename to components/pagination/stories/pagination.alignment_center.story.yml
diff --git a/components/pagination/pagination.alignment_end.story.yml b/components/pagination/stories/pagination.alignment_end.story.yml
similarity index 100%
rename from components/pagination/pagination.alignment_end.story.yml
rename to components/pagination/stories/pagination.alignment_end.story.yml
diff --git a/components/pagination/pagination.default.story.yml b/components/pagination/stories/pagination.default.story.yml
similarity index 100%
rename from components/pagination/pagination.default.story.yml
rename to components/pagination/stories/pagination.default.story.yml
diff --git a/components/pagination/pagination.sizing_large.story.yml b/components/pagination/stories/pagination.sizing_large.story.yml
similarity index 100%
rename from components/pagination/pagination.sizing_large.story.yml
rename to components/pagination/stories/pagination.sizing_large.story.yml
diff --git a/components/pagination/pagination.sizing_small.story.yml b/components/pagination/stories/pagination.sizing_small.story.yml
similarity index 100%
rename from components/pagination/pagination.sizing_small.story.yml
rename to components/pagination/stories/pagination.sizing_small.story.yml
diff --git a/components/pagination/pagination.states.story.yml b/components/pagination/stories/pagination.states.story.yml
similarity index 100%
rename from components/pagination/pagination.states.story.yml
rename to components/pagination/stories/pagination.states.story.yml
diff --git a/components/progress/progress.background.story.yml b/components/progress/stories/progress.background.story.yml
similarity index 100%
rename from components/progress/progress.background.story.yml
rename to components/progress/stories/progress.background.story.yml
diff --git a/components/progress/progress.background_with_label.story.yml b/components/progress/stories/progress.background_with_label.story.yml
similarity index 100%
rename from components/progress/progress.background_with_label.story.yml
rename to components/progress/stories/progress.background_with_label.story.yml
diff --git a/components/progress/progress.default.story.yml b/components/progress/stories/progress.default.story.yml
similarity index 100%
rename from components/progress/progress.default.story.yml
rename to components/progress/stories/progress.default.story.yml
diff --git a/components/progress/progress.height_1.story.yml b/components/progress/stories/progress.height_1.story.yml
similarity index 100%
rename from components/progress/progress.height_1.story.yml
rename to components/progress/stories/progress.height_1.story.yml
diff --git a/components/progress/progress.height_20.story.yml b/components/progress/stories/progress.height_20.story.yml
similarity index 100%
rename from components/progress/progress.height_20.story.yml
rename to components/progress/stories/progress.height_20.story.yml
diff --git a/components/progress/progress.label.story.yml b/components/progress/stories/progress.label.story.yml
similarity index 100%
rename from components/progress/progress.label.story.yml
rename to components/progress/stories/progress.label.story.yml
diff --git a/components/progress/progress.label_long.story.yml b/components/progress/stories/progress.label_long.story.yml
similarity index 100%
rename from components/progress/progress.label_long.story.yml
rename to components/progress/stories/progress.label_long.story.yml
diff --git a/components/progress_stacked/progress_stacked.default.story.yml b/components/progress_stacked/stories/progress_stacked.default.story.yml
similarity index 100%
rename from components/progress_stacked/progress_stacked.default.story.yml
rename to components/progress_stacked/stories/progress_stacked.default.story.yml
diff --git a/components/spinner/spinner.buttons.story.yml b/components/spinner/stories/spinner.buttons.story.yml
similarity index 100%
rename from components/spinner/spinner.buttons.story.yml
rename to components/spinner/stories/spinner.buttons.story.yml
diff --git a/components/spinner/spinner.color.story.yml b/components/spinner/stories/spinner.color.story.yml
similarity index 100%
rename from components/spinner/spinner.color.story.yml
rename to components/spinner/stories/spinner.color.story.yml
diff --git a/components/spinner/spinner.default.story.yml b/components/spinner/stories/spinner.default.story.yml
similarity index 100%
rename from components/spinner/spinner.default.story.yml
rename to components/spinner/stories/spinner.default.story.yml
diff --git a/components/spinner/spinner.margin.story.yml b/components/spinner/stories/spinner.margin.story.yml
similarity index 100%
rename from components/spinner/spinner.margin.story.yml
rename to components/spinner/stories/spinner.margin.story.yml
diff --git a/components/spinner/spinner.placement_flex.story.yml b/components/spinner/stories/spinner.placement_flex.story.yml
similarity index 100%
rename from components/spinner/spinner.placement_flex.story.yml
rename to components/spinner/stories/spinner.placement_flex.story.yml
diff --git a/components/spinner/spinner.placement_flex_2.story.yml b/components/spinner/stories/spinner.placement_flex_2.story.yml
similarity index 100%
rename from components/spinner/spinner.placement_flex_2.story.yml
rename to components/spinner/stories/spinner.placement_flex_2.story.yml
diff --git a/components/spinner/spinner.placement_float.story.yml b/components/spinner/stories/spinner.placement_float.story.yml
similarity index 100%
rename from components/spinner/spinner.placement_float.story.yml
rename to components/spinner/stories/spinner.placement_float.story.yml
diff --git a/components/spinner/spinner.placement_text.story.yml b/components/spinner/stories/spinner.placement_text.story.yml
similarity index 100%
rename from components/spinner/spinner.placement_text.story.yml
rename to components/spinner/stories/spinner.placement_text.story.yml
diff --git a/components/table/table.preview.story.yml b/components/table/stories/table.preview.story.yml
similarity index 100%
rename from components/table/table.preview.story.yml
rename to components/table/stories/table.preview.story.yml
diff --git a/components/table_cell/table_cell.preview.story.yml b/components/table_cell/stories/table_cell.preview.story.yml
similarity index 100%
rename from components/table_cell/table_cell.preview.story.yml
rename to components/table_cell/stories/table_cell.preview.story.yml
diff --git a/components/table_row/table_row.preview.story.yml b/components/table_row/stories/table_row.preview.story.yml
similarity index 100%
rename from components/table_row/table_row.preview.story.yml
rename to components/table_row/stories/table_row.preview.story.yml
diff --git a/components/toast/toast.basic.story.yml b/components/toast/stories/toast.basic.story.yml
similarity index 100%
rename from components/toast/toast.basic.story.yml
rename to components/toast/stories/toast.basic.story.yml
diff --git a/components/toast/toast.color.story.yml b/components/toast/stories/toast.color.story.yml
similarity index 100%
rename from components/toast/toast.color.story.yml
rename to components/toast/stories/toast.color.story.yml
diff --git a/components/toast/toast.custom_content.story.yml b/components/toast/stories/toast.custom_content.story.yml
similarity index 100%
rename from components/toast/toast.custom_content.story.yml
rename to components/toast/stories/toast.custom_content.story.yml
diff --git a/components/toast/toast.custom_content_control.story.yml b/components/toast/stories/toast.custom_content_control.story.yml
similarity index 100%
rename from components/toast/toast.custom_content_control.story.yml
rename to components/toast/stories/toast.custom_content_control.story.yml
diff --git a/components/toast/toast.translucent.story.yml b/components/toast/stories/toast.translucent.story.yml
similarity index 100%
rename from components/toast/toast.translucent.story.yml
rename to components/toast/stories/toast.translucent.story.yml
diff --git a/components/toast_container/toast_container.preview.story.yml b/components/toast_container/stories/toast_container.preview.story.yml
similarity index 100%
rename from components/toast_container/toast_container.preview.story.yml
rename to components/toast_container/stories/toast_container.preview.story.yml
--
GitLab
From 5789508f3c7c302f38e0c5b4ef65ebd1cd4c44dd Mon Sep 17 00:00:00 2001
From: Florent Torregrosa <florent.torregrosa@gmail.com>
Date: Wed, 12 Mar 2025 11:04:52 +0100
Subject: [PATCH 12/15] Issue #3485834 by grimreaper: table
---
.../stories/table.accented_active.story.yml | 126 +++
.../table.accented_hoverable_rows.story.yml | 124 +++
.../table.accented_striped_columns.story.yml | 126 +++
.../table.accented_striped_rows.story.yml | 126 +++
....accented_striped_rows_hoverable.story.yml | 112 ++
.../table/stories/table.anatomy.story.yml | 156 +++
.../stories/table.anatomy_caption.story.yml | 110 ++
.../table.anatomy_caption_top.story.yml | 112 ++
.../table/stories/table.bordered.story.yml | 132 +++
.../table/stories/table.borderless.story.yml | 124 +++
.../table/stories/table.colors_cell.story.yml | 226 +++++
.../table/stories/table.colors_row.story.yml | 226 +++++
.../stories/table.colors_table.story.yml | 72 ++
.../table/stories/table.default.story.yml | 109 ++
.../table/stories/table.nesting.story.yml | 193 ++++
.../table/stories/table.preview.story.yml | 959 ------------------
.../table/stories/table.responsive.story.yml | 472 +++++++++
.../table/stories/table.small.story.yml | 123 +++
.../table.table_group_dividers.story.yml | 134 +++
.../table.vertical_alignment.story.yml | 118 +++
.../stories/table_cell.preview.story.yml | 6 -
.../stories/table_row.preview.story.yml | 3 -
22 files changed, 2921 insertions(+), 968 deletions(-)
create mode 100644 components/table/stories/table.accented_active.story.yml
create mode 100644 components/table/stories/table.accented_hoverable_rows.story.yml
create mode 100644 components/table/stories/table.accented_striped_columns.story.yml
create mode 100644 components/table/stories/table.accented_striped_rows.story.yml
create mode 100644 components/table/stories/table.accented_striped_rows_hoverable.story.yml
create mode 100644 components/table/stories/table.anatomy.story.yml
create mode 100644 components/table/stories/table.anatomy_caption.story.yml
create mode 100644 components/table/stories/table.anatomy_caption_top.story.yml
create mode 100644 components/table/stories/table.bordered.story.yml
create mode 100644 components/table/stories/table.borderless.story.yml
create mode 100644 components/table/stories/table.colors_cell.story.yml
create mode 100644 components/table/stories/table.colors_row.story.yml
create mode 100644 components/table/stories/table.colors_table.story.yml
create mode 100644 components/table/stories/table.default.story.yml
create mode 100644 components/table/stories/table.nesting.story.yml
delete mode 100644 components/table/stories/table.preview.story.yml
create mode 100644 components/table/stories/table.responsive.story.yml
create mode 100644 components/table/stories/table.small.story.yml
create mode 100644 components/table/stories/table.table_group_dividers.story.yml
create mode 100644 components/table/stories/table.vertical_alignment.story.yml
delete mode 100644 components/table_cell/stories/table_cell.preview.story.yml
delete mode 100644 components/table_row/stories/table_row.preview.story.yml
diff --git a/components/table/stories/table.accented_active.story.yml b/components/table/stories/table.accented_active.story.yml
new file mode 100644
index 00000000..a663b4cd
--- /dev/null
+++ b/components/table/stories/table.accented_active.story.yml
@@ -0,0 +1,126 @@
+name: "Accented tables: active tables"
+slots:
+ header:
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "#"
+ props:
+ tag: th
+ attributes:
+ scope: col
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "First"
+ props:
+ tag: th
+ attributes:
+ scope: col
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Last"
+ props:
+ tag: th
+ attributes:
+ scope: col
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Handle"
+ props:
+ tag: th
+ attributes:
+ scope: col
+ rows:
+ - type: component
+ component: "ui_suite_bootstrap:table_row"
+ props:
+ active: true
+ slots:
+ cells:
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "1"
+ props:
+ tag: th
+ attributes:
+ scope: row
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Mark"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Otto"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "@mdo"
+ - type: component
+ component: "ui_suite_bootstrap:table_row"
+ slots:
+ cells:
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "2"
+ props:
+ tag: th
+ attributes:
+ scope: row
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Jacob"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Thornton"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "@fat"
+ - type: component
+ component: "ui_suite_bootstrap:table_row"
+ slots:
+ cells:
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "3"
+ props:
+ tag: th
+ attributes:
+ scope: row
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Larry the Bird"
+ props:
+ attributes:
+ colspan: 2
+ active: true
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "@twitter"
+props:
+ variant: default
+library_wrapper: >
+ {% set examples = [
+ 'default',
+ 'dark',
+ ] %}
+
+ {% for example in examples %}
+ {% set example_props = {'#props': _story['#props']|merge({
+ 'variant': example,
+ })} %}
+
+ {% set example_story = _story %}
+ {{ example_story|merge(example_props) }}
+ {% endfor %}
diff --git a/components/table/stories/table.accented_hoverable_rows.story.yml b/components/table/stories/table.accented_hoverable_rows.story.yml
new file mode 100644
index 00000000..d3c7e72f
--- /dev/null
+++ b/components/table/stories/table.accented_hoverable_rows.story.yml
@@ -0,0 +1,124 @@
+name: "Accented tables: hoverable rows"
+slots:
+ header:
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "#"
+ props:
+ tag: th
+ attributes:
+ scope: col
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "First"
+ props:
+ tag: th
+ attributes:
+ scope: col
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Last"
+ props:
+ tag: th
+ attributes:
+ scope: col
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Handle"
+ props:
+ tag: th
+ attributes:
+ scope: col
+ rows:
+ - type: component
+ component: "ui_suite_bootstrap:table_row"
+ slots:
+ cells:
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "1"
+ props:
+ tag: th
+ attributes:
+ scope: row
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Mark"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Otto"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "@mdo"
+ - type: component
+ component: "ui_suite_bootstrap:table_row"
+ slots:
+ cells:
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "2"
+ props:
+ tag: th
+ attributes:
+ scope: row
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Jacob"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Thornton"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "@fat"
+ - type: component
+ component: "ui_suite_bootstrap:table_row"
+ slots:
+ cells:
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "3"
+ props:
+ tag: th
+ attributes:
+ scope: row
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Larry the Bird"
+ props:
+ attributes:
+ colspan: 2
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "@twitter"
+props:
+ variant: default
+ hover: true
+library_wrapper: >
+ {% set examples = [
+ 'default',
+ 'dark',
+ ] %}
+
+ {% for example in examples %}
+ {% set example_props = {'#props': _story['#props']|merge({
+ 'variant': example,
+ })} %}
+
+ {% set example_story = _story %}
+ {{ example_story|merge(example_props) }}
+ {% endfor %}
diff --git a/components/table/stories/table.accented_striped_columns.story.yml b/components/table/stories/table.accented_striped_columns.story.yml
new file mode 100644
index 00000000..86a7f34c
--- /dev/null
+++ b/components/table/stories/table.accented_striped_columns.story.yml
@@ -0,0 +1,126 @@
+name: "Accented tables: striped columns"
+slots:
+ header:
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "#"
+ props:
+ tag: th
+ attributes:
+ scope: col
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "First"
+ props:
+ tag: th
+ attributes:
+ scope: col
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Last"
+ props:
+ tag: th
+ attributes:
+ scope: col
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Handle"
+ props:
+ tag: th
+ attributes:
+ scope: col
+ rows:
+ - type: component
+ component: "ui_suite_bootstrap:table_row"
+ slots:
+ cells:
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "1"
+ props:
+ tag: th
+ attributes:
+ scope: row
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Mark"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Otto"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "@mdo"
+ - type: component
+ component: "ui_suite_bootstrap:table_row"
+ slots:
+ cells:
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "2"
+ props:
+ tag: th
+ attributes:
+ scope: row
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Jacob"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Thornton"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "@fat"
+ - type: component
+ component: "ui_suite_bootstrap:table_row"
+ slots:
+ cells:
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "3"
+ props:
+ tag: th
+ attributes:
+ scope: row
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Larry the Bird"
+ props:
+ attributes:
+ colspan: 2
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "@twitter"
+props:
+ variant: default
+ stripes:
+ - striped-columns
+library_wrapper: >
+ {% set examples = [
+ 'default',
+ 'dark',
+ 'success',
+ ] %}
+
+ {% for example in examples %}
+ {% set example_props = {'#props': _story['#props']|merge({
+ 'variant': example,
+ })} %}
+
+ {% set example_story = _story %}
+ {{ example_story|merge(example_props) }}
+ {% endfor %}
diff --git a/components/table/stories/table.accented_striped_rows.story.yml b/components/table/stories/table.accented_striped_rows.story.yml
new file mode 100644
index 00000000..5653533d
--- /dev/null
+++ b/components/table/stories/table.accented_striped_rows.story.yml
@@ -0,0 +1,126 @@
+name: "Accented tables: striped rows"
+slots:
+ header:
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "#"
+ props:
+ tag: th
+ attributes:
+ scope: col
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "First"
+ props:
+ tag: th
+ attributes:
+ scope: col
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Last"
+ props:
+ tag: th
+ attributes:
+ scope: col
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Handle"
+ props:
+ tag: th
+ attributes:
+ scope: col
+ rows:
+ - type: component
+ component: "ui_suite_bootstrap:table_row"
+ slots:
+ cells:
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "1"
+ props:
+ tag: th
+ attributes:
+ scope: row
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Mark"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Otto"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "@mdo"
+ - type: component
+ component: "ui_suite_bootstrap:table_row"
+ slots:
+ cells:
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "2"
+ props:
+ tag: th
+ attributes:
+ scope: row
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Jacob"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Thornton"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "@fat"
+ - type: component
+ component: "ui_suite_bootstrap:table_row"
+ slots:
+ cells:
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "3"
+ props:
+ tag: th
+ attributes:
+ scope: row
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Larry the Bird"
+ props:
+ attributes:
+ colspan: 2
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "@twitter"
+props:
+ variant: default
+ stripes:
+ - striped
+library_wrapper: >
+ {% set examples = [
+ 'default',
+ 'dark',
+ 'success',
+ ] %}
+
+ {% for example in examples %}
+ {% set example_props = {'#props': _story['#props']|merge({
+ 'variant': example,
+ })} %}
+
+ {% set example_story = _story %}
+ {{ example_story|merge(example_props) }}
+ {% endfor %}
diff --git a/components/table/stories/table.accented_striped_rows_hoverable.story.yml b/components/table/stories/table.accented_striped_rows_hoverable.story.yml
new file mode 100644
index 00000000..b43bb4e2
--- /dev/null
+++ b/components/table/stories/table.accented_striped_rows_hoverable.story.yml
@@ -0,0 +1,112 @@
+name: "Accented tables: hoverable striped rows"
+slots:
+ header:
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "#"
+ props:
+ tag: th
+ attributes:
+ scope: col
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "First"
+ props:
+ tag: th
+ attributes:
+ scope: col
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Last"
+ props:
+ tag: th
+ attributes:
+ scope: col
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Handle"
+ props:
+ tag: th
+ attributes:
+ scope: col
+ rows:
+ - type: component
+ component: "ui_suite_bootstrap:table_row"
+ slots:
+ cells:
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "1"
+ props:
+ tag: th
+ attributes:
+ scope: row
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Mark"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Otto"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "@mdo"
+ - type: component
+ component: "ui_suite_bootstrap:table_row"
+ slots:
+ cells:
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "2"
+ props:
+ tag: th
+ attributes:
+ scope: row
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Jacob"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Thornton"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "@fat"
+ - type: component
+ component: "ui_suite_bootstrap:table_row"
+ slots:
+ cells:
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "3"
+ props:
+ tag: th
+ attributes:
+ scope: row
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Larry the Bird"
+ props:
+ attributes:
+ colspan: 2
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "@twitter"
+props:
+ variant: default
+ stripes:
+ - striped
+ hover: true
diff --git a/components/table/stories/table.anatomy.story.yml b/components/table/stories/table.anatomy.story.yml
new file mode 100644
index 00000000..a833f6ec
--- /dev/null
+++ b/components/table/stories/table.anatomy.story.yml
@@ -0,0 +1,156 @@
+name: "Anatomy: table head and foot"
+slots:
+ header:
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "#"
+ props:
+ tag: th
+ attributes:
+ scope: col
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "First"
+ props:
+ tag: th
+ attributes:
+ scope: col
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Last"
+ props:
+ tag: th
+ attributes:
+ scope: col
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Handle"
+ props:
+ tag: th
+ attributes:
+ scope: col
+ rows:
+ - type: component
+ component: "ui_suite_bootstrap:table_row"
+ slots:
+ cells:
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "1"
+ props:
+ tag: th
+ attributes:
+ scope: row
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Mark"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Otto"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "@mdo"
+ - type: component
+ component: "ui_suite_bootstrap:table_row"
+ slots:
+ cells:
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "2"
+ props:
+ tag: th
+ attributes:
+ scope: row
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Jacob"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Thornton"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "@fat"
+ - type: component
+ component: "ui_suite_bootstrap:table_row"
+ slots:
+ cells:
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "3"
+ props:
+ tag: th
+ attributes:
+ scope: row
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Larry"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "the Bird"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "@twitter"
+ footer:
+ - type: component
+ component: "ui_suite_bootstrap:table_row"
+ slots:
+ cells:
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Footer"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Footer"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Footer"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Footer"
+props:
+ variant: default
+library_wrapper: >
+ {% set example_story = _story %}
+ {{ example_story }}
+
+ {% set examples = [
+ 'primary',
+ 'secondary',
+ 'success',
+ 'danger',
+ 'warning',
+ 'info',
+ 'light',
+ 'dark',
+ ] %}
+
+ {% for example in examples %}
+ {% set example_props = {'#props': _story['#props']|merge({
+ 'header_color': example,
+ 'footer_color': example,
+ })} %}
+
+ {% set example_story = _story %}
+ {{ example_story|merge(example_props) }}
+ {% endfor %}
+
diff --git a/components/table/stories/table.anatomy_caption.story.yml b/components/table/stories/table.anatomy_caption.story.yml
new file mode 100644
index 00000000..f3c5f254
--- /dev/null
+++ b/components/table/stories/table.anatomy_caption.story.yml
@@ -0,0 +1,110 @@
+name: "Anatomy: captions"
+slots:
+ header:
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "#"
+ props:
+ tag: th
+ attributes:
+ scope: col
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "First"
+ props:
+ tag: th
+ attributes:
+ scope: col
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Last"
+ props:
+ tag: th
+ attributes:
+ scope: col
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Handle"
+ props:
+ tag: th
+ attributes:
+ scope: col
+ rows:
+ - type: component
+ component: "ui_suite_bootstrap:table_row"
+ slots:
+ cells:
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "1"
+ props:
+ tag: th
+ attributes:
+ scope: row
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Mark"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Otto"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "@mdo"
+ - type: component
+ component: "ui_suite_bootstrap:table_row"
+ slots:
+ cells:
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "2"
+ props:
+ tag: th
+ attributes:
+ scope: row
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Jacob"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Thornton"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "@fat"
+ - type: component
+ component: "ui_suite_bootstrap:table_row"
+ slots:
+ cells:
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "3"
+ props:
+ tag: th
+ attributes:
+ scope: row
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Larry the Bird"
+ props:
+ attributes:
+ colspan: 2
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "@twitter"
+ caption: "List of users"
+props:
+ variant: default
diff --git a/components/table/stories/table.anatomy_caption_top.story.yml b/components/table/stories/table.anatomy_caption_top.story.yml
new file mode 100644
index 00000000..83f605a8
--- /dev/null
+++ b/components/table/stories/table.anatomy_caption_top.story.yml
@@ -0,0 +1,112 @@
+name: "Anatomy: captions top"
+slots:
+ header:
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "#"
+ props:
+ tag: th
+ attributes:
+ scope: col
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "First"
+ props:
+ tag: th
+ attributes:
+ scope: col
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Last"
+ props:
+ tag: th
+ attributes:
+ scope: col
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Handle"
+ props:
+ tag: th
+ attributes:
+ scope: col
+ rows:
+ - type: component
+ component: "ui_suite_bootstrap:table_row"
+ slots:
+ cells:
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "1"
+ props:
+ tag: th
+ attributes:
+ scope: row
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Mark"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Otto"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "@mdo"
+ - type: component
+ component: "ui_suite_bootstrap:table_row"
+ slots:
+ cells:
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "2"
+ props:
+ tag: th
+ attributes:
+ scope: row
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Jacob"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Thornton"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "@fat"
+ - type: component
+ component: "ui_suite_bootstrap:table_row"
+ slots:
+ cells:
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "3"
+ props:
+ tag: th
+ attributes:
+ scope: row
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Larry"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "the Bird"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "@twitter"
+ caption: "List of users"
+props:
+ variant: default
+ caption_top: true
diff --git a/components/table/stories/table.bordered.story.yml b/components/table/stories/table.bordered.story.yml
new file mode 100644
index 00000000..170df5b0
--- /dev/null
+++ b/components/table/stories/table.bordered.story.yml
@@ -0,0 +1,132 @@
+name: "Table borders: bordered tables"
+slots:
+ header:
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "#"
+ props:
+ tag: th
+ attributes:
+ scope: col
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "First"
+ props:
+ tag: th
+ attributes:
+ scope: col
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Last"
+ props:
+ tag: th
+ attributes:
+ scope: col
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Handle"
+ props:
+ tag: th
+ attributes:
+ scope: col
+ rows:
+ - type: component
+ component: "ui_suite_bootstrap:table_row"
+ slots:
+ cells:
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "1"
+ props:
+ tag: th
+ attributes:
+ scope: row
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Mark"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Otto"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "@mdo"
+ - type: component
+ component: "ui_suite_bootstrap:table_row"
+ slots:
+ cells:
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "2"
+ props:
+ tag: th
+ attributes:
+ scope: row
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Jacob"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Thornton"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "@fat"
+ - type: component
+ component: "ui_suite_bootstrap:table_row"
+ slots:
+ cells:
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "3"
+ props:
+ tag: th
+ attributes:
+ scope: row
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Larry the Bird"
+ props:
+ attributes:
+ colspan: 2
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "@twitter"
+props:
+ variant: default
+ borders: bordered
+library_wrapper: >
+ {% set example_story = _story %}
+ {{ example_story }}
+
+ {% set examples = [
+ 'primary',
+ 'secondary',
+ 'success',
+ 'danger',
+ 'warning',
+ 'info',
+ 'light',
+ 'dark',
+ ] %}
+ {% for example in examples %}
+ {% set example_props = {'#props': _story['#props']|merge({'attributes': create_attribute({
+ class: ['border-' ~ example]
+ })})} %}
+
+ {% set example_story = _story %}
+ {{ example_story|merge(example_props) }}
+ {% endfor %}
diff --git a/components/table/stories/table.borderless.story.yml b/components/table/stories/table.borderless.story.yml
new file mode 100644
index 00000000..ad333de1
--- /dev/null
+++ b/components/table/stories/table.borderless.story.yml
@@ -0,0 +1,124 @@
+name: "Table borders: tables without borders"
+slots:
+ header:
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "#"
+ props:
+ tag: th
+ attributes:
+ scope: col
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "First"
+ props:
+ tag: th
+ attributes:
+ scope: col
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Last"
+ props:
+ tag: th
+ attributes:
+ scope: col
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Handle"
+ props:
+ tag: th
+ attributes:
+ scope: col
+ rows:
+ - type: component
+ component: "ui_suite_bootstrap:table_row"
+ slots:
+ cells:
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "1"
+ props:
+ tag: th
+ attributes:
+ scope: row
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Mark"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Otto"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "@mdo"
+ - type: component
+ component: "ui_suite_bootstrap:table_row"
+ slots:
+ cells:
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "2"
+ props:
+ tag: th
+ attributes:
+ scope: row
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Jacob"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Thornton"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "@fat"
+ - type: component
+ component: "ui_suite_bootstrap:table_row"
+ slots:
+ cells:
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "3"
+ props:
+ tag: th
+ attributes:
+ scope: row
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Larry the Bird"
+ props:
+ attributes:
+ colspan: 2
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "@twitter"
+props:
+ variant: default
+ borders: borderless
+library_wrapper: >
+ {% set examples = [
+ 'default',
+ 'dark',
+ ] %}
+
+ {% for example in examples %}
+ {% set example_props = {'#props': _story['#props']|merge({
+ 'variant': example,
+ })} %}
+
+ {% set example_story = _story %}
+ {{ example_story|merge(example_props) }}
+ {% endfor %}
diff --git a/components/table/stories/table.colors_cell.story.yml b/components/table/stories/table.colors_cell.story.yml
new file mode 100644
index 00000000..6a1500d6
--- /dev/null
+++ b/components/table/stories/table.colors_cell.story.yml
@@ -0,0 +1,226 @@
+name: "Variants: color on cell"
+slots:
+ header:
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Class"
+ props:
+ tag: th
+ attributes:
+ scope: col
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Heading"
+ props:
+ tag: th
+ attributes:
+ scope: col
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Heading"
+ props:
+ tag: th
+ attributes:
+ scope: col
+ rows:
+ - type: component
+ component: "ui_suite_bootstrap:table_row"
+ slots:
+ cells:
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Default"
+ props:
+ tag: th
+ attributes:
+ scope: row
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Cell"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Cell"
+ - type: component
+ component: "ui_suite_bootstrap:table_row"
+ slots:
+ cells:
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Primary"
+ props:
+ tag: th
+ attributes:
+ scope: row
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Cell"
+ props:
+ color: primary
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Cell"
+ - type: component
+ component: "ui_suite_bootstrap:table_row"
+ slots:
+ cells:
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Secondary"
+ props:
+ tag: th
+ attributes:
+ scope: row
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Cell"
+ props:
+ color: secondary
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Cell"
+ - type: component
+ component: "ui_suite_bootstrap:table_row"
+ slots:
+ cells:
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Success"
+ props:
+ tag: th
+ attributes:
+ scope: row
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Cell"
+ props:
+ color: success
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Cell"
+ - type: component
+ component: "ui_suite_bootstrap:table_row"
+ slots:
+ cells:
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Danger"
+ props:
+ tag: th
+ attributes:
+ scope: row
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Cell"
+ props:
+ color: danger
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Cell"
+ - type: component
+ component: "ui_suite_bootstrap:table_row"
+ slots:
+ cells:
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Warning"
+ props:
+ tag: th
+ attributes:
+ scope: row
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Cell"
+ props:
+ color: warning
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Cell"
+ - type: component
+ component: "ui_suite_bootstrap:table_row"
+ slots:
+ cells:
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Info"
+ props:
+ tag: th
+ attributes:
+ scope: row
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Cell"
+ props:
+ color: info
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Cell"
+ - type: component
+ component: "ui_suite_bootstrap:table_row"
+ slots:
+ cells:
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Light"
+ props:
+ tag: th
+ attributes:
+ scope: row
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Cell"
+ props:
+ color: light
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Cell"
+ - type: component
+ component: "ui_suite_bootstrap:table_row"
+ slots:
+ cells:
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Dark"
+ props:
+ tag: th
+ attributes:
+ scope: row
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Cell"
+ props:
+ color: dark
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Cell"
+props:
+ variant: default
diff --git a/components/table/stories/table.colors_row.story.yml b/components/table/stories/table.colors_row.story.yml
new file mode 100644
index 00000000..829d179a
--- /dev/null
+++ b/components/table/stories/table.colors_row.story.yml
@@ -0,0 +1,226 @@
+name: "Variants: color on row"
+slots:
+ header:
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Class"
+ props:
+ tag: th
+ attributes:
+ scope: col
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Heading"
+ props:
+ tag: th
+ attributes:
+ scope: col
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Heading"
+ props:
+ tag: th
+ attributes:
+ scope: col
+ rows:
+ - type: component
+ component: "ui_suite_bootstrap:table_row"
+ slots:
+ cells:
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Default"
+ props:
+ tag: th
+ attributes:
+ scope: row
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Cell"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Cell"
+ - type: component
+ component: "ui_suite_bootstrap:table_row"
+ props:
+ color: primary
+ slots:
+ cells:
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Primary"
+ props:
+ tag: th
+ attributes:
+ scope: row
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Cell"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Cell"
+ - type: component
+ component: "ui_suite_bootstrap:table_row"
+ props:
+ color: secondary
+ slots:
+ cells:
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Secondary"
+ props:
+ tag: th
+ attributes:
+ scope: row
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Cell"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Cell"
+ - type: component
+ component: "ui_suite_bootstrap:table_row"
+ props:
+ color: success
+ slots:
+ cells:
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Success"
+ props:
+ tag: th
+ attributes:
+ scope: row
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Cell"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Cell"
+ - type: component
+ component: "ui_suite_bootstrap:table_row"
+ props:
+ color: danger
+ slots:
+ cells:
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Danger"
+ props:
+ tag: th
+ attributes:
+ scope: row
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Cell"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Cell"
+ - type: component
+ component: "ui_suite_bootstrap:table_row"
+ props:
+ color: warning
+ slots:
+ cells:
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Warning"
+ props:
+ tag: th
+ attributes:
+ scope: row
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Cell"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Cell"
+ - type: component
+ component: "ui_suite_bootstrap:table_row"
+ props:
+ color: info
+ slots:
+ cells:
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Info"
+ props:
+ tag: th
+ attributes:
+ scope: row
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Cell"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Cell"
+ - type: component
+ component: "ui_suite_bootstrap:table_row"
+ props:
+ color: light
+ slots:
+ cells:
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Light"
+ props:
+ tag: th
+ attributes:
+ scope: row
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Cell"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Cell"
+ - type: component
+ component: "ui_suite_bootstrap:table_row"
+ props:
+ color: dark
+ slots:
+ cells:
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Dark"
+ props:
+ tag: th
+ attributes:
+ scope: row
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Cell"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Cell"
+props:
+ variant: default
diff --git a/components/table/stories/table.colors_table.story.yml b/components/table/stories/table.colors_table.story.yml
new file mode 100644
index 00000000..ac271538
--- /dev/null
+++ b/components/table/stories/table.colors_table.story.yml
@@ -0,0 +1,72 @@
+name: "Variants: color on table"
+slots:
+ header:
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Heading"
+ props:
+ tag: th
+ attributes:
+ scope: col
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Heading"
+ props:
+ tag: th
+ attributes:
+ scope: col
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Heading"
+ props:
+ tag: th
+ attributes:
+ scope: col
+ rows:
+ - type: component
+ component: "ui_suite_bootstrap:table_row"
+ slots:
+ cells:
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Heading"
+ props:
+ tag: th
+ attributes:
+ scope: row
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Cell"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Cell"
+props:
+ variant: default
+library_wrapper: >
+ {% set examples = [
+ 'default',
+ 'primary',
+ 'secondary',
+ 'success',
+ 'danger',
+ 'warning',
+ 'info',
+ 'light',
+ 'dark',
+ ] %}
+
+ {% for example in examples %}
+ {% set example_props = {'#props': _story['#props']|merge({
+ 'variant': example,
+ })} %}
+
+ {% set example_story = _story %}
+ {{ example_story|merge(example_props) }}
+ {% endfor %}
+
diff --git a/components/table/stories/table.default.story.yml b/components/table/stories/table.default.story.yml
new file mode 100644
index 00000000..75efb417
--- /dev/null
+++ b/components/table/stories/table.default.story.yml
@@ -0,0 +1,109 @@
+name: Default
+slots:
+ header:
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "#"
+ props:
+ tag: th
+ attributes:
+ scope: col
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "First"
+ props:
+ tag: th
+ attributes:
+ scope: col
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Last"
+ props:
+ tag: th
+ attributes:
+ scope: col
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Handle"
+ props:
+ tag: th
+ attributes:
+ scope: col
+ rows:
+ - type: component
+ component: "ui_suite_bootstrap:table_row"
+ slots:
+ cells:
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "1"
+ props:
+ tag: th
+ attributes:
+ scope: row
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Mark"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Otto"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "@mdo"
+ - type: component
+ component: "ui_suite_bootstrap:table_row"
+ slots:
+ cells:
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "2"
+ props:
+ tag: th
+ attributes:
+ scope: row
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Jacob"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Thornton"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "@fat"
+ - type: component
+ component: "ui_suite_bootstrap:table_row"
+ slots:
+ cells:
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "3"
+ props:
+ tag: th
+ attributes:
+ scope: row
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Larry the Bird"
+ props:
+ attributes:
+ colspan: 2
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "@twitter"
+props:
+ variant: default
diff --git a/components/table/stories/table.nesting.story.yml b/components/table/stories/table.nesting.story.yml
new file mode 100644
index 00000000..d45be78d
--- /dev/null
+++ b/components/table/stories/table.nesting.story.yml
@@ -0,0 +1,193 @@
+name: Nesting
+slots:
+ header:
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "#"
+ props:
+ tag: th
+ attributes:
+ scope: col
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "First"
+ props:
+ tag: th
+ attributes:
+ scope: col
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Last"
+ props:
+ tag: th
+ attributes:
+ scope: col
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Handle"
+ props:
+ tag: th
+ attributes:
+ scope: col
+ rows:
+ - type: component
+ component: "ui_suite_bootstrap:table_row"
+ slots:
+ cells:
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "1"
+ props:
+ tag: th
+ attributes:
+ scope: row
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Mark"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Otto"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "@mdo"
+ - type: component
+ component: "ui_suite_bootstrap:table_row"
+ slots:
+ cells:
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ props:
+ attributes:
+ colspan: 4
+ slots:
+ content:
+ - type: component
+ component: "ui_suite_bootstrap:table"
+ props:
+ attributes:
+ class:
+ - mb-0
+ slots:
+ header:
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Header"
+ props:
+ tag: th
+ attributes:
+ scope: col
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Header"
+ props:
+ tag: th
+ attributes:
+ scope: col
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Header"
+ props:
+ tag: th
+ attributes:
+ scope: col
+ rows:
+ - type: component
+ component: "ui_suite_bootstrap:table_row"
+ slots:
+ cells:
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "A"
+ props:
+ tag: th
+ attributes:
+ scope: row
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "First"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Last"
+ - type: component
+ component: "ui_suite_bootstrap:table_row"
+ slots:
+ cells:
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "B"
+ props:
+ tag: th
+ attributes:
+ scope: row
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "First"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Last"
+ - type: component
+ component: "ui_suite_bootstrap:table_row"
+ slots:
+ cells:
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "C"
+ props:
+ tag: th
+ attributes:
+ scope: row
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "First"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Last"
+ - type: component
+ component: "ui_suite_bootstrap:table_row"
+ slots:
+ cells:
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "3"
+ props:
+ tag: th
+ attributes:
+ scope: row
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Larry"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "the Bird"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "@twitter"
+props:
+ variant: default
+ stripes:
+ - striped
+ borders: bordered
diff --git a/components/table/stories/table.preview.story.yml b/components/table/stories/table.preview.story.yml
deleted file mode 100644
index 12b929b0..00000000
--- a/components/table/stories/table.preview.story.yml
+++ /dev/null
@@ -1,959 +0,0 @@
-name: Preview
-slots:
- header:
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Table head"
- props:
- tag: th
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Table head"
- props:
- tag: th
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Table head (active)"
- props:
- tag: th
- active: true
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Table head"
- props:
- tag: th
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Table head"
- props:
- tag: th
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Table head"
- props:
- tag: th
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Table head"
- props:
- tag: th
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Table head"
- props:
- tag: th
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Table head"
- props:
- tag: th
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Table head"
- props:
- tag: th
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Table head"
- props:
- tag: th
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Table head"
- props:
- tag: th
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Table head"
- props:
- tag: th
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Table head"
- props:
- tag: th
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Table head"
- props:
- tag: th
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Table head"
- props:
- tag: th
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Table head"
- props:
- tag: th
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Table head"
- props:
- tag: th
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Table head"
- props:
- tag: th
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Table head"
- props:
- tag: th
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Table head"
- props:
- tag: th
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Table head"
- props:
- tag: th
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Table head"
- props:
- tag: th
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Table head"
- props:
- tag: th
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Table head"
- props:
- tag: th
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Table head"
- props:
- tag: th
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Table head"
- props:
- tag: th
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Table head"
- props:
- tag: th
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Table head"
- props:
- tag: th
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Table head"
- props:
- tag: th
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Table head"
- props:
- tag: th
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Table head"
- props:
- tag: th
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Table head"
- props:
- tag: th
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Table head"
- props:
- tag: th
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Table head"
- props:
- tag: th
- rows:
- - type: component
- component: "ui_suite_bootstrap:table_row"
- slots:
- cells:
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 1"
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 2"
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 3"
- props:
- active: true
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 4"
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 5"
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 6"
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 7"
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 8"
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 9"
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 10"
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 11"
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 12"
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 13"
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 14"
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 15"
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 16"
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 17"
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 18"
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 19"
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 20"
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 21"
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 22"
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 23"
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 24"
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 25"
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 26"
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 27"
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 28"
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 29"
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 30"
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 31"
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 32"
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 33"
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 34"
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 35"
- props:
- color: success
- - type: component
- component: "ui_suite_bootstrap:table_row"
- slots:
- cells:
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 1"
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 2"
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 3"
- props:
- active: true
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 4"
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 5"
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 6"
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 7"
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 8"
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 9"
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 10"
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 11"
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 12"
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 13"
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 14"
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 15"
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 16"
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 17"
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 18"
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 19"
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 20"
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 21"
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 22"
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 23"
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 24"
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 25"
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 26"
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 27"
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 28"
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 29"
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 30"
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 31"
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 32"
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 33"
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 34"
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 35"
- props:
- color: warning
- - type: component
- component: "ui_suite_bootstrap:table_row"
- slots:
- cells:
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 1"
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 2"
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 3"
- props:
- active: true
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 4"
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 5"
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 6"
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 7"
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 8"
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 9"
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 10"
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 11"
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 12"
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 13"
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 14"
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 15"
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 16"
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 17"
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 18"
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 19"
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 20"
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 21"
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 22"
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 23"
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 24"
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 25"
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 26"
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 27"
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 28"
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 29"
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 30"
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 31"
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 32"
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 33"
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 34"
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 35"
- - type: component
- component: "ui_suite_bootstrap:table_row"
- slots:
- cells:
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 1"
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 2"
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 3"
- props:
- active: true
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 4"
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 5"
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 6"
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 7"
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 8"
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 9"
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 10"
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 11"
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 12"
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 13"
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 14"
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 15"
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 16"
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 17"
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 18"
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 19"
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 20"
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 21"
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 22"
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 23"
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 24"
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 25"
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 26"
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 27"
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 28"
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 29"
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 30"
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 31"
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 32"
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 33"
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 34"
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: "Cell 35"
- footer:
- - type: component
- component: "ui_suite_bootstrap:table_row"
- slots:
- cells:
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: Footer
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: Footer
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: Footer
- props:
- active: true
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: Footer
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: Footer
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: Footer
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: Footer
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: Footer
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: Footer
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: Footer
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: Footer
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: Footer
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: Footer
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: Footer
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: Footer
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: Footer
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: Footer
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: Footer
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: Footer
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: Footer
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: Footer
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: Footer
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: Footer
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: Footer
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: Footer
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: Footer
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: Footer
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: Footer
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: Footer
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: Footer
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: Footer
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: Footer
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: Footer
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: Footer
- - type: component
- component: "ui_suite_bootstrap:table_cell"
- slots:
- content: Footer
- caption: "Example table (caption)"
-props:
- header_color: light
- stripes:
- - striped
- hover: true
- divider:
- - tbody
- responsive: responsive
diff --git a/components/table/stories/table.responsive.story.yml b/components/table/stories/table.responsive.story.yml
new file mode 100644
index 00000000..f4e52673
--- /dev/null
+++ b/components/table/stories/table.responsive.story.yml
@@ -0,0 +1,472 @@
+name: "Responsive tables"
+slots:
+ header:
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "#"
+ props:
+ tag: th
+ attributes:
+ scope: col
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Heading"
+ props:
+ tag: th
+ attributes:
+ scope: col
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Heading"
+ props:
+ tag: th
+ attributes:
+ scope: col
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Heading"
+ props:
+ tag: th
+ attributes:
+ scope: col
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Heading"
+ props:
+ tag: th
+ attributes:
+ scope: col
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Heading"
+ props:
+ tag: th
+ attributes:
+ scope: col
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Heading"
+ props:
+ tag: th
+ attributes:
+ scope: col
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Heading"
+ props:
+ tag: th
+ attributes:
+ scope: col
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Heading"
+ props:
+ tag: th
+ attributes:
+ scope: col
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Heading"
+ props:
+ tag: th
+ attributes:
+ scope: col
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Heading"
+ props:
+ tag: th
+ attributes:
+ scope: col
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Heading"
+ props:
+ tag: th
+ attributes:
+ scope: col
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Heading"
+ props:
+ tag: th
+ attributes:
+ scope: col
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Heading"
+ props:
+ tag: th
+ attributes:
+ scope: col
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Heading"
+ props:
+ tag: th
+ attributes:
+ scope: col
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Heading"
+ props:
+ tag: th
+ attributes:
+ scope: col
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Heading"
+ props:
+ tag: th
+ attributes:
+ scope: col
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Heading"
+ props:
+ tag: th
+ attributes:
+ scope: col
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Heading"
+ props:
+ tag: th
+ attributes:
+ scope: col
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Heading"
+ props:
+ tag: th
+ attributes:
+ scope: col
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Heading"
+ props:
+ tag: th
+ attributes:
+ scope: col
+ rows:
+ - type: component
+ component: "ui_suite_bootstrap:table_row"
+ slots:
+ cells:
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "1"
+ props:
+ tag: th
+ attributes:
+ scope: row
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Cell"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Cell"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Cell"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Cell"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Cell"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Cell"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Cell"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Cell"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Cell"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Cell"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Cell"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Cell"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Cell"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Cell"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Cell"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Cell"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Cell"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Cell"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Cell"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Cell"
+ - type: component
+ component: "ui_suite_bootstrap:table_row"
+ slots:
+ cells:
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "2"
+ props:
+ tag: th
+ attributes:
+ scope: row
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Cell"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Cell"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Cell"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Cell"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Cell"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Cell"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Cell"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Cell"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Cell"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Cell"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Cell"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Cell"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Cell"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Cell"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Cell"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Cell"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Cell"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Cell"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Cell"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Cell"
+ - type: component
+ component: "ui_suite_bootstrap:table_row"
+ slots:
+ cells:
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "3"
+ props:
+ tag: th
+ attributes:
+ scope: row
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Cell"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Cell"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Cell"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Cell"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Cell"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Cell"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Cell"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Cell"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Cell"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Cell"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Cell"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Cell"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Cell"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Cell"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Cell"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Cell"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Cell"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Cell"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Cell"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Cell"
+props:
+ variant: default
+ caption_top: true
+library_wrapper: >
+ {% set examples = [
+ 'responsive',
+ 'responsive-sm',
+ 'responsive-md',
+ 'responsive-lg',
+ 'responsive-xl',
+ 'responsive-xxl',
+ ] %}
+
+ {% for example in examples %}
+ {% set example_props = {'#props': _story['#props']|merge({
+ 'responsive': example,
+ })} %}
+ {% set example_slots = {'#slots': _story['#slots']|merge({
+ 'caption': example,
+ })} %}
+
+ {% set example_story = _story %}
+ {{ example_story|merge(example_props)|merge(example_slots) }}
+ {% endfor %}
diff --git a/components/table/stories/table.small.story.yml b/components/table/stories/table.small.story.yml
new file mode 100644
index 00000000..76977b33
--- /dev/null
+++ b/components/table/stories/table.small.story.yml
@@ -0,0 +1,123 @@
+name: "Small tables"
+slots:
+ header:
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "#"
+ props:
+ tag: th
+ attributes:
+ scope: col
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "First"
+ props:
+ tag: th
+ attributes:
+ scope: col
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Last"
+ props:
+ tag: th
+ attributes:
+ scope: col
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Handle"
+ props:
+ tag: th
+ attributes:
+ scope: col
+ rows:
+ - type: component
+ component: "ui_suite_bootstrap:table_row"
+ slots:
+ cells:
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "1"
+ props:
+ tag: th
+ attributes:
+ scope: row
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Mark"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Otto"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "@mdo"
+ - type: component
+ component: "ui_suite_bootstrap:table_row"
+ slots:
+ cells:
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "2"
+ props:
+ tag: th
+ attributes:
+ scope: row
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Jacob"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Thornton"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "@fat"
+ - type: component
+ component: "ui_suite_bootstrap:table_row"
+ slots:
+ cells:
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "3"
+ props:
+ tag: th
+ attributes:
+ scope: row
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Larry the Bird"
+ props:
+ attributes:
+ colspan: 2
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "@twitter"
+props:
+ variant: default
+library_wrapper: >
+ {% set examples = [
+ 'sm',
+ 'dark__sm',
+ ] %}
+
+ {% for example in examples %}
+ {% set example_props = {'#props': _story['#props']|merge({
+ 'variant': example,
+ })} %}
+
+ {% set example_story = _story %}
+ {{ example_story|merge(example_props) }}
+ {% endfor %}
diff --git a/components/table/stories/table.table_group_dividers.story.yml b/components/table/stories/table.table_group_dividers.story.yml
new file mode 100644
index 00000000..1f4a1884
--- /dev/null
+++ b/components/table/stories/table.table_group_dividers.story.yml
@@ -0,0 +1,134 @@
+name: "Table group dividers"
+slots:
+ header:
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "#"
+ props:
+ tag: th
+ attributes:
+ scope: col
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "First"
+ props:
+ tag: th
+ attributes:
+ scope: col
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Last"
+ props:
+ tag: th
+ attributes:
+ scope: col
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Handle"
+ props:
+ tag: th
+ attributes:
+ scope: col
+ rows:
+ - type: component
+ component: "ui_suite_bootstrap:table_row"
+ slots:
+ cells:
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "1"
+ props:
+ tag: th
+ attributes:
+ scope: row
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Mark"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Otto"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "@mdo"
+ - type: component
+ component: "ui_suite_bootstrap:table_row"
+ slots:
+ cells:
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "2"
+ props:
+ tag: th
+ attributes:
+ scope: row
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Jacob"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Thornton"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "@fat"
+ - type: component
+ component: "ui_suite_bootstrap:table_row"
+ slots:
+ cells:
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "3"
+ props:
+ tag: th
+ attributes:
+ scope: row
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Larry the Bird"
+ props:
+ attributes:
+ colspan: 2
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "@twitter"
+ footer:
+ - type: component
+ component: "ui_suite_bootstrap:table_row"
+ slots:
+ cells:
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Footer"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Footer"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Footer"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Footer"
+props:
+ variant: default
+ divider:
+ - thead
+ - tbody
+ - tfoot
diff --git a/components/table/stories/table.vertical_alignment.story.yml b/components/table/stories/table.vertical_alignment.story.yml
new file mode 100644
index 00000000..2e7bb599
--- /dev/null
+++ b/components/table/stories/table.vertical_alignment.story.yml
@@ -0,0 +1,118 @@
+name: "Vertical alignment"
+slots:
+ header:
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Heading 1"
+ props:
+ tag: th
+ attributes:
+ scope: col
+ class:
+ - w-25
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Heading 2"
+ props:
+ tag: th
+ attributes:
+ scope: col
+ class:
+ - w-25
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Heading 3"
+ props:
+ tag: th
+ attributes:
+ scope: col
+ class:
+ - w-25
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "Heading 4"
+ props:
+ tag: th
+ attributes:
+ scope: col
+ class:
+ - w-25
+ rows:
+ - type: component
+ component: "ui_suite_bootstrap:table_row"
+ slots:
+ cells:
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "This cell inherits <code>vertical-align: middle;</code> from the table"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "This cell inherits <code>vertical-align: middle;</code> from the table"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "This cell inherits <code>vertical-align: middle;</code> from the table"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells."
+ - type: component
+ component: "ui_suite_bootstrap:table_row"
+ props:
+ attributes:
+ class:
+ - align-bottom
+ slots:
+ cells:
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "This cell inherits <code>vertical-align: bottom;</code> from the table row"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "This cell inherits <code>vertical-align: bottom;</code> from the table row"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "This cell inherits <code>vertical-align: bottom;</code> from the table row"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells."
+ - type: component
+ component: "ui_suite_bootstrap:table_row"
+ slots:
+ cells:
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "This cell inherits <code>vertical-align: middle;</code> from the table"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "This cell inherits <code>vertical-align: middle;</code> from the table"
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ props:
+ attributes:
+ class:
+ - align-top
+ slots:
+ content: "This cell is aligned to the top."
+ - type: component
+ component: "ui_suite_bootstrap:table_cell"
+ slots:
+ content: "This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells."
+props:
+ variant: default
+ attributes:
+ class:
+ - align-middle
+ responsive: responsive
diff --git a/components/table_cell/stories/table_cell.preview.story.yml b/components/table_cell/stories/table_cell.preview.story.yml
deleted file mode 100644
index b3df7d74..00000000
--- a/components/table_cell/stories/table_cell.preview.story.yml
+++ /dev/null
@@ -1,6 +0,0 @@
-name: Preview
-slots:
- content: "Cell content"
-props:
- tag: td
- active: false
diff --git a/components/table_row/stories/table_row.preview.story.yml b/components/table_row/stories/table_row.preview.story.yml
deleted file mode 100644
index bc0b3e3c..00000000
--- a/components/table_row/stories/table_row.preview.story.yml
+++ /dev/null
@@ -1,3 +0,0 @@
-name: Preview
-props:
- active: false
--
GitLab
From 371e30fb4aa772d0ff987192c72404a802f36b42 Mon Sep 17 00:00:00 2001
From: Florent Torregrosa <florent.torregrosa@gmail.com>
Date: Wed, 12 Mar 2025 17:18:31 +0100
Subject: [PATCH 13/15] Issue #3485834 by grimreaper: grid row + component
library improvements
---
.../dropdown/stories/dropdown.dark.story.yml | 25 -----
...row.columns_alignment_horizontal.story.yml | 41 +++++++
...olumns_alignment_vertical_center.story.yml | 21 ++++
...w.columns_alignment_vertical_end.story.yml | 21 ++++
...columns_alignment_vertical_start.story.yml | 21 ++++
.../grid_row.grid_equal_width_1.story.yml | 15 +++
.../grid_row.grid_equal_width_2.story.yml | 16 +++
.../stories/grid_row.grid_example.story.yml | 16 +++
.../grid_row.gutters_horizontal.story.yml | 28 +++++
.../grid_row.gutters_horizontal_2.story.yml | 28 +++++
..._row.gutters_horizontal_vertical.story.yml | 46 ++++++++
.../grid_row.gutters_row_column.story.yml | 104 ++++++++++++++++++
.../grid_row.gutters_vertical.story.yml | 47 ++++++++
.../stories/grid_row.preview.story.yml | 27 -----
...olumns_reordering_offset_class_3.story.yml | 15 +++
.../stories/grid_row_1.preview.story.yml | 12 --
...ow_2.columns_reordering_margin_1.story.yml | 21 ++++
...ow_2.columns_reordering_margin_2.story.yml | 22 ++++
...ow_2.columns_reordering_margin_3.story.yml | 21 ++++
...olumns_reordering_offset_class_1.story.yml | 21 ++++
...olumns_reordering_offset_class_2.story.yml | 22 ++++
...olumns_reordering_offset_class_4.story.yml | 23 ++++
...olumns_reordering_offset_class_5.story.yml | 24 ++++
.../stories/grid_row_2.gutters_none.story.yml | 28 +++++
.../stories/grid_row_2.preview.story.yml | 18 ---
...ns_alignment_vertical_individual.story.yml | 32 ++++++
...3.columns_reordering_order_class.story.yml | 27 +++++
...columns_reordering_order_class_2.story.yml | 27 +++++
.../grid_row_3.columns_wrapping.story.yml | 24 ++++
...id_row_3.grid_one_column_width_1.story.yml | 26 +++++
...id_row_3.grid_one_column_width_2.story.yml | 26 +++++
...grid_row_3.grid_variable_width_1.story.yml | 30 +++++
...grid_row_3.grid_variable_width_2.story.yml | 27 +++++
.../stories/grid_row_3.preview.story.yml | 24 ----
.../grid_row_4.grid_row_columns_1.story.yml | 34 ++++++
.../grid_row_4.grid_row_columns_2.story.yml | 34 ++++++
.../grid_row_4.grid_row_columns_3.story.yml | 34 ++++++
.../grid_row_4.grid_row_columns_4.story.yml | 34 ++++++
.../grid_row_4.grid_row_columns_5.story.yml | 35 ++++++
.../grid_row_4.grid_row_columns_6.story.yml | 36 ++++++
.../stories/grid_row_4.preview.story.yml | 30 -----
.../ui-patterns-component-metadata.html.twig | 22 ++--
.../ui-patterns-overview-page.html.twig | 7 +-
43 files changed, 1039 insertions(+), 153 deletions(-)
create mode 100644 components/grid_row/stories/grid_row.columns_alignment_horizontal.story.yml
create mode 100644 components/grid_row/stories/grid_row.columns_alignment_vertical_center.story.yml
create mode 100644 components/grid_row/stories/grid_row.columns_alignment_vertical_end.story.yml
create mode 100644 components/grid_row/stories/grid_row.columns_alignment_vertical_start.story.yml
create mode 100644 components/grid_row/stories/grid_row.grid_equal_width_1.story.yml
create mode 100644 components/grid_row/stories/grid_row.grid_equal_width_2.story.yml
create mode 100644 components/grid_row/stories/grid_row.grid_example.story.yml
create mode 100644 components/grid_row/stories/grid_row.gutters_horizontal.story.yml
create mode 100644 components/grid_row/stories/grid_row.gutters_horizontal_2.story.yml
create mode 100644 components/grid_row/stories/grid_row.gutters_horizontal_vertical.story.yml
create mode 100644 components/grid_row/stories/grid_row.gutters_row_column.story.yml
create mode 100644 components/grid_row/stories/grid_row.gutters_vertical.story.yml
delete mode 100644 components/grid_row/stories/grid_row.preview.story.yml
create mode 100644 components/grid_row_1/stories/grid_row_1.columns_reordering_offset_class_3.story.yml
delete mode 100644 components/grid_row_1/stories/grid_row_1.preview.story.yml
create mode 100644 components/grid_row_2/stories/grid_row_2.columns_reordering_margin_1.story.yml
create mode 100644 components/grid_row_2/stories/grid_row_2.columns_reordering_margin_2.story.yml
create mode 100644 components/grid_row_2/stories/grid_row_2.columns_reordering_margin_3.story.yml
create mode 100644 components/grid_row_2/stories/grid_row_2.columns_reordering_offset_class_1.story.yml
create mode 100644 components/grid_row_2/stories/grid_row_2.columns_reordering_offset_class_2.story.yml
create mode 100644 components/grid_row_2/stories/grid_row_2.columns_reordering_offset_class_4.story.yml
create mode 100644 components/grid_row_2/stories/grid_row_2.columns_reordering_offset_class_5.story.yml
create mode 100644 components/grid_row_2/stories/grid_row_2.gutters_none.story.yml
delete mode 100644 components/grid_row_2/stories/grid_row_2.preview.story.yml
create mode 100644 components/grid_row_3/stories/grid_row_3.columns_alignment_vertical_individual.story.yml
create mode 100644 components/grid_row_3/stories/grid_row_3.columns_reordering_order_class.story.yml
create mode 100644 components/grid_row_3/stories/grid_row_3.columns_reordering_order_class_2.story.yml
create mode 100644 components/grid_row_3/stories/grid_row_3.columns_wrapping.story.yml
create mode 100644 components/grid_row_3/stories/grid_row_3.grid_one_column_width_1.story.yml
create mode 100644 components/grid_row_3/stories/grid_row_3.grid_one_column_width_2.story.yml
create mode 100644 components/grid_row_3/stories/grid_row_3.grid_variable_width_1.story.yml
create mode 100644 components/grid_row_3/stories/grid_row_3.grid_variable_width_2.story.yml
delete mode 100644 components/grid_row_3/stories/grid_row_3.preview.story.yml
create mode 100644 components/grid_row_4/stories/grid_row_4.grid_row_columns_1.story.yml
create mode 100644 components/grid_row_4/stories/grid_row_4.grid_row_columns_2.story.yml
create mode 100644 components/grid_row_4/stories/grid_row_4.grid_row_columns_3.story.yml
create mode 100644 components/grid_row_4/stories/grid_row_4.grid_row_columns_4.story.yml
create mode 100644 components/grid_row_4/stories/grid_row_4.grid_row_columns_5.story.yml
create mode 100644 components/grid_row_4/stories/grid_row_4.grid_row_columns_6.story.yml
delete mode 100644 components/grid_row_4/stories/grid_row_4.preview.story.yml
diff --git a/components/dropdown/stories/dropdown.dark.story.yml b/components/dropdown/stories/dropdown.dark.story.yml
index 22af3fa9..abf262d4 100644
--- a/components/dropdown/stories/dropdown.dark.story.yml
+++ b/components/dropdown/stories/dropdown.dark.story.yml
@@ -18,28 +18,3 @@ props:
- {}
- title: "Separated link"
url: "#"
-#library_wrapper: >
-# {% set examples = [
-# 'primary',
-# 'secondary',
-# 'success',
-# 'danger',
-# 'warning',
-# 'info',
-# 'light',
-# 'dark',
-# ] %}
-#
-# <div class="d-inline-flex">
-# {% for example in examples %}
-# {% set example_props = {'#props': _story['#props']|merge({
-# 'button_variant': example,
-# })} %}
-# {% set example_slots = {'#slots': _story['#slots']|merge({
-# 'title': example|capitalize,
-# })} %}
-#
-# {% set example_story = _story %}
-# {{ example_story|merge(example_props)|merge(example_slots) }}
-# {% endfor %}
-# </div>
diff --git a/components/grid_row/stories/grid_row.columns_alignment_horizontal.story.yml b/components/grid_row/stories/grid_row.columns_alignment_horizontal.story.yml
new file mode 100644
index 00000000..e511ee6f
--- /dev/null
+++ b/components/grid_row/stories/grid_row.columns_alignment_horizontal.story.yml
@@ -0,0 +1,41 @@
+name: "Columns: horizontal alignment"
+slots:
+ content:
+ - "One of two columns"
+ - "One of two columns"
+props:
+ container: container
+ container_attributes:
+ class:
+ - text-center
+ - my-3
+ col_attributes:
+ class:
+ - bg-primary-subtle
+ - border
+ - border-primary-subtle
+ col_xs: 4
+library_wrapper: >
+ {% set examples = [
+ 'justify-content-start',
+ 'justify-content-center',
+ 'justify-content-end',
+ 'justify-content-around',
+ 'justify-content-between',
+ 'justify-content-evenly',
+ ] %}
+
+ {% for example in examples %}
+ {% set example_props = {'#props': _story['#props']|merge({'attributes': create_attribute({
+ class: [example]
+ })})} %}
+ {% set example_slots = {'#slots': _story['#slots']|merge({
+ 'content': [
+ example,
+ example,
+ ],
+ })} %}
+
+ {% set example_story = _story %}
+ {{ example_story|merge(example_props)|merge(example_slots) }}
+ {% endfor %}
diff --git a/components/grid_row/stories/grid_row.columns_alignment_vertical_center.story.yml b/components/grid_row/stories/grid_row.columns_alignment_vertical_center.story.yml
new file mode 100644
index 00000000..6dac39b2
--- /dev/null
+++ b/components/grid_row/stories/grid_row.columns_alignment_vertical_center.story.yml
@@ -0,0 +1,21 @@
+name: "Columns: vertical alignment: center"
+slots:
+ content:
+ - "One of three columns"
+ - "One of three columns"
+ - "One of three columns"
+props:
+ container: container
+ container_attributes:
+ class:
+ - text-center
+ attributes:
+ style: "min-height: 10rem;"
+ class:
+ - align-items-center
+ - bg-secondary-subtle
+ col_attributes:
+ class:
+ - bg-primary-subtle
+ - border
+ - border-primary-subtle
diff --git a/components/grid_row/stories/grid_row.columns_alignment_vertical_end.story.yml b/components/grid_row/stories/grid_row.columns_alignment_vertical_end.story.yml
new file mode 100644
index 00000000..a318110a
--- /dev/null
+++ b/components/grid_row/stories/grid_row.columns_alignment_vertical_end.story.yml
@@ -0,0 +1,21 @@
+name: "Columns: vertical alignment: end"
+slots:
+ content:
+ - "One of three columns"
+ - "One of three columns"
+ - "One of three columns"
+props:
+ container: container
+ container_attributes:
+ class:
+ - text-center
+ attributes:
+ style: "min-height: 10rem;"
+ class:
+ - align-items-end
+ - bg-secondary-subtle
+ col_attributes:
+ class:
+ - bg-primary-subtle
+ - border
+ - border-primary-subtle
diff --git a/components/grid_row/stories/grid_row.columns_alignment_vertical_start.story.yml b/components/grid_row/stories/grid_row.columns_alignment_vertical_start.story.yml
new file mode 100644
index 00000000..cf72e52b
--- /dev/null
+++ b/components/grid_row/stories/grid_row.columns_alignment_vertical_start.story.yml
@@ -0,0 +1,21 @@
+name: "Columns: vertical alignment: start"
+slots:
+ content:
+ - "One of three columns"
+ - "One of three columns"
+ - "One of three columns"
+props:
+ container: container
+ container_attributes:
+ class:
+ - text-center
+ attributes:
+ style: "min-height: 10rem;"
+ class:
+ - align-items-start
+ - bg-secondary-subtle
+ col_attributes:
+ class:
+ - bg-primary-subtle
+ - border
+ - border-primary-subtle
diff --git a/components/grid_row/stories/grid_row.grid_equal_width_1.story.yml b/components/grid_row/stories/grid_row.grid_equal_width_1.story.yml
new file mode 100644
index 00000000..23c91984
--- /dev/null
+++ b/components/grid_row/stories/grid_row.grid_equal_width_1.story.yml
@@ -0,0 +1,15 @@
+name: "Grid system: Auto-layout columns: Equal-width 1"
+slots:
+ content:
+ - "1 of 2"
+ - "2 of 2"
+props:
+ container: container
+ container_attributes:
+ class:
+ - text-center
+ col_attributes:
+ class:
+ - bg-primary-subtle
+ - border
+ - border-primary-subtle
diff --git a/components/grid_row/stories/grid_row.grid_equal_width_2.story.yml b/components/grid_row/stories/grid_row.grid_equal_width_2.story.yml
new file mode 100644
index 00000000..a3b82488
--- /dev/null
+++ b/components/grid_row/stories/grid_row.grid_equal_width_2.story.yml
@@ -0,0 +1,16 @@
+name: "Grid system: Auto-layout columns: Equal-width 2"
+slots:
+ content:
+ - "1 of 3"
+ - "2 of 3"
+ - "3 of 3"
+props:
+ container: container
+ container_attributes:
+ class:
+ - text-center
+ col_attributes:
+ class:
+ - bg-primary-subtle
+ - border
+ - border-primary-subtle
diff --git a/components/grid_row/stories/grid_row.grid_example.story.yml b/components/grid_row/stories/grid_row.grid_example.story.yml
new file mode 100644
index 00000000..3b3e0b00
--- /dev/null
+++ b/components/grid_row/stories/grid_row.grid_example.story.yml
@@ -0,0 +1,16 @@
+name: "Grid system: example"
+slots:
+ content:
+ - "Column"
+ - "Column"
+ - "Column"
+props:
+ container: container
+ container_attributes:
+ class:
+ - text-center
+ col_attributes:
+ class:
+ - bg-primary-subtle
+ - border
+ - border-primary-subtle
diff --git a/components/grid_row/stories/grid_row.gutters_horizontal.story.yml b/components/grid_row/stories/grid_row.gutters_horizontal.story.yml
new file mode 100644
index 00000000..3b4fa388
--- /dev/null
+++ b/components/grid_row/stories/grid_row.gutters_horizontal.story.yml
@@ -0,0 +1,28 @@
+name: "Gutters: horizontal gutters"
+slots:
+ content:
+ - type: html_tag
+ tag: div
+ value: "Custom column padding"
+ attributes:
+ class:
+ - p-3
+ - bg-primary-subtle
+ - border
+ - border-primary-subtle
+ - type: html_tag
+ tag: div
+ value: "Custom column padding"
+ attributes:
+ class:
+ - p-3
+ - bg-primary-subtle
+ - border
+ - border-primary-subtle
+props:
+ container: container
+ container_attributes:
+ class:
+ - px-4
+ - text-center
+ gutters_horizontal: gx-5
diff --git a/components/grid_row/stories/grid_row.gutters_horizontal_2.story.yml b/components/grid_row/stories/grid_row.gutters_horizontal_2.story.yml
new file mode 100644
index 00000000..5949365e
--- /dev/null
+++ b/components/grid_row/stories/grid_row.gutters_horizontal_2.story.yml
@@ -0,0 +1,28 @@
+name: "Gutters: horizontal gutters alternative"
+slots:
+ content:
+ - type: html_tag
+ tag: div
+ value: "Custom column padding"
+ attributes:
+ class:
+ - p-3
+ - bg-primary-subtle
+ - border
+ - border-primary-subtle
+ - type: html_tag
+ tag: div
+ value: "Custom column padding"
+ attributes:
+ class:
+ - p-3
+ - bg-primary-subtle
+ - border
+ - border-primary-subtle
+props:
+ container: container
+ container_attributes:
+ class:
+ - overflow-hidden
+ - text-center
+ gutters_horizontal: gx-5
diff --git a/components/grid_row/stories/grid_row.gutters_horizontal_vertical.story.yml b/components/grid_row/stories/grid_row.gutters_horizontal_vertical.story.yml
new file mode 100644
index 00000000..0ffcd3c9
--- /dev/null
+++ b/components/grid_row/stories/grid_row.gutters_horizontal_vertical.story.yml
@@ -0,0 +1,46 @@
+name: "Gutters: horizontal & vertical gutters"
+slots:
+ content:
+ - type: html_tag
+ tag: div
+ value: "Custom column padding"
+ attributes:
+ class:
+ - p-3
+ - bg-primary-subtle
+ - border
+ - border-primary-subtle
+ - type: html_tag
+ tag: div
+ value: "Custom column padding"
+ attributes:
+ class:
+ - p-3
+ - bg-primary-subtle
+ - border
+ - border-primary-subtle
+ - type: html_tag
+ tag: div
+ value: "Custom column padding"
+ attributes:
+ class:
+ - p-3
+ - bg-primary-subtle
+ - border
+ - border-primary-subtle
+ - type: html_tag
+ tag: div
+ value: "Custom column padding"
+ attributes:
+ class:
+ - p-3
+ - bg-primary-subtle
+ - border
+ - border-primary-subtle
+props:
+ container: container
+ container_attributes:
+ class:
+ - text-center
+ gutters: g-2
+ col_xs: 6
diff --git a/components/grid_row/stories/grid_row.gutters_row_column.story.yml b/components/grid_row/stories/grid_row.gutters_row_column.story.yml
new file mode 100644
index 00000000..8f01ebc0
--- /dev/null
+++ b/components/grid_row/stories/grid_row.gutters_row_column.story.yml
@@ -0,0 +1,104 @@
+name: "Gutters: row columns gutters"
+slots:
+ content:
+ - type: html_tag
+ tag: div
+ value: "Row column"
+ attributes:
+ class:
+ - p-3
+ - bg-primary-subtle
+ - border
+ - border-primary-subtle
+ - type: html_tag
+ tag: div
+ value: "Row column"
+ attributes:
+ class:
+ - p-3
+ - bg-primary-subtle
+ - border
+ - border-primary-subtle
+ - type: html_tag
+ tag: div
+ value: "Row column"
+ attributes:
+ class:
+ - p-3
+ - bg-primary-subtle
+ - border
+ - border-primary-subtle
+ - type: html_tag
+ tag: div
+ value: "Row column"
+ attributes:
+ class:
+ - p-3
+ - bg-primary-subtle
+ - border
+ - border-primary-subtle
+ - type: html_tag
+ tag: div
+ value: "Row column"
+ attributes:
+ class:
+ - p-3
+ - bg-primary-subtle
+ - border
+ - border-primary-subtle
+ - type: html_tag
+ tag: div
+ value: "Row column"
+ attributes:
+ class:
+ - p-3
+ - bg-primary-subtle
+ - border
+ - border-primary-subtle
+ - type: html_tag
+ tag: div
+ value: "Row column"
+ attributes:
+ class:
+ - p-3
+ - bg-primary-subtle
+ - border
+ - border-primary-subtle
+ - type: html_tag
+ tag: div
+ value: "Row column"
+ attributes:
+ class:
+ - p-3
+ - bg-primary-subtle
+ - border
+ - border-primary-subtle
+ - type: html_tag
+ tag: div
+ value: "Row column"
+ attributes:
+ class:
+ - p-3
+ - bg-primary-subtle
+ - border
+ - border-primary-subtle
+ - type: html_tag
+ tag: div
+ value: "Row column"
+ attributes:
+ class:
+ - p-3
+ - bg-primary-subtle
+ - border
+ - border-primary-subtle
+props:
+ container: container
+ container_attributes:
+ class:
+ - text-center
+ gutters: g-2
+ row_cols: 2
+ attributes:
+ class:
+ - g-lg-3
+ - row-cols-lg-5
diff --git a/components/grid_row/stories/grid_row.gutters_vertical.story.yml b/components/grid_row/stories/grid_row.gutters_vertical.story.yml
new file mode 100644
index 00000000..919b2046
--- /dev/null
+++ b/components/grid_row/stories/grid_row.gutters_vertical.story.yml
@@ -0,0 +1,47 @@
+name: "Gutters: vertical gutters"
+slots:
+ content:
+ - type: html_tag
+ tag: div
+ value: "Custom column padding"
+ attributes:
+ class:
+ - p-3
+ - bg-primary-subtle
+ - border
+ - border-primary-subtle
+ - type: html_tag
+ tag: div
+ value: "Custom column padding"
+ attributes:
+ class:
+ - p-3
+ - bg-primary-subtle
+ - border
+ - border-primary-subtle
+ - type: html_tag
+ tag: div
+ value: "Custom column padding"
+ attributes:
+ class:
+ - p-3
+ - bg-primary-subtle
+ - border
+ - border-primary-subtle
+ - type: html_tag
+ tag: div
+ value: "Custom column padding"
+ attributes:
+ class:
+ - p-3
+ - bg-primary-subtle
+ - border
+ - border-primary-subtle
+props:
+ container: container
+ container_attributes:
+ class:
+ - overflow-hidden
+ - text-center
+ gutters_vertical: gy-5
+ col_xs: 6
diff --git a/components/grid_row/stories/grid_row.preview.story.yml b/components/grid_row/stories/grid_row.preview.story.yml
deleted file mode 100644
index bee7231b..00000000
--- a/components/grid_row/stories/grid_row.preview.story.yml
+++ /dev/null
@@ -1,27 +0,0 @@
-name: Preview
-slots:
- content:
- - type: component
- component: "ui_suite_bootstrap:card"
- story: preview
- props:
- variant: default
- - type: component
- component: "ui_suite_bootstrap:card"
- story: preview
- props:
- variant: default
- - type: component
- component: "ui_suite_bootstrap:card"
- story: preview
- props:
- variant: default
- - type: component
- component: "ui_suite_bootstrap:card"
- story: preview
- props:
- variant: default
-props:
- gutters: g-0
- col_xs: 12
- col_md: 3
diff --git a/components/grid_row_1/stories/grid_row_1.columns_reordering_offset_class_3.story.yml b/components/grid_row_1/stories/grid_row_1.columns_reordering_offset_class_3.story.yml
new file mode 100644
index 00000000..9bd7f062
--- /dev/null
+++ b/components/grid_row_1/stories/grid_row_1.columns_reordering_offset_class_3.story.yml
@@ -0,0 +1,15 @@
+name: "Columns: reordering: offset classes 3"
+slots:
+ col_1_content: ".col-md-6 .offset-md-3"
+props:
+ container: container
+ container_attributes:
+ class:
+ - text-center
+ col_md: 6
+ col_attributes:
+ class:
+ - bg-primary-subtle
+ - border
+ - border-primary-subtle
+ - offset-md-3
diff --git a/components/grid_row_1/stories/grid_row_1.preview.story.yml b/components/grid_row_1/stories/grid_row_1.preview.story.yml
deleted file mode 100644
index c20a6e1e..00000000
--- a/components/grid_row_1/stories/grid_row_1.preview.story.yml
+++ /dev/null
@@ -1,12 +0,0 @@
-name: Preview
-slots:
- col_1_content:
- - type: component
- component: "ui_suite_bootstrap:card"
- story: preview
- props:
- variant: default
-props:
- gutters: g-0
- col_xs: 12
- col_md: 3
diff --git a/components/grid_row_2/stories/grid_row_2.columns_reordering_margin_1.story.yml b/components/grid_row_2/stories/grid_row_2.columns_reordering_margin_1.story.yml
new file mode 100644
index 00000000..e7e59fef
--- /dev/null
+++ b/components/grid_row_2/stories/grid_row_2.columns_reordering_margin_1.story.yml
@@ -0,0 +1,21 @@
+name: "Columns: reordering: margin utilities 1"
+slots:
+ col_1_content: ".col-md-4"
+ col_2_content: ".col-md-4 .ms-auto"
+props:
+ container: container
+ container_attributes:
+ class:
+ - text-center
+ col_md: [4, 4]
+ col_1_attributes:
+ class:
+ - bg-primary-subtle
+ - border
+ - border-primary-subtle
+ col_2_attributes:
+ class:
+ - bg-primary-subtle
+ - border
+ - border-primary-subtle
+ - ms-auto
diff --git a/components/grid_row_2/stories/grid_row_2.columns_reordering_margin_2.story.yml b/components/grid_row_2/stories/grid_row_2.columns_reordering_margin_2.story.yml
new file mode 100644
index 00000000..58b1ca6f
--- /dev/null
+++ b/components/grid_row_2/stories/grid_row_2.columns_reordering_margin_2.story.yml
@@ -0,0 +1,22 @@
+name: "Columns: reordering: margin utilities 2"
+slots:
+ col_1_content: ".col-md-3 .ms-md-auto"
+ col_2_content: ".col-md-3 .ms-md-auto"
+props:
+ container: container
+ container_attributes:
+ class:
+ - text-center
+ col_md: [3, 3]
+ col_1_attributes:
+ class:
+ - bg-primary-subtle
+ - border
+ - border-primary-subtle
+ - ms-md-auto
+ col_2_attributes:
+ class:
+ - bg-primary-subtle
+ - border
+ - border-primary-subtle
+ - ms-md-auto
diff --git a/components/grid_row_2/stories/grid_row_2.columns_reordering_margin_3.story.yml b/components/grid_row_2/stories/grid_row_2.columns_reordering_margin_3.story.yml
new file mode 100644
index 00000000..6984f6a6
--- /dev/null
+++ b/components/grid_row_2/stories/grid_row_2.columns_reordering_margin_3.story.yml
@@ -0,0 +1,21 @@
+name: "Columns: reordering: margin utilities 3"
+slots:
+ col_1_content: ".col-auto .me-auto"
+ col_2_content: ".col-auto"
+props:
+ container: container
+ container_attributes:
+ class:
+ - text-center
+ col_xs: ['auto', 'auto']
+ col_1_attributes:
+ class:
+ - bg-primary-subtle
+ - border
+ - border-primary-subtle
+ - me-auto
+ col_2_attributes:
+ class:
+ - bg-primary-subtle
+ - border
+ - border-primary-subtle
diff --git a/components/grid_row_2/stories/grid_row_2.columns_reordering_offset_class_1.story.yml b/components/grid_row_2/stories/grid_row_2.columns_reordering_offset_class_1.story.yml
new file mode 100644
index 00000000..f392f1cc
--- /dev/null
+++ b/components/grid_row_2/stories/grid_row_2.columns_reordering_offset_class_1.story.yml
@@ -0,0 +1,21 @@
+name: "Columns: reordering: offset classes 1"
+slots:
+ col_1_content: ".col-md-4"
+ col_2_content: ".col-md-4 .offset-md-4"
+props:
+ container: container
+ container_attributes:
+ class:
+ - text-center
+ col_md: [4, 4]
+ col_1_attributes:
+ class:
+ - bg-primary-subtle
+ - border
+ - border-primary-subtle
+ col_2_attributes:
+ class:
+ - bg-primary-subtle
+ - border
+ - border-primary-subtle
+ - offset-md-4
diff --git a/components/grid_row_2/stories/grid_row_2.columns_reordering_offset_class_2.story.yml b/components/grid_row_2/stories/grid_row_2.columns_reordering_offset_class_2.story.yml
new file mode 100644
index 00000000..ea9ee106
--- /dev/null
+++ b/components/grid_row_2/stories/grid_row_2.columns_reordering_offset_class_2.story.yml
@@ -0,0 +1,22 @@
+name: "Columns: reordering: offset classes 2"
+slots:
+ col_1_content: ".col-md-3 .offset-md-3"
+ col_2_content: ".col-md-3 .offset-md-3"
+props:
+ container: container
+ container_attributes:
+ class:
+ - text-center
+ col_md: [3, 3]
+ col_1_attributes:
+ class:
+ - bg-primary-subtle
+ - border
+ - border-primary-subtle
+ - offset-md-3
+ col_2_attributes:
+ class:
+ - bg-primary-subtle
+ - border
+ - border-primary-subtle
+ - offset-md-3
diff --git a/components/grid_row_2/stories/grid_row_2.columns_reordering_offset_class_4.story.yml b/components/grid_row_2/stories/grid_row_2.columns_reordering_offset_class_4.story.yml
new file mode 100644
index 00000000..c4160b18
--- /dev/null
+++ b/components/grid_row_2/stories/grid_row_2.columns_reordering_offset_class_4.story.yml
@@ -0,0 +1,23 @@
+name: "Columns: reordering: offset classes 4"
+slots:
+ col_1_content: ".col-sm-5 .col-md-6"
+ col_2_content: ".col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0"
+props:
+ container: container
+ container_attributes:
+ class:
+ - text-center
+ col_sm: [5, 5]
+ col_md: [6, 6]
+ col_1_attributes:
+ class:
+ - bg-primary-subtle
+ - border
+ - border-primary-subtle
+ col_2_attributes:
+ class:
+ - bg-primary-subtle
+ - border
+ - border-primary-subtle
+ - offset-sm-2
+ - offset-md-0
diff --git a/components/grid_row_2/stories/grid_row_2.columns_reordering_offset_class_5.story.yml b/components/grid_row_2/stories/grid_row_2.columns_reordering_offset_class_5.story.yml
new file mode 100644
index 00000000..62142bb8
--- /dev/null
+++ b/components/grid_row_2/stories/grid_row_2.columns_reordering_offset_class_5.story.yml
@@ -0,0 +1,24 @@
+name: "Columns: reordering: offset classes 5"
+slots:
+ col_1_content: ".col-sm-6 .col-md-5 .col-lg-6"
+ col_2_content: ".col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0"
+props:
+ container: container
+ container_attributes:
+ class:
+ - text-center
+ col_sm: [6, 6]
+ col_md: [5, 5]
+ col_lg: [6, 6]
+ col_1_attributes:
+ class:
+ - bg-primary-subtle
+ - border
+ - border-primary-subtle
+ col_2_attributes:
+ class:
+ - bg-primary-subtle
+ - border
+ - border-primary-subtle
+ - offset-md-2
+ - offset-lg-0
diff --git a/components/grid_row_2/stories/grid_row_2.gutters_none.story.yml b/components/grid_row_2/stories/grid_row_2.gutters_none.story.yml
new file mode 100644
index 00000000..11a39070
--- /dev/null
+++ b/components/grid_row_2/stories/grid_row_2.gutters_none.story.yml
@@ -0,0 +1,28 @@
+name: "Gutters: no gutters"
+slots:
+ col_1_content:
+ - type: html_tag
+ tag: div
+ value: ".col-sm-6 .col-md-8"
+ attributes:
+ class:
+ - bg-primary-subtle
+ - border
+ - border-primary-subtle
+ col_2_content:
+ - type: html_tag
+ tag: div
+ value: ".col-6 .col-md-4"
+ attributes:
+ class:
+ - bg-primary-subtle
+ - border
+ - border-primary-subtle
+props:
+ attributes:
+ class:
+ - text-center
+ gutters: g-0
+ col_xs: ['', '6']
+ col_sm: ['6', '']
+ col_md: [8, 4]
diff --git a/components/grid_row_2/stories/grid_row_2.preview.story.yml b/components/grid_row_2/stories/grid_row_2.preview.story.yml
deleted file mode 100644
index 05d80aa0..00000000
--- a/components/grid_row_2/stories/grid_row_2.preview.story.yml
+++ /dev/null
@@ -1,18 +0,0 @@
-name: Preview
-slots:
- col_1_content:
- - type: component
- component: "ui_suite_bootstrap:card"
- story: preview
- props:
- variant: default
- col_2_content:
- - type: component
- component: "ui_suite_bootstrap:card"
- story: preview
- props:
- variant: default
-props:
- gutters: g-0
- col_xs: [12, 12]
- col_md: [6, 6]
diff --git a/components/grid_row_3/stories/grid_row_3.columns_alignment_vertical_individual.story.yml b/components/grid_row_3/stories/grid_row_3.columns_alignment_vertical_individual.story.yml
new file mode 100644
index 00000000..d7f1e56c
--- /dev/null
+++ b/components/grid_row_3/stories/grid_row_3.columns_alignment_vertical_individual.story.yml
@@ -0,0 +1,32 @@
+name: "Columns: vertical alignment: individual"
+slots:
+ col_1_content: "One of three columns"
+ col_2_content: "One of three columns"
+ col_3_content: "One of three columns"
+props:
+ container: container
+ container_attributes:
+ class:
+ - text-center
+ attributes:
+ style: "min-height: 10rem;"
+ class:
+ - bg-secondary-subtle
+ col_1_attributes:
+ class:
+ - bg-primary-subtle
+ - border
+ - border-primary-subtle
+ - align-self-start
+ col_2_attributes:
+ class:
+ - bg-primary-subtle
+ - border
+ - border-primary-subtle
+ - align-self-center
+ col_3_attributes:
+ class:
+ - bg-primary-subtle
+ - border
+ - border-primary-subtle
+ - align-self-end
diff --git a/components/grid_row_3/stories/grid_row_3.columns_reordering_order_class.story.yml b/components/grid_row_3/stories/grid_row_3.columns_reordering_order_class.story.yml
new file mode 100644
index 00000000..72193b74
--- /dev/null
+++ b/components/grid_row_3/stories/grid_row_3.columns_reordering_order_class.story.yml
@@ -0,0 +1,27 @@
+name: "Columns: reordering: order classes"
+slots:
+ col_1_content: "First in DOM, no order applied"
+ col_2_content: "Second in DOM, with a larger order"
+ col_3_content: "Third in DOM, with an order of 1"
+props:
+ container: container
+ container_attributes:
+ class:
+ - text-center
+ col_1_attributes:
+ class:
+ - bg-primary-subtle
+ - border
+ - border-primary-subtle
+ col_2_attributes:
+ class:
+ - bg-primary-subtle
+ - border
+ - border-primary-subtle
+ - order-5
+ col_3_attributes:
+ class:
+ - bg-primary-subtle
+ - border
+ - border-primary-subtle
+ - order-1
diff --git a/components/grid_row_3/stories/grid_row_3.columns_reordering_order_class_2.story.yml b/components/grid_row_3/stories/grid_row_3.columns_reordering_order_class_2.story.yml
new file mode 100644
index 00000000..d086ef9a
--- /dev/null
+++ b/components/grid_row_3/stories/grid_row_3.columns_reordering_order_class_2.story.yml
@@ -0,0 +1,27 @@
+name: "Columns: reordering: order classes first/last"
+slots:
+ col_1_content: "First in DOM, ordered last"
+ col_2_content: "Second in DOM, unordered"
+ col_3_content: "Third in DOM, ordered first"
+props:
+ container: container
+ container_attributes:
+ class:
+ - text-center
+ col_1_attributes:
+ class:
+ - bg-primary-subtle
+ - border
+ - border-primary-subtle
+ - order-last
+ col_2_attributes:
+ class:
+ - bg-primary-subtle
+ - border
+ - border-primary-subtle
+ col_3_attributes:
+ class:
+ - bg-primary-subtle
+ - border
+ - border-primary-subtle
+ - order-first
diff --git a/components/grid_row_3/stories/grid_row_3.columns_wrapping.story.yml b/components/grid_row_3/stories/grid_row_3.columns_wrapping.story.yml
new file mode 100644
index 00000000..7fc0bfbc
--- /dev/null
+++ b/components/grid_row_3/stories/grid_row_3.columns_wrapping.story.yml
@@ -0,0 +1,24 @@
+name: "Columns: column wrapping"
+description: "If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line."
+slots:
+ col_1_content: ".col-9"
+ col_2_content: ".col-4<br>Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit."
+ col_3_content: ".col-6<br>Subsequent columns continue along the new line."
+props:
+ container: container
+ col_xs: [9, 4, 6]
+ col_1_attributes:
+ class:
+ - bg-primary-subtle
+ - border
+ - border-primary-subtle
+ col_2_attributes:
+ class:
+ - bg-primary-subtle
+ - border
+ - border-primary-subtle
+ col_3_attributes:
+ class:
+ - bg-primary-subtle
+ - border
+ - border-primary-subtle
diff --git a/components/grid_row_3/stories/grid_row_3.grid_one_column_width_1.story.yml b/components/grid_row_3/stories/grid_row_3.grid_one_column_width_1.story.yml
new file mode 100644
index 00000000..083e59cb
--- /dev/null
+++ b/components/grid_row_3/stories/grid_row_3.grid_one_column_width_1.story.yml
@@ -0,0 +1,26 @@
+name: "Grid system: Auto-layout columns: Setting one column width 1"
+slots:
+ col_1_content: "1 of 3"
+ col_2_content: "2 of 3 (wider)"
+ col_3_content: "3 of 3"
+props:
+ container: container
+ container_attributes:
+ class:
+ - text-center
+ col_xs: ['', '6', '']
+ col_1_attributes:
+ class:
+ - bg-primary-subtle
+ - border
+ - border-primary-subtle
+ col_2_attributes:
+ class:
+ - bg-primary-subtle
+ - border
+ - border-primary-subtle
+ col_3_attributes:
+ class:
+ - bg-primary-subtle
+ - border
+ - border-primary-subtle
diff --git a/components/grid_row_3/stories/grid_row_3.grid_one_column_width_2.story.yml b/components/grid_row_3/stories/grid_row_3.grid_one_column_width_2.story.yml
new file mode 100644
index 00000000..25e928de
--- /dev/null
+++ b/components/grid_row_3/stories/grid_row_3.grid_one_column_width_2.story.yml
@@ -0,0 +1,26 @@
+name: "Grid system: Auto-layout columns: Setting one column width 2"
+slots:
+ col_1_content: "1 of 3"
+ col_2_content: "2 of 3 (wider)"
+ col_3_content: "3 of 3"
+props:
+ container: container
+ container_attributes:
+ class:
+ - text-center
+ col_xs: ['', '5', '']
+ col_1_attributes:
+ class:
+ - bg-primary-subtle
+ - border
+ - border-primary-subtle
+ col_2_attributes:
+ class:
+ - bg-primary-subtle
+ - border
+ - border-primary-subtle
+ col_3_attributes:
+ class:
+ - bg-primary-subtle
+ - border
+ - border-primary-subtle
diff --git a/components/grid_row_3/stories/grid_row_3.grid_variable_width_1.story.yml b/components/grid_row_3/stories/grid_row_3.grid_variable_width_1.story.yml
new file mode 100644
index 00000000..42290502
--- /dev/null
+++ b/components/grid_row_3/stories/grid_row_3.grid_variable_width_1.story.yml
@@ -0,0 +1,30 @@
+name: "Grid system: Auto-layout columns: Variable width content 1"
+slots:
+ col_1_content: "1 of 3"
+ col_2_content: "Variable width content"
+ col_3_content: "3 of 3"
+props:
+ container: container
+ container_attributes:
+ class:
+ - text-center
+ attributes:
+ class:
+ - justify-content-md-center
+ col_md: ['', 'auto', '']
+ col_lg: ['2', '', '2']
+ col_1_attributes:
+ class:
+ - bg-primary-subtle
+ - border
+ - border-primary-subtle
+ col_2_attributes:
+ class:
+ - bg-primary-subtle
+ - border
+ - border-primary-subtle
+ col_3_attributes:
+ class:
+ - bg-primary-subtle
+ - border
+ - border-primary-subtle
diff --git a/components/grid_row_3/stories/grid_row_3.grid_variable_width_2.story.yml b/components/grid_row_3/stories/grid_row_3.grid_variable_width_2.story.yml
new file mode 100644
index 00000000..f4840bf4
--- /dev/null
+++ b/components/grid_row_3/stories/grid_row_3.grid_variable_width_2.story.yml
@@ -0,0 +1,27 @@
+name: "Grid system: Auto-layout columns: Variable width content 2"
+slots:
+ col_1_content: "1 of 3"
+ col_2_content: "Variable width content"
+ col_3_content: "3 of 3"
+props:
+ container: container
+ container_attributes:
+ class:
+ - text-center
+ col_md: ['', 'auto', '']
+ col_lg: ['', '', '2']
+ col_1_attributes:
+ class:
+ - bg-primary-subtle
+ - border
+ - border-primary-subtle
+ col_2_attributes:
+ class:
+ - bg-primary-subtle
+ - border
+ - border-primary-subtle
+ col_3_attributes:
+ class:
+ - bg-primary-subtle
+ - border
+ - border-primary-subtle
diff --git a/components/grid_row_3/stories/grid_row_3.preview.story.yml b/components/grid_row_3/stories/grid_row_3.preview.story.yml
deleted file mode 100644
index 9cff69cd..00000000
--- a/components/grid_row_3/stories/grid_row_3.preview.story.yml
+++ /dev/null
@@ -1,24 +0,0 @@
-name: Preview
-slots:
- col_1_content:
- - type: component
- component: "ui_suite_bootstrap:card"
- story: preview
- props:
- variant: default
- col_2_content:
- - type: component
- component: "ui_suite_bootstrap:card"
- story: preview
- props:
- variant: default
- col_3_content:
- - type: component
- component: "ui_suite_bootstrap:card"
- story: preview
- props:
- variant: default
-props:
- gutters: g-0
- col_xs: [12, 12, 12]
- col_md: [4, 4, 4]
diff --git a/components/grid_row_4/stories/grid_row_4.grid_row_columns_1.story.yml b/components/grid_row_4/stories/grid_row_4.grid_row_columns_1.story.yml
new file mode 100644
index 00000000..c0de1bb4
--- /dev/null
+++ b/components/grid_row_4/stories/grid_row_4.grid_row_columns_1.story.yml
@@ -0,0 +1,34 @@
+name: "Grid system: Responsive classes: Row columns 1"
+slots:
+ col_1_content: "Column"
+ col_2_content: "Column"
+ col_3_content: "Column"
+ col_4_content: "Column"
+props:
+ container: container
+ container_attributes:
+ class:
+ - text-center
+ attributes:
+ class:
+ - row-cols-2
+ col_1_attributes:
+ class:
+ - bg-primary-subtle
+ - border
+ - border-primary-subtle
+ col_2_attributes:
+ class:
+ - bg-primary-subtle
+ - border
+ - border-primary-subtle
+ col_3_attributes:
+ class:
+ - bg-primary-subtle
+ - border
+ - border-primary-subtle
+ col_4_attributes:
+ class:
+ - bg-primary-subtle
+ - border
+ - border-primary-subtle
diff --git a/components/grid_row_4/stories/grid_row_4.grid_row_columns_2.story.yml b/components/grid_row_4/stories/grid_row_4.grid_row_columns_2.story.yml
new file mode 100644
index 00000000..1403fe23
--- /dev/null
+++ b/components/grid_row_4/stories/grid_row_4.grid_row_columns_2.story.yml
@@ -0,0 +1,34 @@
+name: "Grid system: Responsive classes: Row columns 2"
+slots:
+ col_1_content: "Column"
+ col_2_content: "Column"
+ col_3_content: "Column"
+ col_4_content: "Column"
+props:
+ container: container
+ container_attributes:
+ class:
+ - text-center
+ attributes:
+ class:
+ - row-cols-3
+ col_1_attributes:
+ class:
+ - bg-primary-subtle
+ - border
+ - border-primary-subtle
+ col_2_attributes:
+ class:
+ - bg-primary-subtle
+ - border
+ - border-primary-subtle
+ col_3_attributes:
+ class:
+ - bg-primary-subtle
+ - border
+ - border-primary-subtle
+ col_4_attributes:
+ class:
+ - bg-primary-subtle
+ - border
+ - border-primary-subtle
diff --git a/components/grid_row_4/stories/grid_row_4.grid_row_columns_3.story.yml b/components/grid_row_4/stories/grid_row_4.grid_row_columns_3.story.yml
new file mode 100644
index 00000000..8b5d426f
--- /dev/null
+++ b/components/grid_row_4/stories/grid_row_4.grid_row_columns_3.story.yml
@@ -0,0 +1,34 @@
+name: "Grid system: Responsive classes: Row columns 3"
+slots:
+ col_1_content: "Column"
+ col_2_content: "Column"
+ col_3_content: "Column"
+ col_4_content: "Column"
+props:
+ container: container
+ container_attributes:
+ class:
+ - text-center
+ attributes:
+ class:
+ - row-cols-auto
+ col_1_attributes:
+ class:
+ - bg-primary-subtle
+ - border
+ - border-primary-subtle
+ col_2_attributes:
+ class:
+ - bg-primary-subtle
+ - border
+ - border-primary-subtle
+ col_3_attributes:
+ class:
+ - bg-primary-subtle
+ - border
+ - border-primary-subtle
+ col_4_attributes:
+ class:
+ - bg-primary-subtle
+ - border
+ - border-primary-subtle
diff --git a/components/grid_row_4/stories/grid_row_4.grid_row_columns_4.story.yml b/components/grid_row_4/stories/grid_row_4.grid_row_columns_4.story.yml
new file mode 100644
index 00000000..d381d080
--- /dev/null
+++ b/components/grid_row_4/stories/grid_row_4.grid_row_columns_4.story.yml
@@ -0,0 +1,34 @@
+name: "Grid system: Responsive classes: Row columns 4"
+slots:
+ col_1_content: "Column"
+ col_2_content: "Column"
+ col_3_content: "Column"
+ col_4_content: "Column"
+props:
+ container: container
+ container_attributes:
+ class:
+ - text-center
+ attributes:
+ class:
+ - row-cols-4
+ col_1_attributes:
+ class:
+ - bg-primary-subtle
+ - border
+ - border-primary-subtle
+ col_2_attributes:
+ class:
+ - bg-primary-subtle
+ - border
+ - border-primary-subtle
+ col_3_attributes:
+ class:
+ - bg-primary-subtle
+ - border
+ - border-primary-subtle
+ col_4_attributes:
+ class:
+ - bg-primary-subtle
+ - border
+ - border-primary-subtle
diff --git a/components/grid_row_4/stories/grid_row_4.grid_row_columns_5.story.yml b/components/grid_row_4/stories/grid_row_4.grid_row_columns_5.story.yml
new file mode 100644
index 00000000..f8b831da
--- /dev/null
+++ b/components/grid_row_4/stories/grid_row_4.grid_row_columns_5.story.yml
@@ -0,0 +1,35 @@
+name: "Grid system: Responsive classes: Row columns 5"
+slots:
+ col_1_content: "Column"
+ col_2_content: "Column"
+ col_3_content: "Column"
+ col_4_content: "Column"
+props:
+ container: container
+ container_attributes:
+ class:
+ - text-center
+ attributes:
+ class:
+ - row-cols-4
+ col_xs: ['', '', '6', '']
+ col_1_attributes:
+ class:
+ - bg-primary-subtle
+ - border
+ - border-primary-subtle
+ col_2_attributes:
+ class:
+ - bg-primary-subtle
+ - border
+ - border-primary-subtle
+ col_3_attributes:
+ class:
+ - bg-primary-subtle
+ - border
+ - border-primary-subtle
+ col_4_attributes:
+ class:
+ - bg-primary-subtle
+ - border
+ - border-primary-subtle
diff --git a/components/grid_row_4/stories/grid_row_4.grid_row_columns_6.story.yml b/components/grid_row_4/stories/grid_row_4.grid_row_columns_6.story.yml
new file mode 100644
index 00000000..b712e2f7
--- /dev/null
+++ b/components/grid_row_4/stories/grid_row_4.grid_row_columns_6.story.yml
@@ -0,0 +1,36 @@
+name: "Grid system: Responsive classes: Row columns 6"
+slots:
+ col_1_content: "Column"
+ col_2_content: "Column"
+ col_3_content: "Column"
+ col_4_content: "Column"
+props:
+ container: container
+ container_attributes:
+ class:
+ - text-center
+ attributes:
+ class:
+ - row-cols-1
+ - row-cols-sm-2
+ - row-cols-md-4
+ col_1_attributes:
+ class:
+ - bg-primary-subtle
+ - border
+ - border-primary-subtle
+ col_2_attributes:
+ class:
+ - bg-primary-subtle
+ - border
+ - border-primary-subtle
+ col_3_attributes:
+ class:
+ - bg-primary-subtle
+ - border
+ - border-primary-subtle
+ col_4_attributes:
+ class:
+ - bg-primary-subtle
+ - border
+ - border-primary-subtle
diff --git a/components/grid_row_4/stories/grid_row_4.preview.story.yml b/components/grid_row_4/stories/grid_row_4.preview.story.yml
deleted file mode 100644
index 54d4cbc3..00000000
--- a/components/grid_row_4/stories/grid_row_4.preview.story.yml
+++ /dev/null
@@ -1,30 +0,0 @@
-name: Preview
-slots:
- col_1_content:
- - type: component
- component: "ui_suite_bootstrap:card"
- story: preview
- props:
- variant: default
- col_2_content:
- - type: component
- component: "ui_suite_bootstrap:card"
- story: preview
- props:
- variant: default
- col_3_content:
- - type: component
- component: "ui_suite_bootstrap:card"
- story: preview
- props:
- variant: default
- col_4_content:
- - type: component
- component: "ui_suite_bootstrap:card"
- story: preview
- props:
- variant: default
-props:
- gutters: g-0
- col_xs: [12, 12, 12, 12]
- col_md: [3, 3, 3, 3]
diff --git a/templates/ui_patterns_library/ui-patterns-component-metadata.html.twig b/templates/ui_patterns_library/ui-patterns-component-metadata.html.twig
index a85a0d09..ea4d0ea9 100644
--- a/templates/ui_patterns_library/ui-patterns-component-metadata.html.twig
+++ b/templates/ui_patterns_library/ui-patterns-component-metadata.html.twig
@@ -16,21 +16,13 @@
{% endif %}
{% if component.links %}
<div class="ui_patterns_component__links">
- {% if component.links|length > 1 %}
- {{ 'Links:'|t }}
- <ul>
- {% for link in component.links %}
- <li class="ui_patterns_component__link">
- <a href="{{ link.url }}" class="btn btn-sm btn-primary">{{ link.title|default('External documentation'|t) }}</a>
- </li>
- {% endfor %}
- </ul>
- {% else %}
- <p class="ui_patterns_component__link">
- {% set link = component.links|first %}
- <a href="{{ link.url }}" class="btn btn-sm btn-primary">{{ link.title|default('External documentation'|t) }}</a>
- </p>
- {% endif %}
+ <ul class="list-inline">
+ {% for link in component.links %}
+ <li class="ui_patterns_component__link list-inline-item">
+ <a href="{{ link.url }}" class="btn btn-sm btn-primary">{{ link.title|default('External documentation'|t) }}</a>
+ </li>
+ {% endfor %}
+ </ul>
</div>
{% endif %}
{% if component.replaces %}
diff --git a/templates/ui_patterns_library/ui-patterns-overview-page.html.twig b/templates/ui_patterns_library/ui-patterns-overview-page.html.twig
index c9c2f2a9..911ee6c1 100644
--- a/templates/ui_patterns_library/ui-patterns-overview-page.html.twig
+++ b/templates/ui_patterns_library/ui-patterns-overview-page.html.twig
@@ -33,10 +33,13 @@
{{ include('ui-patterns-component-metadata.html.twig', {component: component}, with_context=false) }}
{{ include('ui-patterns-component-table.html.twig', {component: component}, with_context=false) }}
{% if component.stories %}
- {{ include('ui-patterns-stories-compact.html.twig', {component: component}, with_context=false) }}
+ <a href="{{ url('ui_patterns_library.single', {provider: component.provider, machineName: component.machineName}) }}"
+ class="btn btn-primary icon-link icon-link-hover">{% trans %}See example{% plural component.stories|length %}See examples{% endtrans %}{{ icon('bootstrap', 'arrow-right', {
+ 'size': '1em',
+ }) }}</a>
{% endif %}
</div>
- <hr class="my-5">
+ <hr class="my-4">
{% endfor %}
{% endfor %}
</div>
--
GitLab
From 1b2db706f889ea4a8c55ec7920390216404e8438 Mon Sep 17 00:00:00 2001
From: Florent Torregrosa <florent.torregrosa@gmail.com>
Date: Thu, 13 Mar 2025 11:42:31 +0100
Subject: [PATCH 14/15] Issue #3485834 by grimreaper: fix missing cases found.
---
.../card.content_types_header_quote.story.yml | 2 +-
components/carousel/carousel.component.yml | 10 +++++++
components/carousel/carousel.twig | 6 ++--
.../stories/carousel.autoplay.story.yml | 1 +
...ousel.autoplay_first_interaction.story.yml | 28 +++++++++++++++++++
...sel.autoplay_individual_interval.story.yml | 1 +
.../carousel.autoplay_no_controls.story.yml | 1 +
.../dropdown.menu_content_text.story.yml | 12 --------
components/navbar/navbar.component.yml | 4 +--
9 files changed, 47 insertions(+), 18 deletions(-)
create mode 100644 components/carousel/stories/carousel.autoplay_first_interaction.story.yml
delete mode 100644 components/dropdown/stories/dropdown.menu_content_text.story.yml
diff --git a/components/card/stories/card.content_types_header_quote.story.yml b/components/card/stories/card.content_types_header_quote.story.yml
index 30b46257..f5cb1ea8 100644
--- a/components/card/stories/card.content_types_header_quote.story.yml
+++ b/components/card/stories/card.content_types_header_quote.story.yml
@@ -1,4 +1,4 @@
-# @todo the blockquote component is not providing the expected HTML.
+# @todo Update when upstream issue will be fixed: https://github.com/twbs/bootstrap/issues/41292
name: "Content types: header quote"
slots:
header: "Quote"
diff --git a/components/carousel/carousel.component.yml b/components/carousel/carousel.component.yml
index 4a723097..8f6ee45e 100644
--- a/components/carousel/carousel.component.yml
+++ b/components/carousel/carousel.component.yml
@@ -39,6 +39,16 @@ props:
description: "The amount of time to delay between automatically cycling to the next item. In ms. 0 to disable autoplay."
type: number
default: 5000
+ autoplay_mode:
+ title: "Autoplaying mode"
+ description: "This option applies only if the interval is more than 0."
+ type: string
+ enum:
+ - "true"
+ - carousel
+ "meta:enum":
+ "true": "After the first interaction"
+ carousel: "On page load"
carousel_id:
title: ID
description: "Must start with a letter. Randomly generated if empty."
diff --git a/components/carousel/carousel.twig b/components/carousel/carousel.twig
index c1dae6d2..f5de112d 100644
--- a/components/carousel/carousel.twig
+++ b/components/carousel/carousel.twig
@@ -9,13 +9,13 @@
{% endif %}
{% set interval = interval|default(5000) %}
-{% set data_bs_ride = 'carousel' %}
+{% set autoplay_mode = autoplay_mode|default('carousel') %}
{% if interval == 0 %}
{% set interval = 'false' %}
- {% set data_bs_ride = false %}
+ {% set autoplay_mode = false %}
{% endif %}
{% set attributes = attributes.setAttribute('data-bs-interval', interval) %}
-{% set attributes = attributes.setAttribute('data-bs-ride', data_bs_ride) %}
+{% set attributes = attributes.setAttribute('data-bs-ride', autoplay_mode) %}
{% set carousel_id = carousel_id|default("carousel-" ~ random()) %}
{% set slides = slides and slides is not sequence ? [slides] : slides %}
diff --git a/components/carousel/stories/carousel.autoplay.story.yml b/components/carousel/stories/carousel.autoplay.story.yml
index 8a645c36..606e7cbd 100644
--- a/components/carousel/stories/carousel.autoplay.story.yml
+++ b/components/carousel/stories/carousel.autoplay.story.yml
@@ -25,3 +25,4 @@ props:
with_indicators: false
with_touch: true
interval: 5000
+ autoplay_mode: carousel
diff --git a/components/carousel/stories/carousel.autoplay_first_interaction.story.yml b/components/carousel/stories/carousel.autoplay_first_interaction.story.yml
new file mode 100644
index 00000000..179c1d29
--- /dev/null
+++ b/components/carousel/stories/carousel.autoplay_first_interaction.story.yml
@@ -0,0 +1,28 @@
+name: "Autoplaying carousels: after first interaction"
+slots:
+ slides:
+ - type: component
+ component: "ui_suite_bootstrap:carousel_item"
+ slots:
+ image:
+ theme: image
+ uri: "data:image/svg+xml;base64,PHN2ZyBzdHlsZT0iZm9udC1zaXplOiAzLjVyZW07IHRleHQtYW5jaG9yOiBtaWRkbGU7IHVzZXItc2VsZWN0OiBub25lIiB3aWR0aD0iMTkyMCIgaGVpZ2h0PSI2NDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQgc2xpY2UiIGZvY3VzYWJsZT0iZmFsc2UiIHJvbGU9ImltZyIgYXJpYS1sYWJlbD0iUGxhY2Vob2xkZXI6IEZpcnN0IHNsaWRlIj48dGl0bGU+UGxhY2Vob2xkZXI8L3RpdGxlPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9IiM3NzciPjwvcmVjdD48dGV4dCB4PSI1MCUiIHk9IjUwJSIgZmlsbD0iIzU1NSIgZHk9Ii4zZW0iPkZpcnN0IHNsaWRlPC90ZXh0Pjwvc3ZnPgo="
+ - type: component
+ component: "ui_suite_bootstrap:carousel_item"
+ slots:
+ image:
+ theme: image
+ uri: "data:image/svg+xml;base64,PHN2ZyBzdHlsZT0iZm9udC1zaXplOiAzLjVyZW07IHRleHQtYW5jaG9yOiBtaWRkbGU7IHVzZXItc2VsZWN0OiBub25lIiB3aWR0aD0iMTkyMCIgaGVpZ2h0PSI2NDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQgc2xpY2UiIGZvY3VzYWJsZT0iZmFsc2UiIHJvbGU9ImltZyIgYXJpYS1sYWJlbD0iUGxhY2Vob2xkZXI6IFNlY29uZCBzbGlkZSI+PHRpdGxlPlBsYWNlaG9sZGVyPC90aXRsZT48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjNjY2Ij48L3JlY3Q+PHRleHQgeD0iNTAlIiB5PSI1MCUiIGZpbGw9IiM0NDQiIGR5PSIuM2VtIj5TZWNvbmQgc2xpZGU8L3RleHQ+PC9zdmc+Cg=="
+ - type: component
+ component: "ui_suite_bootstrap:carousel_item"
+ slots:
+ image:
+ theme: image
+ uri: "data:image/svg+xml;base64,PHN2ZyBzdHlsZT0iZm9udC1zaXplOiAzLjVyZW07IHRleHQtYW5jaG9yOiBtaWRkbGU7IHVzZXItc2VsZWN0OiBub25lIiB3aWR0aD0iMTkyMCIgaGVpZ2h0PSI2NDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQgc2xpY2UiIGZvY3VzYWJsZT0iZmFsc2UiIHJvbGU9ImltZyIgYXJpYS1sYWJlbD0iUGxhY2Vob2xkZXI6IFRoaXJkIHNsaWRlIj48dGl0bGU+UGxhY2Vob2xkZXI8L3RpdGxlPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9IiM1NTUiPjwvcmVjdD48dGV4dCB4PSI1MCUiIHk9IjUwJSIgZmlsbD0iIzMzMyIgZHk9Ii4zZW0iPlRoaXJkIHNsaWRlPC90ZXh0Pjwvc3ZnPgo="
+props:
+ variant: default
+ with_controls: true
+ with_indicators: false
+ with_touch: true
+ interval: 5000
+ autoplay_mode: "true"
diff --git a/components/carousel/stories/carousel.autoplay_individual_interval.story.yml b/components/carousel/stories/carousel.autoplay_individual_interval.story.yml
index f323e2e5..503a70c5 100644
--- a/components/carousel/stories/carousel.autoplay_individual_interval.story.yml
+++ b/components/carousel/stories/carousel.autoplay_individual_interval.story.yml
@@ -29,3 +29,4 @@ props:
with_indicators: false
with_touch: true
interval: 5000
+ autoplay_mode: carousel
diff --git a/components/carousel/stories/carousel.autoplay_no_controls.story.yml b/components/carousel/stories/carousel.autoplay_no_controls.story.yml
index 2aea07eb..def4cbd8 100644
--- a/components/carousel/stories/carousel.autoplay_no_controls.story.yml
+++ b/components/carousel/stories/carousel.autoplay_no_controls.story.yml
@@ -25,3 +25,4 @@ props:
with_indicators: false
with_touch: true
interval: 5000
+ autoplay_mode: carousel
diff --git a/components/dropdown/stories/dropdown.menu_content_text.story.yml b/components/dropdown/stories/dropdown.menu_content_text.story.yml
deleted file mode 100644
index 08aac55b..00000000
--- a/components/dropdown/stories/dropdown.menu_content_text.story.yml
+++ /dev/null
@@ -1,12 +0,0 @@
-name: "Menu content: text"
-slots:
- title: "Dropdown with text"
-props:
- variant: dropdown
- content:
- - title: "Some example text that's free-flowing within the dropdown menu."
- - title: "And this is more example text."
- button_variant: secondary
-
-# @todo make dropdown menu attributes a prop? And add a new slot for free content?
-
diff --git a/components/navbar/navbar.component.yml b/components/navbar/navbar.component.yml
index 43bf8e86..3e524edc 100644
--- a/components/navbar/navbar.component.yml
+++ b/components/navbar/navbar.component.yml
@@ -48,8 +48,8 @@ props:
description: "Must start with a letter. Randomly generated if empty."
$ref: "ui-patterns://identifier"
placement:
- # @todo deprecate now that it is possible to control the component attributes and the link with styles is done?
- title: Placement
+ title: "Placement (deprecated)"
+ description: "Deprecated, use class in attributes instead."
type: string
enum:
- default
--
GitLab
From 61eef3a8f9645977a47d0a107b8b7c4cd70e8035 Mon Sep 17 00:00:00 2001
From: Florent Torregrosa <florent.torregrosa@gmail.com>
Date: Thu, 13 Mar 2025 11:47:39 +0100
Subject: [PATCH 15/15] Issue #3485834 by grimreaper: fix CI
---
.cspell-project-words.txt | 1 +
components/navbar/stories/navbar.external_content.story.yml | 1 -
components/spinner/stories/spinner.buttons.story.yml | 1 -
3 files changed, 1 insertion(+), 2 deletions(-)
diff --git a/.cspell-project-words.txt b/.cspell-project-words.txt
index b2f864f9..47feba94 100644
--- a/.cspell-project-words.txt
+++ b/.cspell-project-words.txt
@@ -5,6 +5,7 @@ amet
augue
autocompleteselect
autohide
+autoplaying
backoffice
bfont
bibendum
diff --git a/components/navbar/stories/navbar.external_content.story.yml b/components/navbar/stories/navbar.external_content.story.yml
index 484443c2..ead48fb2 100644
--- a/components/navbar/stories/navbar.external_content.story.yml
+++ b/components/navbar/stories/navbar.external_content.story.yml
@@ -1,5 +1,4 @@
name: "External content"
-slots:
props:
variant: dark
attributes:
diff --git a/components/spinner/stories/spinner.buttons.story.yml b/components/spinner/stories/spinner.buttons.story.yml
index ffb57d86..89d3e0e0 100644
--- a/components/spinner/stories/spinner.buttons.story.yml
+++ b/components/spinner/stories/spinner.buttons.story.yml
@@ -1,6 +1,5 @@
name: "Buttons"
props:
-# variant: border
aria_hidden: true
library_wrapper: >
<button class="btn btn-primary" type="button" disabled>
--
GitLab