Adds Radio and RadioGroup [v1]

docs/docs/components/radio.mdx

@@ -0,0 +1,193 @@
+# Radio
+
+### Quick start
+
+Here's a quick start guide to get started with the Radio component, Radios are for selecting one option from many.
+
+### Importing Component
+
+import "@hover-design/react/dist/style.css";
+import { Radio, RadioGroup, Card } from "@hover-design/react";
+import {
+  RadioExample,
+  RadioGroupExample
+} from "@site/src/components/examples/RadioExample";
+
+export const RadioContainer = ({ children }) => (
+  <Card variant="shadow">{children}</Card>
+);
+
+```jsx
+import { Radio, RadioGroup } from "@hover-design/react";
+```
+
+### Code Snippets and Examples
+
+##### Simple Radio
+
+```jsx
+import { Radio, RadioGroup } from "@hover-design/react";
+
+const Demo = () => {
+  const [radioVal, setRadioVal] = useState("apple");
+
+  return (
+    <div>
+      <label>
+        <Radio
+          name="fruits"
+          value="apple"
+          checked={radioVal == "apple"}
+          onChange={(e) => setRadioVal(e.target.value)}
+        ></Radio>
+        Apple
+      </label>
+      <label>
+        <Radio
+          name="fruits"
+          value="bannana"
+          checked={radioVal == "bannana"}
+          onChange={(e) => setRadioVal(e.target.value)}
+        ></Radio>
+        Bannana
+      </label>
+      <label>
+        <Radio
+          name="fruits"
+          value="orange"
+          checked={radioVal == "orange"}
+          isDisabled
+          onChange={(e) => setRadioVal(e.target.value)}
+        ></Radio>
+        Orange
+      </label>
+    </div>
+  );
+};
+```
+
+<RadioContainer>
+  <RadioGroupExample />
+</RadioContainer>
+
+##### Radio Group
+
+```jsx
+<RadioGroup orientation="verticle">
+  <label>
+    <Radio name="fruits" value="apple" checked></Radio>
+    Apple
+  </label>
+  <label>
+    <Radio name="fruits" value="bannana"></Radio>
+    Bannana
+  </label>
+  <label>
+    <Radio name="fruits" value="orange" isDisabled></Radio>
+    Orange
+  </label>
+</RadioGroup>
+```
+
+<RadioContainer>
+  <RadioGroupExample radioGroupProps={{ orientation: "verticle" }} />
+</RadioContainer>
+
+##### Radio with styles
+
+```jsx
+<div>
+  <Radio
+    name="fruits"
+    value="bannana"
+    checked
+    radioSize="xs"
+    selectedStyles={{
+      color: "rgb(250, 250, 250)",
+      borderColor: "rgb(25, 113, 194)",
+      backgroundColor: "rgb(25, 113, 194)"
+    }}
+  />
+  <Radio name="fruits" value="orange" radioSize="sm" checked />
+  <Radio
+    name="fruits"
+    value="apple"
+    checked
+    radioSize="md"
+    selectedStyles={{
+      color: "rgb(250, 250, 250)",
+      borderColor: "rgb(224, 49, 49)",
+      backgroundColor: "rgb(224, 49, 49)"
+    }}
+  />
+</div>
+```
+
+<RadioContainer>
+  <RadioExample
+    checked
+    radioSize="xs"
+    selectedStyles={{
+      color: "rgb(250, 250, 250)",
+      borderColor: "rgb(25, 113, 194)",
+      backgroundColor: "rgb(25, 113, 194)"
+    }}
+  />
+  <RadioExample radioSize="sm" checked />
+  <RadioExample
+    checked
+    radioSize="md"
+    selectedStyles={{
+      color: "rgb(250, 250, 250)",
+      borderColor: "rgb(224, 49, 49)",
+      backgroundColor: "rgb(224, 49, 49)"
+    }}
+  />
+</RadioContainer>
+
+### Radio Props Reference
+
+| Key            |              type               | Optional? |
+| :------------- | :-----------------------------: | --------: |
+| value          |            `string;`            |        No |
+| name           |            `string;`            |        No |
+| radioSize      | `xs` `sm` `md` `lg` `xl` string |       Yes |
+| isDisabled     |            `boolean`            |       Yes |
+| baseStyles     |       `baseStyles object`       |       Yes |
+| disabledStyles |     `disabledStyles object`     |       Yes |
+| selectedStyles |     `selectedStyles object`     |       Yes |
+
+##### Customizing Radio Base, Selected and Disabled
+
+You can customize the base, selected and disabled styles of the radio by passing in the baseStyles, selectedStyles and disabledStyles props. Refer this Spec for this:
+
+baseStyles
+
+| Property        | Description         | Default            |
+| --------------- | ------------------- | ------------------ |
+| backgroundColor | Background of Radio | rgb(250, 250, 250) |
+| borderColor     | Border Color        | rgb(204, 204, 204) |
+
+selectedStyles
+
+| Property        | Description                    | Default            |
+| --------------- | ------------------------------ | ------------------ |
+| backgroundColor | Selected Radio BackgroundColor | rgb(250, 250, 250) |
+| borderColor     | Selected Border Color          | rgb(204, 204, 204) |
+
+disabledStyles
+
+| Property        | Description                    | Default            |
+| --------------- | ------------------------------ | ------------------ |
+| color           | Disabled Radio Color           | rgb(250, 250, 250) |
+| backgroundColor | Disabled Radio BackgroundColor | rgb(250, 128, 5)   |
+| borderColor     | Disabled Radio Border Color    | rgb(174, 68, 10)   |
+
+### RadioGroup Props Reference
+
+| Key         |              type               | Optional? |
+| :---------- | :-----------------------------: | --------: |
+| children    |        `React.ReactNode`        |        No |
+| spacing     | `xs` `sm` `md` `lg` `xl` string |       Yes |
+| orientation |     `verticle` `horizontal`     |       Yes |
+| ref         | `RefObject<HTMLButtonElement>;` |       Yes |

