Merge pull request #3 from semicolonDSM/button

src/components/Button/Button.stories.tsx

@@ -1,3 +1,3 @@
-import { Button } from "./Button";
+import Button from "./index";
 export default { title: 'BasicButton' };
-export const Test = () => <Button label="test"></Button> 
+export const Test = () => <Button>버튼</Button>;

src/components/Button/index.tsx

@@ -0,0 +1,99 @@
+import React, { FC } from 'react';
+import { ButtonElement } from './styles';
+import { 
+  Colors, 
+  ButtonProps,
+  FontColors,
+  ActiveColors,
+  DisabledColors,
+  DisabledFontColors
+} from './types';
+import { Botton } from '../typography';
+import { 
+  colorObjectToColorString, isBackgroundNone
+} from './utils';
+import Spinner from '../../static/svg/Spinner';
+// import * as Styles from './styles';
+
+enum Cursor {
+  DISABLED = "not-allowed",
+  LOADING = "progress",
+  DEFAULT = "pointer"
+};
+
+enum PaddingVertical {
+  lg = 16,
+  md = 16,
+  sm = 8
+};
+
+enum PaddingHorizontal {
+  lg = 150,
+  md = 68,
+  sm = 16
+};
+
+enum BorderRadius {
+  lg = 12,
+  md = 12,
+  sm = 4
+}
+
+const initialProps: ButtonProps = {
+  fill: "default",
+  size: "md",
+  loading: false,
+  disabled: false,
+  background: true
+};
+
+const Button: FC<ButtonProps> = (props = initialProps) => {
+  const {
+    children,
+    onClick,
+    disabled,
+    className,
+    fill,
+    leftIcon,
+    rightIcon,
+    loading,
+    size,
+  } = props;
+
+  const cursorType = disabled ? "DISABLED" : loading ? "LOADING" : "DEFAULT";
+  const colorString = colorObjectToColorString(fill, true);
+  const BackgroundColor = disabled ? DisabledColors[colorString] : Colors[colorString];
+  const BackgroundActiveColor =  disabled ? DisabledColors[colorString] : ActiveColors[colorString];
+  const FontColor = disabled ? DisabledFontColors[colorString] : FontColors[colorString];
+
+  const styledProps = {
+    cursor: Cursor[cursorType],
+    background: BackgroundColor,
+    activeBackground: loading && isBackgroundNone(colorString) ? BackgroundColor : BackgroundActiveColor,
+    paddingVertical: PaddingVertical[size || "md"],
+    paddingHorizontal: PaddingHorizontal[size || "md"],
+    borderRadius: BorderRadius[size || "md"],
+    size: size || "md",
+    fillStyle: fill || "default",
+    marginLeft: leftIcon ? 6 : 0,
+    marginRight: loading || rightIcon ? 6 : 0,
+  };
+
+  return (
+    <ButtonElement
+      {...disabled}
+      {...className}
+      {...onClick}
+      {...styledProps}
+    >
+      { leftIcon }
+      <Botton className="semicolon-button-typography" color={FontColor}>
+        { children }
+      </Botton>
+      { loading && <Spinner fill={colorString} /> }
+      { rightIcon }
+    </ButtonElement>
+  )
+};
+
+export default Button;

src/components/Button/styles.ts

