Feat/checkbox

ui-kit/src/components/Checkbox/index.tsx

@@ -0,0 +1,49 @@
+import React, { forwardRef } from 'react';
+import { Ref } from 'react';
+import { CombineElementProps } from 'src/types/utils';
+import clxs from 'classnames';
+import { generateID } from 'src/utils/generateID';
+import { Text } from '..';
+
+interface CheckboxBaseProps {
+  label?: string;
+  display?: 'block' | 'inline';
+}
+type CheckboxProps = Omit<CombineElementProps<'input', CheckboxBaseProps>, 'type'>;
+
+const Checkbox = (
+  { label, display = 'block', style, disabled, ...props }: CheckboxProps,
+  ref: Ref<HTMLInputElement>
+) => {
+  const id = generateID('checkbox');
+
+  return (
+    <label
+      role="checkbox"
+      className={clxs('lubycon-checkbox', `lubycon-checkbox--display-${display}`, {
+        'lubycon-checkbox--disabled': disabled,
+      })}
+      style={style}
+    >
+      <span className="lubycon-checkbox--input">
+        <input id={id} name="checkbox" ref={ref} type="checkbox" {...props} disabled={disabled} />
+        <span className="lubycon-checkbox--control">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="12"
+            height="10"
+            viewBox="0 0 12 10"
+            fill="none"
+            aria-hidden="true"
+            focusable="false"
+          >
+            <path fill="none" stroke="#ffffff" strokeWidth="2" d="M1 4.2L4.51852 8L11 1" />
+          </svg>
+        </span>
+      </span>
+      {label ? <Text as="span">{label}</Text> : null}
+    </label>
+  );
+};
+
+export default forwardRef(Checkbox) as typeof Checkbox;

ui-kit/src/components/index.ts

@@ -1,3 +1,4 @@
 export { default as Button } from './Button';
 export { default as Text } from './Text';
 export { default as Column } from './Column';
+export { default as Checkbox } from './Checkbox';

ui-kit/src/sass/components/_Checkbox.scss

@@ -0,0 +1,73 @@
+$box-size: 16px;
+
+.lubycon-checkbox {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+
+  &:hover:not(&--disabled) {
+    .lubycon-checkbox--control {
+      border-color: map-get($colors, 'green50');
+    }
+  }
+
+  &--input {
+    display: grid;
+    grid-template-areas: 'checkbox';
+
+    > * {
+      grid-area: checkbox;
+    }
+    > input {
+      opacity: 0;
+      width: $box-size;
+      height: $box-size;
+      padding: 0;
+      margin: 0;
+      cursor: pointer;
+    }
+  }
+
+  &--control {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: $box-size;
+    height: $box-size;
+    border-radius: 2px;
+    box-sizing: border-box;
+    border: 1px solid map-get($colors, 'gray40');
+    margin-right: 8px;
+
+    > svg {
+      transition: transform 0.1s;
+      transform: scale(0);
+    }
+  }
+
+  &--input input:checked + &--control svg {
+    transform: scale(1);
+  }
+  &--input input:checked + &--control {
+    background-color: map-get($colors, 'green50');
+    border-color: map-get($colors, 'green50');
+  }
+
+  &--display-inline {
+    display: inline-flex;
+  }
+
+  &--disabled {
+    cursor: not-allowed;
+    color: map-get($colors, 'gray50');
+
+    input {
+      cursor: not-allowed;
+    }
+
+    .lubycon-checkbox--input > input:checked + .lubycon-checkbox--control {
+      border-color: map-get($colors, 'gray40');
+      background-color: map-get($colors, 'gray40'); 
+    }
+  }
+}

ui-kit/src/sass/components/_index.scss

@@ -2,3 +2,4 @@
 @import './Text';
 @import './Radio';
 @import './Column';
+@import './Checkbox';

ui-kit/src/stories/Checkbox.stories.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { Meta } from '@storybook/react/types-6-0';
+import Checkbox from 'components/Checkbox';
+
+export default {
+  title: 'Lubycon UI Kit/Checkbox',
+} as Meta;
+
+export const Default = () => {
+  return (
+    <div>
+      <Checkbox label={'체크박스1'} />
+      <Checkbox label={'체크박스2'} />
+    </div>
+  );
+};
+
+export const Disabled = () => {
+  return (
+    <div>
+      <Checkbox label={'체크박스'} />
+      <Checkbox label={'체크박스2'} />
+      <Checkbox label={'체크박스3'} disabled />
+      <Checkbox label={'체크박스4'} disabled defaultChecked={true} />
+    </div>
+  );
+};
+
+export const inline = () => {
+  return (
+    <div>
+      <Checkbox label={'체크박스'} display="inline" style={{ marginRight: '20px' }} />
+      <Checkbox label={'체크박스2'} display="inline" />
+    </div>
+  );
+};