feat: add large size to checkbox and radio inputs

packages/checkbox/src/Checkbox.stories.tsx

@@ -1,6 +1,6 @@
 import { ThemeProvider as EmotionThemeProvider } from '@emotion/react';
 import { Story, Meta } from '@storybook/react';
-import { DARK_COLORS, CLASSIC_COLORS } from '@tablecheck/tablekit-theme';
+import { DARK_COLORS, CLASSIC_COLORS, Size } from '@tablecheck/tablekit-theme';
 import { useState } from 'react';
 import { useDarkMode } from 'storybook-dark-mode';
 
@@ -57,6 +57,12 @@ Default.args = {
   children: 'Default'
 };
 
+export const LargeSize = Template.bind({});
+LargeSize.args = {
+  size: Size.Large,
+  children: 'Large Size'
+};
+
 export const Required = Template.bind({});
 Required.args = {
   isRequired: true,

packages/checkbox/src/Checkbox.tsx

@@ -5,7 +5,8 @@ import {
   CheckboxInput,
   InputDisplay,
   CheckboxLabel,
-  RequiredIndicator
+  RequiredIndicator,
+  CheckboxText
 } from './styled';
 import { CheckboxProps } from './types';
 
@@ -39,6 +40,7 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
       onChange,
       value,
       children,
+      size,
       ...inputProps
     } = props;
 
@@ -74,7 +76,7 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
           checked={isChecked}
           type="checkbox"
         />
-        <InputDisplay isInvalid={isInvalid}>
+        <InputDisplay isInvalid={isInvalid} data-size={size}>
           <svg
             width="12px"
             height="12px"
@@ -85,9 +87,11 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
             <polyline className="checkbox-checkmark" points="1 3 4 6 9 1" />
           </svg>
         </InputDisplay>
-        <p>{children}</p>
+        <CheckboxText data-size={size}>{children}</CheckboxText>
         {isRequired ? (
-          <RequiredIndicator role="presentation">*</RequiredIndicator>
+          <RequiredIndicator role="presentation" data-size={size}>
+            *
+          </RequiredIndicator>
         ) : null}
       </CheckboxLabel>
     );

packages/checkbox/src/styled.ts

@@ -1,6 +1,6 @@
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
-import { Spacing, FieldHeight } from '@tablecheck/tablekit-theme';
+import { Spacing, FieldHeight, Size } from '@tablecheck/tablekit-theme';
 import { Typography } from '@tablecheck/tablekit-typography';
 import { getThemeValue } from '@tablecheck/tablekit-utils';
 import type { ThemeOnlyProps } from '@tablecheck/tablekit-utils';
@@ -11,6 +11,7 @@ import {
   IS_CLICKED_SELECTOR
 } from './constants';
 import { checkboxClassicTheme, checkboxThemeNamespace } from './themes';
