Skip to content
This repository was archived by the owner on Jan 23, 2024. It is now read-only.

Commit dfcb656

Browse files
segunadebayosegunadebayo
committed
feat: add stepper docs
1 parent 319acba commit dfcb656

File tree

8 files changed

+713
-10
lines changed

8 files changed

+713
-10
lines changed

‎configs/components.sidebar.json

+6-1
Original file line numberDiff line numberDiff line change
@@ -288,6 +288,11 @@
288288
{
289289
"title": "SkipNav",
290290
"path": "/docs/components/skip-nav"
291+
},
292+
{
293+
"new": true,
294+
"title": "Stepper",
295+
"path": "/docs/components/stepper"
291296
}
292297
]
293298
},
@@ -340,4 +345,4 @@
340345
]
341346
}
342347
]
343-
}
348+
}

‎configs/search-meta.json

+162
Original file line numberDiff line numberDiff line change
@@ -51789,6 +51789,168 @@
5178951789
"lvl3": "Stat with Indicator"
5179051790
}
5179151791
},
51792+
{
51793+
"id": "//docs/components/stepper/props",
51794+
"type": "lvl1",
51795+
"url": "/docs/components/stepper/props",
51796+
"hierarchy": {}
51797+
},
51798+
{
51799+
"content": "Props",
51800+
"id": "//docs/components/stepper/props",
51801+
"type": "lvl2",
51802+
"url": "/docs/components/stepper/props#props",
51803+
"hierarchy": { "lvl2": "Props", "lvl3": null }
51804+
},
51805+
{
51806+
"content": "Stepper Props",
51807+
"id": "//docs/components/stepper/props",
51808+
"type": "lvl3",
51809+
"url": "/docs/components/stepper/props#stepper-props",
51810+
"hierarchy": { "lvl2": "Props", "lvl3": "Stepper Props" }
51811+
},
51812+
{
51813+
"content": "StepStatus Props",
51814+
"id": "//docs/components/stepper/props",
51815+
"type": "lvl3",
51816+
"url": "/docs/components/stepper/props#stepstatus-props",
51817+
"hierarchy": { "lvl2": "Stepper Props", "lvl3": "StepStatus Props" }
51818+
},
51819+
{
51820+
"id": "//docs/components/stepper/theming",
51821+
"type": "lvl1",
51822+
"url": "/docs/components/stepper/theming",
51823+
"hierarchy": {}
51824+
},
51825+
{
51826+
"content": "Theming",
51827+
"id": "//docs/components/stepper/theming",
51828+
"type": "lvl2",
51829+
"url": "/docs/components/stepper/theming#theming",
51830+
"hierarchy": { "lvl2": "Theming", "lvl3": null }
51831+
},
51832+
{
51833+
"content": "Anatomy",
51834+
"id": "//docs/components/stepper/theming",
51835+
"type": "lvl3",
51836+
"url": "/docs/components/stepper/theming#anatomy",
51837+
"hierarchy": { "lvl2": "Theming", "lvl3": "Anatomy" }
51838+
},
51839+
{
51840+
"content": "Customizing a component",
51841+
"id": "//docs/components/stepper/theming",
51842+
"type": "lvl3",
51843+
"url": "/docs/components/stepper/theming#customizing-a-component",
51844+
"hierarchy": { "lvl2": "Anatomy", "lvl3": "Customizing a component" }
51845+
},
51846+
{
51847+
"content": "Changing the styles for a specific size",
51848+
"id": "//docs/components/stepper/theming",
51849+
"type": "lvl3",
51850+
"url": "/docs/components/stepper/theming#changing-the-styles-for-a-specific-size",
51851+
"hierarchy": {
51852+
"lvl2": "Customizing a component",
51853+
"lvl3": "Changing the styles for a specific size"
51854+
}
51855+
},
51856+
{
51857+
"content": "Stepper",
51858+
"id": "//docs/components/stepper/usage",
51859+
"type": "lvl1",
51860+
"url": "/docs/components/stepper/usage",
51861+
"hierarchy": { "lvl1": "Stepper" }
51862+
},
51863+
{
51864+
"content": "Import",
51865+
"id": "//docs/components/stepper/usage",
51866+
"type": "lvl2",
51867+
"url": "/docs/components/stepper/usage#import",
51868+
"hierarchy": { "lvl1": "Stepper", "lvl2": "Import", "lvl3": null }
51869+
},
51870+
{
51871+
"content": "Usage",
51872+
"id": "//docs/components/stepper/usage",
51873+
"type": "lvl2",
51874+
"url": "/docs/components/stepper/usage#usage",
51875+
"hierarchy": { "lvl1": "Stepper", "lvl2": "Usage", "lvl3": null }
51876+
},
51877+
{
51878+
"content": "Changing the orientation",
51879+
"id": "//docs/components/stepper/usage",
51880+
"type": "lvl2",
51881+
"url": "/docs/components/stepper/usage#changing-the-orientation",
51882+
"hierarchy": {
51883+
"lvl1": "Stepper",
51884+
"lvl2": "Changing the orientation",
51885+
"lvl3": null
51886+
}
51887+
},
51888+
{
51889+
"content": "Changing the size",
51890+
"id": "//docs/components/stepper/usage",
51891+
"type": "lvl2",
51892+
"url": "/docs/components/stepper/usage#changing-the-size",
51893+
"hierarchy": {
51894+
"lvl1": "Stepper",
51895+
"lvl2": "Changing the size",
51896+
"lvl3": null
51897+
}
51898+
},
51899+
{
51900+
"content": "Changing the color scheme",
51901+
"id": "//docs/components/stepper/usage",
51902+
"type": "lvl2",
51903+
"url": "/docs/components/stepper/usage#changing-the-color-scheme",
51904+
"hierarchy": {
51905+
"lvl1": "Stepper",
51906+
"lvl2": "Changing the color scheme",
51907+
"lvl3": null
51908+
}
51909+
},
51910+
{
51911+
"content": "Changing the step indicator's content",
51912+
"id": "//docs/components/stepper/usage",
51913+
"type": "lvl2",
51914+
"url": "/docs/components/stepper/usage#changing-the-step-indicators-content",
51915+
"hierarchy": {
51916+
"lvl1": "Stepper",
51917+
"lvl2": "Changing the step indicator's content",
51918+
"lvl3": null
51919+
}
51920+
},
51921+
{
51922+
"content": "Setting the active step with click",
51923+
"id": "//docs/components/stepper/usage",
51924+
"type": "lvl2",
51925+
"url": "/docs/components/stepper/usage#setting-the-active-step-with-click",
51926+
"hierarchy": {
51927+
"lvl1": "Stepper",
51928+
"lvl2": "Setting the active step with click",
51929+
"lvl3": null
51930+
}
51931+
},
51932+
{
51933+
"content": "Adding a progress bar",
51934+
"id": "//docs/components/stepper/usage",
51935+
"type": "lvl2",
51936+
"url": "/docs/components/stepper/usage#adding-a-progress-bar",
51937+
"hierarchy": {
51938+
"lvl1": "Stepper",
51939+
"lvl2": "Adding a progress bar",
51940+
"lvl3": null
51941+
}
51942+
},
51943+
{
51944+
"content": "Showing step summary",
51945+
"id": "//docs/components/stepper/usage",
51946+
"type": "lvl2",
51947+
"url": "/docs/components/stepper/usage#showing-step-summary",
51948+
"hierarchy": {
51949+
"lvl1": "Stepper",
51950+
"lvl2": "Showing step summary",
51951+
"lvl3": null
51952+
}
51953+
},
5179251954
{
5179351955
"id": "//docs/components/switch/props",
5179451956
"type": "lvl1",

‎content/docs/components/stepper/props.mdx

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
---
2+
id: stepper
3+
scope: props
4+
---
5+
6+
## Props
7+
8+
### Stepper Props
9+
10+
<PropsTable of='Stepper' />
11+
12+
### StepStatus Props
13+
14+
<PropsTable of='StepStatus' />
15+
16+
> All other components are passed through to their underlying components.

‎content/docs/components/stepper/theming.mdx

+92
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
---
2+
id: stepper
3+
scope: theming
4+
---
5+
6+
## Theming
7+
8+
The `Stepper` component is a multipart component. The styling needs to be
9+
applied to each part specifically.
10+
11+
### Anatomy
12+
13+
The Stepper theming is made up of the following parts:
14+
15+
- `stepper`: Maps to the `Stepper` component
16+
- `step`: Maps to the `Step` component
17+
- `title`: Maps to the `StepTitle` component
18+
- `description`: Maps to the `StepDescription` component
19+
- `indicator`: Maps to the `StepIndicator` component
20+
- `separator`: Maps to the `StepSeparator` component
21+
- `icon`: Maps to the `StepIcon` component
22+
- `number`: Maps to the `StepNumber` component
23+
24+
### Customizing a component
25+
26+
Let's say we want to override the step indicator to use a square instead of a
27+
circle. Here's how we'll go about that:
28+
29+
```jsx live=false
30+
// themes/stepper.ts
31+
32+
const baseStyle = {
33+
// select the indicator part
34+
indicator: {
35+
// change the default border radius to 0
36+
borderRadius: 0,
37+
},
38+
}
39+
40+
const stepperTheme = {
41+
baseStyle,
42+
}
43+
44+
const theme = extendTheme({
45+
components: {
46+
Stepper: stepperTheme,
47+
},
48+
})
49+
```
50+
51+
### Changing the styles for a specific size
52+
53+
In addition to the `baseStyle`, you can also change the styles for a specific
54+
size. Let's say we want to change the step title's font size for the `lg` size.
55+
56+
```jsx live=false
57+
// themes/stepper.ts
58+
59+
const baseStyle = {
60+
indicator: {
61+
borderRadius: 0,
62+
},
63+
}
64+
65+
const sizes = {
66+
lg: {
67+
// select the title part
68+
title: {
69+
// change the font size to lg
70+
fontSize: 'lg',
71+
},
72+
},
73+
}
74+
75+
const stepperTheme = {
76+
baseStyle,
77+
sizes,
78+
}
79+
80+
const theme = extendTheme({
81+
components: {
82+
Stepper: stepperTheme,
83+
},
84+
})
85+
```
86+
87+
The styling for a stepper component can be overriden at any level, whether it's
88+
`variant` or `size`, it's completely up to you.
89+
90+
> To learn more about styling multipart components, visit the
91+
> [Component Style](/docs/styled-system/component-style#styling-multipart-components)
92+
> page.

0 commit comments

Comments
 (0)