Skip to content
This repository was archived by the owner on Mar 25, 2025. It is now read-only.

Commit 9d24386

Browse files
HitomiWinHitomiWin
authored
feat(stepper): allow component to stepper label (#218)
Fixes #217
1 parent 32137c7 commit 9d24386

File tree

5 files changed

+68
-42
lines changed

5 files changed

+68
-42
lines changed

‎packages/core/src/Stepper/Step.tsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ type BaseProps = HTMLAttributes<BaseElement>
2323

2424
export interface StepContent extends BaseProps {
2525
/* Step's label */
26-
readonly label: string
26+
readonly label: ReactNode
2727
/* Step's content */
2828
readonly content: ReactNode
2929
/* Indicates whether the step has errors that should be resolved */
@@ -109,8 +109,9 @@ const StepHeader = styled.div`
109109
position: relative;
110110
margin-top: -${spacing.large};
111111
`
112+
export const StepLabel = styled(Typography).attrs({ variant: 'default-text' })``
112113

113-
const StepLabel = styled(Typography)<{
114+
const StepLabelWrapper = styled.div<{
114115
readonly active: boolean
115116
readonly completed: boolean
116117
}>`
@@ -277,9 +278,9 @@ export const Step: FC<StepProps> = ({
277278
{lastStep ? null : (
278279
<StepDivider active={active} completed={completed} />
279280
)}
280-
<StepLabel variant="default-text" active={active} completed={completed}>
281+
<StepLabelWrapper active={active} completed={completed}>
281282
{label}
282-
</StepLabel>
283+
</StepLabelWrapper>
283284
{active ? (
284285
<StepContentContainer>{children}</StepContentContainer>
285286
) : null}

‎packages/core/src/Stepper/__snapshots__/index.test.tsx.snap‎

Lines changed: 48 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -297,11 +297,15 @@ exports[`Stepper Stepper 1`] = `
297297
<span
298298
className="c9"
299299
/>
300-
<p
301-
className="c7 c10"
300+
<div
301+
className="c10"
302302
>
303-
Step 1 Title
304-
</p>
303+
<p
304+
className="c7"
305+
>
306+
Step 1 Title
307+
</p>
308+
</div>
305309
<div
306310
className="c11"
307311
>
@@ -359,11 +363,15 @@ exports[`Stepper Stepper 1`] = `
359363
<span
360364
className="c18"
361365
/>
362-
<p
363-
className="c7 c19"
366+
<div
367+
className="c19"
364368
>
365-
Step 2 Title
366-
</p>
369+
<p
370+
className="c7"
371+
>
372+
Step 2 Title
373+
</p>
374+
</div>
367375
</div>
368376
</div>
369377
<div
@@ -386,11 +394,15 @@ exports[`Stepper Stepper 1`] = `
386394
<div
387395
className="c8"
388396
>
389-
<p
390-
className="c7 c19"
397+
<div
398+
className="c19"
391399
>
392-
Step 3 Title (done)
393-
</p>
400+
<p
401+
className="c7"
402+
>
403+
Step 3 Title (done)
404+
</p>
405+
</div>
394406
</div>
395407
</div>
396408
</div>
@@ -697,11 +709,15 @@ exports[`Stepper Stepper 2`] = `
697709
<span
698710
className="c9"
699711
/>
700-
<p
701-
className="c7 c10"
712+
<div
713+
className="c10"
702714
>
703-
Step 1 Title
704-
</p>
715+
<p
716+
className="c7"
717+
>
718+
Step 1 Title
719+
</p>
720+
</div>
705721
<div
706722
className="c11"
707723
>
@@ -756,11 +772,15 @@ exports[`Stepper Stepper 2`] = `
756772
<div
757773
className="c8"
758774
>
759-
<p
760-
className="c7 c18"
775+
<div
776+
className="c18"
761777
>
762-
Step 3 Title (done)
763-
</p>
778+
<p
779+
className="c7"
780+
>
781+
Step 3 Title (done)
782+
</p>
783+
</div>
764784
</div>
765785
</div>
766786
</div>
@@ -1013,11 +1033,15 @@ exports[`Stepper Stepper 3`] = `
10131033
<div
10141034
className="c8"
10151035
>
1016-
<p
1017-
className="c7 c9"
1036+
<div
1037+
className="c9"
10181038
>
1019-
Step 1 Title
1020-
</p>
1039+
<p
1040+
className="c7"
1041+
>
1042+
Step 1 Title
1043+
</p>
1044+
</div>
10211045
<div
10221046
className="c10"
10231047
>

‎packages/core/src/Stepper/index.test.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import 'jest-styled-components'
22
import { expect, test, describe } from '@jest/globals'
33

44
import { TestRender } from '../TestUtils'
5-
import { Stepper } from '.'
5+
import { Stepper, StepLabel } from '.'
66

77
const NOOP = () => {
88
/** */
@@ -14,16 +14,16 @@ describe('Stepper', () => {
1414
<Stepper
1515
steps={[
1616
{
17-
label: 'Step 1 Title',
17+
label: <StepLabel>Step 1 Title</StepLabel>,
1818
content: <div />,
1919
},
2020
{
21-
label: 'Step 2 Title',
21+
label: <StepLabel>Step 2 Title</StepLabel>,
2222
content: <div />,
2323
hasErrors: true,
2424
},
2525
{
26-
label: 'Step 3 Title (done)',
26+
label: <StepLabel>Step 3 Title (done)</StepLabel>,
2727
content: <div />,
2828
},
2929
]}
@@ -51,11 +51,11 @@ describe('Stepper', () => {
5151
<Stepper
5252
steps={[
5353
{
54-
label: 'Step 1 Title',
54+
label: <StepLabel>Step 1 Title</StepLabel>,
5555
content: <div />,
5656
},
5757
{
58-
label: 'Step 3 Title (done)',
58+
label: <StepLabel>Step 3 Title (done)</StepLabel>,
5959
content: <div />,
6060
},
6161
]}
@@ -83,7 +83,7 @@ describe('Stepper', () => {
8383
<Stepper
8484
steps={[
8585
{
86-
label: 'Step 1 Title',
86+
label: <StepLabel>Step 1 Title</StepLabel>,
8787
content: <div />,
8888
},
8989
]}

‎packages/core/src/Stepper/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ const StepperWrapper = styled(Paper)`
1818
box-shadow: none;
1919
`
2020

21-
export { StepContent, StepperAction } from './Step'
21+
export { StepContent, StepperAction, StepLabel } from './Step'
2222

2323
type BaseElement = HTMLDivElement
2424
type BaseProps = HTMLAttributes<BaseElement>

‎packages/docs/src/mdx/coreComponents/Stepper.mdx‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import {
1010
Typography,
1111
RadioButtonGroupField,
1212
Stepper,
13+
StepLabel,
1314
} from 'practical-react-components-core'
1415

1516
# Stepper
@@ -35,7 +36,7 @@ export const DemoComponent = ({}) => {
3536
className="my-stepper"
3637
steps={[
3738
{
38-
label: 'Step 1 Title',
39+
label: <StepLabel>Step 1 Title</StepLabel>,
3940
content: (
4041
<div>
4142
<RadioButtonGroupField
@@ -50,15 +51,15 @@ export const DemoComponent = ({}) => {
5051
className: 'my-step',
5152
},
5253
{
53-
label: 'Step 2 Title',
54+
label: <StepLabel>Step 2 Title</StepLabel>,
5455
content: (
5556
<div>
5657
<TextInputField label="Name" value="" placeholder="First name" />
5758
</div>
5859
),
5960
},
6061
{
61-
label: 'Step 3 Title (done)',
62+
label: <StepLabel>Step 3 Title (done)</StepLabel>,
6263
content: (
6364
<Typography variant="navigation-label">You are now done</Typography>
6465
),
@@ -92,7 +93,7 @@ export const DemoComponent = ({}) => {
9293
<Stepper
9394
steps={[
9495
{
95-
label: 'Step 1 Title',
96+
label: <StepLabel>Step 1 Title</StepLabel>,
9697
content: (
9798
<div>
9899
<RadioButtonGroupField
@@ -109,15 +110,15 @@ export const DemoComponent = ({}) => {
109110
),
110111
},
111112
{
112-
label: 'Step 2 Title',
113+
label: <StepLabel>Step 2 Title</StepLabel>,
113114
content: (
114115
<div>
115116
<TextInputField label="Name" value="" placeholder="First name" />
116117
</div>
117118
),
118119
},
119120
{
120-
label: 'Step 3 Title (done)',
121+
label: <StepLabel>Step 3 Title (done)</StepLabel>,
121122
content: (
122123
<Typography variant="navigation-label">You are now done</Typography>
123124
),

0 commit comments

Comments
 (0)