add storybook documentation for Toggle component

Author: trenaryja

common/changes/pcln-design-system/storybook-documentation-toggle_2023-06-08-14-47.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "pcln-design-system",
+      "comment": "add documentation for Toggle component",
+      "type": "patch"
+    }
+  ],
+  "packageName": "pcln-design-system"
+}

packages/core/src/Button/Button.stories.tsx

@@ -28,7 +28,7 @@ import alignmentImage from './Button.Image.Alignment.png'
 import groupsImage from './Button.Image.Groups.png'
 import heroImage from './Button.Image.Hero.png'
 import responsiveLayoutImage from './Button.Image.ResponsiveLayout.png'
-import buttonStates from './Button.Image.States.png'
+import statesImage from './Button.Image.States.png'
 
 type ButtonStory = StoryObj<IButtonProps>
 
@@ -327,7 +327,7 @@ const meta: Meta<typeof Button> = {
               element.
             </Text>
             <Flex my={4} borderRadius='xl' bg='primary.light'>
-              <Image src={buttonStates} />
+              <Image src={statesImage} />
             </Flex>
 
             <StoryHeading storyName='Disabled' storyTitle={meta.title} />

packages/core/src/Checkbox/__snapshots__/Checkbox.spec.tsx.snap

@@ -22,16 +22,6 @@ exports[`Checkbox renders disabled with defaultChecked 1`] = `
   outline: none;
 }
 
-.c0 {
-  font-family: 'Montserrat','Helvetica Neue',Helvetica,Arial,sans-serif;
-  line-height: 1.4;
-  font-weight: 500;
-}
-
-.c0 * {
-  box-sizing: border-box;
-}
-
 .c1 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -120,6 +110,16 @@ exports[`Checkbox renders disabled with defaultChecked 1`] = `
   z-index: 0;
 }
 
+.c0 {
+  font-family: 'Montserrat','Helvetica Neue',Helvetica,Arial,sans-serif;
+  line-height: 1.4;
+  font-weight: 500;
+}
+
+.c0 * {
+  box-sizing: border-box;
+}
+
 <div
     class="c0"
   >
@@ -217,16 +217,6 @@ exports[`Checkbox renders disabled with disabled prop 1`] = `
   outline: none;
 }
 
-.c0 {
-  font-family: 'Montserrat','Helvetica Neue',Helvetica,Arial,sans-serif;
-  line-height: 1.4;
-  font-weight: 500;
-}
-
-.c0 * {
-  box-sizing: border-box;
-}
-
 .c1 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -315,6 +305,16 @@ exports[`Checkbox renders disabled with disabled prop 1`] = `
   z-index: 0;
 }
 
+.c0 {
+  font-family: 'Montserrat','Helvetica Neue',Helvetica,Arial,sans-serif;
+  line-height: 1.4;
+  font-weight: 500;
+}
+
+.c0 * {
+  box-sizing: border-box;
+}
+
 <div
     class="c0"
   >
@@ -411,16 +411,6 @@ exports[`Checkbox renders without the theme passed specifically 1`] = `
   outline: none;
 }
 
-.c0 {
-  font-family: 'Montserrat','Helvetica Neue',Helvetica,Arial,sans-serif;
-  line-height: 1.4;
-  font-weight: 500;
-}
-
-.c0 * {
-  box-sizing: border-box;
-}
-
 .c1 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -509,6 +499,16 @@ exports[`Checkbox renders without the theme passed specifically 1`] = `
   z-index: 0;
 }
 
+.c0 {
+  font-family: 'Montserrat','Helvetica Neue',Helvetica,Arial,sans-serif;
+  line-height: 1.4;
+  font-weight: 500;
+}
+
+.c0 * {
+  box-sizing: border-box;
+}
+
 <div
     class="c0"
   >

packages/core/src/DocsUtils/DoDont/DoDont.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
-
-import { Box, createTheme, Text } from '../..'
+import { Box, Text } from '../..'
+import { createTheme } from '../../utils'
 
 const theme = createTheme()
 

packages/core/src/DocsUtils/TableOfContents/TableOfContents.tsx

@@ -16,7 +16,7 @@ export const TableOfContents = ({ links }: TableOfContentsProps) => (
         const id = kebabCase(link)
         return (
           <Link key={id} onClick={() => scrollTo(id)}>
-            <li>{link}</li>
+            <li style={{ color: 'inherit' }}>{link}</li>
           </Link>
         )
       })}

packages/core/src/Toggle/Toggle.Image.Alignment.png

@@ -0,0 +1,15 @@
+import { ArgTypes } from '@storybook/react'
+import type { IToggleProps } from '..'
+
+export const toggleArgTypes: Partial<ArgTypes<IToggleProps>> = {
+  isOn: {
+    type: 'boolean',
+  },
+  disabled: {
+    type: 'boolean',
+    defaultValue: false,
+  },
+  height: {
+    type: 'number',
+  },
+}