Skip to content

Commit 5142c4d

Browse files
akito470craigpalermo
akito470
and
craigpalermo
committed
docs for Swatch component
Update packages/core/src/Swatch/Swatch.stories.tsx Co-authored-by: Craig Palermo <3260642+craigpalermo@users.noreply.github.com> Update packages/core/src/Swatch/Swatch.stories.tsx Co-authored-by: Craig Palermo <3260642+craigpalermo@users.noreply.github.com>
1 parent fe2e094 commit 5142c4d

File tree

7 files changed

+127
-52
lines changed

7 files changed

+127
-52
lines changed

‎common/changes/pcln-design-system/feat-docs-for-swatch_2023-07-10-17-28.json‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"changes": [
3+
{
4+
"packageName": "pcln-design-system",
5+
"comment": "Update docs for Swatch",
6+
"type": "patch"
7+
}
8+
],
9+
"packageName": "pcln-design-system"
10+
}

‎common/changes/pcln-icons/feat-docs-for-swatch_2023-07-10-17-28.json‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"changes": [
3+
{
4+
"packageName": "pcln-icons",
5+
"comment": "",
6+
"type": "none"
7+
}
8+
],
9+
"packageName": "pcln-icons"
10+
}

‎packages/core/src/Swatch/Swatch.stories.tsx‎

Lines changed: 86 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,97 @@
1+
/* eslint-disable react/no-unescaped-entities */
2+
import { ArgsTable, Primary, PRIMARY_STORY } from '@storybook/addon-docs'
3+
import { Meta, StoryObj } from '@storybook/react'
4+
import { Hero, Section, StoryStage, TableOfContents, Flex, Swatch, Text, ThemeProvider } from '..'
5+
import type { ISwatchProps } from './Swatch'
16
import React, { useState } from 'react'
2-
import Swatch from './Swatch'
3-
import { Box, Flex, Text } from '../'
47

