Skip to content

Commit

Permalink
Convert all core stories to CSF
Browse files Browse the repository at this point in the history
  • Loading branch information
@craigpalermo
craigpalermo committed Nov 30, 2020
1 parent 4d38f92 commit 5ae747e
Show file tree
Hide file tree
Showing 49 changed files with 3,973 additions and 3,201 deletions.
1 change: 0 additions & 1 deletion apps/storybook/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,6 @@
"@storybook/addon-a11y": "^5.3.21",
"@storybook/addon-actions": "^5.3.21",
"@storybook/addon-docs": "^5.3.21",
"@storybook/addon-info": "^5.3.21",
"@storybook/addon-knobs": "^5.3.21",
"@storybook/addon-viewport": "^5.3.21",
"@storybook/react": "^5.3.21",
Expand Down
88 changes: 50 additions & 38 deletions packages/autocomplete/src/Autocomplete.stories.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
/* eslint-disable react/no-children-prop */
import React from 'react'
import { storiesOf } from '@storybook/react'
import Component from '@reach/component-component'

import { Box, Text, ThemeProvider } from 'pcln-design-system'
Expand Down Expand Up @@ -28,8 +27,50 @@ const kayakTheme = {
},
}

storiesOf('pcln-autocomplete/Autocomplete', module)
.add('default', () => (
export default {
title: 'pcln-autocomplete/Autocomplete',
component: Autocomplete,
}

export const Default = () => (
<Component
initialState={{ value: '' }}
children={({ state, setState }) => (
<Box>
<Autocomplete
onChange={(item) => {
setState({ value: item })
}}
match={match}
>
<Label mb={1}>Cat</Label>
<Input />
<Menu>
{cats.map((cat) => (
<Item key={cat} item={cat}>
<PinIcon color='primary' mr={2} />
<Text fontSize={0}>{cat}</Text>
</Item>
))}
</Menu>
</Autocomplete>
<Text my={2}>
This text should be covered up by the Autocomplete.Menu when open.
</Text>
<Text my={2}>
The current value is <code>{state.value}</code>
</Text>
</Box>
)}
/>
)

Default.story = {
name: 'default',
}

export const Themed = () => (
<ThemeProvider theme={kayakTheme}>
<Component
initialState={{ value: '' }}
children={({ state, setState }) => (
Expand Down Expand Up @@ -60,38 +101,9 @@ storiesOf('pcln-autocomplete/Autocomplete', module)
</Box>
)}
/>
))
.add('themed', () => (
<ThemeProvider theme={kayakTheme}>
<Component
initialState={{ value: '' }}
children={({ state, setState }) => (
<Box>
<Autocomplete
onChange={(item) => {
setState({ value: item })
}}
match={match}
>
<Label mb={1}>Cat</Label>
<Input />
<Menu>
{cats.map((cat) => (
<Item key={cat} item={cat}>
<PinIcon color='primary' mr={2} />
<Text fontSize={0}>{cat}</Text>
</Item>
))}
</Menu>
</Autocomplete>
<Text my={2}>
This text should be covered up by the Autocomplete.Menu when open.
</Text>
<Text my={2}>
The current value is <code>{state.value}</code>
</Text>
</Box>
)}
/>
</ThemeProvider>
))
</ThemeProvider>
)

Themed.story = {
name: 'themed',
}
175 changes: 96 additions & 79 deletions packages/core/src/Absolute/Absolute.stories.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import React from 'react'
import { storiesOf } from '@storybook/react'
import styled from 'styled-components'
import { Absolute, Card, Flag, Image, Relative, Text } from '..'
import { Close as CloseIcon } from 'pcln-icons'
Expand All @@ -24,83 +23,101 @@ const ExtraLargeAbsolute = styled(Absolute)`
height: 400px;
`

