Feat/switch

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

@@ -0,0 +1,33 @@
+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 SwitchBaseProps {
+  label?: string;
+  display?: 'block' | 'inline';
+}
+type SwitchProps = Omit<CombineElementProps<'input', SwitchBaseProps>, 'type'>;
+
+const Switch = (
+  { label, display = 'block', style, ...props }: SwitchProps,
+  ref: Ref<HTMLInputElement>
+) => {
+  const id = generateID('switch');
+
+  return (
+    <label
+      role="switch"
+      className={clxs('lubycon-switch', `lubycon-switch--display-${display}`)}
+      style={style}
+    >
+      <input className="lubycon-switch--input" ref={ref} type="checkbox" {...props} id={id} />
+      <span className="lubycon-switch--slider" />
+      {label ? <Text as="span">{label}</Text> : null}
+    </label>
+  );
+};
+
+export default forwardRef(Switch) as typeof Switch;

ui-kit/src/components/index.ts

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

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

@@ -0,0 +1,46 @@
+.lubycon-switch {
+  border-radius: 31.5px;
+  display: flex;
+  align-items: center;
+  position: relative;
+  cursor: pointer;
+
+  &--input {
+    display: none;
+  }
+
+  &--slider {
+    position: relative;
+    width: 40px;
+    height: 21px;
+    margin-right: 8px;
+    border-radius: 31.5px;
+    background-color: map-get($colors, 'gray40');
+    transition: background-color 0.3s;
+
+    &::before {
+      content: '';
+      position: absolute;
+      width: 15px;
+      height: 15px;
+      left: 3.31px;
+	    top: 50%;
+      transform: translateY(-50%);
+      background-color: #ffffff;
+      border-radius: 50%;
+      transition: transform 0.3s;
+    }
+  }
+
+  &--input:checked + &--slider {
+    background-color: map-get($colors, 'green50');
+  }
+
+  &--input:checked + &--slider::before {
+    transform: translate(18.38px, -50%);
+  }
+
+  &--display-inline {
+    display: inline-flex;
+  }
+}

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

@@ -4,3 +4,4 @@
 @import './Row';
 @import './Column';
 @import './Checkbox';
+@import './Switch';

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

@@ -0,0 +1,32 @@
+import React from 'react';
+import { Meta } from '@storybook/react/types-6-0';
+import Text from 'components/Text';
+import Switch from 'components/Switch';
+import { colors } from '../constants/colors';
+
+export default {
+  title: 'Lubycon UI Kit/Switch',
+} as Meta;
+
+export const Default = () => {
+  return (
+    <div>
+      <Text as="h2" typography="h2" style={{ color: colors.gray100 }}>
+        스위치
+      </Text>
+      <div style={{ padding: 0 }}>
+        <Switch label={'Off'} style={{ marginBottom: '23.17px' }} />
+        <Switch defaultChecked={true} label={'On'} />
+      </div>
+    </div>
+  );
+};
+
+export const Inline = () => {
+  return (
+    <div>
+      <Switch display="inline" label="Off" style={{ marginRight: '20px' }} />
+      <Switch defaultChecked={true} display="inline" label="On" />
+    </div>
+  );
+};