+import { CheckboxProps } from './types';
 
 export const Text = styled.span`
   display: inline-flex;
@@ -27,8 +28,17 @@ export const RequiredIndicator = styled.span`
   font-weight: bold;
 `;
 
+export const CheckboxText = styled.p<{
+  'data-size'?: CheckboxProps['size'];
+}>`
+  &[data-size='${Size.Large}'] {
+    ${Typography.Body1};
+  }
+`;
+
 export const InputDisplay = styled.span<{
   isInvalid?: boolean;
+  'data-size'?: CheckboxProps['size'];
 }>`
   background: ${getThemeValue(
     `${checkboxThemeNamespace}.backgroundColorBox`,
@@ -49,6 +59,10 @@ export const InputDisplay = styled.span<{
   vertical-align: text-bottom;
   height: 20px;
   width: 20px;
+  &[data-size='${Size.Large}'] {
+    width: 24px;
+    height: 24px;
+  }
 
   svg {
     position: absolute;

packages/checkbox/src/types.ts

@@ -1,3 +1,4 @@
+import { Size } from '@tablecheck/tablekit-theme';
 import { ReactNode, HTMLAttributes } from 'react';
 
 export type Value = string | number | readonly string[] | undefined;
@@ -27,4 +28,6 @@ export type CheckboxProps = HTMLAttributes<HTMLInputElement> &
 
     /** Field value */
     value: Value;
+
+    size?: Size.Regular | Size.Large;
   }>;

packages/radio/src/Radio.stories.tsx

@@ -1,4 +1,5 @@
 import { Story, Meta } from '@storybook/react';
+import { Size } from '@tablecheck/tablekit-theme';
 import { useState } from 'react';
 
 import { RadioProps } from './types';
@@ -35,6 +36,12 @@ const Template: Story<RadioProps> = ({ ...args }) => (
   <Radio {...args}>{args.children}</Radio>
 );
 
+export const LargeSize = Template.bind({});
+LargeSize.args = {
+  size: Size.Large,
+  children: 'Large Size'
+};
+
 export const Required = Template.bind({});
 Required.args = {
   isRequired: true,

packages/radio/src/Radio.tsx

@@ -37,6 +37,7 @@ export const Radio = forwardRef<HTMLInputElement, RadioProps>(
       onChange,
       value,
       children,
+      size,
       ...inputProps
     } = props;
 
@@ -74,8 +75,8 @@ export const Radio = forwardRef<HTMLInputElement, RadioProps>(
           value={value}
           ref={ref}
         />
-        <RadioInputDisplay />
-        <RadioText>{children}</RadioText>
+        <RadioInputDisplay data-size={size} />
+        <RadioText data-size={size}>{children}</RadioText>
       </RadioLabel>
     );
   }

packages/radio/src/styled.ts

@@ -1,9 +1,10 @@
 import styled from '@emotion/styled';
-import { Spacing, FieldHeight } from '@tablecheck/tablekit-theme';
+import { Spacing, FieldHeight, Size } from '@tablecheck/tablekit-theme';
 import { Typography } from '@tablecheck/tablekit-typography';
 import { getThemeValue } from '@tablecheck/tablekit-utils';
 
 import { radioClassicTheme, radioThemeNamespace } from './themes';
+import { RadioProps } from './types';
 
 export const IS_CLICKED_ATTR = 'isClicked';
 const IS_CLICKED_SELECTOR = '[data-is-clicked="true"]';
@@ -13,12 +14,22 @@ const TRANSITION_SETTINGS = `${TRANSITION_SPEED} ease-in-out`;
 
 export const RadioText = styled.span`
   ${Typography.Body2};
+  &[data-size='${Size.Large}'] {
+    ${Typography.Body1};
+  }
 `;
 
-export const RadioInputDisplay = styled.span`
+export const RadioInputDisplay = styled.span<{
+  'data-size'?: RadioProps['size'];
+}>`
   position: relative;
-  width: ${Spacing.L4};
-  height: ${Spacing.L4};
+
+  width: 16px;
+  height: 16px;
+  &[data-size='${Size.Large}'] {
+    width: 24px;
+    height: 24px;
+  }
   background: ${getThemeValue(
     `${radioThemeNamespace}.default.backgroundColor`,
     radioClassicTheme.default.backgroundColor
@@ -57,13 +68,17 @@ export const RadioInputDisplay = styled.span`
     position: absolute;
     top: -1px; // Offset for border
     left: -1px;
-    width: ${Spacing.L4};
-    height: ${Spacing.L4};
+    width: 16px;
+    height: 16px;
     border-radius: 50%;
     background: ${({ theme }) => theme.colors.primary2};
     transform: scale(0);
     transition: transform ${TRANSITION_SETTINGS};
   }
+  &[data-size='${Size.Large}']::after {
+    width: 24px;
+    height: 24px;
+  }
 `;
 
 export const RadioInput = styled.input`

packages/radio/src/types.ts

@@ -1,3 +1,4 @@
+import { Size } from '@tablecheck/tablekit-theme';
 import { ReactNode, HTMLAttributes } from 'react';
 
 export type Value = string | number | readonly string[] | undefined;
@@ -22,4 +23,6 @@ export type RadioProps = HTMLAttributes<HTMLInputElement> & {
 
   /** Field value */
   value: Value;
+
+  size?: Size.Regular | Size.Large;
 };