@charcoal-ui/react 3.10.1 → 3.11.0

package/src/components/Radio/index.story.tsx

@@ -7,10 +7,6 @@ import { useState } from 'react'
 export default {
   title: 'Radio',
   component: Radio,
-  args: {
-    name: 'name',
-    label: 'label',
-  },
   parameters: {
     layout: 'centered',
   },
@@ -21,16 +17,19 @@ const LayoutDiv = styled.div`
   flex-direction: column;
   gap: ${({ theme }) => px(theme.spacing[24])};
 `
+const options = ['1', '2', '3'] as const
+type Option = (typeof options)[number]
+
+export const Default: StoryObj<typeof Radio> = {
+  render: function Render(args) {
+    const [value, setValue] = useState<Option>(options[0])
 
-export const Basic: StoryObj<typeof Radio> = {
-  render: function Render() {
-    const options = ['1', '2', '3']
-    const [value, setValue] = useState(options[0])
     return (
       <LayoutDiv>
-        <RadioGroup
+        <RadioGroup<Option>
           label={'label'}
           name={'name'}
+          {...args}
           value={value}
           onChange={setValue}
         >
@@ -47,11 +46,11 @@ export const Basic: StoryObj<typeof Radio> = {
 
 export const Disabled: StoryObj<typeof Radio> = {
   render: function Render() {
-    const options = ['1', '2', '3']
-    const [value, setValue] = useState(options[0])
+    const [value, setValue] = useState<Option>(options[0])
+
     return (
       <LayoutDiv>
-        <RadioGroup
+        <RadioGroup<Option>
           label={'label'}
           name={'name'}
           value={value}
@@ -71,11 +70,11 @@ export const Disabled: StoryObj<typeof Radio> = {
 
 export const PartialDisabled: StoryObj<typeof Radio> = {
   render: function Render() {
-    const options = ['1', '2', '3']
-    const [value, setValue] = useState(options[0])
+    const [value, setValue] = useState<Option>(options[0])
+
     return (
       <LayoutDiv>
-        <RadioGroup
+        <RadioGroup<Option>
           label={'label'}
           name={'name'}
           value={value}
@@ -94,11 +93,11 @@ export const PartialDisabled: StoryObj<typeof Radio> = {
 
 export const Readonly: StoryObj<typeof Radio> = {
   render: function Render() {
-    const options = ['1', '2', '3']
-    const [value, setValue] = useState(options[0])
+    const [value, setValue] = useState<Option>(options[0])
+
     return (
       <LayoutDiv>
-        <RadioGroup
+        <RadioGroup<Option>
           label={'label'}
           name={'name'}
           value={value}
@@ -118,11 +117,11 @@ export const Readonly: StoryObj<typeof Radio> = {
 
 export const Invalid: StoryObj<typeof Radio> = {
   render: function Render() {
-    const options = ['1', '2', '3']
-    const [value, setValue] = useState(options[0])
+    const [value, setValue] = useState<Option>(options[0])
+
     return (
       <LayoutDiv>
-        <RadioGroup
+        <RadioGroup<Option>
           label={'label'}
           name={'name'}
           value={value}

package/src/components/Radio/index.tsx

@@ -169,16 +169,17 @@ const RadioLabel = styled.div`
   }
 `
 
-export type RadioGroupProps = React.PropsWithChildren<{
-  className?: string
-  value?: string
-  label: string
-  name: string
-  onChange(next: string): void
-  disabled?: boolean
-  readonly?: boolean
-  invalid?: boolean
-}>
+export type RadioGroupProps<Value extends string = string> =
+  React.PropsWithChildren<{
+    className?: string
+    value?: Value
+    label: string
+    name: string
+    onChange(next: Value): void
+    disabled?: boolean
+    readonly?: boolean
+    invalid?: boolean
+  }>
 
 // TODO: use (or polyfill) flex gap
 const StyledRadioGroup = styled.div`
@@ -209,7 +210,7 @@ const RadioGroupContext = React.createContext<RadioGroupContext>({
   },
 })
 
-export function RadioGroup({
+export function RadioGroup<Value extends string = string>({
   className,
   value,
   label,
@@ -219,10 +220,10 @@ export function RadioGroup({
   readonly,
   invalid,
   children,
-}: RadioGroupProps) {
+}: RadioGroupProps<Value>) {
   const handleChange = useCallback(
     (next: string) => {
-      onChange(next)
+      onChange(next as Value)
     },
     [onChange]
   )

package/src/components/Switch/__snapshots__/index.story.storyshot

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storybook Tests Switch Basic 1`] = `
+exports[`Storybook Tests Switch Checked 1`] = `
 .c0 {
   display: inline-grid;
   grid-template-columns: auto 1fr;
@@ -118,8 +118,8 @@ exports[`Storybook Tests Switch Basic 1`] = `
       className="c0"
     >
       <input
-        aria-label="label"
-        checked={false}
+        aria-label="checked"
+        checked={true}
         className="c1"
         disabled={false}
         name="name"
@@ -144,7 +144,7 @@ exports[`Storybook Tests Switch Basic 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests Switch Checked 1`] = `
+exports[`Storybook Tests Switch Default 1`] = `
 .c0 {
   display: inline-grid;
   grid-template-columns: auto 1fr;
@@ -262,8 +262,7 @@ exports[`Storybook Tests Switch Checked 1`] = `
       className="c0"
     >
       <input
-        aria-label="label"
-        checked={true}
+        checked={false}
         className="c1"
         disabled={false}
         name="name"
@@ -417,7 +416,7 @@ exports[`Storybook Tests Switch Disabled 1`] = `
         checked={false}
         className="c1"
         disabled={true}
-        name="name"
+        name="disabled"
         onChange={[Function]}
         onClick={[Function]}
         onDragStart={[Function]}
@@ -444,7 +443,7 @@ exports[`Storybook Tests Switch Disabled 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests Switch Labelled 1`] = `
+exports[`Storybook Tests Switch Label 1`] = `
 .c0 {
   display: inline-grid;
   grid-template-columns: auto 1fr;
@@ -572,7 +571,7 @@ exports[`Storybook Tests Switch Labelled 1`] = `
         checked={false}
         className="c1"
         disabled={false}
-        name="name"
+        name="label"
         onChange={[Function]}
         onClick={[Function]}
         onDragStart={[Function]}

package/src/components/Switch/index.story.tsx

@@ -5,16 +5,12 @@ import { Meta, StoryObj } from '@storybook/react'
 export default {
   title: 'Switch',
   component: Switch,
-  args: {
-    name: 'name',
-    label: 'label',
-  },
   parameters: {
     layout: 'centered',
   },
 } as Meta<typeof Switch>
 
-export const Basic: StoryObj<typeof Switch> = {
+export const Default: StoryObj<typeof Switch> = {
   render: function Render(args) {
     const [checked, setChecked] = useState(false)
     return (
@@ -33,33 +29,29 @@ export const Basic: StoryObj<typeof Switch> = {
 }
 
 export const Checked: StoryObj<typeof Switch> = {
-  render: function Render(args) {
+  render: function Render() {
     const [checked, setChecked] = useState(true)
     return (
       <div>
         <Switch
-          {...args}
           name="name"
+          label="checked"
           onChange={(v) => {
             setChecked(v)
           }}
-          checked={args.checked ?? checked}
+          checked={checked}
         />
       </div>
     )
   },
 }
 
-export const Labelled: StoryObj<typeof Switch> = {
-  render: function Render(args) {
+export const Label: StoryObj<typeof Switch> = {
+  render: function Render() {
     const [checked, setChecked] = useState(false)
     return (
       <div>
-        <Switch
-          {...args}
-          checked={args.checked ?? checked}
-          onChange={setChecked}
-        >
+        <Switch name="label" checked={checked} onChange={setChecked}>
           Label
         </Switch>
       </div>
@@ -68,13 +60,13 @@ export const Labelled: StoryObj<typeof Switch> = {
 }
 
 export const Disabled: StoryObj<typeof Switch> = {
-  render: function Render(args) {
+  render: function Render() {
     const [checked, setChecked] = useState(false)
     return (
       <div>
         <Switch
-          {...args}
-          checked={args.checked ?? checked}
+          name="disabled"
+          checked={checked}
           onChange={setChecked}
           disabled
         >