Merge pull request #288 from omnifed/283-feature-make-radio-component

283 feature make radio component
omnifed · Jul 17, 2024 · b5db70c · b5db70c
2 parents f874d5b + f566c50
commit b5db70c
Show file tree

Hide file tree

Showing 18 changed files with 394 additions and 198 deletions.
diff --git a/docs/app/react/label/dev.mdx b/docs/app/react/label/dev.mdx
@@ -116,6 +116,7 @@ define function Field(props: PropsWithChildren<FieldProps>): ReactNode
 export interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
   htmlFor: string
   hidden?: boolean
+  size?: 'sm' | 'md'
 }
 
 define function Label(props: LabelProps): ReactNode
@@ -129,3 +130,4 @@ The `LabelProps` component accepts the following props:
 | -------- | ------- | ------------------------------------------------------------- |
 | htmlFor     | null   | The `name` attribute of the Input the Label is associated with. |
 | hidden   | false   | Whether the Label content should be visually hidden.                 |
+| size     | 'md'    | The size of the Label.         |
diff --git a/docs/app/react/label/overview.mdx b/docs/app/react/label/overview.mdx
@@ -16,6 +16,7 @@ import {
   'Labels should be used to describe the input',
   'Labels should display (required) if the input is not optional',
   'Two types: standard, hidden',
+  'Two sizes: small, medium',
   'Hidden labels should be used when the label is not visible to the user'
 ]} />
 

diff --git a/docs/app/react/radio/components/radio-preview.tsx b/docs/app/react/radio/components/radio-preview.tsx
@@ -1,34 +1,57 @@
-import { focusStates } from '@cerberus-design/panda-preset'
-import { Field, Label } from '@cerberus-design/react'
-import { css, cx } from '@cerberus/styled-system/css'
+import { Field, Label, Radio } from '@cerberus-design/react'
+import { css } from '@cerberus/styled-system/css'
 import { hstack } from '@cerberus/styled-system/patterns'
-import { radio } from '@cerberus/styled-system/recipes'
-import { type InputHTMLAttributes, type PropsWithChildren } from 'react'
 
-interface RadioProps
-  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
-  id: string
-  size?: 'sm' | 'md'
+export function DefaultRadioPreview() {
+  return (
+    <Field>
+      <Radio id="valid" name="states" value="valid" defaultChecked>
+        <Label htmlFor="valid">Default (valid)</Label>
+      </Radio>
+    </Field>
+  )
 }
 
-export function Radio(props: PropsWithChildren<RadioProps>) {
-  const { children, size, ...nativeProps } = props
-  const styles = radio({
-    size,
-  })
+export function InvalidRadioPreview() {
+  return (
+    <Field invalid>
+      <Radio id="invalid" name="states" value="invalid" defaultChecked>
+        <Label htmlFor="invalid">Invalid</Label>
+      </Radio>
+    </Field>
+  )
+}
+
+export function DisabledRadioPreview() {
+  return (
+    <Field disabled>
+      <Radio id="disabled" name="states" value="disabled" defaultChecked>
+        <Label htmlFor="disabled">Disabled</Label>
+      </Radio>
+    </Field>
+  )
+}
+
+export function CustomRadioPreview() {
   return (
     <Field>
-      <div className={cx('group', hstack(), styles.root)} tabIndex={0}>
-        <input
-          {...nativeProps}
-          className={styles.input}
-          tabIndex={-1}
-          type="radio"
-        />
-        <Label className={styles.label} htmlFor={props.id}>
-          {children}
-        </Label>
-      </div>
+      <Radio
+        className={css({
+          borderColor: 'yellow',
+          _groupHover: {
+            bgColor: 'black',
+          },
+          _checked: {
+            bg: 'yellow',
+          },
+        })}
+        id="custom"
+        name="states"
+        value="custom"
+        defaultChecked
+      >
+        <Label htmlFor="custom">Wu-Tang</Label>
+      </Radio>
     </Field>
   )
 }
@@ -44,15 +67,23 @@ export function OverviewRadioGroup() {
       name="pet"
       role="radiogroup"
     >
-      <Radio id="pet" name="pet" value="dog" defaultChecked>
-        🐶 Dog
-      </Radio>
-      <Radio id="pet" name="pet" value="cat">
-        🐱 Cat
-      </Radio>
-      <Radio id="pet" name="pet" value="mouse">
-        🐭 Mouse
-      </Radio>
+      <Field>
+        <Radio id="dog" name="pet" value="dog" defaultChecked>
+          <Label htmlFor="dog">🐶 Dog</Label>
+        </Radio>
+      </Field>
+
+      <Field>
+        <Radio id="cat" name="pet" value="cat">
+          <Label htmlFor="cat">😸 Cat</Label>
+        </Radio>
+      </Field>
+
+      <Field>
+        <Radio id="both" name="pet" value="both">
+          <Label htmlFor="both">🐶😸 Both</Label>
+        </Radio>
+      </Field>
     </fieldset>
   )
 }
@@ -68,12 +99,18 @@ export function OverviewRadioSizes() {
       name="sizes"
       role="radiogroup"
     >
-      <Radio id="sizes" name="sizes" value="sm" size="sm">
-        Small
-      </Radio>
-      <Radio id="sizes" name="sizes" value="md">
-        Medium (default)
-      </Radio>
+      <Field>
+        <Radio id="sm" name="sizes" value="sm" size="sm">
+          <Label htmlFor="sm" size="sm">
+            Small
+          </Label>
+        </Radio>
+      </Field>
+      <Field>
+        <Radio id="md" name="sizes" value="md">
+          <Label htmlFor="md">Medium (default)</Label>
+        </Radio>
+      </Field>
     </fieldset>
   )
 }