From 3dc8369b65fb79e56bec8527d7d33fe21da3ed58 Mon Sep 17 00:00:00 2001
From: jinhojang6 <jinho5051@gmail.com>
Date: Tue, 28 Feb 2023 01:38:19 +0900
Subject: [PATCH] feat: implement radio button

---
 .../components/CSSBaseline/CSSBaseline.tsx    |  2 +
 .../RadioButtonFilledIcon.tsx                 | 26 +++++++
 .../Icons/RadioButtonFilledIcon/index.ts      |  1 +
 .../Icons/RadioButtonIcon/RadioButtonIcon.tsx | 22 ++++++
 .../components/Icons/RadioButtonIcon/index.ts |  1 +
 .../lsd-react/src/components/Icons/index.ts   |  2 +
 .../RadioButton/RadioButton.classes.ts        | 12 +++
 .../RadioButton/RadioButton.stories.tsx       | 27 +++++++
 .../RadioButton/RadioButton.styles.ts         | 58 +++++++++++++++
 .../components/RadioButton/RadioButton.tsx    | 74 +++++++++++++++++++
 .../src/components/RadioButton/index.ts       |  1 +
 packages/lsd-react/src/index.ts               |  1 +
 12 files changed, 227 insertions(+)
 create mode 100644 packages/lsd-react/src/components/Icons/RadioButtonFilledIcon/RadioButtonFilledIcon.tsx
 create mode 100644 packages/lsd-react/src/components/Icons/RadioButtonFilledIcon/index.ts
 create mode 100644 packages/lsd-react/src/components/Icons/RadioButtonIcon/RadioButtonIcon.tsx
 create mode 100644 packages/lsd-react/src/components/Icons/RadioButtonIcon/index.ts
 create mode 100644 packages/lsd-react/src/components/RadioButton/RadioButton.classes.ts
 create mode 100644 packages/lsd-react/src/components/RadioButton/RadioButton.stories.tsx
 create mode 100644 packages/lsd-react/src/components/RadioButton/RadioButton.styles.ts
 create mode 100644 packages/lsd-react/src/components/RadioButton/RadioButton.tsx
 create mode 100644 packages/lsd-react/src/components/RadioButton/index.ts

diff --git a/packages/lsd-react/src/components/CSSBaseline/CSSBaseline.tsx b/packages/lsd-react/src/components/CSSBaseline/CSSBaseline.tsx
index c5f38f5..91c0bf0 100644
--- a/packages/lsd-react/src/components/CSSBaseline/CSSBaseline.tsx
+++ b/packages/lsd-react/src/components/CSSBaseline/CSSBaseline.tsx
@@ -16,6 +16,7 @@ import { IconButtonStyles } from '../IconButton/IconButton.styles'
 import { LsdIconStyles } from '../Icons/LsdIcon/LsdIcon.styles'
 import { ListBoxStyles } from '../ListBox/ListBox.styles'
 import { QuoteStyles } from '../Quote/Quote.styles'
+import { RadioButtonStyles } from '../RadioButton/RadioButton.styles'
 import { TabItemStyles } from '../TabItem/TabItem.styles'
 import { TabsStyles } from '../Tabs/Tabs.styles'
 import { TagStyles } from '../Tag/Tag.styles'
@@ -46,6 +47,7 @@ const componentStyles: Array<ReturnType<typeof withTheme> | SerializedStyles> =
     QuoteStyles,
     CollapseStyles,
     CollapseHeaderStyles,