@@ -0,0 +1,76 @@
+import styled from '@emotion/styled';
+import { css } from '@emotion/react';
+import {
+    ButtonElementProps, 
+    Colors, 
+    FontColors,
+} from './types';
+
+export const ButtonElement = styled.button<ButtonElementProps>`
+    display: flex;
+    align-items: center;
+    border: none;
+    cursor: ${(props) => props.cursor};
+    background: ${(props) => props.background};
+    padding: ${(props) => `${props.paddingVertical}px ${props.paddingHorizontal}px`};
+    border-radius: ${(props) => props.borderRadius}px;
+    
+    ${(props) => typeof props.fillStyle !== "string" && props.fillStyle.full && Full}
+
+    &:hover, &:active {
+        background: ${(props) => props.activeBackground};
+    }
+
+    & .semicolon-button-typography {
+        margin-left: ${(props) => props.marginLeft}px;
+        margin-right: ${(props) => props.marginRight}px;
+    }
+`;
+
+export const Large = css`
+    border-radius: 12px;
+`;
+
+export const Medium = css`
+    border-radius: 12px;
+`;
+
+export const Small = css`
+    border-radius: 4px;
+`;
+
+export const Default = css`
+`;
+
+export const Purple = css`
+`;
+
+export const PurpleLight = css`
+`;
+
+export const Border = css`
+    border: 1px solid ${Colors.borderColor};
+`;
+
+export const BnDefault = css`
+    background: none;
+`;
+
+export const BnPurple = css`
+    background: none;
+`;
+
+export const Full = css`
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 0;
+`;
+
+export const Link = css`
+    &:hover, &:active {
+        text-decoration: underline 1px solid ${FontColors.link};
+    }
+`;

src/components/Button/types.ts

@@ -0,0 +1,95 @@
+import { ReactElement, Component, MouseEvent } from 'react';
+import { colors } from '../shared/styles';
+
+export type SizeType = "sm" | "md" | "lg";
+
+export type BackgroundNoneSupportFillStyleType = "default" | "purple";
+
+export type FillStyleType = "purpleLight" | "link" | "border" | BackgroundNoneSupportFillStyleType;
+
+export type BackgroundNoneFillStyleType = "bnDefault" | "bnPurple";
+
+export interface FillStyleObjectType {
+  fillStyle?: FillStyleType,
+  background?: boolean,
+  full?: boolean
+};
+
+export type CursorType = "not-allowed" | "progress" | "pointer";
+
+export interface ButtonProps {
+  leftIcon?: ReactElement<any, string | ((props: any) => ReactElement<any, any> | null) | (new (props: any) => Component<any, any, any>)>;
+  rightIcon?: ReactElement<any, string | ((props: any) => ReactElement<any, any> | null) | (new (props: any) => Component<any, any, any>)>;
+  fill?: FillStyleType | FillStyleObjectType;
+  size?: SizeType;
+  className?: string;
+  loading?: boolean;
+  disabled?: boolean;
+  background?: boolean;
+  onClick?: (event?: MouseEvent<HTMLElement, MouseEvent>) => void;
+};
+
+export interface ButtonElementProps {
+    cursor: CursorType;
+    background: string;
+    activeBackground: string;
+    paddingVertical: number;
+    paddingHorizontal: number;
+    borderRadius: number;
+    size: SizeType;
+    fillStyle: FillStyleType | FillStyleObjectType;
+    marginLeft: number;
+    marginRight: number;
+};
+
+export const Colors = {
+  default: colors.grey100,
+  purple: colors.purple400,
+  purpleLight: colors.purple50,
+  border: colors.white,
+  borderColor: colors.grey100,
+  link: colors.white,
+  bnDefault: colors.white,
+  bnPurple: colors.white,
+};
+
+export const ActiveColors = {
+  default: colors.grey300,
+  purple: colors.purple500,
+  purpleLight: colors.purple100,
+  border: colors.grey100,
+  link: colors.white,
+  bnDefault: colors.grey50,
+  bnPurple: colors.purple50,
+};
+
+export const FontColors = {
+  default: colors.grey700,
+  purple: colors.white,
+  purpleLight: colors.purple400,
+  border: colors.grey700,
+  link: colors.blue400,
+  full: colors.grey700,
+  bnDefault: colors.grey700,
+  bnPurple: colors.purple400
+};
+
+export const DisabledColors = {
+  default: colors.grey50,
+  purple: colors.purple50,
+  purpleLight: colors.grey50,
+  border: colors.grey50,
+  link: colors.grey50,
+  bnDefault: colors.grey50,
+  bnPurple: colors.grey50,
+}
+
+export const DisabledFontColors = {
+  default: colors.grey300,
+  purple: colors.white,
+  purpleLight: colors.grey300,
+  border: colors.grey300,
+  link: colors.grey300,
+  bnDefault: colors.grey300,
+  bnPurple: colors.grey300,
+}