Skip to content

Commit d8ef5f1

Browse files
ThomasThomas
Thomas
authored and
Thomas
committed
Upgrade to Storybook 6
1 parent 180a3bf commit d8ef5f1

File tree

8 files changed

+1527
-1278
lines changed

8 files changed

+1527
-1278
lines changed

‎.storybook/main.js‎

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
11
module.exports = {
2-
"stories": [
3-
"../stories/*.stories.@(ts|tsx)",
4-
"../stories/**/*.stories.@(ts|tsx)"
5-
],
6-
"addons": [
7-
"@storybook/addon-links",
8-
"@storybook/addon-essentials",
9-
"@storybook/preset-scss"
10-
],
11-
}
2+
stories: ['../stories/*.stories.@(ts|tsx)', '../stories/**/*.stories.@(ts|tsx)'],
3+
addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/preset-scss'],
4+
5+
typescript: {
6+
check: true,
7+
checkOptions: {},
8+
reactDocgen: 'react-docgen-typescript',
9+
},
10+
};

‎babel.config.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
module.exports = {
2-
presets: ['@babel/env', '@babel/typescript', '@babel/preset-react'],
2+
presets: ['@babel/preset-env', '@babel/typescript', '@babel/preset-react'],
33
plugins: [
44
'@babel/plugin-proposal-numeric-separator',
5-
'@babel/proposal-class-properties',
5+
['@babel/proposal-class-properties', { loose: true }],
66
'@babel/proposal-object-rest-spread',
77
],
88
};

