Skip to content

Commit 39bd48e

Browse files
amandacxzamandacxz
committed
chore(Stepper): updated stories
1 parent 074f5e2 commit 39bd48e

4 files changed

Lines changed: 87 additions & 23 deletions

File tree

‎mocks/stepper.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -148,7 +148,10 @@ export class MockStepper extends LitElement {
148148
return (this._getStepper().getComponent() as Function)(this.details);
149149
}
150150

151-
protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {
151+
protected async firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): Promise<void> {
152+
await this.updateComplete;
153+
await this._getStepper().updateComplete;
154+
152155
this.component = this._getComponent();
153156
this.requestUpdate();
154157
}

‎stories/component-templates/Stepper/additional.mdx‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,12 +24,20 @@ export interface SgdsStepProperties {
2424
<Story of={StepperStories.StepComponentClickable} />
2525
</Canvas>
2626

27+
### Step states (active, completed, disabled)
28+
29+
<Canvas of={StepperStories.StepStates}>
30+
<Story of={StepperStories.StepStates} />
31+
</Canvas>
32+
2733
---
2834

2935
## Using the Deprecated Steps Property
3036

3137
The `steps` property approach is now deprecated in favor of `sgds-step` child components. However, it remains supported for backwards compatibility.
3238

39+
> **Note:** The legacy `IStepMetaData` (`steps` prop) approach does **not** support newer `sgds-step` capabilities such as slot-based step descriptions/content and related slot interaction patterns. Use `<sgds-step>` children for all new implementations.
40+
3341
## Pass IStepsMetadata to steps prop
3442

3543
`steps` prop is an array of object defined by interface `IStepMetaData`

‎stories/component-templates/Stepper/additional.stories.js‎

Lines changed: 70 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -7,17 +7,30 @@ const ClickableTemplate = args => {
77
<div>
88
<h5>Steps indicator are not clickable</h5>
99
<sgds-stepper activeStep="2">
10-
<sgds-step stepHeader="Personal Details"></sgds-step>
11-
<sgds-step stepHeader="Address"></sgds-step>
12-
<sgds-step stepHeader="Review"></sgds-step>
10+
<sgds-step stepHeader="Personal Details">
11+
<div>Description</div>
12+
</sgds-step>
13+
<sgds-step stepHeader="Address">
14+
<div>Description</div>
15+
</sgds-step>
16+
<sgds-step stepHeader="Review">
17+
<div>Description</div>
18+
</sgds-step>
1319
</sgds-stepper>
1420
</div>
21+
<br />
1522
<div>
1623
<h5>Steps indicator are clickable</h5>
1724
<sgds-stepper activeStep="2" clickable>
18-
<sgds-step stepHeader="Personal Details"></sgds-step>
19-
<sgds-step stepHeader="Address"></sgds-step>
20-
<sgds-step stepHeader="Review"></sgds-step>
25+
<sgds-step stepHeader="Personal Details">
26+
<div>Description</div>
27+
</sgds-step>
28+
<sgds-step stepHeader="Address">
29+
<div>Description</div>
30+
</sgds-step>
31+
<sgds-step stepHeader="Review">
32+
<div>Description</div>
33+
</sgds-step>
2134
</sgds-stepper>
2235
</div>
2336
</div>
@@ -26,17 +39,29 @@ const ClickableTemplate = args => {
2639

2740
const StepComponentTemplate = () => html`
2841
<sgds-stepper activeStep="0">
29-
<sgds-step stepHeader="Personal Details"></sgds-step>
30-
<sgds-step stepHeader="Address"></sgds-step>
31-
<sgds-step stepHeader="Review"></sgds-step>
42+
<sgds-step stepHeader="Personal Details">
43+
<div>Description</div>
44+
</sgds-step>
45+
<sgds-step stepHeader="Address">
46+
<div>Description</div>
47+
</sgds-step>
48+
<sgds-step stepHeader="Review">
49+
<div>Description</div>
50+
</sgds-step>
3251
</sgds-stepper>
3352
`;
3453

3554
const StepComponentClickableTemplate = () => html`
3655
<sgds-stepper activeStep="1" clickable>
37-
<sgds-step stepHeader="Personal Details"></sgds-step>
38-
<sgds-step stepHeader="Address"></sgds-step>
39-
<sgds-step stepHeader="Review"></sgds-step>
56+
<sgds-step stepHeader="Personal Details">
57+
<div>Description</div>
58+
</sgds-step>
59+
<sgds-step stepHeader="Address">
60+
<div>Description</div>
61+
</sgds-step>
62+
<sgds-step stepHeader="Review">
63+
<div>Description</div>
64+
</sgds-step>
4065
</sgds-stepper>
4166
`;
4267

@@ -72,15 +97,45 @@ export const StepComponentClickable = {
7297
tags: ["!dev"]
7398
};
7499

100+
const StepStatesTemplate = () => html`
101+
<sgds-stepper activeStep="1" clickable>
102+
<sgds-step stepHeader="Personal Details" completed>
103+
<div>Completed step</div>
104+
</sgds-step>
105+
<sgds-step stepHeader="Address" active>
106+
<div>Active step</div>
107+
</sgds-step>
108+
<sgds-step stepHeader="Review" disabled>
109+
<div>Disabled step</div>
110+
</sgds-step>
111+
</sgds-stepper>
112+
`;
113+
114+
export const StepStates = {
115+
render: StepStatesTemplate.bind({}),
116+
name: "Step States",
117+
args: {},
118+
parameters: {},
119+
tags: ["!dev"]
120+
};
121+
75122
const SlottedClickableTemplate = () => html`
76123
<sgds-stepper activeStep="1" clickable>
77124
<sgds-step stepHeader="Personal Details">
78-
<a href="#" data-clickable>Learn more</a>
125+
<div>
126+
Description
127+
<sgds-link size="sm">
128+
<a href="#" data-clickable>Learn more</a>
129+
</sgds-link>
130+
</div>
79131
</sgds-step>
80132
<sgds-step stepHeader="Address">
81-
<button data-clickable @click=${() => alert("Button clicked")}>Action</button>
133+
<div>Please fill the form with your current address.</div>
134+
<sgds-button size="sm" data-clickable @click=${() => alert("Button clicked")}>Action</sgds-button>
135+
</sgds-step>
136+
<sgds-step stepHeader="Review">
137+
<div>Description</div>
82138
</sgds-step>
83-
<sgds-step stepHeader="Review"></sgds-step>
84139
</sgds-stepper>
85140
`;
86141

‎stories/component-templates/Stepper/basic.js‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,7 @@ import { ifDefined } from "lit/directives/if-defined.js";
44
export const Template = ({ steps, activeStep, clickable, orientation }) => {
55
return html`
66
<sgds-stepper activeStep=${ifDefined(activeStep)} ?clickable=${clickable} orientation=${ifDefined(orientation)}>
7-
${steps.map(
8-
header => html`<sgds-step stepHeader="${header.stepHeader}" .component=${header.component}></sgds-step> `
9-
)}
7+
${steps.map(step => html`<sgds-step stepHeader="${step.stepHeader}">${step.description}</sgds-step> `)}
108
</sgds-stepper>
119
`;
1210
};
@@ -15,15 +13,15 @@ export const args = {
1513
steps: [
1614
{
1715
stepHeader: "Personal Details",
18-
component: "1 test"
16+
description: "Provide your personal information."
1917
},
2018
{
21-
stepHeader: "Address and Contact Information",
22-
component: "2 test"
19+
stepHeader: "Address",
20+
description: "Enter your address and contact details."
2321
},
2422
{
2523
stepHeader: "Review",
26-
component: "3 test"
24+
description: "Review all details before submitting."
2725
}
2826
]
2927
};

0 commit comments

Comments
 (0)