update Toggle documentation

Author: trenaryja

packages/core/src/Toggle/Toggle.stories.args.ts

@@ -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,
+  },
+}

packages/core/src/Toggle/Toggle.stories.tsx

@@ -1,34 +1,34 @@
 /* eslint-disable react/no-unescaped-entities */
-import { ArgsTable, PRIMARY_STORY, Primary } from '@storybook/addon-docs'
+import { ArgsTable, PRIMARY_STORY, Primary, Story } from '@storybook/addon-docs'
 import { Meta, StoryObj } from '@storybook/react'
-import {
-  DoDont,
-  Hero,
-  LiveDemo,
-  RelatedComponent,
-  RelatedComponentContainer,
-  Section,
-  StoryHeading,
-  StoryStage,
-  TableOfContents,
-} from 'pcln-docs-utils'
 import { Check as CheckIcon, Close as CloseIcon } from 'pcln-icons'
 import React, { useState } from 'react'
+import type { IToggleProps } from '..'
 import {
   Box,
   Button,
   Checkbox,
   ChoiceChip,
+  DoDont,
   Flex,
-  IToggleProps,
+  Hero,
   Image,
   Label,
   Radio,
+  RelatedComponent,
+  RelatedComponentContainer,
+  Section,
+  StoryHeading,
+  StoryStage,
+  TableOfContents,
   Text,
   ThemeProvider,
   Toggle,
 } from '..'
 
+import { toggleArgTypes } from './Toggle.stories.args'
+
+import { linkTo } from '@storybook/addon-links'
 import alignmentImage from './Toggle.Image.Alignment.png'
 import heroImage from './Toggle.Image.Hero.png'
 import statesImage from './Toggle.Image.States.png'
@@ -43,15 +43,7 @@ export const Playground: ToggleStory = {
 
     return <Toggle isOn={isOn} onToggle={onToggle} {...args} />
   },
