Skip to content

Commit 38379fc

Browse files
srdjansrdjan
committed
updated to modern css
1 parent a0d73c4 commit 38379fc

5 files changed

Lines changed: 303 additions & 81 deletions

File tree

‎example/WizardChrome.js‎

Lines changed: 63 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -16,66 +16,73 @@ export const WizardChrome = ({ children }) => {
1616
const isLast = activeStep === stepCount - 1
1717

1818
return (
19-
<div style={multiStepStyles.component}>
20-
<ol style={multiStepStyles.topNav} role='tablist' aria-label='Wizard steps'>
21-
{steps.map((step) => {
22-
const isActive = step.index === activeStep
23-
const style = {
24-
...multiStepStyles.topNavStep,
25-
borderBottomColor: isActive ? '#1EAEDB' : 'silver',
26-
}
27-
return (
28-
<li key={step.index} style={style}>
29-
<button
30-
role='tab'
31-
type='button'
32-
aria-selected={isActive}
33-
onClick={() => goToStep(step.index)}
34-
style={{
35-
border: 'none',
36-
background: 'transparent',
37-
padding: 0,
38-
width: '100%',
39-
color: isActive ? multiStepStyles.doing.color : multiStepStyles.todo.color,
40-
cursor: 'pointer',
41-
fontWeight: isActive ? '600' : '400',
42-
}}
43-
>
44-
{step.title ?? step.index + 1}
45-
</button>
46-
</li>
47-
)
48-
})}
49-
</ol>
50-
<div style={multiStepStyles.section} role='tabpanel'>
51-
{children}
52-
</div>
53-
<div style={{
54-
...multiStepStyles.section,
55-
display: 'flex',
56-
justifyContent: 'space-between',
57-
alignItems: 'center',
58-
}}>
59-
<button
60-
type='button'
61-
onClick={previous}
62-
disabled={activeStep === 0}
63-
aria-label='Previous step'
64-
style={multiStepStyles.prevButton}
65-
>
66-
‹
67-
</button>
68-
{!isLast && (
19+
<div style={{ containerType: 'inline-size', containerName: 'multistep' }}>
20+
<div style={multiStepStyles.component}>
21+
<ol style={multiStepStyles.topNav} role='tablist' aria-label='Wizard steps'>
22+
{steps.map((step) => {
23+
const isActive = step.index === activeStep
24+
const style = {
25+
...multiStepStyles.topNavStep,
26+
borderBottomColor: isActive ? 'var(--multistep-primary, #1EAEDB)' : 'var(--multistep-border, silver)',
27+
}
28+
return (
29+
<li key={step.index} style={style}>
30+
<button
31+
role='tab'
32+
type='button'
33+
aria-selected={isActive}
34+
onClick={() => goToStep(step.index)}
35+
style={{
36+
border: 'none',
37+
background: 'transparent',
38+
padding: 0,
39+
width: '100%',
40+
minHeight: 'var(--multistep-tap-target, 44px)',
41+
display: 'flex',
42+
alignItems: 'center',
43+
justifyContent: 'center',
44+
color: isActive ? multiStepStyles.doing.color : multiStepStyles.todo.color,
45+
cursor: 'pointer',
46+
fontWeight: isActive ? '600' : '400',
47+
fontSize: 'var(--multistep-font-size-step, 0.875rem)',
48+
}}
49+
>
50+
{step.title ?? step.index + 1}
51+
</button>
52+
</li>
53+
)
54+
})}
55+
</ol>
56+
<div style={multiStepStyles.section} role='tabpanel'>
57+
{children}
58+
</div>
59+
<div style={{
60+
...multiStepStyles.section,
61+
display: 'flex',
62+
justifyContent: 'space-between',
63+
alignItems: 'center',
64+
}}>
6965
<button
7066
type='button'
71-
onClick={next}
72-
disabled={!currentStepValid}
73-
aria-label='Next step'
74-
style={multiStepStyles.nextButton}
67+
onClick={previous}
68+
disabled={activeStep === 0}
69+
aria-label='Previous step'
70+
style={multiStepStyles.prevButton}
7571
>
76-
›
72+
‹
7773
</button>
78-
)}
74+
{!isLast && (
75+
<button
76+
type='button'
77+
onClick={next}
78+
disabled={!currentStepValid}
79+
aria-label='Next step'
80+
style={multiStepStyles.nextButton}
81+
>
82+
›
83+
</button>
84+
)}
85+
</div>
7986
</div>
8087
</div>
8188
)

‎example/css/multistepStyles.js‎

Lines changed: 39 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,67 @@
1-
const component = {
2-
marginTop: '5rem',
3-
marginBottom: '5rem',
4-
backgroundColor:'#f1f1f141',
1+
const component = {
2+
marginTop: 'var(--multistep-spacing-lg, 5rem)',
3+
marginBottom: 'var(--multistep-spacing-lg, 5rem)',
4+
backgroundColor:'var(--multistep-bg, #f1f1f141)',
55
maxWidth: '960px',
6+
width: '100%',
67
}
7-
const section = {
8+
const section = {
89
display: 'block',
9-
justifyContent: 'space-around',
10-
margin: '4rem',
11-
}
10+
margin: 'var(--multistep-spacing-md, 4rem)',
11+
}
1212
const topNav = {
1313
display: 'flex',
1414
flexDirection: 'row',
15+
flexWrap: 'nowrap',
1516
margin: '0',
16-
paddingBottom: '2.2rem',
17+
paddingBottom: 'var(--multistep-spacing-sm, 2rem)',
1718
listStyleType: 'none',
19+
overflowX: 'auto',
20+
scrollbarWidth: 'thin',
21+
gap: 0,
1822
}
1923
const topNavStep = {
20-
color: 'silver',
24+
color: 'var(--multistep-inactive, silver)',
2125
cursor: 'pointer',
22-
width: '25%',
23-
paddingTop: '4rem',
24-
paddingRight: '4rem',
25-
borderBottom: '1px solid silver',
26+
flex: '1 1 25%',
27+
minWidth: '80px',
28+
paddingTop: 'var(--multistep-spacing-md, 4rem)',
29+
paddingRight: 'var(--multistep-spacing-md, 4rem)',
30+
borderBottom: '2px solid var(--multistep-border, silver)',
2631
}
2732
const todo = {
28-
color: 'gray',
33+
color: 'var(--multistep-inactive-light, gray)',
2934
}
3035
const doing = {
31-
color: '#1EAEDB',
36+
color: 'var(--multistep-primary, #1EAEDB)',
3237
}
3338
const prevButton = {
34-
color: '#1EAEDB',
35-
backgroundColor: '#f7f7f7',
39+
color: 'var(--multistep-primary, #1EAEDB)',
40+
backgroundColor: 'var(--multistep-button-bg, #f7f7f7)',
3641
border: '0',
37-
fontSize: '4rem',
42+
fontSize: 'var(--multistep-button-size, 4rem)',
3843
fontWeight: '500',
3944
padding: '0',
45+
width: 'var(--multistep-tap-target, 44px)',
46+
height: 'var(--multistep-tap-target, 44px)',
47+
display: 'inline-flex',
48+
alignItems: 'center',
49+
justifyContent: 'center',
50+
borderRadius: '4px',
4051
}
4152
const nextButton = {
42-
color: '#1EAEDB',
43-
backgroundColor: '#f7f7f7',
53+
color: 'var(--multistep-primary, #1EAEDB)',
54+
backgroundColor: 'var(--multistep-button-bg, #f7f7f7)',
4455
border: '0',
45-
fontSize: '4rem',
56+
fontSize: 'var(--multistep-button-size, 4rem)',
4657
fontWeight: '500',
4758
padding: '0',
48-
float: 'right', // only difference
59+
width: 'var(--multistep-tap-target, 44px)',
60+
height: 'var(--multistep-tap-target, 44px)',
61+
display: 'inline-flex',
62+
alignItems: 'center',
63+
justifyContent: 'center',
64+
borderRadius: '4px',
4965
}
5066

5167
export const multiStepStyles = {

‎example/index.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,10 @@
66
name="viewport"
77
content="width=device-width, initial-scale=1, shrink-to-fit=no"
88
>
9+
<meta name="color-scheme" content="light dark">
910
<meta name="theme-color" content="#000000">
1011
<title>testing-multistep</title>
12+
<link rel="stylesheet" href="../src/base.css">
1113
<link rel="stylesheet" href="./css/app.css">
1214
<link rel="stylesheet" href="./css/normalize.css">
1315

‎package.json‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,8 @@
1414
"types": "./build/index.d.ts",
1515
"require": "./dist/index.js",
1616
"import": "./dist/index.js"
17-
}
17+
},
18+
"./styles": "./dist/multistep.css"
1819
},
1920
"author": {
2021
"name": "@djidja8",
@@ -65,7 +66,7 @@
6566
"lint:fix": "eslint src test --ext .ts,.tsx --fix",
6667
"format": "prettier --write \"src/**/*.{ts,tsx}\" \"test/**/*.{ts,tsx}\"",
6768
"format:check": "prettier --check \"src/**/*.{ts,tsx}\" \"test/**/*.{ts,tsx}\"",
68-
"prepublishOnly": "npm run build && npm run bundle",
69+
"prepublishOnly": "npm run build && npm run bundle && cp src/base.css dist/multistep.css",
6970
"publish": "npm publish ./"
7071
}
7172
}

0 commit comments

Comments
 (0)