feat: introduce a large Radio size variant

src/Radio/Radio.story.tsx

@@ -1,6 +1,8 @@
 import React, { useRef } from "react";
 import { action } from "@storybook/addon-actions";
 import { Radio, Button } from "../index";
+import { Flex } from "../Flex";
+import styled from "styled-components";
 
 export default {
   title: "Components/Radio",
@@ -29,6 +31,21 @@ SetToDisabled.story = {
   name: "Set to disabled",
 };
 
+const DashedRadio = styled(Radio)`
+  border-radius: 0.375rem;
+  border-width: 2px;
+  border-style: dashed;
+  border-color: ${({ theme }) => theme.colors.lightBlue};
+`;
+
+export const WithDifferentSizes = () => (
+  <Flex flexDirection="column" gap="x2" alignItems="flex-start">
+    <DashedRadio id="radio-1" labelText="I am a default sized Radio" />
+    <DashedRadio id="radio-1" size="medium" labelText="I am a medium sized Radio" />
+    <DashedRadio id="radio-2" size="large" labelText="I am a large sized Radio" />
+  </Flex>
+);
+
 export const SetToError = () => (
   <>
     <Radio id="radio" error labelText="I am error" />

src/Radio/Radio.tsx

@@ -7,6 +7,8 @@ import { Text } from "../Type";
 import { ClickInputLabel } from "../utils";
 import { DefaultNDSThemeType } from "../theme.type";
 import { getSubset, omitSubset } from "../utils/subset";
+import { ComponentSize } from "../Input/InputField";
+
 const radioStyle = (theme) => ({
   checked: {
     disabled: {
@@ -37,8 +39,10 @@ const radioStyle = (theme) => ({
     },
   },
 });
+
 const getRadioStyle = (props, checked) => {
   const radioStyleMap = radioStyle(props.theme);
+
   if (props.disabled) {
     return radioStyleMap[checked].disabled;
   }
@@ -53,7 +57,7 @@ type VisualRadioProps = {
   theme?: DefaultNDSThemeType;
 };
 
-const VisualRadio: React.FC<VisualRadioProps> = styled.div(
+const VisualRadio = styled.div<VisualRadioProps>(
   ({ disabled, theme }: VisualRadioProps): CSSObject => ({
     minWidth: theme.space.x2,
     height: theme.space.x2,
@@ -78,11 +82,7 @@ const VisualRadio: React.FC<VisualRadioProps> = styled.div(
   })
 );
 
-type RadioInputProps = React.ComponentPropsWithRef<"input"> & {
-  error?: boolean;
-};
-
-const RadioInput: React.FC<RadioInputProps> = styled.input((props) => ({
+const RadioInput = styled.input<RadioProps>((props) => ({
   position: "absolute",
   opacity: "0",
   height: "1px",
@@ -101,27 +101,25 @@ const RadioInput: React.FC<RadioInputProps> = styled.input((props) => ({
   },
 }));
 
-type RadioProps = VisualRadioProps &
-  SpaceProps &
-  React.ComponentPropsWithRef<"input"> & {
+type NativeInputProps = Omit<React.ComponentPropsWithRef<"input">, "size">;
+
+type RadioProps = NativeInputProps &
+  SpaceProps & {
+    htmlSize?: number;
+    size?: ComponentSize;
     labelText?: ReactNode;
     checked?: boolean;
     defaultChecked?: boolean;
-    disabled?: boolean;
     error?: boolean;
-    id?: string;
-    className?: string;
-    required?: boolean;
-    value?: any;
   };
 
 const Radio: React.FC<RadioProps> = forwardRef(
-  ({ className, labelText, disabled, checked, required, error, ...props }, ref) => {
+  ({ className, labelText, disabled, checked, required, error, size, ...props }, ref) => {
     const spaceProps = getSubset(props, propTypes.space);
     const restProps = omitSubset(props, propTypes.space);
     return (
-      <Box position="relative" className={className} py="half" px="0" {...spaceProps}>
-        <ClickInputLabel disabled={disabled}>
+      <Box position="relative" className={className} px="0" {...spaceProps}>
+        <ClickInputLabel size={size} disabled={disabled}>
           <RadioInput
             type="radio"
             ref={ref}

src/utils/ClickInputLabel.tsx

@@ -1,16 +1,34 @@
-import styled, { CSSObject } from "styled-components";
+import styled from "styled-components";
 import theme from "../theme";
+import { ComponentSize } from "../Input/InputField";
+import { DefaultNDSThemeType } from "../theme.type";
 
-const ClickInputLabel: React.FC<any> = styled.label(
-  ({ disabled }: any): CSSObject => ({
+const cssForSize = (size: ComponentSize, theme: DefaultNDSThemeType) => {
+  switch (size) {
+    case "large":
+      return {
+        padding: `${theme.space.x2} 0`,
+      };
+
+    case "medium":
+    default:
+      return {
+        padding: `${theme.space.x1} 0`,
+      };
+  }
+};
+
+const ClickInputLabel = styled.label<{ size: ComponentSize; disabled: boolean }>(
+  ({ disabled }) => ({
     cursor: disabled ? undefined : "pointer",
     display: "inline-flex",
     width: "auto",
     minHeight: theme.space.x3,
     verticalAlign: "top",
     alignItems: "flex-start",
     userSelect: "none",
-    padding: `${theme.space.half} 0`,
-  })
+  }),
+  ({ size, theme }) => cssForSize(size, theme)
 );
+
 export default ClickInputLabel;