Added Complex section to Stepper Docs (#42174)

* Added Complex section

I've added a new section called **Complex** to the **Stepper** component to demonstrate how this component can be used in different scenarios.

This is possible as part of: https://github.com/twbs/bootstrap/pull/42165

* Slight rephrase to match the rest of the docs

Slight rephrase to match the rest of the docs

* Updated the badge stepper

Updated the badge stepper to better illustrate how a "Complete" progress would work with multi-step "Complete" / "In-progress" / "Pending" statuses.

* Added vertical complex stepper example

Added vertical complex stepper example

* w-100 is not needed for vertical stepper

w-100 is not needed for vertical stepper

* Revamp

---------

Co-authored-by: Mark Otto <markdotto@gmail.com>

diff --git a/scss/_stepper.scss b/scss/_stepper.scss
index ba0322cb0133f108d9fdd42e334a9f5e1f13c5b8..3d7e490b025769632f9a8a245696236c6510c0f9 100644 (file)
--- a/scss/_stepper.scss
+++ b/scss/_stepper.scss
@@ -71,7 +71,7 @@ $stepper-tokens: defaults(
     grid-template-rows: auto;
     grid-template-columns: var(--stepper-size) auto;
     gap: var(--stepper-text-gap);
-    align-items: center;
+    align-items: var(--stepper-align-items, center);
     text-decoration: none;
 
     // The counter

diff --git a/site/src/content/docs/components/stepper.mdx b/site/src/content/docs/components/stepper.mdx
index 6bcecfdf2ae8180d56ff34b0bdaa4befbf9274a9..0a30293035b4ea71e62f4fe6d05713abbfec17ac 100644 (file)
--- a/site/src/content/docs/components/stepper.mdx
+++ b/site/src/content/docs/components/stepper.mdx
@@ -66,6 +66,67 @@ Wrap your horizontal stepper in a `.stepper-overflow` container to enable horizo
       <li class="stepper-item">Finish onboarding</li>
     </ol>
   </div>`} />
+
+## Complex
+
+Add additional content beyond labels to provide more context within each step, such as descriptions, helper messages, status indicators, or other decorative elements.
+
+<Example code={`<ol class="stepper stepper-vertical">
+    <li class="stepper-item align-items-start active">
+      <div class="pt-1">
+        <div class="fw-semibold">Create</div>
+        <small class="fg-3">Create an account.</small>
+      </div>
+    </li>
+    <li class="stepper-item align-items-start active">
+      <div class="pt-1">
+        <div class="fw-semibold">Confirm</div>
+        <small class="fg-3">Confirm your email.</small>
+      </div>
+    </li>
+    <li class="stepper-item align-items-start">
+      <div class="pt-1">
+        <div class="fw-semibold">Set-up</div>
+        <small class="fg-3">Configure your profile.</small>
+      </div>
+    </li>
+    <li class="stepper-item align-items-start">
+      <div class="pt-1">
+        <div class="fw-semibold">Finish</div>
+        <small class="fg-3">Welcome aboard!</small>
+      </div>
+    </li>
+  </ol>`} />
+
+Mix with other components, like badges, and our theme helpers to create a more unique steppers.
+
+<Example code={`<ol class="stepper stepper-horizontal w-100">
+    <li class="stepper-item theme-success active">
+      <div>
+        <div>Create account</div>
+        <div class="badge badge-subtle">Complete</div>
+      </div>
+    </li>
+    <li class="stepper-item theme-success active">
+      <div>
+        <div>Confirm email</div>
+        <div class="badge badge-subtle">Complete</div>
+      </div>
+    </li>
+    <li class="stepper-item theme-primary active">
+      <div>
+        <div>Update profile</div>
+        <div class="badge badge-subtle">In-progress</div>
+      </div>
+    </li>
+    <li class="stepper-item theme-secondary">
+      <div>
+        <div>Finish</div>
+        <div class="badge badge-subtle">Pending</div>
+      </div>
+    </li>
+  </ol>`} />
+
 ## Alignment
 
 Use [text alignment utilities]([[docsref:/utilities/text-alignment]]) (because we use `display: inline-grid`) to align the steps. The inline grid arrangement allows us to keep the steps equal width and ensures the connecting lines are rendered correctly.

diff --git a/site/src/types/auto-import.d.ts b/site/src/types/auto-import.d.ts
index 7530544649ba7ef30145f47aaed73402e6fc62ad..75fb0dc4f727bd752d6d1dbbd24da9657fb72685 100644 (file)
--- a/site/src/types/auto-import.d.ts
+++ b/site/src/types/auto-import.d.ts
@@ -24,7 +24,6 @@ export declare global {
   export const Placeholder: typeof import('@shortcodes/Placeholder.astro').default
   export const ResizableExample: typeof import('@shortcodes/ResizableExample.astro').default
   export const ScssDocs: typeof import('@shortcodes/ScssDocs.astro').default
-  export const StepperPlayground: typeof import('@shortcodes/StepperPlayground.astro').default
   export const Swatch: typeof import('@shortcodes/Swatch.astro').default
   export const Table: typeof import('@shortcodes/Table.astro').default
 }