5-
export default {
6-
title: 'Swatch',
7-
component: Swatch,
8+
type SwatchStory = StoryObj<ISwatchProps>
9+
10+
export const Playground: SwatchStory = {
11+
render: (args) => <Swatch {...args} />,
12+
args: {
13+
colors: [
14+
'#D50032',
15+
'#1B7742',
16+
'#0033A0',
17+
'#002244',
18+
'#6244BB',
19+
'#31225D',
20+
'#31225D',
21+
'#FFC658',
22+
'#4F6F8F',
23+
],
24+
},
25+
argTypes: {
26+
onClick: () => null,
27+
},
28+
}
29+
30+
export const SingleColor: SwatchStory = {
31+
render: () => (
32+
<StoryStage>
33+
<Swatch colors={['#0033A0']} />
34+
</StoryStage>
35+
),
836
}
937

10-
export const SingleColor = () => <Swatch colors={['#0033A0']} />
11-
12-
export const MultipleColors = () => <Swatch colors={['#D50032', '#1B7742', '#0033A0']} />
13-
14-
export const Wrap = () => (
15-
<Box width='100px'>
16-
<Swatch
17-
colors={[
18-
'#D50032',
19-
'#1B7742',
20-
'#0033A0',
21-
'#002244',
22-
'#6244BB',
23-
'#31225D',
24-
'#31225D',
25-
'#FFC658',
26-
'#4F6F8F',
27-
]}
28-
/>
29-
</Box>
30-
)
31-
32-
export const SelectColor = () => {
38+
export const MultipleColors: SwatchStory = {
39+
render: () => (
40+
<StoryStage>
41+
<Swatch colors={['#D50032', '#1B7742', '#0033A0']} />
42+
</StoryStage>
43+
),
44+
}
45+
46+
const SwatchWithState = () => {
3347
const [color, setColor] = useState('#D50032')
3448
return (
35-
<>
36-
<Swatch colors={['#FFFFFF', '#D50032', '#1B7742', '#0033A0']} onClick={(color) => setColor(color)} />
37-
<Flex mt='3' flexDirection='row' alignItems='center'>
49+
<StoryStage>
50+
<Swatch
51+
colors={['#FFFFFF', '#D50032', '#1B7742', '#0033A0']}
52+
onClick={(color) => (typeof color === 'string' ? setColor(color) : undefined)}
53+
/>
54+
<Flex flexDirection='row' alignItems='center'>
3855
<Text mr={2}>Color:</Text>
3956
<Text>{color}</Text>
4057
</Flex>
41-
</>
58+
</StoryStage>
4259
)
4360
}
61+
62+
export const SelectColor: SwatchStory = {
63+
render: () => <SwatchWithState />,
64+
}
65+
66+
const meta: Meta<typeof Swatch> = {
67+
title: 'Swatch',
68+
component: Swatch,
69+
parameters: {
70+
docs: {
71+
page: () => (
72+
<ThemeProvider>
73+
<Hero name='Swatch' img={null}>
74+
Use the Swatch component to render a group of colors. Clicking one of the colors will execute
75+
onClick callback, that can be passed as a prop.
76+
</Hero>
77+
78+
<TableOfContents links={['Overview', 'Props']} />
79+
80+
<Section heading='Overview'>
81+
<Text textStyle='paragraph'>
82+
Use the Swatch component to render a group of colors. Clicking one of the colors will execute
83+
onClick callback, that can be passed as a prop.
84+
</Text>
85+
</Section>
86+
87+
<Section heading='Props'>
88+
<Primary />
89+
<ArgsTable story={PRIMARY_STORY} />
90+
</Section>
91+
</ThemeProvider>
92+
),
93+
},
94+
},
95+
}
96+
97+
export default meta

‎packages/core/src/Swatch/Swatch.tsx‎

Lines changed: 18 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import PropTypes, { InferProps } from 'prop-types'
21
import React from 'react'
32
import styled from 'styled-components'
43
import { Flex } from '../Flex'
@@ -15,25 +14,25 @@ const SwatchColor = styled.div`
1514
cursor: ${(props) => (props.onClick ? 'pointer' : 'default')};
1615
`
1716

18-
const propTypes = {
19-
colors: PropTypes.arrayOf(PropTypes.string),
20-
onClick: PropTypes.func,
17+
export interface ISwatchProps {
18+
colors?: string[]
19+
onClick?: (color: string) => void
2120
}
2221

23-
const Swatch: React.FC<InferProps<typeof propTypes>> = ({ colors, onClick, ...props }) => (
24-
<Flex flexWrap='wrap' {...props}>
25-
{colors.map((color, idx) => (
26-
<SwatchColor
27-
data-testid={`${idx}-${color}`}
28-
key={`${idx}-${color}`}
29-
color={color}
30-
onClick={onClick ? () => onClick(color) : undefined}
31-
/>
32-
))}
33-
</Flex>
34-
)
35-
36-
Swatch.propTypes = propTypes
37-
Swatch.displayName = 'Swatch'
22+
const Swatch: React.FC<ISwatchProps> = (props: ISwatchProps) => {
23+
const { colors, onClick } = props
24+
return (
25+
<Flex flexWrap='wrap'>
26+
{colors.map((color, idx) => (
27+
<SwatchColor
28+
data-testid={`${idx}-${color}`}
29+
key={`${idx}-${color}`}
30+
color={color}
31+
onClick={onClick ? () => onClick(color) : undefined}
32+
/>
33+
))}
34+
</Flex>
35+
)
36+
}
3837

3938
export default Swatch

‎packages/core/src/Swatch/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
11
export { default as Swatch } from './Swatch'
2+
export type { ISwatchProps } from './Swatch'

‎packages/core/src/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
export type { IButtonProps } from './Button'
2+
export type { ISwatchProps } from './Swatch'
23

34
export { Absolute } from './Absolute'
45
export * from './Animate'

‎packages/icons/src/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -276,4 +276,4 @@ export { default as Whirlpool } from './Whirlpool.jsx'
276276
export { default as Widgets } from './Widgets.jsx'
277277
export { default as Wifi } from './Wifi.jsx'
278278
export { default as Youtube } from './Youtube.jsx'
279-
export { default as ZoomOut } from './ZoomOut.jsx'
279+
export { default as ZoomOut } from './ZoomOut.jsx'

0 commit comments

Comments
 (0)