docs/src/components/examples/RadioExample.tsx

@@ -0,0 +1,61 @@
+import {
+  Radio,
+  RadioGroup,
+  TRadioGroupProps,
+  IRadioProps
+} from "@hover-design/react";
+
+import React, { useState } from "react";
+
+const RadioExample = (radioProps: Omit<IRadioProps, "ref">) => {
+  return <Radio {...radioProps}></Radio>;
+};
+const RadioGroupExample = ({
+  radioGroupProps,
+  radioProps
+}: {
+  radioGroupProps: Omit<TRadioGroupProps, "ref">;
+  radioProps: Omit<IRadioProps, "ref">;
+}) => {
+  const [radioVal, setRadioVal] = useState("apple");
+
+  console.log("radioGroupProps", radioGroupProps);
+
+  return (
+    <RadioGroup {...radioGroupProps}>
+      <label>
+        <RadioExample
+          name="fruits"
+          value="apple"
+          checked={radioVal == "apple"}
+          onChange={(e) => setRadioVal(e.target.value)}
+          {...radioProps}
+        ></RadioExample>
+        Apple
+      </label>
+      <label>
+        <RadioExample
+          name="fruits"
+          value="bannana"
+          checked={radioVal == "bannana"}
+          onChange={(e) => setRadioVal(e.target.value)}
+          {...radioProps}
+        ></RadioExample>
+        Bannana
+      </label>
+      <label>
+        <RadioExample
+          name="fruits"
+          value="orange"
+          checked={radioVal == "orange"}
+          isDisabled
+          onChange={(e) => setRadioVal(e.target.value)}
+          {...radioProps}
+        ></RadioExample>
+        Orange
+      </label>
+    </RadioGroup>
+  );
+};
+
+export { RadioExample, RadioGroupExample };

examples/vanilla-extract-react/src/App.tsx

@@ -1,4 +1,4 @@
-import { Button } from "@hover-design/react";
+import { Button, Radio, RadioGroup } from "@hover-design/react";
 import { StyleWrapper } from "components/appWraper/StyleWrapper";
 import { BreakpointsExample } from "components/breakpointsExample/BreakpointsExample";
 import { ColorsPreview } from "components/colorsPreview/colorsPreview";