-  argTypes: {
-    isOn: {
-      type: 'boolean',
-    },
-    disabled: {
-      type: 'boolean',
-      defaultValue: false,
-    },
-  },
+  argTypes: toggleArgTypes,
 }
 
 export const Sizes: ToggleStory = {
@@ -104,9 +96,9 @@ const meta: Meta<typeof Toggle> = {
       page: () => (
         <ThemeProvider>
           <Hero name='Toggle' img={heroImage}>
-            Buttons allow users to trigger an action or event with a single click. For example, you can use a
-            button for allowing the functionality of submitting a form, opening a dialog, canceling an action,
-            or performing a delete operation.
+            A toggle allows users to independently control binary options (a single state that is either on or
+            off), such as a setting. When a toggle is interacted with, it should take immediate effect and its
+            appearance should clearly indicate when it's in the activated or deactivated state.
           </Hero>
 
           <TableOfContents
@@ -116,8 +108,8 @@ const meta: Meta<typeof Toggle> = {
           <Section heading='Overview'>
             <Text textStyle='paragraph'>
               A toggle allows users to independently control binary options (a single state that is either on
-              or off), such as a setting. When a toggle is interacted with, it should take immediately effect
-              and it's appearance should clearly indicate when it's activated or deactivated state.
+              or off), such as a setting. When a toggle is interacted with, it should take immediate effect
+              and and its appearance should indicate whether it's activated or deactivated.
             </Text>
           </Section>
 
@@ -135,23 +127,24 @@ const meta: Meta<typeof Toggle> = {
           <Section heading='Examples'>
             <StoryHeading storyName='Sizes' storyTitle={meta.title} />
             <Text textStyle='paragraph'>
-              Toggles support two toggle sizes that consists of a base size, and a small size. These sizes
-              allow for hierarchy, emphasis, larger/smaller touch targets, and flexibility.
+              Toggles support two sizes, <code>base</code> and <code>small</code>. These sizes allow for
+              hierarchy, emphasis, larger/smaller touch targets, and flexibility.
             </Text>
-            <LiveDemo code={Sizes} />
+            <Story name='Sizes' />
 
-            <StoryHeading storyName='With Icon' storyTitle={meta.title} />
+            <StoryHeading storyName='WithIcon' storyTitle={meta.title} />
             <Text textStyle='paragraph'>
-              Toggles support two toggle sizes that consists of a base size, and a small size. These sizes
-              allow for hierarchy, emphasis, larger/smaller touch targets, and flexibility.
+              Toggles support two sizes, <code>base</code> and <code>small</code>. These sizes allow for
+              hierarchy, emphasis, larger/smaller touch targets, and flexibility.
             </Text>
-            <LiveDemo code={WithIcon} />
+            <Story name='With Icon' />
           </Section>
 
           <Section heading='Usage'>
             <Text.p textStyle='paragraph'>
-              Toggles should be used to adjust a setting, or if each item in a set can be independently
-              controlled. They’re used to control binary options, such as on/off or true/false.
+              Toggles can contain an optional icon that can be used to visually emphasize the selected state.
+              The icon's meaning should clearly indicate to help the user understand whether the toggle is
+              switched on or off.
             </Text.p>
             <Box p={3} my={3} borderRadius='xl' bg='primary.light'>
               <Image src={usageImage} />
@@ -179,7 +172,7 @@ const meta: Meta<typeof Toggle> = {
               }
               doText='have a toggle with context or an inline label (short and direct) to describe the option that the toggle controls'
               dontExample={<Toggle />}
-              dontText="have a toggle on it's own without any context or an inline label that leaves the user wondering that it controls"
+              dontText='have a toggle on its own without any context or an inline label that leaves the user wondering what it controls'
             />
             <DoDont
               doExample={
@@ -204,7 +197,7 @@ const meta: Meta<typeof Toggle> = {
                   </Label>
                 </Flex>
               }
-              dontText='use toggle if an item is opposing options, especially those that can be independently controlled'
+              dontText='use toggle if an item has opposing options, especially those that can be independently controlled'
             />
             <DoDont
               doExample={
@@ -213,7 +206,7 @@ const meta: Meta<typeof Toggle> = {
                   <Toggle isOn />
                 </Flex>
               }
-              doText='use toggle to a setting that would take immediate and noticeable effect'
+              doText='use toggle to change a setting that would take immediate and noticeable effect'
               dontExample={
                 <Flex alignItems='center' style={{ gap: 8 }}>
                   <Label>Show Savings</Label>
@@ -247,18 +240,18 @@ const meta: Meta<typeof Toggle> = {
 
           <Section heading='Related Components'>
             <RelatedComponentContainer>
-              <RelatedComponent name='Radio'>
+              <RelatedComponent name='Radio' onClick={linkTo('Radio')}>
                 <Box>
                   <Label nowrap>
                     <Radio />
                     Radio
                   </Label>
                 </Box>
               </RelatedComponent>
-              <RelatedComponent name='ChoiceChip' linkTo='core-chip-ChoiceChip'>
+              <RelatedComponent name='ChoiceChip' onClick={linkTo('core-chip-ChoiceChip')}>
                 <ChoiceChip>Choice Chip</ChoiceChip>
               </RelatedComponent>
-              <RelatedComponent name='CheckBox'>
+              <RelatedComponent name='CheckBox' onClick={linkTo('Checkbox')}>
                 <Box>
                   <Label nowrap>
                     <Checkbox />

packages/core/src/Toggle/Toggle.tsx

@@ -1,7 +1,7 @@
-import React from 'react'
 import PropTypes from 'prop-types'
+import React from 'react'
 import styled from 'styled-components'
-import { Box, Absolute, Input, getPaletteColor } from '..'
+import { Absolute, Box, Input, getPaletteColor } from '..'
 
 const alphaColor = (color: string, props) => `${getPaletteColor(color)(props)}4C`
 

packages/core/src/Toggle/index.ts

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

packages/core/src/index.ts

@@ -58,7 +58,8 @@ export { Text } from './Text'
 export { TextArea } from './TextArea'
 export { Toast } from './Toast'
 export { ToastProvider } from './ToastProvider'
-export { IToggleProps, Toggle } from './Toggle'
+export { Toggle } from './Toggle'
+export type { IToggleProps } from './Toggle'
 export { ToggleBadge } from './ToggleBadge'
 export { Tooltip } from './Tooltip'
 export { Truncate } from './Truncate'