Skip to content
This repository was archived by the owner on Jan 9, 2023. It is now read-only.

Commit f06ef32

Browse files
matteovivonamatteovivona
authored
Merge pull request #637 from RobertoMSousa/breadcrumb_docs
Update storybook docs for breadcrumbs, calendar and callout
2 parents 9ce9619 + 6afb46c commit f06ef32

9 files changed

Lines changed: 253 additions & 161 deletions

File tree

‎src/components/Breadcrumb/Breadcrumb.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { CSSProperties } from 'react'
22
import BootstrapBreadcrumb from 'react-bootstrap/Breadcrumb'
33

4-
interface Props {
4+
export interface BreadcrumbProps {
55
/** The children to render */
66
children?: React.ReactNode
77
/**
@@ -13,7 +13,8 @@ interface Props {
1313
*/
1414
style?: CSSProperties
1515
}
16-
const Breadcrumb = (props: Props) => {
16+
17+
const Breadcrumb = (props: BreadcrumbProps) => {
1718
const { children, className, style } = props
1819

1920
return (

‎src/components/Calendar/Calendar.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import '@fullcalendar/timegrid/main.css'
1313

1414
type View = 'day' | 'month' | 'week'
1515

16-
interface Props {
16+
export interface CalendarProps {
1717
view: View
1818
views: View[]
1919
events: Event[]
@@ -51,7 +51,7 @@ const getViewsFromViewsProp = (views: View[]) => {
5151
return viewsString.slice(0, viewsString.length - 1)
5252
}
5353

54-
const Calendar = (props: Props) => {
54+
const Calendar = (props: CalendarProps) => {
5555
const {
5656
view,
5757
views,

‎src/components/Callout/Callout.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import classNames from 'classnames'
2-
import React, { CSSProperties } from 'react'
2+
import React, { CSSProperties, ReactElement } from 'react'
33

44
import { ColorVariant } from '../../interfaces'
55

66
import './callout.scss'
77

8-
interface Props {
8+
export interface CalloutProps {
99
/**
1010
* Defines the title of the callout.
1111
*/
@@ -34,7 +34,7 @@ export const Callout = ({
3434
children,
3535
className,
3636
style,
37-
}: Props): React.ReactElement => {
37+
}: CalloutProps): ReactElement => {
3838
const calloutClass = classNames(className, 'callout', `callout-${color}`)
3939
return (
4040
<div className={calloutClass} style={style}>

‎stories/alerts.stories.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ export default {
2424
// We create a “template” of how args map to rendering
2525
const Template: Story<AlertProps> = (args) => <Alert {...args} />
2626

27-
// main story tha's editable and has the docs for the props
27+
// main story that's editable and has the docs for the props
2828
export const Main = Template.bind({})
2929
Main.args = {
3030
color: 'primary',

‎stories/badges.stories.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ export default {
2424
// We create a “template” of how args map to rendering
2525
const Template: Story<BadgeProps> = (args) => <Badge {...args} />
2626

27-
// main story tha's editable and has the docs for the props
27+
// main story that's editable and has the docs for the props
2828
export const Main = Template.bind({})
2929
Main.args = {
3030
color: 'primary',

‎stories/breadcrumbs.stories.tsx‎

Lines changed: 77 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,81 @@
1-
import { storiesOf } from '@storybook/react'
1+
import { Story, Meta } from '@storybook/react/types-6-0'
22
import React from 'react'
33

4-
import { Breadcrumb, BreadcrumbItem } from '../src'
4+
import { Breadcrumb, BreadcrumbItem, BreadcrumbProps } from '../src'
55

6-
storiesOf('Breadcrumbs', module)
7-
.addParameters({
8-
info: {
9-
inline: true,
6+
export default {
7+
title: 'Breadcrumb',
8+
component: Breadcrumb,
9+
argTypes: {
10+
children: {
11+
control: 'text',
1012
},
11-
})
12-
.addDecorator((storyFn) => <div style={{ textAlign: 'center' }}>{storyFn()}</div>)
13-
.add('Breadcrumb', () => (
14-
<Breadcrumb>
15-
<BreadcrumbItem active>Item 1</BreadcrumbItem>
16-
<BreadcrumbItem>Item 2</BreadcrumbItem>
17-
</Breadcrumb>
18-
))
19-
.add('Breadcrumb Items with active prop.', () => (
20-
<Breadcrumb>
21-
<BreadcrumbItem active>Span Item</BreadcrumbItem>
22-
</Breadcrumb>
23-
))
24-
.add('Breadcrumb item can have custom link in child', () => (
25-
<Breadcrumb>
26-
<BreadcrumbItem active>
27-
<a href="https://example.com">Custom link item</a>
28-
</BreadcrumbItem>
29-
</Breadcrumb>
30-
))
31-
.add('Breadcrumb can use custom style', () => (
32-
<Breadcrumb style={{ padding: 10, background: 'cyan' }}>
33-
<BreadcrumbItem active style={{ color: 'blue', fontStyle: 'italic' }}>
34-
Item 1
35-
</BreadcrumbItem>
36-
<BreadcrumbItem style={{ background: 'yellow' }}>Item 2</BreadcrumbItem>
37-
</Breadcrumb>
38-
))
39-
.add('Breadcrumb can use custom class', () => (
40-
<Breadcrumb className="customClass">
41-
<BreadcrumbItem active className="customClass2">
42-
Custom Class
43-
</BreadcrumbItem>
44-
</Breadcrumb>
45-
))
13+
},
14+
decorators: [],
15+
} as Meta
16+
// your templates and stories
17+
18+
/**
19+
* it displays a simple breadcrum component
20+
* with two items and the first one is active
21+
*/
22+
const MultiItem: Story<BreadcrumbProps> = (args) => (
23+
<Breadcrumb {...args}>
24+
<BreadcrumbItem active>Item 1</BreadcrumbItem>
25+
<BreadcrumbItem>Item 2</BreadcrumbItem>
26+
</Breadcrumb>
27+
)
28+
export const Main = MultiItem.bind({})
29+
30+
/**
31+
* simple breadcrumb story with a single item active
32+
*/
33+
const SingleActive: Story<BreadcrumbProps> = (args) => (
34+
<Breadcrumb {...args}>
35+
<BreadcrumbItem active>Item 1</BreadcrumbItem>
36+
</Breadcrumb>
37+
)
38+
export const SingleActiveStory = SingleActive.bind({})
39+
40+
/**
41+
* story with the custom link on the single active item
42+
*/
43+
const SingleActiveCustomLink: Story<BreadcrumbProps> = (args) => (
44+
<Breadcrumb {...args}>
45+
<BreadcrumbItem active>
46+
<a href="https://example.com">Custom link item</a>
47+
</BreadcrumbItem>
48+
</Breadcrumb>
49+
)
50+
export const SingleActiveCustomLinkSrory = SingleActiveCustomLink.bind({})
51+
52+
/**
53+
* story with the custom style on both the items and the parent
54+
*/
55+
const SingleActiveCustomStyle: Story<BreadcrumbProps> = (args) => (
56+
<Breadcrumb {...args}>
57+
<BreadcrumbItem active style={{ color: 'blue', fontStyle: 'italic' }}>
58+
Item 1
59+
</BreadcrumbItem>
60+
<BreadcrumbItem style={{ background: 'yellow' }}>Item 2</BreadcrumbItem>
61+
</Breadcrumb>
62+
)
63+
export const SingleActiveCustomStyleStory = SingleActiveCustomStyle.bind({})
64+
SingleActiveCustomStyleStory.args = {
65+
style: { padding: 10, background: 'cyan' },
66+
}
67+
68+
/**
69+
* story with the custom style on the single item and the parent
70+
*/
71+
const SingleActiveCustomClass: Story<BreadcrumbProps> = (args) => (
72+
<Breadcrumb {...args}>
73+
<BreadcrumbItem active className="customClass2">
74+
Custom Class
75+
</BreadcrumbItem>
76+
</Breadcrumb>
77+
)
78+
export const SingleActiveCustomClassStory = SingleActiveCustomClass.bind({})
79+
SingleActiveCustomClassStory.args = {
80+
className: 'customClass',
81+
}

‎stories/buttons.stories.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ export default {
4242
// We create a “template” of how args map to rendering
4343
const Template: Story<ButtonProps> = (args) => <Button {...args} />
4444

45-
// main story tha's editable and has the docs for the props
45+
// main story that's editable and has the docs for the props
4646
export const Main = Template.bind({})
4747
Main.args = {
4848
color: 'primary',

‎stories/calendar.stories.tsx‎

Lines changed: 55 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,57 +1,61 @@
1-
import { storiesOf } from '@storybook/react'
1+
import { Story, Meta } from '@storybook/react/types-6-0'
22
import moment from 'moment'
33
import React from 'react'
44

5-
import { Calendar, Toast, Toaster } from '../src'
5+
import { Calendar, CalendarProps, Toast, Toaster } from '../src'
66

7-
storiesOf('Calendar', module)
8-
.addParameters({
9-
info: {
10-
inline: true,
7+
export default {
8+
title: 'Calendar',
9+
component: Calendar,
10+
argTypes: {
11+
children: {
12+
control: 'text',
1113
},
12-
})
13-
.addDecorator((storyFn) => <div style={{ textAlign: 'center' }}>{storyFn()}</div>)
14-
.add('Calendar', () => {
15-
const start = moment()
16-
const end = start.add(1, 'hours')
17-
return (
18-
<div>
19-
<Calendar
20-
onDateClick={(date, allDay) => {
21-
console.log('from story')
22-
Toast('success', 'Date Click', `${date.toISOString()} all day is ${allDay}`)
23-
}}
24-
onEventClick={(event) => {
25-
Toast('success', 'Event Click', event.title)
26-
}}
27-
onDateRangeSelected={(startDate: Date, endDate: Date) => {
28-
Toast(
29-
'success',
30-
'Range Selected',
31-
`${startDate.toISOString()} to ${endDate.toISOString()}`,
32-
)
33-
}}
34-
onPrevClick={() => {
35-
Toast('success', 'previous clicked')
36-
}}
37-
onNextClick={() => {
38-
Toast('success', 'next clicked')
39-
}}
40-
onTodayClick={() => {
41-
Toast('success', 'today clicked')
42-
}}
43-
events={[
44-
{
45-
start: start.toDate(),
46-
end: end.toDate(),
47-
title: 'Some Title',
48-
id: 'Some Id',
49-
allDay: false,
50-
},
51-
]}
52-
/>
14+
},
15+
decorators: [],
16+
} as Meta
5317

54-
<Toaster autoClose={800} hideProgressBar draggable />
55-
</div>
56-
)
57-
})
18+
const start = moment()
19+
const hours = 1
20+
const end = moment().add(hours, 'hours')
21+
22+
const Template: Story<CalendarProps> = (args) => (
23+
<div>
24+
<Calendar {...args} />
25+
<Toaster autoClose={800} hideProgressBar draggable />
26+
</div>
27+
)
28+
29+
// main story that's editable and has the docs for the props
30+
export const Main = Template.bind({})
31+
Main.args = {
32+
onDateClick: (date, allDay) => {
33+
console.log('from story')
34+
Toast('success', 'Date Click', `${date.toISOString()} all day is ${allDay}`)
35+
},
36+
onEventClick: (event) => {
37+
Toast('success', 'Event Click', event.title)
38+
},
39+
onDateRangeSelected: (startDate: Date, endDate: Date) => {
40+
Toast('success', 'Range Selected', `${startDate.toISOString()} to ${endDate.toISOString()}`)
41+
},
42+
onPrevClick: () => {
43+
Toast('success', 'previous clicked')
44+
},
45+
onNextClick: () => {
46+
Toast('success', 'next clicked')
47+
},
48+
onTodayClick: () => {
49+
console.log('on today click')
50+
Toast('success', 'today clicked')
51+
},
52+
events: [
53+
{
54+
start: start.toDate(),
55+
end: end.toDate(),
56+
title: 'Some Title',
57+
id: 'Some Id',
58+
allDay: false,
59+
},
60+
],
61+
}

0 commit comments

Comments
 (0)