Skip to content

Commit

Permalink
cleans up a subset of stories
Browse files Browse the repository at this point in the history
  • Loading branch information
@kyleshike
kyleshike committed Mar 26, 2024
1 parent d213c7c commit f7bc723
Show file tree
Hide file tree
Showing 12 changed files with 303 additions and 1,405 deletions.
8 changes: 8 additions & 0 deletions .storybook/preview.js
View file
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>
),
],
parameters: {
backgrounds: {
default: '$ux-white',
Expand Down
8 changes: 3 additions & 5 deletions src/Accordion/Accordion.stories.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,16 +11,14 @@ import Card from 'src/Card';

import { faCreditCard } from '@fortawesome/pro-regular-svg-icons';

import mdx from './Accordion.mdx';

export default {
title: 'Components/Accordion',
component: Accordion,
parameters: {
docs: {
page: mdx,
},
controls: { exclude: [] },
},
args: {},
argTypes: {},
};

export const Default = (args) => (
Expand Down
212 changes: 38 additions & 174 deletions src/Alert/Alert.stories.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,188 +1,52 @@
import React, { Fragment } from 'react';
import { boolean, text, withKnobs } from '@storybook/addon-knobs';
import { action } from '@storybook/addon-actions';

import React from 'react';
import { Alert, MessageTypes } from 'src/Alert';

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faGoogle } from '@fortawesome/free-brands-svg-icons';
import mdx from './Alert.mdx';

import 'bootstrap/dist/css/bootstrap.min.css';
import '../../scss/global.scss';

export default {
title: 'Components/Alert',
component: Alert,
decorators: [withKnobs],
parameters: {
docs: {
page: mdx,
controls: { exclude: [] },
},
args: {
id: '1',
title: 'Example title',
message: 'Example message',
type: MessageTypes.SUCCESS,
onDismiss: () => alert('alert dismissed'),
},
argTypes: {
message: { control: 'text' },
title: { control: 'text' },
type: {
options: Object.values(MessageTypes),
mapping: MessageTypes,
control: { type: 'select' },
},
},
};

export const Success = () => (
<Alert
id="1"
message={text('Message', 'Success message')}
removeBorderLeft={boolean('removeBorderLeft', false)}
title={text('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')}
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!')}
type={MessageTypes.FEATURE}
/>
);

export const Error = () => (
<Alert
id="4"
message={text('Message', 'Error message')}
removeBorderLeft={boolean('removeBorderLeft', false)}
title={text('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')}
type={MessageTypes.WARNING}
/>
);

const onDismiss = (id) => {
action('alert dismissed')(id);
export const Primary = {
args: {},
};

export const WithDismiss = () => (
<Alert
id="6"
message={text('Message', 'Default message')}
removeBorderLeft={boolean('removeBorderLeft', false)}
title={text('Title', 'Default title')}
type={MessageTypes.SUCCESS}
onDismiss={onDismiss}
/>
);

const googleButtonStyle = {
backgroundColor: '#4285F4',
border: '1px solid #4285F4',
borderRadius: '4px',
fontSize: '0.875rem',
fontWeight: 'bold',
lineHeight: '1.25rem',
margin: '16px 0',
padding: '8px 16px',
color: '#FFFFFF',
whiteSpace: 'nowrap',
export const CallToActionObject = {
args: {
type: MessageTypes.INFO,
action: {
url: 'http://userinterviews.com',
content: 'Primary action',
},
actionTarget: '_blank',
},
};

const GoogleCalendarButton = () => (
<button style={googleButtonStyle} type="button">
<FontAwesomeIcon icon={faGoogle} style={{ height: '16px', marginRight: '8px' }} />
Connect Google Calendar
</button>
);

export const WithCallToAction = () => (
<>
<p>Default CTA rendered by component</p>
<Alert
action={{ content: 'Primary action', url: 'https://www.userinterviews.com/' }}
id="8"
message="Success message"
removeBorderLeft={boolean('removeBorderLeft', false)}
title="Success title"
type={MessageTypes.SUCCESS}
onDismiss={onDismiss}
/>
<Alert
action={{ content: 'Primary action', url: 'https://www.userinterviews.com/' }}
id="9"
message="Info message"
removeBorderLeft={boolean('removeBorderLeft', false)}
title="Info title"
type={MessageTypes.INFO}
onDismiss={onDismiss}
/>
<Alert
action={{ content: 'Primary action', url: 'https://www.userinterviews.com/' }}
id="11"
message="Error message"
removeBorderLeft={boolean('removeBorderLeft', false)}
title="Error title"
type={MessageTypes.ERROR}
onDismiss={onDismiss}
/>
<Alert
action={{ content: 'Primary action', url: 'https://www.userinterviews.com/' }}
id="12"
message="Warning message"
removeBorderLeft={boolean('removeBorderLeft', false)}
title="Warning title"
type={MessageTypes.WARNING}
onDismiss={onDismiss}
/>
<Alert
action={{ content: 'Primary action', url: 'https://www.userinterviews.com/' }}
id="13"
message="Some context around new feature if needed"
removeBorderLeft={boolean('removeBorderLeft', false)}
title="New feature alert!"
type={MessageTypes.FEATURE}
onDismiss={onDismiss}
/>

<p>Custom CTA via <code>message</code> prop</p>
<Alert
id="7"
message={(
<Fragment>
<div>When you confirm a session we’ll automatically
add an event and reminders to your Google Calendar.
</div>
<GoogleCalendarButton />
</Fragment>
)}
removeBorderLeft={boolean('removeBorderLeft', false)}
title={text('Title', 'Connect to Google Calendar to create reminders automatically')}
type={MessageTypes.ANNOUNCEMENT}
onDismiss={onDismiss}
/>

<p>Custom CTA via <code>action</code> prop</p>
<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')}
type={MessageTypes.ANNOUNCEMENT}
onDismiss={onDismiss}
/>
</>
);
export const CallToActionNode = {
args: {
type: MessageTypes.ERROR,
action: (
<button type="button" onClick={() => alert('custom node onClick called')}>
Custom action
</button>
),
},
};
119 changes: 17 additions & 102 deletions src/Avatar/Avatar.stories.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,113 +1,28 @@
import React from 'react';

import Avatar from 'src/Avatar';
import mdx from './Avatar.mdx';

export default {
title: 'Components/Avatar',
component: Avatar,
parameters: {
docs: {
page: mdx,
controls: {
exclude: ['name'],
},
},
args: {
initials: 'KS',
},
argTypes: {
colorId: { control: 'number' },
},
};

export const Small = () => (
<div>
<Avatar
initials="RR"
/>
<Avatar
colorId={1}
initials="RR"
/>
<Avatar
colorId={2}
initials="RR"
/>
<Avatar
colorId={3}
initials="RR"
/>
<Avatar
colorId={4}
initials="RR"
/>
<Avatar
colorId={5}
initials="RR"
/>
<Avatar
colorId={6}
initials="RR"
/>
</div>
);

export const Large = () => (
<div>
<Avatar
initials="RR"
large
/>
<Avatar
colorId={1}
initials="RR"
large
/>
<Avatar
colorId={2}
initials="RR"
large
/>
<Avatar
colorId={3}
initials="RR"
large
/>
<Avatar
colorId={4}
initials="RR"
large
/>
<Avatar
colorId={5}
initials="RR"
large
/>
<Avatar
colorId={6}
initials="RR"
large
/>
</div>
);

export const WithAlert = () => (
<div>
<Avatar
initials="RR"
large
showAlert
/>
<Avatar
initials="RR"
showAlert
/>
</div>
);
export const Primary = {
args: {},
};

export const WithImage = () => (
<div>
<Avatar
image="https://avatars.dicebear.com/api/avataaars/1234.svg"
initials="RR"
large
/>
<Avatar
image="https://avatars.dicebear.com/api/avataaars/1234.svg"
initials="RR"
/>
</div>
);
export const WithImage = {
args: {
image: 'https://placehold.it/160/160',
large: true,
},
};
Loading

0 comments on commit f7bc723

Please sign in to comment.