Swatch Storybook

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

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "pcln-design-system",
+      "comment": "Update docs for Swatch",
+      "type": "patch"
+    }
+  ],
+  "packageName": "pcln-design-system"
+}

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

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "pcln-icons",
+      "comment": "",
+      "type": "none"
+    }
+  ],
+  "packageName": "pcln-icons"
+}

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

@@ -1,43 +1,97 @@
+/* eslint-disable react/no-unescaped-entities */
+import { ArgsTable, Primary, PRIMARY_STORY } from '@storybook/addon-docs'
+import { Meta, StoryObj } from '@storybook/react'
+import { Hero, Section, StoryStage, TableOfContents, Flex, Swatch, Text, ThemeProvider } from '..'
+import type { ISwatchProps } from './Swatch'
 import React, { useState } from 'react'
-import Swatch from './Swatch'
-import { Box, Flex, Text } from '../'
 
-export default {
-  title: 'Swatch',
-  component: Swatch,
+type SwatchStory = StoryObj<ISwatchProps>
+
+export const Playground: SwatchStory = {
+  render: (args) => <Swatch {...args} />,
+  args: {
+    colors: [
+      '#D50032',
+      '#1B7742',
+      '#0033A0',
+      '#002244',
+      '#6244BB',
+      '#31225D',
+      '#31225D',
+      '#FFC658',
+      '#4F6F8F',
+    ],
+  },
+  argTypes: {
+    onClick: () => null,
+  },
+}
+
+export const SingleColor: SwatchStory = {
+  render: () => (
+    <StoryStage>
+      <Swatch colors={['#0033A0']} />
+    </StoryStage>
+  ),
 }
 
-export const SingleColor = () => <Swatch colors={['#0033A0']} />
-
-export const MultipleColors = () => <Swatch colors={['#D50032', '#1B7742', '#0033A0']} />
-
-export const Wrap = () => (
-  <Box width='100px'>
-    <Swatch
-      colors={[
-        '#D50032',
-        '#1B7742',
-        '#0033A0',
-        '#002244',
-        '#6244BB',
-        '#31225D',
-        '#31225D',
-        '#FFC658',
-        '#4F6F8F',
-      ]}
-    />
-  </Box>
-)
-
-export const SelectColor = () => {
+export const MultipleColors: SwatchStory = {
+  render: () => (
+    <StoryStage>
+      <Swatch colors={['#D50032', '#1B7742', '#0033A0']} />
+    </StoryStage>
+  ),
+}
+
+const SwatchWithState = () => {
   const [color, setColor] = useState('#D50032')
   return (
-    <>
-      <Swatch colors={['#FFFFFF', '#D50032', '#1B7742', '#0033A0']} onClick={(color) => setColor(color)} />
-      <Flex mt='3' flexDirection='row' alignItems='center'>
+    <StoryStage>
+      <Swatch
+        colors={['#FFFFFF', '#D50032', '#1B7742', '#0033A0']}
+        onClick={(color) => (typeof color === 'string' ? setColor(color) : undefined)}
+      />
+      <Flex flexDirection='row' alignItems='center'>
         <Text mr={2}>Color:</Text>
         <Text>{color}</Text>
       </Flex>
-    </>
+    </StoryStage>
   )
 }
+
+export const SelectColor: SwatchStory = {
+  render: () => <SwatchWithState />,
+}
+
+const meta: Meta<typeof Swatch> = {
+  title: 'Swatch',
+  component: Swatch,
+  parameters: {
+    docs: {
+      page: () => (
+        <ThemeProvider>
+          <Hero name='Swatch' img={null}>
+            Use the Swatch component to render a group of colors. Clicking one of the colors will execute
+            onClick callback, that can be passed as a prop.
+          </Hero>
+
+          <TableOfContents links={['Overview', 'Props']} />
+
+          <Section heading='Overview'>
+            <Text textStyle='paragraph'>
+              Use the Swatch component to render a group of colors. Clicking one of the colors will execute
+              onClick callback, that can be passed as a prop.
+            </Text>
+          </Section>
+
+          <Section heading='Props'>
+            <Primary />
+            <ArgsTable story={PRIMARY_STORY} />
+          </Section>
+        </ThemeProvider>
+      ),
+    },
+  },
+}
+
+export default meta

packages/core/src/Swatch/Swatch.tsx

@@ -1,4 +1,3 @@
-import PropTypes, { InferProps } from 'prop-types'
 import React from 'react'
 import styled from 'styled-components'
 import { Flex } from '../Flex'
@@ -15,25 +14,25 @@ const SwatchColor = styled.div`
   cursor: ${(props) => (props.onClick ? 'pointer' : 'default')};
 `
 
-const propTypes = {
-  colors: PropTypes.arrayOf(PropTypes.string),
-  onClick: PropTypes.func,
+export interface ISwatchProps {
+  colors?: string[]
+  onClick?: (color: string) => void
 }
 
-const Swatch: React.FC<InferProps<typeof propTypes>> = ({ colors, onClick, ...props }) => (
-  <Flex flexWrap='wrap' {...props}>
-    {colors.map((color, idx) => (
-      <SwatchColor
-        data-testid={`${idx}-${color}`}
-        key={`${idx}-${color}`}
-        color={color}
-        onClick={onClick ? () => onClick(color) : undefined}
-      />
-    ))}
-  </Flex>
-)
-
-Swatch.propTypes = propTypes
-Swatch.displayName = 'Swatch'
+const Swatch: React.FC<ISwatchProps> = (props: ISwatchProps) => {
+  const { colors, onClick } = props
+  return (
+    <Flex flexWrap='wrap'>
+      {colors.map((color, idx) => (
+        <SwatchColor
+          data-testid={`${idx}-${color}`}
+          key={`${idx}-${color}`}
+          color={color}
+          onClick={onClick ? () => onClick(color) : undefined}
+        />
+      ))}
+    </Flex>
+  )
+}
 
 export default Swatch

packages/core/src/Swatch/index.ts

@@ -1 +1,2 @@
 export { default as Swatch } from './Swatch'
+export type { ISwatchProps } from './Swatch'

packages/core/src/index.ts

@@ -1,4 +1,5 @@
 export type { IButtonProps } from './Button'
+export type { ISwatchProps } from './Swatch'
 
 export { Absolute } from './Absolute'
 export * from './Animate'

packages/icons/src/index.js

@@ -276,4 +276,4 @@ export { default as Whirlpool } from './Whirlpool.jsx'
 export { default as Widgets } from './Widgets.jsx'
 export { default as Wifi } from './Wifi.jsx'
 export { default as Youtube } from './Youtube.jsx'
-export { default as ZoomOut } from './ZoomOut.jsx'
+export { default as ZoomOut } from './ZoomOut.jsx'