storiesOf('Absolute', module)
.add('Over an image', () => (
<Relative width={1 / 2}>
<Absolute top={8} left={0}>
<Flag>Hello Flag</Flag>
export default {
title: 'Absolute',
component: Absolute,
}

export const OverAnImage = () => (
<Relative width={1 / 2}>
<Absolute top={8} left={0}>
<Flag>Hello Flag</Flag>
</Absolute>
<Image src='https://www.priceline.com/home/public/assets/images/photos/photo-aruba.jpg' />
</Relative>
)

OverAnImage.story = {
name: 'Over an image',
}

export const PositioningAnIcon = () => (
<Card m={2}>
<Relative p={4}>
<Text mt={2} textAlign='justify'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et nisl
dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
quis nisi ac est elementum consequat a eu risus. Phasellus id facilisis
nulla. Aliquam vel semper enim, id lobortis dolor. Morbi sed leo at
turpis rutrum posuere. Nullam tincidunt ex vitae mi sagittis, vel
sollicitudin lectus viverra. Curabitur sit amet fringilla velit.
</Text>
<Absolute top='10px' right='10px'>
<CloseIcon color='text.base' size={24} />
</Absolute>
<Image src='https://www.priceline.com/home/public/assets/images/photos/photo-aruba.jpg' />
</Relative>
))
.add('Positioning an icon', () => (
<Card m={2}>
<Relative p={4}>
<Text mt={2} textAlign='justify'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et
nisl dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Donec quis nisi ac est elementum consequat a eu risus. Phasellus id
facilisis nulla. Aliquam vel semper enim, id lobortis dolor. Morbi sed
leo at turpis rutrum posuere. Nullam tincidunt ex vitae mi sagittis,
vel sollicitudin lectus viverra. Curabitur sit amet fringilla velit.
</Text>
<Absolute top='10px' right='10px'>
<CloseIcon color='text.base' size={24} />
</Absolute>
</Relative>
</Card>
))
.add('Multiple absolutely positioned boxes', () => (
<TallCard pb={3}>
<Relative p={3}>
<ExtraLargeAbsolute
pl={2}
top={0}
right={0}
zIndex={1}
width={400}
bg='#085397'
>
<Text.span fontSize={1} bold>
z-index 1
</Text.span>
</ExtraLargeAbsolute>
<LargeAbsolute
pl={2}
top={0}
right={0}
zIndex={2}
width={300}
bg='#f2633a'
>
<Text.span fontSize={1} bold>
z-index 2
</Text.span>
</LargeAbsolute>
<MediumAbsolute
pl={2}
top={0}
right={0}
zIndex={3}
width={200}
bg='#0a84c1'
>
<Text.span fontSize={1} bold>
z-index 3
</Text.span>
</MediumAbsolute>
<SmallAbsolute
pl={2}
top={0}
right={0}
zIndex='4'
width={100}
bg='#3c910e'
>
<Text.span fontSize={1} bold>
z-index 4
</Text.span>
</SmallAbsolute>
</Relative>
</TallCard>
))
</Card>
)

PositioningAnIcon.story = {
name: 'Positioning an icon',
}

export const MultipleAbsolutelyPositionedBoxes = () => (
<TallCard pb={3}>
<Relative p={3}>
<ExtraLargeAbsolute
pl={2}
top={0}
right={0}
zIndex={1}
width={400}
bg='#085397'
>
<Text.span fontSize={1} bold>
z-index 1
</Text.span>
</ExtraLargeAbsolute>
<LargeAbsolute
pl={2}
top={0}
right={0}
zIndex={2}
width={300}
bg='#f2633a'
>
<Text.span fontSize={1} bold>
z-index 2
</Text.span>
</LargeAbsolute>
<MediumAbsolute
pl={2}
top={0}
right={0}
zIndex={3}
width={200}
bg='#0a84c1'
>
<Text.span fontSize={1} bold>
z-index 3
</Text.span>
</MediumAbsolute>
<SmallAbsolute
pl={2}
top={0}
right={0}
zIndex='4'
width={100}
bg='#3c910e'
>
<Text.span fontSize={1} bold>
z-index 4
</Text.span>
</SmallAbsolute>
</Relative>
</TallCard>
)

MultipleAbsolutelyPositionedBoxes.story = {
name: 'Multiple absolutely positioned boxes',
}
26 changes: 15 additions & 11 deletions packages/core/src/Avatar/Avatar.stories.js
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,20 @@
import React from 'react'
import { storiesOf } from '@storybook/react'
import { Avatar } from '..'

const elonJPG = 'https://pbs.twimg.com/media/DwSta0wUcAAQQR9.jpg'

storiesOf('Avatar', module)
.add('Default', () => <Avatar />)
.add('Initials', () => <Avatar initials='WS' />)
.add('Elon', () => (
<Avatar
title='Not Elon Musk'
subtitle='[email protected]'
src={elonJPG}
/>
))
export default {
title: 'Avatar',
component: Avatar,
}

export const Default = () => <Avatar />
export const Initials = () => <Avatar initials='WS' />

export const Elon = () => (
<Avatar
title='Not Elon Musk'
subtitle='[email protected]'
src={elonJPG}
/>
)
Loading

0 comments on commit 5ae747e

Please sign in to comment.