share definition of radio props

cypress-io · Feb 7, 2024 · 04fa74d · 04fa74d
1 parent 1843a50
commit 04fa74d
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 63 deletions.
diff --git a/components/Radio/constants/src/index.ts b/components/Radio/constants/src/index.ts
@@ -16,3 +16,28 @@ export const RadioColors = {
   disabled: 'border-gray-200 bg-gray-100',
   empty: 'border-gray-200 bg-white',
 } as const
+
+export interface RadioProps {
+  /**
+   * A unique identifier for the checkbox on the whole page.
+   * It will be used to give match label with input for a11y.
+   */
+  id?: string
+  /**
+   * Name attribute of the <input type="radio"/>.
+   */
+  name?: string
+  /**
+   * Is the radio checked when it is first rendered.
+   */
+  checked?: boolean
+  /**
+   * The color of the background in the checkbox.
+   * The check mark will always be white.
+   */
+  color?: keyof Omit<typeof RadioColors, 'disabled' | 'empty'>
+  /**
+   * If the radio is disabled, it will not be clickable.
+   */
+  disabled?: boolean
+}
diff --git a/components/Radio/react/Radio.tsx b/components/Radio/react/Radio.tsx
@@ -1,31 +1,14 @@
 import * as React from 'react'
 import type { HTMLProps, ReactNode } from 'react'
 import clsx from 'clsx'
+import { type RadioProps as GenericRadioProps } from '@cypress-design/constants-radio'
 
 export interface RadioProps
-  extends Omit<HTMLProps<HTMLDivElement>, 'label' | 'onChange' | 'name'> {
-  /**
-   * A unique identifier for the checkbox on the whole page.
-   * It will be used to give match label with input for a11y.
-   */
-  id?: string
-  /**
-   * Name attribute of the <input type="radio"/>.
-   */
-  name?: string
-  /**
-   * Is the radio checked when it is first rendered.
-   */
-  checked?: boolean
-  /**
-   * The color of the background in the checkbox.
-   * The checkmark will always be white.
-   */
-  color?: 'red' | 'indigo' | 'jade'
-  /**
-   * If the radio is disabled, it will not be clickable.
-   */
-  disabled?: boolean
+  extends Omit<
+      HTMLProps<HTMLDivElement>,
+      'label' | 'onChange' | 'name' | 'color'
+    >,
+    GenericRadioProps {
   /**
    * Label for the radio.
    * It is very important to set this to make the checkbox accessible.
@@ -38,24 +21,20 @@ export interface RadioProps
   onChange: (event: React.ChangeEvent<HTMLInputElement>) => void
 }
 
-export const Radio: React.FC<RadioProps & React.HTMLProps<HTMLDivElement>> = ({
-  id,
-  label,
-  body,
-  className,
-  ...rest
-}) => {
+export const RadioInput: React.FC<
+  RadioProps & React.HTMLProps<HTMLDivElement>
+> = ({ id, label, body, className, name, ...rest }) => {
   return (
-    <div id={id} className={clsx(className)} {...rest}>
+    <div className={clsx(className)} {...rest}>
       <span>
-        <input type="radio" />
+        <input type="radio" id={id} name={name} />
         <div>
-          <label>{label}</label>
+          <label htmlFor={id}>{label}</label>
           {body}
         </div>
       </span>
     </div>
   )
 }
 
-export default Radio
+export default RadioInput
diff --git a/components/Radio/vue/Radio.vue b/components/Radio/vue/Radio.vue
@@ -9,37 +9,22 @@ function uid() {
 
 <script lang="ts" setup>
 import { ref, computed } from 'vue'
-import { RadioColors, Classes } from '@cypress-design/constants-radio'
+import {
+  RadioColors,
+  Classes,
+  RadioProps,
+} from '@cypress-design/constants-radio'
 
 const props = withDefaults(
-  defineProps<{
-    /**
-     * A unique identifier for the checkbox on the whole page.
-     * It will be used to give match label with input for a11y.
-     */
-    id?: string
-    /**
-     * Name attribute of the <input type="checkbox"/>.
-     */
-    name?: string
-    /**
-     * Is the checkbox checked when it is first rendered.
-     */
-    checked?: boolean
-    /**
-     * The color of the indicator dot
-     */
-    color?: 'red' | 'indigo' | 'jade'
-    /**
-     * If the checkbox is disabled, it will not be clickable.
-     */
-    disabled?: boolean
-    /**
-     * Label for the checkbox.
-     * It is very important to set this to make the checkbox accessible.
-     */
-    label?: string
-  }>(),
+  defineProps<
+    RadioProps & {
+      /**
+       * Label for the checkbox.
+       * It is very important to set this to make the checkbox accessible.
+       */
+      label?: string
+    }
+  >(),
   {
     id: () => uid(),
     color: 'indigo',