feat: add button

src/components/Button.stories.tsx

@@ -1,22 +1,14 @@
 import React from "react";
-import { text } from "@storybook/addon-knobs";
-import { action } from "@storybook/addon-actions";
+import { text, select } from "@storybook/addon-knobs";
 import Button from "./Button";
 
 export default {
   title: "Button",
   component: Button,
 };
 
-export const Text = () => {
+export const Simple = () => {
   const content = text("content", "button!");
-  return <Button>{content}</Button>;
+  const size = select("size", ["short", "medium", "long"], "medium");
+  return <Button size={size}>{content}</Button>;
 };
-
-export const Emoji = () => (
-  <Button onClick={action("clicked")}>
-    <span role="img" aria-label="so cool">
-      😀 😎 👍 💯
-    </span>
-  </Button>
-);

src/components/Button.tsx

@@ -1,21 +1,31 @@
-import React from 'react'
 import css from '@emotion/css';
-import variables from "../scss/_variables.scss";
+import styled from '@emotion/styled';
+import variables from '../styles/variables';
 
-const style = {
-  btn: css`
-    height: 35px;
-    padding: 0 20px;
-    border: 0;
-    background: ${variables.yellow};
-  `,
-}
+type TButtonSize = 'short' | 'medium' | 'long' | number;
 
-export const Button: React.FC = ({ children }) => {
-  console.log(style.btn);
-  return (
-    <button css={style.btn}>
-      {children}
-    </button>
-  )
+interface IButton {
+  size?: TButtonSize;
 }
+
+const getWidth = (size?: TButtonSize) => (
+  !size || size === "medium" ? "100px"
+    : size === "long" ? "140px"
+      : size === "short" ? "70px"
+        : `${size}px`
+);
+
+const buttonStyle = css`
+  height: 40px;
+  border: none;
+  border-radius: 4px;
+  padding: 0;
+  background-color: ${variables.blue};
+  color: white;
+`;
+
+export default styled.button<IButton>`
+  ${buttonStyle}
+
+  width: ${({ size }) => getWidth(size)};
+`;