+    RadioButtonStyles,
   ]
 
 export const CSSBaseline: React.FC<{ theme?: Theme }> = ({
diff --git a/packages/lsd-react/src/components/Icons/RadioButtonFilledIcon/RadioButtonFilledIcon.tsx b/packages/lsd-react/src/components/Icons/RadioButtonFilledIcon/RadioButtonFilledIcon.tsx
new file mode 100644
index 0000000..9c78c51
--- /dev/null
+++ b/packages/lsd-react/src/components/Icons/RadioButtonFilledIcon/RadioButtonFilledIcon.tsx
@@ -0,0 +1,26 @@
+import { LsdIcon } from '../LsdIcon'
+
+export const RadioButtonFilledIcon = LsdIcon(
+  (props) => (
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 14 14"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M7.0013 1.16669C3.7813 1.16669 1.16797 3.78002 1.16797 7.00002C1.16797 10.22 3.7813 12.8334 7.0013 12.8334C10.2213 12.8334 12.8346 10.22 12.8346 7.00002C12.8346 3.78002 10.2213 1.16669 7.0013 1.16669ZM7.0013 11.6667C4.42297 11.6667 2.33464 9.57835 2.33464 7.00002C2.33464 4.42169 4.42297 2.33335 7.0013 2.33335C9.57964 2.33335 11.668 4.42169 11.668 7.00002C11.668 9.57835 9.57964 11.6667 7.0013 11.6667Z"
+        fill="black"
+      />
+      <path
+        d="M7.0013 9.91669C8.61213 9.91669 9.91797 8.61085 9.91797 7.00002C9.91797 5.38919 8.61213 4.08335 7.0013 4.08335C5.39047 4.08335 4.08464 5.38919 4.08464 7.00002C4.08464 8.61085 5.39047 9.91669 7.0013 9.91669Z"
+        fill="black"
+      />
+    </svg>
+  ),
+  {
+    filled: true,
+  },
+)
diff --git a/packages/lsd-react/src/components/Icons/RadioButtonFilledIcon/index.ts b/packages/lsd-react/src/components/Icons/RadioButtonFilledIcon/index.ts
new file mode 100644
index 0000000..62143be
--- /dev/null
+++ b/packages/lsd-react/src/components/Icons/RadioButtonFilledIcon/index.ts
@@ -0,0 +1 @@
+export * from './RadioButtonFilledIcon'
diff --git a/packages/lsd-react/src/components/Icons/RadioButtonIcon/RadioButtonIcon.tsx b/packages/lsd-react/src/components/Icons/RadioButtonIcon/RadioButtonIcon.tsx
new file mode 100644
index 0000000..b349332
--- /dev/null
+++ b/packages/lsd-react/src/components/Icons/RadioButtonIcon/RadioButtonIcon.tsx
@@ -0,0 +1,22 @@
+import { LsdIcon } from '../LsdIcon'
+
+export const RadioButtonIcon = LsdIcon(
+  (props) => (
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 14 14"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M7.0013 1.16669C3.7813 1.16669 1.16797 3.78002 1.16797 7.00002C1.16797 10.22 3.7813 12.8334 7.0013 12.8334C10.2213 12.8334 12.8346 10.22 12.8346 7.00002C12.8346 3.78002 10.2213 1.16669 7.0013 1.16669ZM7.0013 11.6667C4.42297 11.6667 2.33464 9.57835 2.33464 7.00002C2.33464 4.42169 4.42297 2.33335 7.0013 2.33335C9.57964 2.33335 11.668 4.42169 11.668 7.00002C11.668 9.57835 9.57964 11.6667 7.0013 11.6667Z"
+        fill="black"
+      />
+    </svg>
+  ),
+  {
+    filled: true,
+  },
+)
diff --git a/packages/lsd-react/src/components/Icons/RadioButtonIcon/index.ts b/packages/lsd-react/src/components/Icons/RadioButtonIcon/index.ts
new file mode 100644
index 0000000..03275c3
--- /dev/null
+++ b/packages/lsd-react/src/components/Icons/RadioButtonIcon/index.ts
@@ -0,0 +1 @@
+export * from './RadioButtonIcon'
diff --git a/packages/lsd-react/src/components/Icons/index.ts b/packages/lsd-react/src/components/Icons/index.ts
index 40f1f7f..40d3d8f 100644
--- a/packages/lsd-react/src/components/Icons/index.ts
+++ b/packages/lsd-react/src/components/Icons/index.ts
@@ -17,3 +17,5 @@ export * from './NavigateNextIcon'
 export * from './NewPageIcon'
 export * from './SearchIcon'
 export * from './PickIcon'
+export * from './RadioButtonIcon'
+export * from './RadioButtonFilledIcon'
diff --git a/packages/lsd-react/src/components/RadioButton/RadioButton.classes.ts b/packages/lsd-react/src/components/RadioButton/RadioButton.classes.ts
new file mode 100644
index 0000000..6c88247
--- /dev/null
+++ b/packages/lsd-react/src/components/RadioButton/RadioButton.classes.ts
@@ -0,0 +1,12 @@
+export const radioButtonClasses = {
+  root: `lsd-radio-button`,
+
+  input: `lsd-radio-button__input`,
+  label: `lsd-radio-button__label`,
+
+  disabled: `lsd-radio-button--disabled`,
+
+  large: `lsd-radio-button--large`,
+  medium: `lsd-radio-button--medium`,
+  small: 'lsd-radio-button--small',
+}
diff --git a/packages/lsd-react/src/components/RadioButton/RadioButton.stories.tsx b/packages/lsd-react/src/components/RadioButton/RadioButton.stories.tsx
new file mode 100644
index 0000000..c27a36c
--- /dev/null
+++ b/packages/lsd-react/src/components/RadioButton/RadioButton.stories.tsx
@@ -0,0 +1,27 @@
+import { Meta, Story } from '@storybook/react'
+import { RadioButton, RadioButtonProps } from './RadioButton'
+
+export default {
+  title: 'RadioButton',
+  component: RadioButton,
+  argTypes: {
+    size: {
+      type: {
+        name: 'enum',
+        value: ['small', 'medium', 'large'],
+      },
+      defaultValue: 'large',
+    },
+  },
+} as Meta
+
+export const Root: Story<RadioButtonProps> = (args) => (
+  <RadioButton {...args}>RadioButton label</RadioButton>
+)
+
+Root.args = {
+  size: 'large',
+  disabled: false,
+  checked: undefined,
+  onChange: undefined,
+}
diff --git a/packages/lsd-react/src/components/RadioButton/RadioButton.styles.ts b/packages/lsd-react/src/components/RadioButton/RadioButton.styles.ts
new file mode 100644
index 0000000..dc13696
--- /dev/null
+++ b/packages/lsd-react/src/components/RadioButton/RadioButton.styles.ts
@@ -0,0 +1,58 @@
+import { css } from '@emotion/react'
+import { radioButtonClasses } from './RadioButton.classes'
+
+export const RadioButtonStyles = css`
+  .${radioButtonClasses.root} {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+
+  .${radioButtonClasses.input} {
+    opacity: 0;
+    position: absolute;
+    left: 0;
+    top: 0;
+    padding: 0;
+    margin: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  .${radioButtonClasses.root}:not(.${radioButtonClasses.disabled}) {
+    &:hover {
+      text-decoration: underline;
+    }
+
+    .${radioButtonClasses.input} {
+      cursor: pointer;
+    }
+  }
+
+  .${radioButtonClasses.disabled} {
+    opacity: 0.34;
+  }
+
+  .${radioButtonClasses.label} {
+    margin-left: 18px;
+  }
+
+  .${radioButtonClasses.large} {
+    .${radioButtonClasses.label} {
+      margin-left: 18px;
+    }
+  }
+
+  .${radioButtonClasses.medium} {
+    .${radioButtonClasses.label} {
+      margin-left: 14px;
+    }
+  }
+
+  .${radioButtonClasses.small} {
+    .${radioButtonClasses.label} {
+      margin-left: 12px;
+    }
+  }
+`
diff --git a/packages/lsd-react/src/components/RadioButton/RadioButton.tsx b/packages/lsd-react/src/components/RadioButton/RadioButton.tsx
new file mode 100644
index 0000000..3e50b9b
--- /dev/null
+++ b/packages/lsd-react/src/components/RadioButton/RadioButton.tsx
@@ -0,0 +1,74 @@
+import clsx from 'clsx'
+import React, { useRef } from 'react'
+import { useInput } from '../../utils/useInput'
+import { RadioButtonFilledIcon, RadioButtonIcon } from '../Icons'
+import { Typography } from '../Typography'
+import { radioButtonClasses } from './RadioButton.classes'
+
+export type RadioButtonProps = Omit<
+  React.LabelHTMLAttributes<HTMLLabelElement>,
+  'onChange' | 'value' | 'color'
+> &
+  Pick<
+    React.InputHTMLAttributes<HTMLInputElement>,
+    'onChange' | 'checked' | 'defaultChecked'
+  > & {
+    disabled?: boolean
+    size?: 'small' | 'medium' | 'large'
+    inputProps?: React.InputHTMLAttributes<HTMLInputElement>
+  }
+
+export const RadioButton: React.FC<RadioButtonProps> & {
+  classes: typeof radioButtonClasses
+} = ({
+  size = 'large',
+  onChange,
+  checked,
+  defaultChecked,
+  disabled = false,
+  inputProps = {},
+  children,
+  ...props
+}) => {
+  const ref = useRef<HTMLInputElement>(null)
+  const input = useInput({
+    value: checked,
+    defaultValue: defaultChecked ?? false,
+    onChange,
+    ref,
+  })
+
+  return (
+    <Typography
+      color="primary"
+      variant={size === 'large' ? 'label1' : 'label2'}
+      component="label"
+      aria-disabled={disabled ? 'true' : 'false'}
+      {...props}
+      className={clsx(
+        props.className,
+        radioButtonClasses.root,
+        radioButtonClasses[size],
+        disabled && radioButtonClasses.disabled,
+      )}
+    >
+      <input
+        ref={ref}
+        type="radio"
+        checked={input.value}
+        onChange={input.onChange}
+        defaultChecked={defaultChecked}
+        className={clsx(inputProps.className, radioButtonClasses.input)}
+        {...inputProps}
+      />
+      {input.value ? (
+        <RadioButtonFilledIcon color="primary" focusable={false} />
+      ) : (
+        <RadioButtonIcon color="primary" focusable={false} />
+      )}
+      <span className={radioButtonClasses.label}>{children}</span>
+    </Typography>
+  )
+}
+
+RadioButton.classes = radioButtonClasses
diff --git a/packages/lsd-react/src/components/RadioButton/index.ts b/packages/lsd-react/src/components/RadioButton/index.ts
new file mode 100644
index 0000000..37d8240
--- /dev/null
+++ b/packages/lsd-react/src/components/RadioButton/index.ts
@@ -0,0 +1 @@
+export * from './RadioButton'
diff --git a/packages/lsd-react/src/index.ts b/packages/lsd-react/src/index.ts
index 36c389e..42bccf2 100644
--- a/packages/lsd-react/src/index.ts
+++ b/packages/lsd-react/src/index.ts
@@ -18,3 +18,4 @@ export * from './components/TabItem'
 export * from './components/Tabs'
 export * from './components/Tag'
 export * from './components/Theme'
+export * from './components/RadioButton'