diff --git a/.cspell-project-words.txt b/.cspell-project-words.txt
index b2f864f9a4fc227779ed175db41255d17ed92962..47feba9400389723aadfdf47fdd8108e718bdff5 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/accordion/stories/accordion.always_open.story.yml b/components/accordion/stories/accordion.always_open.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..6f394e1af725cab7e91dc01b41b459eec39e917d
--- /dev/null
+++ b/components/accordion/stories/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/stories/accordion.default.story.yml
similarity index 99%
rename from components/accordion/accordion.preview.story.yml
rename to components/accordion/stories/accordion.default.story.yml
index 0657e81b46fbe06e0a2a800d3a4e5b6f776bcafc..5c7c0b3573ea32f0cd6b2bb487b2b1653dcf6456 100644
--- a/components/accordion/accordion.preview.story.yml
+++ b/components/accordion/stories/accordion.default.story.yml
@@ -1,4 +1,4 @@
-name: Preview
+name: Default
slots:
content:
- type: component
diff --git a/components/alert/alert.preview.story.yml b/components/alert/alert.preview.story.yml
deleted file mode 100644
index 337b26580f5aafefab0592f70616c6290d56a075..0000000000000000000000000000000000000000
--- 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/alert/stories/alert.complete.story.yml b/components/alert/stories/alert.complete.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..d12c80efe9ca6daa69bd4b26402dbf4daecebdee
--- /dev/null
+++ b/components/alert/stories/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/stories/alert.default.story.yml b/components/alert/stories/alert.default.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..46bb274b7be8e562b420dcdb303e166436fe1f81
--- /dev/null
+++ b/components/alert/stories/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/stories/alert.dismissing.story.yml b/components/alert/stories/alert.dismissing.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..82f4f119ab9fb1ece049eb2303acc9c0d0d22a5a
--- /dev/null
+++ b/components/alert/stories/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/stories/alert.icon.story.yml b/components/alert/stories/alert.icon.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..93e71062995629c511bbedafe51ac3408a0d93b6
--- /dev/null
+++ b/components/alert/stories/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/stories/alert.link.story.yml b/components/alert/stories/alert.link.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..f70547c6238aa74d1d3b0224a97a076d7ce70f05
--- /dev/null
+++ b/components/alert/stories/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/badge/badge.preview.story.yml b/components/badge/badge.preview.story.yml
deleted file mode 100644
index df97b4bde773e0f5e6dda38660477f60df5d1fff..0000000000000000000000000000000000000000
--- 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/badge/stories/badge.background.story.yml b/components/badge/stories/badge.background.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..329a54b598a4a90070ea89184bf4d7ef8656650c
--- /dev/null
+++ b/components/badge/stories/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/stories/badge.button.story.yml b/components/badge/stories/badge.button.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..4a160b4388e4629d97238cb79320e133d0f2aa07
--- /dev/null
+++ b/components/badge/stories/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/stories/badge.button_positioned.story.yml b/components/badge/stories/badge.button_positioned.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..9964f0f981cdbb58dc685fca37292c214d956ad1
--- /dev/null
+++ b/components/badge/stories/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/stories/badge.button_positioned_generic.story.yml b/components/badge/stories/badge.button_positioned_generic.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..3846060547f8eba6c306c7dc68f63a17827cb0d8
--- /dev/null
+++ b/components/badge/stories/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/stories/badge.headings.story.yml b/components/badge/stories/badge.headings.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..bd45afbbed814715eff90b3447186dc093fb6a7c
--- /dev/null
+++ b/components/badge/stories/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/stories/badge.pill.story.yml b/components/badge/stories/badge.pill.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..568488614573f1ad845cd0fb64b9da71cc647926
--- /dev/null
+++ b/components/badge/stories/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/blockquote/stories/blockquote.default.story.yml b/components/blockquote/stories/blockquote.default.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..8dc44250086e8ae88ae7457ae25a4325b62a6535
--- /dev/null
+++ b/components/blockquote/stories/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/stories/blockquote.source_center.story.yml b/components/blockquote/stories/blockquote.source_center.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..f5871bbc7339eb644323a5328862de41789a62d6
--- /dev/null
+++ b/components/blockquote/stories/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/stories/blockquote.source_end.story.yml b/components/blockquote/stories/blockquote.source_end.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..01d35149be8c675ae9a93bfb3f05c750c37d96bd
--- /dev/null
+++ b/components/blockquote/stories/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/stories/blockquote.source_start.story.yml
similarity index 76%
rename from components/blockquote/blockquote.preview.story.yml
rename to components/blockquote/stories/blockquote.source_start.story.yml
index 7620fe5674b755ca6df9796c25b1f9d204ac9027..719ddafa8f0e5979107d44f3a3f75d019a1f7cb9 100644
--- a/components/blockquote/blockquote.preview.story.yml
+++ b/components/blockquote/stories/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/stories/breadcrumb.1_item.story.yml b/components/breadcrumb/stories/breadcrumb.1_item.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..1001e431aa58fc13df0382e029c65b00deb8a167
--- /dev/null
+++ b/components/breadcrumb/stories/breadcrumb.1_item.story.yml
@@ -0,0 +1,4 @@
+name: "1 Item"
+props:
+ items:
+ - title: Home
diff --git a/components/breadcrumb/stories/breadcrumb.2_items.story.yml b/components/breadcrumb/stories/breadcrumb.2_items.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..4eeb2ef5faab41d513898b0f01ed98d0b87ec513
--- /dev/null
+++ b/components/breadcrumb/stories/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/stories/breadcrumb.3_items.story.yml
similarity index 86%
rename from components/breadcrumb/breadcrumb.preview.story.yml
rename to components/breadcrumb/stories/breadcrumb.3_items.story.yml
index 070173ed189a6fdc2ae0a9ba6fbe8e2f255ed5ff..08a5881b7560f2a995edc4bd457d399e69268b02 100644
--- a/components/breadcrumb/breadcrumb.preview.story.yml
+++ b/components/breadcrumb/stories/breadcrumb.3_items.story.yml
@@ -1,4 +1,4 @@
-name: Preview
+name: "3 Items"
props:
items:
- title: Home
diff --git a/components/button/button.preview.story.yml b/components/button/stories/button.default.story.yml
similarity index 88%
rename from components/button/button.preview.story.yml
rename to components/button/stories/button.default.story.yml
index 4cc11dda5f11adcc5259d587ef1d9b38df1880fb..cc9d62b6468f4a92015510e76b42146141a1cced 100644
--- a/components/button/button.preview.story.yml
+++ b/components/button/stories/button.default.story.yml
@@ -1,4 +1,4 @@
-name: Preview
+name: Default
slots:
label: Submit
props:
diff --git a/components/button/stories/button.disabled.story.yml b/components/button/stories/button.disabled.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..0f9899c1718a13899e80c6a3ca83d06291e6ef99
--- /dev/null
+++ b/components/button/stories/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/stories/button.disabled_link.story.yml b/components/button/stories/button.disabled_link.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..b4dc47fc4914c12047349c902291b0716e3592da
--- /dev/null
+++ b/components/button/stories/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/stories/button.tags.story.yml b/components/button/stories/button.tags.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..e36d8afb5fef2a3a511e3f6e09575c04f47a0e2d
--- /dev/null
+++ b/components/button/stories/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/stories/button_group.default.story.yml
similarity index 67%
rename from components/button_group/button_group.preview.story.yml
rename to components/button_group/stories/button_group.default.story.yml
index 1574045d2d97a05ddbdfe1a6a5443db865f5085a..8ac340b995dc0d431198e48b086522ad00cd8018 100644
--- a/components/button_group/button_group.preview.story.yml
+++ b/components/button_group/stories/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/stories/button_group.link.story.yml b/components/button_group/stories/button_group.link.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..36e1249f79f4aa93bed2e73f4eafdf6c5f3a4ad2
--- /dev/null
+++ b/components/button_group/stories/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/stories/button_group.mixed.story.yml b/components/button_group/stories/button_group.mixed.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..08d968de969d0a13f91e98aa5e48073012d7e715
--- /dev/null
+++ b/components/button_group/stories/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/stories/button_group.nesting.story.yml b/components/button_group/stories/button_group.nesting.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..d2b24ce0470bb00602f0eac36902dbadaafb0ee0
--- /dev/null
+++ b/components/button_group/stories/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/stories/button_group.outlined.story.yml b/components/button_group/stories/button_group.outlined.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..a1cc9841aeb88ea211fdb06391158c4074e83d20
--- /dev/null
+++ b/components/button_group/stories/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"
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 ab046ccbf8094174b0517e49001eb0077686f7e0..0000000000000000000000000000000000000000
--- 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/button_toolbar/stories/button_toolbar.default.story.yml b/components/button_toolbar/stories/button_toolbar.default.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..17b25abc8dda2f081d32da0df07b7c6928d68232
--- /dev/null
+++ b/components/button_toolbar/stories/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/card/card.horizontal.story.yml b/components/card/stories/card.basic.story.yml
similarity index 63%
rename from components/card/card.horizontal.story.yml
rename to components/card/stories/card.basic.story.yml
index e9f4e667a0e817b8b9863be87b48604f58d61013..ce126ac8dd88b974a7386ba349ca716bcfdb80bd 100644
--- a/components/card/card.horizontal.story.yml
+++ b/components/card/stories/card.basic.story.yml
@@ -1,4 +1,4 @@
-name: Horizontal
+name: Basic
slots:
image:
theme: image
@@ -9,8 +9,7 @@ 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: "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"
@@ -18,18 +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: "#"
+ url: "#"
props:
attributes:
- style: "max-width: 540px;"
- variant: horizontal
+ style: "width: 18rem;"
+ variant: default
+ image_position: top
diff --git a/components/card/stories/card.content_types_body.story.yml b/components/card/stories/card.content_types_body.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..ccfc51588fe2dac4d94dfa2f5b9919b1c213d5ba
--- /dev/null
+++ b/components/card/stories/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/stories/card.content_types_header.story.yml b/components/card/stories/card.content_types_header.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..7e7f071ffefad8e5a2b14dfd8baee7a27bcacf1c
--- /dev/null
+++ b/components/card/stories/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/stories/card.content_types_header_footer.story.yml b/components/card/stories/card.content_types_header_footer.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..13a8436d56c8ad656b5b8eca8cbe0466d619a8d7
--- /dev/null
+++ b/components/card/stories/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/stories/card.content_types_header_quote.story.yml b/components/card/stories/card.content_types_header_quote.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..f5cb1ea8b91bab4be7f191a3ec7dd0b65edcbd41
--- /dev/null
+++ b/components/card/stories/card.content_types_header_quote.story.yml
@@ -0,0 +1,28 @@
+# @todo Update when upstream issue will be fixed: https://github.com/twbs/bootstrap/issues/41292
+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/stories/card.content_types_header_title.story.yml b/components/card/stories/card.content_types_header_title.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..c5c03d9b2e214c7693e528cb0ac0e367bb3b891d
--- /dev/null
+++ b/components/card/stories/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/stories/card.content_types_images.story.yml b/components/card/stories/card.content_types_images.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..47bca699bd16bb0413e1b39017951b0c3581bf80
--- /dev/null
+++ b/components/card/stories/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/stories/card.content_types_kitchen.story.yml b/components/card/stories/card.content_types_kitchen.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..a58200d5b4ee38ecbd41c718d2f97e7c7076f782
--- /dev/null
+++ b/components/card/stories/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/stories/card.content_types_list_groups.story.yml b/components/card/stories/card.content_types_list_groups.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..2173834421c3a92477dd5587c10540016d3f0917
--- /dev/null
+++ b/components/card/stories/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/stories/card.content_types_list_groups_footer.story.yml b/components/card/stories/card.content_types_list_groups_footer.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..3d3a866a49f34130761af2a5f40777c93d3b7491
--- /dev/null
+++ b/components/card/stories/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/stories/card.content_types_list_groups_header.story.yml b/components/card/stories/card.content_types_list_groups_header.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..17984629d5114f0f2fb80078fd1d5cd5b722d72a
--- /dev/null
+++ b/components/card/stories/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/stories/card.content_types_titles_text_links.story.yml b/components/card/stories/card.content_types_titles_text_links.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..b724dd463f0f7f11bb59769ec25dd676717dfc44
--- /dev/null
+++ b/components/card/stories/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.preview.story.yml b/components/card/stories/card.horizontal.story.yml
similarity index 51%
rename from components/card/card.preview.story.yml
rename to components/card/stories/card.horizontal.story.yml
index e27538aae524f79866ef478b0ec7847c62f5e3ed..c70014701d959a9ae2dd6f0c5fb143fe3c7c5a53 100644
--- a/components/card/card.preview.story.yml
+++ b/components/card/stories/card.horizontal.story.yml
@@ -1,39 +1,29 @@
-name: Preview
+name: Horizontal
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: "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: "#"
- footer:
- type: html_tag
- tag: span
- value: "2 days ago"
+ class:
+ - text-body-secondary
+ attributes:
+ class:
+ - card-text
props:
- variant: default
- image_position: top
+ attributes:
+ style: "max-width: 540px;"
+ variant: horizontal
diff --git a/components/card/stories/card.navigation_pills.story.yml b/components/card/stories/card.navigation_pills.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..475f3f0e9b05ad3df0c391ea5357fffff25a8e74
--- /dev/null
+++ b/components/card/stories/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/stories/card.navigation_tabs.story.yml b/components/card/stories/card.navigation_tabs.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..d4d0ea35c93c650c35183dd85b860c5bdce0ae2c
--- /dev/null
+++ b/components/card/stories/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/stories/card.styles_background.story.yml b/components/card/stories/card.styles_background.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..b70d3372032785d05a8d60f1634445243831c1fc
--- /dev/null
+++ b/components/card/stories/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/stories/card.styles_border.story.yml b/components/card/stories/card.styles_border.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..61aebee59ebdf4c55608246e660972ba3ef06753
--- /dev/null
+++ b/components/card/stories/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/stories/card.styles_mixins.story.yml b/components/card/stories/card.styles_mixins.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..e5018c2f52014e81e8ca57e77ca4521c46a6d867
--- /dev/null
+++ b/components/card/stories/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/stories/card.text_alignment.story.yml b/components/card/stories/card.text_alignment.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..b254b32ea4e2fc89017db4ebebbe69b5b00431f2
--- /dev/null
+++ b/components/card/stories/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
deleted file mode 100644
index 31ba81bca678b4b2d6a2bce1ff42bc24640eeede..0000000000000000000000000000000000000000
--- a/components/card_group/card_group.preview.story.yml
+++ /dev/null
@@ -1,18 +0,0 @@
-name: Preview
-slots:
- cards:
- - 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
diff --git a/components/card_group/stories/card_group.preview.story.yml b/components/card_group/stories/card_group.preview.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..1cb26ffb8a75e6f2acce9028a438df6e2dd30b5d
--- /dev/null
+++ b/components/card_group/stories/card_group.preview.story.yml
@@ -0,0 +1,87 @@
+name: Preview
+slots:
+ cards:
+ - type: component
+ component: "ui_suite_bootstrap: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: "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"
+ 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"
+ 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/stories/card_overlay.preview.story.yml
similarity index 81%
rename from components/card_overlay/card_overlay.preview.story.yml
rename to components/card_overlay/stories/card_overlay.preview.story.yml
index 77e917da4be663cafd2ae51444e39a53e7d1e833..e5c9bc028d891080b0826e5e0c36e0fe35508706 100644
--- a/components/card_overlay/card_overlay.preview.story.yml
+++ b/components/card_overlay/stories/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/carousel/carousel.component.yml b/components/carousel/carousel.component.yml
index 4a723097fe4a364e9772bbcb40deaadb44467af2..8f6ee45e3fb882c19670a06115d3d441dfd8b5a6 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 c1dae6d29917dffd75008db51b7c12c878ef4996..f5de112d698e8ad8bd4a39b8cda451451ba920bd 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
new file mode 100644
index 0000000000000000000000000000000000000000..606e7cbd391d81a34c51578fc0d959c126889288
--- /dev/null
+++ b/components/carousel/stories/carousel.autoplay.story.yml
@@ -0,0 +1,28 @@
+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
+ 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 0000000000000000000000000000000000000000..179c1d293188f33e303305a663072f8f09a56223
--- /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
new file mode 100644
index 0000000000000000000000000000000000000000..503a70c5c50b63d381d5069fde1a2c03ee51dd63
--- /dev/null
+++ b/components/carousel/stories/carousel.autoplay_individual_interval.story.yml
@@ -0,0 +1,32 @@
+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
+ 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
new file mode 100644
index 0000000000000000000000000000000000000000..def4cbd8815a91c73eee5dc19c7e56167e56df18
--- /dev/null
+++ b/components/carousel/stories/carousel.autoplay_no_controls.story.yml
@@ -0,0 +1,28 @@
+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
+ autoplay_mode: carousel
diff --git a/components/carousel/carousel.preview.story.yml b/components/carousel/stories/carousel.captions.story.yml
similarity index 89%
rename from components/carousel/carousel.preview.story.yml
rename to components/carousel/stories/carousel.captions.story.yml
index 200c962c7ae8598a563f5d9eb7c48c9b1fb7254e..41a237abffbc92b3c76a83b93897874dffbc860b 100644
--- a/components/carousel/carousel.preview.story.yml
+++ b/components/carousel/stories/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/stories/carousel.default.story.yml b/components/carousel/stories/carousel.default.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..a3fbceb4d85a8e66f63c292bd3fa3fa6f8bf701c
--- /dev/null
+++ b/components/carousel/stories/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/stories/carousel.indicators.story.yml b/components/carousel/stories/carousel.indicators.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..253e41178524af597b1b429d6a267f7fcd0d823a
--- /dev/null
+++ b/components/carousel/stories/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/stories/carousel.no_touch.story.yml b/components/carousel/stories/carousel.no_touch.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..f468438044ddf37b4bf652ff8418dffb95c9ce2c
--- /dev/null
+++ b/components/carousel/stories/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/close_button/close_button.dark.story.yml b/components/close_button/close_button.dark.story.yml
deleted file mode 100644
index 707d9f3d21971e5d836ebc6d35f33925f708a955..0000000000000000000000000000000000000000
--- a/components/close_button/close_button.dark.story.yml
+++ /dev/null
@@ -1,6 +0,0 @@
-name: Dark
-props:
- variant: default
- disabled: false
- aria_label: Close
-library_wrapper: "<div class=\"bg-dark\" data-bs-theme=\"dark\">{{ _story }}</div"
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 9c95156ebf9ca3b2c19beba45a588c6d150a00aa..0000000000000000000000000000000000000000
--- 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/stories/close_button.dark.story.yml b/components/close_button/stories/close_button.dark.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..8e714a5e80170a8c78088865654db4abea36810a
--- /dev/null
+++ b/components/close_button/stories/close_button.dark.story.yml
@@ -0,0 +1,15 @@
+name: Dark
+description: "Normal and disabled state."
+props:
+ variant: default
+ disabled: false
+ aria_label: Close
+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/stories/close_button.light.story.yml b/components/close_button/stories/close_button.light.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..9fea829491f4b83a8ca9db1f3260bcd5638d4279
--- /dev/null
+++ b/components/close_button/stories/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.white.story.yml b/components/close_button/stories/close_button.white.story.yml
similarity index 56%
rename from components/close_button/close_button.white.story.yml
rename to components/close_button/stories/close_button.white.story.yml
index 30820780e3d04dd250dc89566fb019122f7d3b1d..6de1b00b68dd6cd7f98304e3d47713b200fc8e74 100644
--- a/components/close_button/close_button.white.story.yml
+++ b/components/close_button/stories/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>
diff --git a/components/dropdown/dropdown.preview.story.yml b/components/dropdown/dropdown.preview.story.yml
deleted file mode 100644
index 8e42f73abf2b58d5917a459aef91752423676151..0000000000000000000000000000000000000000
--- 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.twig b/components/dropdown/dropdown.twig
index 3630a3c11c6c7a30deaf869ec657e7222b3b3603..2f8ec12e4e383a287c4c2a98045587d9b32791de 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/dropdown/stories/dropdown.auto_close.story.yml b/components/dropdown/stories/dropdown.auto_close.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..4ec3417021704a78bfd8ea15810b081452f75606
--- /dev/null
+++ b/components/dropdown/stories/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/stories/dropdown.color.story.yml b/components/dropdown/stories/dropdown.color.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..58a6f570ab81930416e97d7caf9cae28753f0373
--- /dev/null
+++ b/components/dropdown/stories/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/stories/dropdown.dark.story.yml b/components/dropdown/stories/dropdown.dark.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..abf262d43bece5754e7d8e2d5882c51523d580ae
--- /dev/null
+++ b/components/dropdown/stories/dropdown.dark.story.yml
@@ -0,0 +1,20 @@
+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: "#"
diff --git a/components/dropdown/stories/dropdown.directions.story.yml b/components/dropdown/stories/dropdown.directions.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..e813f4b7d41ac223c3fefa733e3adcdccb4d0994
--- /dev/null
+++ b/components/dropdown/stories/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/stories/dropdown.menu_content_divider.story.yml b/components/dropdown/stories/dropdown.menu_content_divider.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..3b949a215901893ac930950bdb3c31ee6be7bdbc
--- /dev/null
+++ b/components/dropdown/stories/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/stories/dropdown.menu_content_header.story.yml b/components/dropdown/stories/dropdown.menu_content_header.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..98c564a7ad962ccb1d82f7f3bf0498aeac9fc80d
--- /dev/null
+++ b/components/dropdown/stories/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/stories/dropdown.menu_items_active.story.yml b/components/dropdown/stories/dropdown.menu_items_active.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..5da936267059079afed3ce589035c50986e1c9da
--- /dev/null
+++ b/components/dropdown/stories/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/stories/dropdown.menu_items_disabled.story.yml b/components/dropdown/stories/dropdown.menu_items_disabled.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..6b6bb5e33c2d97ceb9cf9b512f03ec0b4b9a27be
--- /dev/null
+++ b/components/dropdown/stories/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/stories/dropdown.menu_items_text.story.yml b/components/dropdown/stories/dropdown.menu_items_text.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..470557f899d660ec15ba6a23311cd6ef226c0237
--- /dev/null
+++ b/components/dropdown/stories/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/stories/dropdown.options_offset.story.yml b/components/dropdown/stories/dropdown.options_offset.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..5d97a4f9acd86bb97a3a632a4e0195001b3af445
--- /dev/null
+++ b/components/dropdown/stories/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/stories/dropdown.responsive_alignment.story.yml b/components/dropdown/stories/dropdown.responsive_alignment.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..6fb6dddff3164e77cdc90f4b63b8e255c086e10b
--- /dev/null
+++ b/components/dropdown/stories/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/stories/dropdown.single_button_button.story.yml b/components/dropdown/stories/dropdown.single_button_button.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..596d9b7c1c4ff3fde2cb2081d8cefbacd04af3b6
--- /dev/null
+++ b/components/dropdown/stories/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/stories/dropdown.single_button_link.story.yml b/components/dropdown/stories/dropdown.single_button_link.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..2c7af6dbeedb915f4af58922a0b37d8fcdeae1e5
--- /dev/null
+++ b/components/dropdown/stories/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/stories/dropdown.sizing_large.story.yml b/components/dropdown/stories/dropdown.sizing_large.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..dfcb9ebb2a11377feae8de762cf166590f06440b
--- /dev/null
+++ b/components/dropdown/stories/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/stories/dropdown.sizing_small.story.yml b/components/dropdown/stories/dropdown.sizing_small.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..0cb2aceb29e0ae905b7db34cf04adf17d199381e
--- /dev/null
+++ b/components/dropdown/stories/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/stories/dropdown.split_button.story.yml b/components/dropdown/stories/dropdown.split_button.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..ff61da2693bc4d83b53e85288e81093b4ac41ed6
--- /dev/null
+++ b/components/dropdown/stories/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/figure/stories/figure.alignment.story.yml b/components/figure/stories/figure.alignment.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..b8083906187ee699f8c251465dfd3433e9a31749
--- /dev/null
+++ b/components/figure/stories/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/stories/figure.default.story.yml
similarity index 89%
rename from components/figure/figure.preview.story.yml
rename to components/figure/stories/figure.default.story.yml
index be5cf179ab4b448e39916d02a1546053834b4ccb..689f2ab73504820258e9f9741c0206d0a8278730 100644
--- a/components/figure/figure.preview.story.yml
+++ b/components/figure/stories/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/grid_row/grid_row.preview.story.yml b/components/grid_row/grid_row.preview.story.yml
deleted file mode 100644
index bee7231b2e26b91ac1f41d124b2913ee86ba698a..0000000000000000000000000000000000000000
--- a/components/grid_row/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/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 0000000000000000000000000000000000000000..e511ee6f797c0b4d5c5922cfe4b40f69890a34c4
--- /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 0000000000000000000000000000000000000000..6dac39b2ce456e62530a2ef9fcf938d6bb54cf50
--- /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 0000000000000000000000000000000000000000..a318110a763dff05353f98b8c9d84bab6517f379
--- /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 0000000000000000000000000000000000000000..cf72e52b31694c2210a6882da072cac3cb3e6f98
--- /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 0000000000000000000000000000000000000000..23c91984ce62ef94e9788e9b064e0d5eb6a77c0e
--- /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 0000000000000000000000000000000000000000..a3b824884d83a0a234149ad72bc69a70ba2fc54f
--- /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 0000000000000000000000000000000000000000..3b3e0b006e55dffb47dfd1dba3d6b0e67ac2799b
--- /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 0000000000000000000000000000000000000000..3b4fa3889f833cf9ddecdef9d90fe5d1c724df5c
--- /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 0000000000000000000000000000000000000000..5949365e18fe54d3d4c5e1788fd817a0c86f69a1
--- /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 0000000000000000000000000000000000000000..0ffcd3c944d66338c54e48c3597b1b66248a98b6
--- /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 0000000000000000000000000000000000000000..8f01ebc0756b5ac4fb38d1b6f9bcdf31a463f2bb
--- /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 0000000000000000000000000000000000000000..919b2046aa85fd80dc5be260925bd7eb19c6e50e
--- /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_1/grid_row_1.preview.story.yml b/components/grid_row_1/grid_row_1.preview.story.yml
deleted file mode 100644
index c20a6e1edc16c63f9dec14fea3199863c332fdec..0000000000000000000000000000000000000000
--- a/components/grid_row_1/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_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 0000000000000000000000000000000000000000..9bd7f062ee934ff4338973572180bdc491d1813b
--- /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_2/grid_row_2.preview.story.yml b/components/grid_row_2/grid_row_2.preview.story.yml
deleted file mode 100644
index 05d80aa0056844b5214bb83967e75a33634f6a78..0000000000000000000000000000000000000000
--- a/components/grid_row_2/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_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 0000000000000000000000000000000000000000..e7e59fefaed58450411b31733b3c23e07f6de1a5
--- /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 0000000000000000000000000000000000000000..58b1ca6fb7fdf0e280b058c5fd023498694566ab
--- /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 0000000000000000000000000000000000000000..6984f6a64f54782aa8bbe864a9981bc929b95d18
--- /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 0000000000000000000000000000000000000000..f392f1cc8551fefaf52af7809d26bba1ec440035
--- /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 0000000000000000000000000000000000000000..ea9ee106d37705bf96a0299e3fb4fd40c5f44a24
--- /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 0000000000000000000000000000000000000000..c4160b183a21477eff2e2f85b0659ad60bca0d59
--- /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 0000000000000000000000000000000000000000..62142bb8b5cede690d88d5e0e91149c884b0ecbc
--- /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 0000000000000000000000000000000000000000..11a3907097132480c0721c4a854b57b4024db058
--- /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_3/grid_row_3.preview.story.yml b/components/grid_row_3/grid_row_3.preview.story.yml
deleted file mode 100644
index 9cff69cdfb16f1e702705688514551c329d3fa2f..0000000000000000000000000000000000000000
--- a/components/grid_row_3/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_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 0000000000000000000000000000000000000000..d7f1e56c8f2dfc5ecb9896333d13264c8662ee06
--- /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 0000000000000000000000000000000000000000..72193b74839b5ec1f78e2f0a88fd01712b3e062a
--- /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 0000000000000000000000000000000000000000..d086ef9ac1e8fb1c04f712ca40234ae59ac06081
--- /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 0000000000000000000000000000000000000000..7fc0bfbcd82f89ab46fb5696488a1ebaa1339d51
--- /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 0000000000000000000000000000000000000000..083e59cb2f9f9d7188c46bba263a79e2cb2a0576
--- /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 0000000000000000000000000000000000000000..25e928de336544eb2975d01f830dcd6dc0397ff4
--- /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 0000000000000000000000000000000000000000..422905024091208eb9e19c3ca4fbdfd18b3ff7f4
--- /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 0000000000000000000000000000000000000000..f4840bf49aa8c99c76832f9ec20b6ebc6f157128
--- /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_4/grid_row_4.preview.story.yml b/components/grid_row_4/grid_row_4.preview.story.yml
deleted file mode 100644
index 54d4cbc3f57eb85888ce76d73238a1b669554ee2..0000000000000000000000000000000000000000
--- a/components/grid_row_4/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/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 0000000000000000000000000000000000000000..c0de1bb4540d2176446e1aa471ee878ca43c3fb2
--- /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 0000000000000000000000000000000000000000..1403fe23d8b2add33f5cb82455f06a66bb5a4656
--- /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 0000000000000000000000000000000000000000..8b5d426f575e55293543012ed00478f1684e2bb9
--- /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 0000000000000000000000000000000000000000..d381d080d2ae9b895ee4eae359090b72a1f7dbb1
--- /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 0000000000000000000000000000000000000000..f8b831daa72c2a065c4c11437d29daad34631f2b
--- /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 0000000000000000000000000000000000000000..b712e2f7aba4bcc71f24d54be1275ef655bb929a
--- /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/list/list.preview.story.yml b/components/list/list.preview.story.yml
deleted file mode 100644
index 9b78f6fd8bb2b31939be41fec98c9506c0a47708..0000000000000000000000000000000000000000
--- 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/stories/list.default_ol.story.yml b/components/list/stories/list.default_ol.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..82264689cf102a692982af6bbcf0076d4a76a214
--- /dev/null
+++ b/components/list/stories/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/stories/list.default_ul.story.yml b/components/list/stories/list.default_ul.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..b19a58daba9e77d01878982d104799dc330aa9ba
--- /dev/null
+++ b/components/list/stories/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/stories/list.inline.story.yml b/components/list/stories/list.inline.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..f51e569e03b2f4c24d429b6ab123e1dc4b14e422
--- /dev/null
+++ b/components/list/stories/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/stories/list.unstyled.story.yml b/components/list/stories/list.unstyled.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..e95b5a2ae17f2b5014043afd0295c514b6278d7c
--- /dev/null
+++ b/components/list/stories/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/list_group/stories/list_group.badge.story.yml b/components/list_group/stories/list_group.badge.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..0f491c9910bc3269682fb9b24ef7b5b4180fe3c0
--- /dev/null
+++ b/components/list_group/stories/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/stories/list_group.color.story.yml b/components/list_group/stories/list_group.color.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..34666190e45df1ebe1e4212d54853050685fcd5e
--- /dev/null
+++ b/components/list_group/stories/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/stories/list_group.color_link.story.yml b/components/list_group/stories/list_group.color_link.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..e2e4fe2a28ba36bf5c2eac7cf986f0ee9bccafde
--- /dev/null
+++ b/components/list_group/stories/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/stories/list_group.color_link_active.story.yml b/components/list_group/stories/list_group.color_link_active.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..d96e45a975270c29a8c8085aecb4efef2c285b93
--- /dev/null
+++ b/components/list_group/stories/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/stories/list_group.color_link_disabled.story.yml b/components/list_group/stories/list_group.color_link_disabled.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..bdba14fe15ad874daf9f2870dd44e9a866ec8019
--- /dev/null
+++ b/components/list_group/stories/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/stories/list_group.custom_content_1.story.yml b/components/list_group/stories/list_group.custom_content_1.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..24d88b8ab895fdfaddfd4cb821d82f2ffbdcc1cc
--- /dev/null
+++ b/components/list_group/stories/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/stories/list_group.custom_content_2.story.yml b/components/list_group/stories/list_group.custom_content_2.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..9e88b667f5487f9c1f35b8b050beb448c8941019
--- /dev/null
+++ b/components/list_group/stories/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/stories/list_group.default.story.yml b/components/list_group/stories/list_group.default.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..d1606b817ec475c8001d98ab7838147c20c65067
--- /dev/null
+++ b/components/list_group/stories/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/stories/list_group.links.story.yml
similarity index 74%
rename from components/list_group/list_group.preview.story.yml
rename to components/list_group/stories/list_group.links.story.yml
index 73a94ba60282de8075e65d8f2ed2afdaf8db5e19..4a53457b7270a88fc0aded3d1dc7a29864e9bf9f 100644
--- a/components/list_group/list_group.preview.story.yml
+++ b/components/list_group/stories/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/stories/list_group.state.story.yml b/components/list_group/stories/list_group.state.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..684e40c90bb5015cf6cafb7d45e8bacad9a7cde0
--- /dev/null
+++ b/components/list_group/stories/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 5829e0c7dcd7bcdddaa5b96249e3e6153e32f393..0000000000000000000000000000000000000000
--- 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
diff --git a/components/modal/stories/modal.default.story.yml b/components/modal/stories/modal.default.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..94241cdab875ae77aa07b3f97e54908679c33e2c
--- /dev/null
+++ b/components/modal/stories/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/stories/modal.fullscreen.story.yml b/components/modal/stories/modal.fullscreen.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..1dcc5233486964227a3c7576f7c72462d285046d
--- /dev/null
+++ b/components/modal/stories/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/stories/modal.long_content_default.story.yml b/components/modal/stories/modal.long_content_default.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..09e1b90fff528b489422236df15b6efc06b0c2ff
--- /dev/null
+++ b/components/modal/stories/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/stories/modal.long_content_scrollable.story.yml b/components/modal/stories/modal.long_content_scrollable.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..316a22f4f641038afb2858ad5dcac9154235b01f
--- /dev/null
+++ b/components/modal/stories/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/stories/modal.sizes.story.yml
similarity index 90%
rename from components/modal/modal.preview.story.yml
rename to components/modal/stories/modal.sizes.story.yml
index 816152ad918734f67f0e61f68e60a857d3e643d3..98f385b6ef322534be768bc2c87c47b683bd1f73 100644
--- a/components/modal/modal.preview.story.yml
+++ b/components/modal/stories/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/stories/modal.static_backdrop.story.yml b/components/modal/stories/modal.static_backdrop.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..18a29ffe5f176cf814d8fc7b6c047e2bb617bef5
--- /dev/null
+++ b/components/modal/stories/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/stories/modal.vertical_centered.story.yml b/components/modal/stories/modal.vertical_centered.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..0dd77b2ccaeda0532abbf11627f86da13c050b83
--- /dev/null
+++ b/components/modal/stories/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/stories/modal.vertical_centered_scrollable.story.yml b/components/modal/stories/modal.vertical_centered_scrollable.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..3b22cfcaf1f26315c3dd6060bb5ee06df686bb38
--- /dev/null
+++ b/components/modal/stories/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) }}
diff --git a/components/nav/stories/nav.alignment_center.story.yml b/components/nav/stories/nav.alignment_center.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..edc14545ce663a0710bbb524ad33c787f5c84846
--- /dev/null
+++ b/components/nav/stories/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/stories/nav.alignment_end.story.yml b/components/nav/stories/nav.alignment_end.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..816c0bf93bc21a099c03286c875362d8b1124e02
--- /dev/null
+++ b/components/nav/stories/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/stories/nav.alignment_vertical.story.yml b/components/nav/stories/nav.alignment_vertical.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..1bacdf9ecd086ebb1b2befc68ed9aabe8483484e
--- /dev/null
+++ b/components/nav/stories/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/stories/nav.custom_content.story.yml b/components/nav/stories/nav.custom_content.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..af4690cbf3dc1949582fd4de16cebf3da90ce602
--- /dev/null
+++ b/components/nav/stories/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/stories/nav.custom_content_vertical.story.yml b/components/nav/stories/nav.custom_content_vertical.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..e432e3b1119f516796cb0d60495f2f6b201157de
--- /dev/null
+++ b/components/nav/stories/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/stories/nav.preview.story.yml
similarity index 55%
rename from components/nav/nav.preview.story.yml
rename to components/nav/stories/nav.preview.story.yml
index 2867986e080f3ac8bfbe3a3ef0032b7a9b4b27f5..99210d7739f805da9fe102f2073f7f7e7b6f734b 100644
--- a/components/nav/nav.preview.story.yml
+++ b/components/nav/stories/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: "#"
diff --git a/components/navbar/navbar.component.yml b/components/navbar/navbar.component.yml
index 9bb620d311dd15c1a3569e0835221e6d2a6ba02e..3e524edc550fde1406efd0838bc39dbfcfe81a75 100644
--- a/components/navbar/navbar.component.yml
+++ b/components/navbar/navbar.component.yml
@@ -48,7 +48,8 @@ props:
description: "Must start with a letter. Randomly generated if empty."
$ref: "ui-patterns://identifier"
placement:
- title: Placement
+ title: "Placement (deprecated)"
+ description: "Deprecated, use class in attributes instead."
type: string
enum:
- default
@@ -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.twig b/components/navbar/navbar.twig
index d16f711e1e67f87de5dc16adf8f8c7e8419b46ef..2ae9c0ec9513783791c9761c8593a9477541ab7c 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/stories/navbar.brand_image.story.yml b/components/navbar/stories/navbar.brand_image.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..3fd9dc7833b9734ff1b876868166353fc21da741
--- /dev/null
+++ b/components/navbar/stories/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/stories/navbar.brand_image_text.story.yml b/components/navbar/stories/navbar.brand_image_text.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..152e2e3f63fa5a6fe7ad1f4597d1b6bceee89f1d
--- /dev/null
+++ b/components/navbar/stories/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/stories/navbar.brand_text.story.yml b/components/navbar/stories/navbar.brand_text.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..e4969ee074dfc72f6e8a8488fecef1438ad0f76b
--- /dev/null
+++ b/components/navbar/stories/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/stories/navbar.color.story.yml b/components/navbar/stories/navbar.color.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..455102a2db8baeaf96c082b7aa8ab0f7292810cc
--- /dev/null
+++ b/components/navbar/stories/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.dark.story.yml b/components/navbar/stories/navbar.dark.story.yml
similarity index 83%
rename from components/navbar/navbar.dark.story.yml
rename to components/navbar/stories/navbar.dark.story.yml
index 50ad1f4315c61051b3189bec3dabd8fcb272d5fb..1cda835ecc22805982aacbbbf7fa852411fb1a37 100644
--- a/components/navbar/navbar.dark.story.yml
+++ b/components/navbar/stories/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/stories/navbar.default.story.yml b/components/navbar/stories/navbar.default.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..fb9348dd89b45392e5227d899bed21d79740c969
--- /dev/null
+++ b/components/navbar/stories/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/stories/navbar.external_content.story.yml b/components/navbar/stories/navbar.external_content.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..ead48fb23c93a7ae2b13238f37448d41320d7fc6
--- /dev/null
+++ b/components/navbar/stories/navbar.external_content.story.yml
@@ -0,0 +1,16 @@
+name: "External content"
+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/stories/navbar.offcanvas.story.yml b/components/navbar/stories/navbar.offcanvas.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..dbb7066c196af03a9ffb93e902bf664aadfd0b58
--- /dev/null
+++ b/components/navbar/stories/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/stories/navbar.offcanvas_dark.story.yml b/components/navbar/stories/navbar.offcanvas_dark.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..c7fe95a3b27d083bfdeed32400de96406ad77c2e
--- /dev/null
+++ b/components/navbar/stories/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/stories/navbar.responsive.story.yml
similarity index 83%
rename from components/navbar/navbar.preview.story.yml
rename to components/navbar/stories/navbar.responsive.story.yml
index 6bfd9a916a6292a5da5cb27a3205f670617f364b..ac7f1e6e3d26bee764d20cfce65f72e6e5af56bf 100644
--- a/components/navbar/navbar.preview.story.yml
+++ b/components/navbar/stories/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/stories/navbar.responsive_hidden_brand.story.yml b/components/navbar/stories/navbar.responsive_hidden_brand.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..1a9386fee516793620fe324e63019e8e7eb23acc
--- /dev/null
+++ b/components/navbar/stories/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/stories/navbar.responsive_toggler_start.story.yml b/components/navbar/stories/navbar.responsive_toggler_start.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..4f46976a1b112974c61929665ed45d6102549010
--- /dev/null
+++ b/components/navbar/stories/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/stories/navbar.scrolling.story.yml b/components/navbar/stories/navbar.scrolling.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..8f6276b0d32c1f5d8e96cdfc072bfc7df469c225
--- /dev/null
+++ b/components/navbar/stories/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/stories/navbar.text.story.yml b/components/navbar/stories/navbar.text.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..8fa6e31e43f280550b1137a08565d3ae0455a8cd
--- /dev/null
+++ b/components/navbar/stories/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/stories/navbar.text_collapsible.story.yml b/components/navbar/stories/navbar.text_collapsible.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..a862d1f4297aa9811efb790f265340f2a82d579c
--- /dev/null
+++ b/components/navbar/stories/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_nav/navbar_nav.preview.story.yml b/components/navbar_nav/navbar_nav.preview.story.yml
deleted file mode 100644
index 61f6748778901d5c69a1291749b730565b8f3d19..0000000000000000000000000000000000000000
--- 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
diff --git a/components/offcanvas/stories/offcanvas.body_scrolling.story.yml b/components/offcanvas/stories/offcanvas.body_scrolling.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..339622bff2bc8623501f4012a1060eae58a7520e
--- /dev/null
+++ b/components/offcanvas/stories/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/stories/offcanvas.body_scrolling_backdrop.story.yml b/components/offcanvas/stories/offcanvas.body_scrolling_backdrop.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..18732bc53ebc4166340f52bab2e8f7724fbd4b1f
--- /dev/null
+++ b/components/offcanvas/stories/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/stories/offcanvas.dark.story.yml b/components/offcanvas/stories/offcanvas.dark.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..b33f8d2d1eee7b839dc942e59c34788d76e66ab8
--- /dev/null
+++ b/components/offcanvas/stories/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/stories/offcanvas.default.story.yml b/components/offcanvas/stories/offcanvas.default.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..f26f3744ac5d5d19bb822e6da80272915ca1cf23
--- /dev/null
+++ b/components/offcanvas/stories/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/stories/offcanvas.placement.story.yml
similarity index 81%
rename from components/offcanvas/offcanvas.preview.story.yml
rename to components/offcanvas/stories/offcanvas.placement.story.yml
index bbe07673d26455295d3af1769e179aa079377f24..de04b2087e4073e032cfb717303b205f0a02ef86 100644
--- a/components/offcanvas/offcanvas.preview.story.yml
+++ b/components/offcanvas/stories/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/stories/offcanvas.responsive.story.yml b/components/offcanvas/stories/offcanvas.responsive.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..3209a17eea66ce94f1d68fb2765d59283f4af91c
--- /dev/null
+++ b/components/offcanvas/stories/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/stories/offcanvas.static_backdrop.story.yml b/components/offcanvas/stories/offcanvas.static_backdrop.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..8805a7d57278303af499f3f6c57608dc63355be9
--- /dev/null
+++ b/components/offcanvas/stories/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) }}
diff --git a/components/pagination/stories/pagination.alignment_center.story.yml b/components/pagination/stories/pagination.alignment_center.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..29a5d3c0f9159a60ad76a8f5ee99cb57cf86a874
--- /dev/null
+++ b/components/pagination/stories/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/stories/pagination.alignment_end.story.yml b/components/pagination/stories/pagination.alignment_end.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..7e01fb4debeced78a859907aaa3d6b2fdc115a3b
--- /dev/null
+++ b/components/pagination/stories/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/stories/pagination.default.story.yml
similarity index 67%
rename from components/pagination/pagination.preview.story.yml
rename to components/pagination/stories/pagination.default.story.yml
index 0db3081718c9f9f0cc149240cebbd0af7f354a34..aebf227368f61fda8886fbfa214fe18d446ece2d 100644
--- a/components/pagination/pagination.preview.story.yml
+++ b/components/pagination/stories/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/stories/pagination.sizing_large.story.yml b/components/pagination/stories/pagination.sizing_large.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..bd61b34017c079b1de035636959d5efa8d834303
--- /dev/null
+++ b/components/pagination/stories/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/stories/pagination.sizing_small.story.yml b/components/pagination/stories/pagination.sizing_small.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..49f111574835cb474321f46f30eb3bd3ba6143d9
--- /dev/null
+++ b/components/pagination/stories/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/stories/pagination.states.story.yml b/components/pagination/stories/pagination.states.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..20acfa7cb3202f2af47c8b5d52a6284e156ddc0c
--- /dev/null
+++ b/components/pagination/stories/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
diff --git a/components/progress/progress.preview.story.yml b/components/progress/progress.preview.story.yml
deleted file mode 100644
index ec0b55773adad213a96023db70b838cdc325a852..0000000000000000000000000000000000000000
--- 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/stories/progress.background.story.yml b/components/progress/stories/progress.background.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..014635d613082d693972470bf8aa1de6ee4223ef
--- /dev/null
+++ b/components/progress/stories/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/stories/progress.background_with_label.story.yml b/components/progress/stories/progress.background_with_label.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..e53706a102ebb86c21340a42766afe9733319ec2
--- /dev/null
+++ b/components/progress/stories/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/stories/progress.default.story.yml b/components/progress/stories/progress.default.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..07fec7612670878df4ca273c0d9847f24013c9e4
--- /dev/null
+++ b/components/progress/stories/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/stories/progress.height_1.story.yml b/components/progress/stories/progress.height_1.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..2e1183b517a49eb0ec65d10e87e00aca883fa91b
--- /dev/null
+++ b/components/progress/stories/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/stories/progress.height_20.story.yml b/components/progress/stories/progress.height_20.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..c5993fca14959bc969c7329b376e7aeded10c271
--- /dev/null
+++ b/components/progress/stories/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/stories/progress.label.story.yml b/components/progress/stories/progress.label.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..86e063dc68392cb2485457e2a9a835d711ab7825
--- /dev/null
+++ b/components/progress/stories/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/stories/progress.label_long.story.yml b/components/progress/stories/progress.label_long.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..6f008988695da78a4f75ad3141b7b92556f4af37
--- /dev/null
+++ b/components/progress/stories/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_stacked/progress_stacked.preview.story.yml b/components/progress_stacked/stories/progress_stacked.default.story.yml
similarity index 98%
rename from components/progress_stacked/progress_stacked.preview.story.yml
rename to components/progress_stacked/stories/progress_stacked.default.story.yml
index 3ba5a8c9d075c1c7d779f136fc40d912f5d831b2..db49c0dd55b03e3fbcc6c6d6fe7f492c22f408f8 100644
--- a/components/progress_stacked/progress_stacked.preview.story.yml
+++ b/components/progress_stacked/stories/progress_stacked.default.story.yml
@@ -1,4 +1,4 @@
-name: Preview
+name: Default
slots:
items:
- type: component
diff --git a/components/spinner/stories/spinner.buttons.story.yml b/components/spinner/stories/spinner.buttons.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..89d3e0e0fe71b0a3f59c17a30f385b331ceb754e
--- /dev/null
+++ b/components/spinner/stories/spinner.buttons.story.yml
@@ -0,0 +1,12 @@
+name: "Buttons"
+props:
+ 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/stories/spinner.color.story.yml b/components/spinner/stories/spinner.color.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..faadb9c4872be9ec756a20bb5fa39fcd587e7a4f
--- /dev/null
+++ b/components/spinner/stories/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/stories/spinner.default.story.yml
similarity index 82%
rename from components/spinner/spinner.preview.story.yml
rename to components/spinner/stories/spinner.default.story.yml
index 1e0bacf50813c6a42cfb003420f77bca08b3b8ab..f39768b067c7e42eca0a925b6c3fc325d7122aa1 100644
--- a/components/spinner/spinner.preview.story.yml
+++ b/components/spinner/stories/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/stories/spinner.margin.story.yml b/components/spinner/stories/spinner.margin.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..bde93bbc92ba3c2a4465bdc988a1a5c770b8299a
--- /dev/null
+++ b/components/spinner/stories/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/stories/spinner.placement_flex.story.yml b/components/spinner/stories/spinner.placement_flex.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..8083ee771f09397d616e63e00f8bdd5cc3d60cdf
--- /dev/null
+++ b/components/spinner/stories/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/stories/spinner.placement_flex_2.story.yml b/components/spinner/stories/spinner.placement_flex_2.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..8907c6e10ccc1a4633170f95ae6c44f21827ffc3
--- /dev/null
+++ b/components/spinner/stories/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/stories/spinner.placement_float.story.yml b/components/spinner/stories/spinner.placement_float.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..6b9e4ba2e09f23584a5feb6601d094de5d4a1062
--- /dev/null
+++ b/components/spinner/stories/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/stories/spinner.placement_text.story.yml b/components/spinner/stories/spinner.placement_text.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..3a49352161627c853407f5218d48f0c403ca07d6
--- /dev/null
+++ b/components/spinner/stories/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>
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 0000000000000000000000000000000000000000..a663b4cd6a5c859353a6c111ef1c161ed9ffcf6d
--- /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 0000000000000000000000000000000000000000..d3c7e72f5cb078c2909d1cb24e01dc61c56c49bc
--- /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 0000000000000000000000000000000000000000..86a7f34c57b1bcfcaa1198d95d79de9e9e3d5287
--- /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 0000000000000000000000000000000000000000..5653533d0f6a87bf86288b678ff0f4f47c5b9723
--- /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 0000000000000000000000000000000000000000..b43bb4e214fd4e1293e3e358483438e872d0d9c9
--- /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 0000000000000000000000000000000000000000..a833f6ec0db4ed3b7f485f86e0414bdd5e7365f5
--- /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 0000000000000000000000000000000000000000..f3c5f254dcf892fab542ace1528bf25bf9e68eed
--- /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 0000000000000000000000000000000000000000..83f605a84541d9c3e608df19bed5c5f0e0cdb6fb
--- /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 0000000000000000000000000000000000000000..170df5b0f0d6823c202edcd181e0ae148ea2afac
--- /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 0000000000000000000000000000000000000000..ad333de10e1e73013cbaa0af15fbced712a25a13
--- /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 0000000000000000000000000000000000000000..6a1500d67da4fdce5e9750f27b0f433da83affc3
--- /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 0000000000000000000000000000000000000000..829d179a63e619f4606e694625fe399b838a8698
--- /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 0000000000000000000000000000000000000000..ac2715380a190f42f72bb5d014ad362a729a52a0
--- /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 0000000000000000000000000000000000000000..75efb4175e46b9e747ba4a1aecd515906a48e366
--- /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 0000000000000000000000000000000000000000..d45be78d653cf9c94b06b4c96068298608bd37f9
--- /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.responsive.story.yml b/components/table/stories/table.responsive.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..f4e52673bfe27aa316ba847a789c21b7ffe28f61
--- /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 0000000000000000000000000000000000000000..76977b331666fb70e6c2f2173444f5819d0676e1
--- /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 0000000000000000000000000000000000000000..1f4a1884af7be5d2d21d28f35fa0ffc1724814e2
--- /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 0000000000000000000000000000000000000000..2e7bb599efc41b7ee41428adcb3e834f7ed329f5
--- /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/table.preview.story.yml b/components/table/table.preview.story.yml
deleted file mode 100644
index 12b929b060167475148d50ce90b409e4d78715d9..0000000000000000000000000000000000000000
--- a/components/table/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_cell/table_cell.preview.story.yml b/components/table_cell/table_cell.preview.story.yml
deleted file mode 100644
index b3df7d74e0207d8fed7e16de5af781d4f38dfafe..0000000000000000000000000000000000000000
--- a/components/table_cell/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/table_row.preview.story.yml b/components/table_row/table_row.preview.story.yml
deleted file mode 100644
index bc0b3e3cc57866605aef9cfe223c6602a61f1ae3..0000000000000000000000000000000000000000
--- a/components/table_row/table_row.preview.story.yml
+++ /dev/null
@@ -1,3 +0,0 @@
-name: Preview
-props:
- active: false
diff --git a/components/toast/toast.preview.story.yml b/components/toast/stories/toast.basic.story.yml
similarity index 89%
rename from components/toast/toast.preview.story.yml
rename to components/toast/stories/toast.basic.story.yml
index d303bd0fe2c0c23b295a2577db8287ceab6fe299..0acff25ac44abe9bab72cedc320542454a7375cd 100644
--- a/components/toast/toast.preview.story.yml
+++ b/components/toast/stories/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/stories/toast.color.story.yml b/components/toast/stories/toast.color.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..9055f64bd3b7ed02ee70deb56280816857a34add
--- /dev/null
+++ b/components/toast/stories/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/stories/toast.custom_content.story.yml b/components/toast/stories/toast.custom_content.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..e72314ef873723308be7c97bca2c48d90a0dec8e
--- /dev/null
+++ b/components/toast/stories/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/stories/toast.custom_content_control.story.yml b/components/toast/stories/toast.custom_content_control.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..5824b234e8fc9eb1a375ad944900384717aba0f0
--- /dev/null
+++ b/components/toast/stories/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/stories/toast.translucent.story.yml b/components/toast/stories/toast.translucent.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..c733b2338088a67bbbfd5e9e3aca7757165be771
--- /dev/null
+++ b/components/toast/stories/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/stories/toast_container.preview.story.yml
similarity index 57%
rename from components/toast_container/toast_container.preview.story.yml
rename to components/toast_container/stories/toast_container.preview.story.yml
index 81525a1688876e78e0f81f05ea73436e333f5fb6..f537bd918787df77fbbc904d312a5f3d8f6ef45f 100644
--- a/components/toast_container/toast_container.preview.story.yml
+++ b/components/toast_container/stories/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:
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 a85a0d0954c15248884bf1c4bf3cc9e1ced0c0b8..ea4d0ea975e0bec2bf2e9e8640e407c0d2783eaa 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 c9c2f2a9618edd5098e4f4f9bb65d2298d384081..911ee6c1dec17851bafd663b6757b598b57f3f1f 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>