Skip to content

Commit d9840ea

Browse files
Lukas742Lukas742
authored
docs(Wizard): show entire code of the example (#5007)
1 parent 18a24be commit d9840ea

File tree

2 files changed

+184
-23
lines changed

2 files changed

+184
-23
lines changed

‎packages/main/src/webComponents/Wizard/Wizard.mdx

Lines changed: 124 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,130 @@ import { excludePropsForAbstract } from '@sb/utils';
1313

1414
## Example
1515

16-
<Canvas of={ComponentStories.Default} />
16+
<Canvas of={ComponentStories.Default} sourceState="none" />
17+
18+
<details>
19+
20+
<summary>Show Code</summary>
21+
22+
```tsx
23+
const WizardComponent = () => {
24+
const [selected, setSelected] = useState('1');
25+
const [disabled, setDisabled] = useState<Record<string, boolean>>({ '2': true, '3': true, '4': true });
26+
const [hidden, setHidden] = useState<Record<string, boolean>>({ step3Btn: true, finalizeBtn: true });
27+
const goToStep2 = () => {
28+
setDisabled((prev) => {
29+
const { '2': _omit, ...rest } = prev;
30+
return rest;
31+
});
32+
setSelected('2');
33+
};
34+
const goToStep3 = () => {
35+
setDisabled((prev) => {
36+
const { '3': _omit, ...rest } = prev;
37+
return rest;
38+
});
39+
setSelected('3');
40+
};
41+
const handleStep2Completed = (e) => {
42+
if (e.target.checked) {
43+
setHidden((prev) => {
44+
const { step3Btn: _omit, ...rest } = prev;
45+
return rest;
46+
});
47+
}
48+
};
49+
const finalizeWizard = () => {
50+
alert('Wizard is now completed!');
51+
};
52+
const handlePriceInput = (e) => {
53+
if (e.target.value) {
54+
setHidden((prev) => {
55+
const { finalizeBtn: _omit, ...rest } = prev;
56+
return rest;
57+
});
58+
}
59+
};
60+
const handleStepChange = (e) => {
61+
setSelected(e.detail.step.dataset.step);
62+
args.onStepChange(e);
63+
};
64+
65+
return (
66+
<Wizard {...args} onStepChange={handleStepChange}>
67+
<WizardStep icon={productIcon} titleText="Product Type" selected={selected === '1'} data-step={'1'}>
68+
<Title>1. Product Type</Title>
69+
<MessageStrip design={MessageStripDesign.Information}>
70+
The Wizard control is supposed to break down large tasks, into smaller steps, easier for the user to work
71+
with.
72+
</MessageStrip>
73+
<Label wrappingType={WrappingType.None}>
74+
Sed fermentum, mi et tristique ullamcorper, sapien sapien faucibus sem, quis pretium nibh lorem malesuada
75+
diam. Nulla quis arcu aliquet, feugiat massa semper, volutpat diam. Nam vitae ante posuere, molestie neque sit
76+
amet, dapibus velit. Maecenas eleifend tempor lorem. Mauris vitae elementum mi, sed eleifend ligula. Nulla
77+
tempor vulputate dolor, nec dignissim quam convallis ut. Praesent vitae commodo felis, ut iaculis felis. Fusce
78+
quis eleifend sapien, eget facilisis nibh. Suspendisse est velit, scelerisque ut commodo eget, dignissim quis
79+
metus. Cras faucibus consequat gravida. Curabitur vitae quam felis. Phasellus ac leo eleifend, commodo tortor
80+
et, varius quam. Aliquam erat volutpat
81+
</Label>
82+
<Button design={ButtonDesign.Emphasized} onClick={goToStep2}>
83+
Step 2
84+
</Button>
85+
</WizardStep>
86+
<WizardStep
87+
icon={hintIcon}
88+
titleText="Product Information"
89+
disabled={disabled['2']}
90+
selected={selected === '2'}
91+
data-step={'2'}
92+
>
93+
<Title>2. Product Information</Title>
94+
<Label wrappingType={WrappingType.None}>
95+
Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse
96+
arcu metus, molestie a turpis a, molestie aliquet dui. Donec ppellentesque leo sit amet dui vehicula, quis
97+
ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet
98+
dui. Donec pulvinar, sapien corper eu, posuere malesuada nisl. Integer pellentesque leo sit amet dui vehicula,
99+
quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie
100+
aliquet dui. Donec pulvinar, sapien
101+
</Label>
102+
<CheckBox onChange={handleStep2Completed} text="Step Completed" />
103+
<br />
104+
{!hidden['step3Btn'] && (
105+
<Button design={ButtonDesign.Emphasized} onClick={goToStep3}>
106+
Step 3
107+
</Button>
108+
)}
109+
</WizardStep>
110+
<WizardStep
111+
icon={leadIcon}
112+
titleText="Pricing"
113+
disabled={disabled['3']}
114+
selected={selected === '3'}
115+
data-step={'3'}
116+
>
117+
<Title>3. Pricing</Title>
118+
<Label wrappingType={WrappingType.None}>
119+
Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse
120+
arcu metus, molestie a turpis a, molestie aliquet dui. Donec ppellentesque leo sit amet dui vehicula, quis
121+
ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet
122+
dui. Donec pulvinar, sapien corper eu, posuere malesuada nisl. Integer pellentesque leo sit amet dui vehicula,
123+
quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie
124+
aliquet dui. Donec pulvinar, sapien
125+
</Label>
126+
<Input placeholder="Item Price" onInput={handlePriceInput} />
127+
{Br}
128+
{!hidden['finalizeBtn'] && (
129+
<Button design={ButtonDesign.Emphasized} onClick={finalizeWizard}>
130+
Finalize
131+
</Button>
132+
)}
133+
</WizardStep>
134+
</Wizard>
135+
);
136+
};
137+
```
138+
139+
</details>
17140

18141
## Properties
19142

‎packages/main/src/webComponents/Wizard/Wizard.stories.tsx

Lines changed: 60 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
22
import hintIcon from '@ui5/webcomponents-icons/dist/hint.js';
33
import leadIcon from '@ui5/webcomponents-icons/dist/lead.js';
44
import productIcon from '@ui5/webcomponents-icons/dist/product.js';
5-
import { useRef } from 'react';
5+
import { useState } from 'react';
66
import { ButtonDesign } from '../../enums/ButtonDesign.js';
77
import { MessageStripDesign } from '../../enums/MessageStripDesign.js';
88
import { WrappingType } from '../../enums/WrappingType.js';
@@ -34,28 +34,50 @@ type Story = StoryObj<typeof meta>;
3434

3535
export const Default: Story = {
3636
render(args) {
37-
const step2 = useRef(null);
38-
const step3 = useRef(null);
37+
const [selected, setSelected] = useState('1');
38+
const [disabled, setDisabled] = useState<Record<string, boolean>>({ '2': true, '3': true, '4': true });
39+
const [hidden, setHidden] = useState<Record<string, boolean>>({ step3Btn: true, finalizeBtn: true });
3940
const goToStep2 = () => {
40-
step2.current.selected = true;
41-
step2.current.disabled = false;
41+
setDisabled((prev) => {
42+
const { '2': _omit, ...rest } = prev;
43+
return rest;
44+
});
45+
setSelected('2');
4246
};
4347
const goToStep3 = () => {
44-
step3.current.selected = true;
45-
step3.current.disabled = false;
48+
setDisabled((prev) => {
49+
const { '3': _omit, ...rest } = prev;
50+
return rest;
51+
});
52+
setSelected('3');
4653
};
47-
const handleStep2Completed = () => {
48-
document.querySelector('#goToStep3').removeAttribute('hidden');
54+
const handleStep2Completed = (e) => {
55+
if (e.target.checked) {
56+
setHidden((prev) => {
57+
const { step3Btn: _omit, ...rest } = prev;
58+
return rest;
59+
});
60+
}
4961
};
5062
const finalizeWizard = () => {
5163
alert('Wizard is now completed!');
5264
};
53-
const handlePriceInput = () => {
54-
document.querySelector('#finalizeBtn').removeAttribute('hidden');
65+
const handlePriceInput = (e) => {
66+
if (e.target.value) {
67+
setHidden((prev) => {
68+
const { finalizeBtn: _omit, ...rest } = prev;
69+
return rest;
70+
});
71+
}
5572
};
73+
const handleStepChange = (e) => {
74+
setSelected(e.detail.step.dataset.step);
75+
args.onStepChange(e);
76+
};
77+
5678
return (
57-
<Wizard {...args}>
58-
<WizardStep icon={productIcon} titleText="Product Type" selected>
79+
<Wizard {...args} onStepChange={handleStepChange}>
80+
<WizardStep icon={productIcon} titleText="Product Type" selected={selected === '1'} data-step={'1'}>
5981
<Title>1. Product Type</Title>
6082
<MessageStrip design={MessageStripDesign.Information}>
6183
The Wizard control is supposed to break down large tasks, into smaller steps, easier for the user to work
@@ -74,7 +96,13 @@ export const Default: Story = {
7496
Step 2
7597
</Button>
7698
</WizardStep>
77-
<WizardStep icon={hintIcon} titleText="Product Information" disabled ref={step2}>
99+
<WizardStep
100+
icon={hintIcon}
101+
titleText="Product Information"
102+
disabled={disabled['2']}
103+
selected={selected === '2'}
104+
data-step={'2'}
105+
>
78106
<Title>2. Product Information</Title>
79107
<Label wrappingType={WrappingType.None}>
80108
Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem.
@@ -86,12 +114,20 @@ export const Default: Story = {
86114
</Label>
87115
<CheckBox onChange={handleStep2Completed} text="Step Completed" />
88116
{Br}
89-
<Button id="goToStep3" design={ButtonDesign.Emphasized} onClick={goToStep3} hidden>
90-
Step 3
91-
</Button>
117+
{!hidden['step3Btn'] && (
118+
<Button design={ButtonDesign.Emphasized} onClick={goToStep3}>
119+
Step 3
120+
</Button>
121+
)}
92122
</WizardStep>
93-
<WizardStep icon={leadIcon} titleText="Pricing" disabled ref={step3}>
94-
<Title>4. Pricing</Title>
123+
<WizardStep
124+
icon={leadIcon}
125+
titleText="Pricing"
126+
disabled={disabled['3']}
127+
selected={selected === '3'}
128+
data-step={'3'}
129+
>
130+
<Title>3. Pricing</Title>
95131
<Label wrappingType={WrappingType.None}>
96132
Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem.
97133
Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec ppellentesque leo sit amet dui
@@ -102,9 +138,11 @@ export const Default: Story = {
102138
</Label>
103139
<Input placeholder="Item Price" onInput={handlePriceInput} />
104140
{Br}
105-
<Button design={ButtonDesign.Emphasized} onClick={finalizeWizard} hidden id="finalizeBtn">
106-
Finalize
107-
</Button>
141+
{!hidden['finalizeBtn'] && (
142+
<Button design={ButtonDesign.Emphasized} onClick={finalizeWizard}>
143+
Finalize
144+
</Button>
145+
)}
108146
</WizardStep>
109147
</Wizard>
110148
);

0 commit comments

Comments
 (0)