add storybook documentation for Toggle component

update checkbox snapshots

add changefile

update Toggle documentation

use toggleArgTypes for story args

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/Toggle/Toggle.Image.Alignment.png

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