@@ -7,17 +7,17 @@ import FontSizePreview from "components/fontSizePreview/FontSizePreview";
 import { Footer } from "components/footer/footer";
 import { Header } from "components/header/header";
 import { PageMain } from "components/pageMain/PageMain";
-import React from "react";
+import React, { useState } from "react";
 import { fonts, fontSizes } from "styles/index.css";
 import "styles/reset.css";
 
 const App: React.FC = () => {
+  const [radioVal, setRadioVal] = useState("radio1");
   return (
     <StyleWrapper>
       <Header />
       <PageMain>
         <Container>
-          <Button>Click me!</Button>
           <h1> 👋 &nbsp; Welcome to Hover Design System Example</h1>
           <h2>Colors</h2>
           <ColorsPreview />

lib/src/components/Radio/Radio.stories.tsx

@@ -0,0 +1,19 @@
+import { Radio } from ".";
+import type { Story } from "@ladle/react";
+import { IRadioProps } from "./radio.types";
+import { useRef } from "react";
+
+export const Controls: Story<Omit<IRadioProps, "ref">> = ({
+  ...nativeProps
+}) => {
+  return (
+    <>
+      <Radio {...nativeProps} />
+    </>
+  );
+};
+
+Controls.args = {
+  disabled: false
+};
+Controls.argTypes = {};

lib/src/components/Radio/Radio.tsx

@@ -0,0 +1,76 @@
+import React, { ForwardRefRenderFunction } from "react";
+import { IRadioProps } from "./radio.types";
+import {
+  radioWrapperClass,
+  radioCheckMarkClass,
+  radioThemeVars,
+  radioSizes,
+  radioThemeClass
+} from "./radio.styles.css";
+import "./radio.global.styles.css";
+import { assignInlineVars } from "@vanilla-extract/dynamic";
+import { eliminateUndefinedKeys } from "src/utils/object-utils";
+import { SvgDot } from "../_internal/Icons/SvgDot";
+
+const Radio: ForwardRefRenderFunction<HTMLInputElement, IRadioProps> = (
+  {
+    className,
+    style,
+    value,
+    name,
+    checked,
+    radioSize = "xs",
+    isDisabled = false,
+    baseStyles,
+    disabledStyles,
+    selectedStyles,
+    ...nativeProps
+  },
+  ref
+) => {
+  const assignVariables = assignInlineVars(
+    eliminateUndefinedKeys({
+      [radioThemeVars.radioStyleSize]: radioSizes[radioSize]
+        ? radioSizes[radioSize]
+        : undefined,
+      [radioThemeVars.baseStyles.backgroundColor]: baseStyles?.backgroundColor,
+      [radioThemeVars.baseStyles.borderColor]: baseStyles?.borderColor,
+      [radioThemeVars.selectedStyles.backgroundColor]:
+        selectedStyles?.backgroundColor,
+      [radioThemeVars.selectedStyles.borderColor]: selectedStyles?.borderColor,
+      [radioThemeVars.selectedStyles.color]: selectedStyles?.color,
+      [radioThemeVars.disabledStyles.backgroundColor]:
+        disabledStyles?.backgroundColor,
+      [radioThemeVars.disabledStyles.borderColor]: disabledStyles?.borderColor
+    })
+  );
+
+  return (
+    <div
+      className={`${radioWrapperClass} ${radioThemeClass} ${className || ""}`}
+      style={{ ...assignVariables, ...(style || {}) }}
+    >
+      <input
+        ref={ref}
+        {...nativeProps}
+        type="radio"
+        value={value}
+        name={name}
+        checked={checked}
+        disabled={isDisabled}
+      />
+      <div
+        aria-hidden="true"
+        className={`${radioCheckMarkClass}`}
+        data-checked={checked ? "true" : "false"}
+        data-disabled={isDisabled ? "true" : "false"}
+        data-test
+      >
+        {checked ? <SvgDot /> : null}
+      </div>
+    </div>
+  );
+};
+
+const RadioWithRef = React.forwardRef(Radio);
+export { RadioWithRef as Radio };