Skip to content

Commit e3b1c03

Browse files
kyleshikekyleshike
authored
Removes knobs from Storybook stories (#1172)
1 parent 83e712c commit e3b1c03

27 files changed

+309
-390
lines changed

‎.storybook/main.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@ const config = {
1414
'@storybook/addon-backgrounds',
1515
'@storybook/addon-controls',
1616
'@storybook/addon-links',
17-
'@storybook/addon-knobs',
1817
'@storybook/addon-storysource',
1918
'@storybook/addon-mdx-gfm'
2019
],

‎.storybook/preview.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,14 @@
11
import colors from '../src/Styles/colors/palette';
22

33
const preview = {
4+
decorators: [
5+
(Story) => (
6+
<div className="Synthesized">
7+
{/* 👇 Decorators in Storybook also accept a function. Replace <Story/> with Story() to enable it */}
8+
<Story />
9+
</div>
10+
),
11+
],
412
parameters: {
513
backgrounds: {
614
default: '$ux-white',

‎package.json‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -99,7 +99,6 @@
9999
"@storybook/addon-controls": "^7.4.1",
100100
"@storybook/addon-docs": "7.4.1",
101101
"@storybook/addon-jest": "7.4.1",
102-
"@storybook/addon-knobs": "7.0.2",
103102
"@storybook/addon-links": "7.4.1",
104103
"@storybook/addon-mdx-gfm": "7.4.1",
105104
"@storybook/addon-storyshots": "7.4.1",

‎spec/__snapshots__/Storyshots.test.js.snap‎

Lines changed: 58 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -5139,9 +5139,6 @@ exports[`Storyshots Components/Card Default 1`] = `
51395139
>
51405140
Subtitle
51415141
</h3>
5142-
<div>
5143-
Use knobs to try out the different card sizes
5144-
</div>
51455142
</section>
51465143
`;
51475144

@@ -7286,13 +7283,6 @@ exports[`Storyshots Components/Form Elements/CheckboxButtonGroup Default 1`] = `
72867283
htmlFor="checkbox-button-group"
72877284
>
72887285
Legend
7289-
<span
7290-
className="InputLegend__helper-text"
7291-
>
7292-
 (
7293-
use the knobs to try out different variations
7294-
)
7295-
</span>
72967286
</legend>
72977287
<div
72987288
className="CheckboxButtonGroup"
@@ -8115,7 +8105,7 @@ exports[`Storyshots Components/Form Elements/Form Group With Radio Button Group
81158105
name=""
81168106
>
81178107
<label
8118-
className="FormControlLabel FormControlLabel--active"
8108+
className="FormControlLabel FormControlLabel--bordered FormControlLabel--active"
81198109
htmlFor="value-1"
81208110
>
81218111
<span
@@ -8135,7 +8125,7 @@ exports[`Storyshots Components/Form Elements/Form Group With Radio Button Group
81358125
</span>
81368126
</label>
81378127
<label
8138-
className="FormControlLabel"
8128+
className="FormControlLabel FormControlLabel--bordered"
81398129
htmlFor="value-2"
81408130
>
81418131
<span
@@ -8155,7 +8145,7 @@ exports[`Storyshots Components/Form Elements/Form Group With Radio Button Group
81558145
</span>
81568146
</label>
81578147
<label
8158-
className="FormControlLabel"
8148+
className="FormControlLabel FormControlLabel--bordered"
81598149
htmlFor="value-3"
81608150
>
81618151
<span
@@ -8666,13 +8656,6 @@ exports[`Storyshots Components/Form Elements/RadioButtonGroup Default 1`] = `
86668656
htmlFor="radio-button-group"
86678657
>
86688658
Legend
8669-
<span
8670-
className="InputLegend__helper-text"
8671-
>
8672-
 (
8673-
use the knobs to try out different variations
8674-
)
8675-
</span>
86768659
</legend>
86778660
<div
86788661
className="RadioButtonGroup"
@@ -11718,6 +11701,57 @@ Array [
1171811701
]
1171911702
`;
1172011703

11704+
exports[`Storyshots Components/RichTextEditor Set Content 1`] = `
11705+
Array [
11706+
<button
11707+
className="Button btn btn-primary"
11708+
disabled={false}
11709+
onClick={[Function]}
11710+
type="button"
11711+
>
11712+
Set content to "Oh hey"
11713+
</button>,
11714+
<span
11715+
aria-busy={true}
11716+
aria-live="polite"
11717+
>
11718+
<span
11719+
className="react-loading-skeleton LoadingSkeleton"
11720+
style={
11721+
Object {
11722+
"--base-color": "#E1E1E1",
11723+
"borderRadius": "4px",
11724+
"height": 40,
11725+
"width": "100%",
11726+
}
11727+
}
11728+
>
11729+
‌
11730+
</span>
11731+
<br />
11732+
</span>,
11733+
<span
11734+
aria-busy={true}
11735+
aria-live="polite"
11736+
>
11737+
<span
11738+
className="react-loading-skeleton LoadingSkeleton"
11739+
style={
11740+
Object {
11741+
"--base-color": "#E1E1E1",
11742+
"borderRadius": "4px",
11743+
"height": 70,
11744+
"width": "100%",
11745+
}
11746+
}
11747+
>
11748+
‌
11749+
</span>
11750+
<br />
11751+
</span>,
11752+
]
11753+
`;
11754+
1172111755
exports[`Storyshots Components/Selects/Async Default 1`] = `
1172211756
<div
1172311757
className="FormGroup"
@@ -25206,7 +25240,7 @@ Array [
2520625240
/>,
2520725241
<div>
2520825242
<p>
25209-
Click the button to see a toast message. Use the knobs to try different types!
25243+
Click the button to see a toast message.
2521025244
</p>
2521125245
<button
2521225246
className="Button btn btn-primary"
@@ -25228,7 +25262,7 @@ Array [
2522825262
/>,
2522925263
<div>
2523025264
<p>
25231-
Click the button to see a toast message. Use the knobs to try different types!
25265+
Click the button to see a toast message.
2523225266
</p>
2523325267
<button
2523425268
className="Button btn btn-primary"
@@ -25250,7 +25284,7 @@ Array [
2525025284
/>,
2525125285
<div>
2525225286
<p>
25253-
Click the button to see a toast message. Use the knobs to try different types!
25287+
Click the button to see a toast message.
2525425288
</p>
2525525289
<button
2525625290
className="Button btn btn-primary"
@@ -25272,7 +25306,7 @@ Array [
2527225306
/>,
2527325307
<div>
2527425308
<p>
25275-
Click the button to see a toast message. Use the knobs to try different types!
25309+
Click the button to see a toast message.
2527625310
</p>
2527725311
<button
2527825312
className="Button btn btn-primary"

‎src/Alert/Alert.stories.jsx‎

Lines changed: 29 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import React, { Fragment } from 'react';
2-
import { boolean, text, withKnobs } from '@storybook/addon-knobs';
32
import { action } from '@storybook/addon-actions';
43

54
import { Alert, MessageTypes } from 'src/Alert';
@@ -14,7 +13,6 @@ import '../../scss/global.scss';
1413
export default {
1514
title: 'Components/Alert',
1615
component: Alert,
17-
decorators: [withKnobs],
1816
parameters: {
1917
docs: {
2018
page: mdx,
@@ -25,49 +23,49 @@ export default {
2523
export const Success = () => (
2624
<Alert
2725
id="1"
28-
message={text('Message', 'Success message')}
29-
removeBorderLeft={boolean('removeBorderLeft', false)}
30-
title={text('Title', 'Success title')}
26+
message="Success message"
27+
removeBorderLeft={false}
28+
title="Success title"
3129
type={MessageTypes.SUCCESS}
3230
/>
3331
);
3432

3533
export const Info = () => (
3634
<Alert
3735
id="2"
38-
message={text('Message', 'Info message')}
39-
removeBorderLeft={boolean('removeBorderLeft', false)}
40-
title={text('Title', 'Info title')}
36+
message="Info message"
37+
removeBorderLeft={false}
38+
title="Info title"
4139
type={MessageTypes.INFO}
4240
/>
4341
);
4442

4543
export const Feature = () => (
4644
<Alert
4745
id="3"
48-
message={text('Message', 'Some context around new feature if needed.')}
49-
removeBorderLeft={boolean('removeBorderLeft', false)}
50-
title={text('Title', 'New feature alert!')}
46+
message="Some context around new feature if needed."
47+
removeBorderLeft={false}
48+
title="New feature alert!"
5149
type={MessageTypes.FEATURE}
5250
/>
5351
);
5452

5553
export const Error = () => (
5654
<Alert
5755
id="4"
58-
message={text('Message', 'Error message')}
59-
removeBorderLeft={boolean('removeBorderLeft', false)}
60-
title={text('Title', 'Error title')}
56+
message="Error message"
57+
removeBorderLeft={false}
58+
title="Error title"
6159
type={MessageTypes.ERROR}
6260
/>
6361
);
6462

6563
export const Warning = () => (
6664
<Alert
6765
id="5"
68-
message={text('Message', 'Warning message')}
69-
removeBorderLeft={boolean('removeBorderLeft', false)}
70-
title={text('Title', 'Warning title')}
66+
message="Warning message"
67+
removeBorderLeft={false}
68+
title="Warning title"
7169
type={MessageTypes.WARNING}
7270
/>
7371
);
@@ -79,9 +77,9 @@ const onDismiss = (id) => {
7977
export const WithDismiss = () => (
8078
<Alert
8179
id="6"
82-
message={text('Message', 'Default message')}
83-
removeBorderLeft={boolean('removeBorderLeft', false)}
84-
title={text('Title', 'Default title')}
80+
message="Default message"
81+
removeBorderLeft={false}
82+
title="Default title"
8583
type={MessageTypes.SUCCESS}
8684
onDismiss={onDismiss}
8785
/>
@@ -114,7 +112,7 @@ export const WithCallToAction = () => (
114112
action={{ content: 'Primary action', url: 'https://www.userinterviews.com/' }}
115113
id="8"
116114
message="Success message"
117-
removeBorderLeft={boolean('removeBorderLeft', false)}
115+
removeBorderLeft={false}
118116
title="Success title"
119117
type={MessageTypes.SUCCESS}
120118
onDismiss={onDismiss}
@@ -123,7 +121,7 @@ export const WithCallToAction = () => (
123121
action={{ content: 'Primary action', url: 'https://www.userinterviews.com/' }}
124122
id="9"
125123
message="Info message"
126-
removeBorderLeft={boolean('removeBorderLeft', false)}
124+
removeBorderLeft={false}
127125
title="Info title"
128126
type={MessageTypes.INFO}
129127
onDismiss={onDismiss}
@@ -132,7 +130,7 @@ export const WithCallToAction = () => (
132130
action={{ content: 'Primary action', url: 'https://www.userinterviews.com/' }}
133131
id="11"
134132
message="Error message"
135-
removeBorderLeft={boolean('removeBorderLeft', false)}
133+
removeBorderLeft={false}
136134
title="Error title"
137135
type={MessageTypes.ERROR}
138136
onDismiss={onDismiss}
@@ -141,7 +139,7 @@ export const WithCallToAction = () => (
141139
action={{ content: 'Primary action', url: 'https://www.userinterviews.com/' }}
142140
id="12"
143141
message="Warning message"
144-
removeBorderLeft={boolean('removeBorderLeft', false)}
142+
removeBorderLeft={false}
145143
title="Warning title"
146144
type={MessageTypes.WARNING}
147145
onDismiss={onDismiss}
@@ -150,7 +148,7 @@ export const WithCallToAction = () => (
150148
action={{ content: 'Primary action', url: 'https://www.userinterviews.com/' }}
151149
id="13"
152150
message="Some context around new feature if needed"
153-
removeBorderLeft={boolean('removeBorderLeft', false)}
151+
removeBorderLeft={false}
154152
title="New feature alert!"
155153
type={MessageTypes.FEATURE}
156154
onDismiss={onDismiss}
@@ -167,8 +165,8 @@ export const WithCallToAction = () => (
167165
<GoogleCalendarButton />
168166
</Fragment>
169167
)}
170-
removeBorderLeft={boolean('removeBorderLeft', false)}
171-
title={text('Title', 'Connect to Google Calendar to create reminders automatically')}
168+
removeBorderLeft={false}
169+
title="Connect to Google Calendar to create reminders automatically"
172170
type={MessageTypes.ANNOUNCEMENT}
173171
onDismiss={onDismiss}
174172
/>
@@ -177,10 +175,10 @@ export const WithCallToAction = () => (
177175
<Alert
178176
action={<GoogleCalendarButton />}
179177
id="8"
180-
message={text('Message', `When you confirm a session we’ll automatically
181-
add an event and reminders to your Google Calendar.`)}
182-
removeBorderLeft={boolean('removeBorderLeft', false)}
183-
title={text('Title', 'Connect to Google Calendar to create reminders automatically')}
178+
message={`When you confirm a session we’ll automatically
179+
add an event and reminders to your Google Calendar.`}
180+
removeBorderLeft={false}
181+
title="Connect to Google Calendar to create reminders automatically"
184182
type={MessageTypes.ANNOUNCEMENT}
185183
onDismiss={onDismiss}
186184
/>

0 commit comments

Comments
 (0)