Issue #3485834 by grimreaper, pdureau: Use new stories flexibility to improve components examples:

- fix dropdown
- add new prop for carousel
- add new prop option for navbar

.cspell-project-words.txt

@@ -5,6 +5,7 @@ amet
 augue
 autocompleteselect
 autohide
+autoplaying
 backoffice
 bfont
 bibendum

components/accordion/stories/accordion.always_open.story.yml

+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

components/accordion/accordion.preview.story.yml → components/accordion/stories/accordion.default.story.yml

-name: Preview
+name: Default
 slots:
   content:
     - type: component

components/alert/stories/alert.complete.story.yml

+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

components/alert/alert.preview.story.yml → components/alert/stories/alert.default.story.yml

-name: Preview
+name: Default
 slots:
-  heading: "Well done!"
   message: "A simple alert. Check it out!"
 props:
-  dismissible: true
+  dismissible: false

components/alert/stories/alert.dismissing.story.yml

+name: Dismissing
+slots:
+  message: "<strong>Holy guacamole!</strong> You should check in on some of those fields below."
+props:
+  dismissible: true

components/alert/stories/alert.icon.story.yml

+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

components/alert/stories/alert.link.story.yml

+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

components/badge/badge.preview.story.yml

-name: Preview
-slots:
-  label: New
-props:
-  attributes:
-    class:
-      - text-bg-primary

components/badge/stories/badge.background.story.yml

+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 %}

components/badge/stories/badge.button.story.yml

+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>

components/badge/stories/badge.button_positioned.story.yml

+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>

components/badge/stories/badge.button_positioned_generic.story.yml

+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>

components/badge/stories/badge.headings.story.yml

+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 %}

components/badge/stories/badge.pill.story.yml

+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 %}

components/blockquote/stories/blockquote.default.story.yml

+name: "Default"
+slots:
+  content:
+    - type: html_tag
+      tag: p
+      value: "A well-known quote, contained in a blockquote element."

components/blockquote/stories/blockquote.source_center.story.yml

+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

components/blockquote/stories/blockquote.source_end.story.yml

+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

components/blockquote/blockquote.preview.story.yml → components/blockquote/stories/blockquote.source_start.story.yml

-name: Preview
+name: "Naming a source"
+description: "When there is something in the 'footer' slot."
 slots:
   content:
     - type: html_tag

components/breadcrumb/stories/breadcrumb.1_item.story.yml

+name: "1 Item"
+props:
+  items:
+    - title: Home