Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Removes knobs from Storybook stories #1172

Merged
merged 2 commits into from
Mar 29, 2024
Merged

Removes knobs from Storybook stories #1172

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8f4b1c6
removes all knobs
kyleshike Mar 29, 2024
18e38b3
newline
kyleshike Mar 29, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion .storybook/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ const config = {
'@storybook/addon-backgrounds',
'@storybook/addon-controls',
'@storybook/addon-links',
'@storybook/addon-knobs',
'@storybook/addon-storysource',
'@storybook/addon-mdx-gfm'
],
Expand Down
8 changes: 8 additions & 0 deletions .storybook/preview.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,14 @@
import colors from '../src/Styles/colors/palette';

const preview = {
decorators: [
(Story) => (
<div className="Synthesized">
{/* 👇 Decorators in Storybook also accept a function. Replace <Story/> with Story() to enable it */}
<Story />
</div>
),
],
Comment on lines +4 to +11
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

thought: 💭

I wonder if it is worth having the wrapper be a component with a toggle for whether Synthesized is set or not

Given parts of our app use the old styles for the same components still it would be nice for the DS docs to allow you to see how the components will appear in either context

Not blocking to this PR but def worth discussing

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yea definitely a good idea. I really wish we didnt' have to continue supporting non Synth styles, but also understand that the effort to update those views is low priority from a business perspective.

parameters: {
backgrounds: {
default: '$ux-white',
Expand Down
1 change: 0 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,6 @@
"@storybook/addon-controls": "^7.4.1",
"@storybook/addon-docs": "7.4.1",
"@storybook/addon-jest": "7.4.1",
"@storybook/addon-knobs": "7.0.2",
"@storybook/addon-links": "7.4.1",
"@storybook/addon-mdx-gfm": "7.4.1",
"@storybook/addon-storyshots": "7.4.1",
Expand Down
82 changes: 58 additions & 24 deletions spec/__snapshots__/Storyshots.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5139,9 +5139,6 @@ exports[`Storyshots Components/Card Default 1`] = `
>
Subtitle
</h3>
<div>
Use knobs to try out the different card sizes
</div>
</section>
`;

Expand Down Expand Up @@ -7286,13 +7283,6 @@ exports[`Storyshots Components/Form Elements/CheckboxButtonGroup Default 1`] = `
htmlFor="checkbox-button-group"
>
Legend
<span
className="InputLegend__helper-text"
>
 (
use the knobs to try out different variations
)
</span>
</legend>
<div
className="CheckboxButtonGroup"
Expand Down Expand Up @@ -8115,7 +8105,7 @@ exports[`Storyshots Components/Form Elements/Form Group With Radio Button Group
name=""
>
<label
className="FormControlLabel FormControlLabel--active"
className="FormControlLabel FormControlLabel--bordered FormControlLabel--active"
htmlFor="value-1"
>
<span
Expand All @@ -8135,7 +8125,7 @@ exports[`Storyshots Components/Form Elements/Form Group With Radio Button Group
</span>
</label>
<label
className="FormControlLabel"
className="FormControlLabel FormControlLabel--bordered"
htmlFor="value-2"
>
<span
Expand All @@ -8155,7 +8145,7 @@ exports[`Storyshots Components/Form Elements/Form Group With Radio Button Group
</span>
</label>
<label
className="FormControlLabel"
className="FormControlLabel FormControlLabel--bordered"
htmlFor="value-3"
>
<span
Expand Down Expand Up @@ -8666,13 +8656,6 @@ exports[`Storyshots Components/Form Elements/RadioButtonGroup Default 1`] = `
htmlFor="radio-button-group"
>
Legend
<span
className="InputLegend__helper-text"
>
 (
use the knobs to try out different variations
)
</span>
</legend>
<div
className="RadioButtonGroup"
Expand Down Expand Up @@ -11718,6 +11701,57 @@ Array [
]
`;

exports[`Storyshots Components/RichTextEditor Set Content 1`] = `
Array [
<button
className="Button btn btn-primary"
disabled={false}
onClick={[Function]}
type="button"
>
Set content to "Oh hey"
</button>,
<span
aria-busy={true}
aria-live="polite"
>
<span
className="react-loading-skeleton LoadingSkeleton"
style={
Object {
"--base-color": "#E1E1E1",
"borderRadius": "4px",
"height": 40,
"width": "100%",
}
}
>
‌
</span>
<br />
</span>,
<span
aria-busy={true}
aria-live="polite"
>
<span
className="react-loading-skeleton LoadingSkeleton"
style={
Object {
"--base-color": "#E1E1E1",
"borderRadius": "4px",
"height": 70,
"width": "100%",
}
}
>
‌
</span>
<br />
</span>,
]
`;

exports[`Storyshots Components/Selects/Async Default 1`] = `
<div
className="FormGroup"
Expand Down Expand Up @@ -25206,7 +25240,7 @@ Array [
/>,
<div>
<p>
Click the button to see a toast message. Use the knobs to try different types!
Click the button to see a toast message.
</p>
<button
className="Button btn btn-primary"
Expand All @@ -25228,7 +25262,7 @@ Array [
/>,
<div>
<p>
Click the button to see a toast message. Use the knobs to try different types!
Click the button to see a toast message.
</p>
<button
className="Button btn btn-primary"
Expand All @@ -25250,7 +25284,7 @@ Array [
/>,
<div>
<p>
Click the button to see a toast message. Use the knobs to try different types!
Click the button to see a toast message.
</p>
<button
className="Button btn btn-primary"
Expand All @@ -25272,7 +25306,7 @@ Array [
/>,
<div>
<p>
Click the button to see a toast message. Use the knobs to try different types!
Click the button to see a toast message.
</p>
<button
className="Button btn btn-primary"
Expand Down
60 changes: 29 additions & 31 deletions src/Alert/Alert.stories.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import React, { Fragment } from 'react';
import { boolean, text, withKnobs } from '@storybook/addon-knobs';
import { action } from '@storybook/addon-actions';

import { Alert, MessageTypes } from 'src/Alert';
Expand All @@ -14,7 +13,6 @@ import '../../scss/global.scss';
export default {
title: 'Components/Alert',
component: Alert,
decorators: [withKnobs],
parameters: {
docs: {
page: mdx,
Expand All @@ -25,49 +23,49 @@ export default {
export const Success = () => (
<Alert
id="1"
message={text('Message', 'Success message')}
removeBorderLeft={boolean('removeBorderLeft', false)}
title={text('Title', 'Success title')}
message="Success message"
removeBorderLeft={false}
title="Success title"
type={MessageTypes.SUCCESS}
/>
);

export const Info = () => (
<Alert
id="2"
message={text('Message', 'Info message')}
removeBorderLeft={boolean('removeBorderLeft', false)}
title={text('Title', 'Info title')}
message="Info message"
removeBorderLeft={false}
title="Info title"
type={MessageTypes.INFO}
/>
);

export const Feature = () => (
<Alert
id="3"
message={text('Message', 'Some context around new feature if needed.')}
removeBorderLeft={boolean('removeBorderLeft', false)}
title={text('Title', 'New feature alert!')}
message="Some context around new feature if needed."
removeBorderLeft={false}
title="New feature alert!"
type={MessageTypes.FEATURE}
/>
);

export const Error = () => (
<Alert
id="4"
message={text('Message', 'Error message')}
removeBorderLeft={boolean('removeBorderLeft', false)}
title={text('Title', 'Error title')}
message="Error message"
removeBorderLeft={false}
title="Error title"
type={MessageTypes.ERROR}
/>
);

export const Warning = () => (
<Alert
id="5"
message={text('Message', 'Warning message')}
removeBorderLeft={boolean('removeBorderLeft', false)}
title={text('Title', 'Warning title')}
message="Warning message"
removeBorderLeft={false}
title="Warning title"
type={MessageTypes.WARNING}
/>
);
Expand All @@ -79,9 +77,9 @@ const onDismiss = (id) => {
export const WithDismiss = () => (
<Alert
id="6"
message={text('Message', 'Default message')}
removeBorderLeft={boolean('removeBorderLeft', false)}
title={text('Title', 'Default title')}
message="Default message"
removeBorderLeft={false}
title="Default title"
type={MessageTypes.SUCCESS}
onDismiss={onDismiss}
/>
Expand Down Expand Up @@ -114,7 +112,7 @@ export const WithCallToAction = () => (
action={{ content: 'Primary action', url: 'https://www.userinterviews.com/' }}
id="8"
message="Success message"
removeBorderLeft={boolean('removeBorderLeft', false)}
removeBorderLeft={false}
title="Success title"
type={MessageTypes.SUCCESS}
onDismiss={onDismiss}
Expand All @@ -123,7 +121,7 @@ export const WithCallToAction = () => (
action={{ content: 'Primary action', url: 'https://www.userinterviews.com/' }}
id="9"
message="Info message"
removeBorderLeft={boolean('removeBorderLeft', false)}
removeBorderLeft={false}
title="Info title"
type={MessageTypes.INFO}
onDismiss={onDismiss}
Expand All @@ -132,7 +130,7 @@ export const WithCallToAction = () => (
action={{ content: 'Primary action', url: 'https://www.userinterviews.com/' }}
id="11"
message="Error message"
removeBorderLeft={boolean('removeBorderLeft', false)}
removeBorderLeft={false}
title="Error title"
type={MessageTypes.ERROR}
onDismiss={onDismiss}
Expand All @@ -141,7 +139,7 @@ export const WithCallToAction = () => (
action={{ content: 'Primary action', url: 'https://www.userinterviews.com/' }}
id="12"
message="Warning message"
removeBorderLeft={boolean('removeBorderLeft', false)}
removeBorderLeft={false}
title="Warning title"
type={MessageTypes.WARNING}
onDismiss={onDismiss}
Expand All @@ -150,7 +148,7 @@ export const WithCallToAction = () => (
action={{ content: 'Primary action', url: 'https://www.userinterviews.com/' }}
id="13"
message="Some context around new feature if needed"
removeBorderLeft={boolean('removeBorderLeft', false)}
removeBorderLeft={false}
title="New feature alert!"
type={MessageTypes.FEATURE}
onDismiss={onDismiss}
Expand All @@ -167,8 +165,8 @@ export const WithCallToAction = () => (
<GoogleCalendarButton />
</Fragment>
)}
removeBorderLeft={boolean('removeBorderLeft', false)}
title={text('Title', 'Connect to Google Calendar to create reminders automatically')}
removeBorderLeft={false}
title="Connect to Google Calendar to create reminders automatically"
type={MessageTypes.ANNOUNCEMENT}
onDismiss={onDismiss}
/>
Expand All @@ -177,10 +175,10 @@ export const WithCallToAction = () => (
<Alert
action={<GoogleCalendarButton />}
id="8"
message={text('Message', `When you confirm a session we’ll automatically
add an event and reminders to your Google Calendar.`)}
removeBorderLeft={boolean('removeBorderLeft', false)}
title={text('Title', 'Connect to Google Calendar to create reminders automatically')}
message={`When you confirm a session we’ll automatically
add an event and reminders to your Google Calendar.`}
removeBorderLeft={false}
title="Connect to Google Calendar to create reminders automatically"
type={MessageTypes.ANNOUNCEMENT}
onDismiss={onDismiss}
/>
Expand Down
Loading
Loading