‎package.json‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -8,17 +8,16 @@
88
},
99
"license": "MIT",
1010
"devDependencies": {
11-
"@babel/cli": "^7.10.1",
12-
"@babel/core": "^7.10.1",
13-
"@babel/plugin-proposal-numeric-separator": "^7.10.1",
14-
"@babel/preset-react": "^7.10.1",
15-
"@babel/preset-typescript": "^7.10.1",
16-
"@storybook/addon-actions": "^6.0.28",
17-
"@storybook/addon-essentials": "^6.0.28",
18-
"@storybook/addon-links": "^6.0.28",
19-
"@storybook/addon-storysource": "^6.0.28",
11+
"@babel/cli": "^7.12.17",
12+
"@babel/core": "^7.12.17",
13+
"@babel/preset-react": "^7.12.13",
14+
"@babel/preset-typescript": "^7.12.17",
15+
"@storybook/addon-actions": "^6.1.18",
16+
"@storybook/addon-essentials": "^6.1.18",
17+
"@storybook/addon-links": "^6.1.18",
18+
"@storybook/addon-storysource": "^6.1.18",
2019
"@storybook/preset-scss": "^1.0.3",
21-
"@storybook/react": "^6.0.28",
20+
"@storybook/react": "^6.1.18",
2221
"@storybook/storybook-deployer": "^2.8.7",
2322
"@types/classnames": "^2.2.9",
2423
"@types/enzyme": "^3.10.3",
@@ -30,7 +29,7 @@
3029
"@typescript-eslint/eslint-plugin": "^2.3.1",
3130
"@typescript-eslint/parser": "^2.3.1",
3231
"awesome-typescript-loader": "^5.2.1",
33-
"babel-loader": "^8.0.6",
32+
"babel-loader": "^8.2.2",
3433
"css-loader": "^5.0.0",
3534
"enzyme": "^3.10.3",
3635
"enzyme-adapter-react-16": "^1.15.1",
@@ -71,6 +70,7 @@
7170
"react-dom": "^16.9.0"
7271
},
7372
"dependencies": {
73+
"@babel/plugin-proposal-class-properties": "7.10.1",
7474
"classnames": "^2.2.6"
7575
},
7676
"scripts": {
@@ -84,7 +84,7 @@
8484
"test:watch": "jest --watch",
8585
"lint": "eslint --fix -c .eslintrc.js --ext .ts --ext .tsx src/*.ts src/components/**/*.ts src/util/*.ts",
8686
"prebuild": "yarn lint && yarn test --coverage",
87-
"build-storybook": "build-storybook --no-dll",
87+
"build-storybook": "build-storybook",
8888
"prepare": "yarn build"
8989
},
9090
"files": [

‎src/components/radios/components/Radio.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,7 @@ const Radio: React.FC<RadioProps> = ({
6464
<input
6565
onChange={e => {
6666
setSelected(radioReference);
67+
e.persist();
6768
if (onChange) onChange(e);
6869
}}
6970
className={classNames('nhsuk-radios__input', className)}

‎stories/Button.stories.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,6 @@ ForceButton.storyName = 'Button Element Forced';
1717
export const ForceAnchor = () => <Button as="a">As an Anchor</Button>;
1818
ForceAnchor.storyName = 'Anchor Element Forced';
1919

20-
2120
export default {
2221
title: 'Components/Button',
2322
component: Button,

‎stories/Checkboxes.stories.tsx‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,11 @@ import { Button } from '../src/components/button';
55
export const Standard = () => (
66
<Fieldset aria-describedby="nationality--hint">
77
<Fieldset.Legend>What is your nationality?</Fieldset.Legend>
8-
<Checkboxes name="nationality" id="nationality" hint="If you have more than 1 nationality, select all options that are relevant to you.">
8+
<Checkboxes
9+
name="nationality"
10+
id="nationality"
11+
hint="If you have more than 1 nationality, select all options that are relevant to you."
12+
>
913
<Checkboxes.Box value="british">British</Checkboxes.Box>
1014
<Checkboxes.Box value="irish">Irish</Checkboxes.Box>
1115
<Checkboxes.Box value="other">Citizen of another country</Checkboxes.Box>
@@ -89,7 +93,7 @@ export const WithErrorBoolean = () => {
8993
</Checkboxes>
9094
</Fieldset>
9195
<Button
92-
onClick={(e: MouseEvent<HTMLButtonElement>) => {
96+
onClick={(e: React.MouseEvent<HTMLButtonElement>) => {
9397
e.preventDefault();
9498
setErrorToggle(!errorToggle);
9599
}}
@@ -115,7 +119,7 @@ export const WithErrorString = () => {
115119
<Checkboxes.Box value="farm">Farm or agricultural waste</Checkboxes.Box>
116120
</Checkboxes>
117121
</Fieldset>
118-
<Input value={error} onChange={e => setError(e.currentTarget.value)} />
122+
<Input label="Error Value" value={error} onChange={e => setError(e.currentTarget.value)} />
119123
</>
120124
);
121125
};

‎stories/Radios.stories.tsx‎

Lines changed: 9 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,11 @@ export const StandardRadios = () => (
66
<Fieldset.Legend>Have you changed your name?</Fieldset.Legend>
77
<Radios
88
name="example"
9+
id="standard-example"
910
hint="This includes changing your last name or spelling your name differently."
1011
>
11-
<Radios.Radio id="example-1" value="yes">
12-
Yes
13-
</Radios.Radio>
14-
<Radios.Radio id="example-2" value="no" checked>
12+
<Radios.Radio value="yes">Yes</Radios.Radio>
13+
<Radios.Radio value="no" checked>
1514
No
1615
</Radios.Radio>
1716
</Radios>
@@ -24,12 +23,11 @@ export const InlineRadios = () => (
2423
<Radios
2524
name="example"
2625
inline
26+
id="inline-example"
2727
hint="This includes changing your last name or spelling your name differently."
2828
>
29-
<Radios.Radio id="example-1" value="yes">
30-
Yes
31-
</Radios.Radio>
32-
<Radios.Radio id="example-2" value="no" checked>
29+
<Radios.Radio value="yes">Yes</Radios.Radio>
30+
<Radios.Radio value="no" checked>
3331
No
3432
</Radios.Radio>
3533
</Radios>
@@ -41,12 +39,13 @@ export const DisabledRadios = () => (
4139
<Fieldset.Legend>Have you changed your name?</Fieldset.Legend>
4240
<Radios
4341
name="example"
42+
id="disabled-example"
4443
hint="This includes changing your last name or spelling your name differently."
4544
>
46-
<Radios.Radio disabled id="example-1" value="yes">
45+
<Radios.Radio disabled value="yes">
4746
Yes
4847
</Radios.Radio>
49-
<Radios.Radio disabled id="example-2" value="no">
48+
<Radios.Radio disabled value="no">
5049
No
5150
</Radios.Radio>
5251
</Radios>
@@ -157,7 +156,6 @@ export const RadiosWithErrorBoolean = () => {
157156
};
158157
RadiosWithErrorBoolean.storyName = 'Radios With Error (Boolean)';
159158

160-
161159
export const RadiosWithErrorString = () => {
162160
const [error, setError] = React.useState('Please select an option');
163161
return (
@@ -183,7 +181,6 @@ export const RadiosWithErrorString = () => {
183181
};
184182
RadiosWithErrorString.storyName = 'Radios With Error (String)';
185183

186-
187184
export default {
188185
title: 'Components/Radios',
189186
component: Radios,

0 commit comments

Comments
 (0)