From c05cca78ba42e2694957534acebf044c16f0fb8b Mon Sep 17 00:00:00 2001
From: lytrankieio123 <lytran@kie.io>
Date: Tue, 24 Aug 2021 13:04:29 +0700
Subject: [PATCH] :sparkles: styles: button ghost

---
 pages/index.tsx                               | 24 +++++--------------
 .../ButtonCommon/ButtonCommon.module.scss     | 12 ++++++++++
 .../common/ButtonCommon/ButtonCommon.tsx      |  6 ++---
 .../InputCommon/InputCommon.module.scss       |  2 +-
 .../common/InputCommon/InputCommon.tsx        |  4 ++--
 src/utils/constanst.utils.ts                  | 17 -------------
 6 files changed, 24 insertions(+), 41 deletions(-)

diff --git a/pages/index.tsx b/pages/index.tsx
index 9c9942636..85b4a208e 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,21 +1,7 @@
 
-import { useEffect, useRef } from 'react';
-import { Inputcommon, Layout } from 'src/components/common'
-import { InputType } from 'src/utils/constanst.utils'
+import { ButtonCommon, Inputcommon, Layout } from 'src/components/common';
+import { IconBuy } from 'src/components/icons';
 export default function Home() {
-
-  const inputElementRef = useRef<HTMLInputElement>(null);
-
-  useEffect(() => {
-    setTimeout(() =>{
-      inputElementRef.current?.focus()
-    }, 1000)
-  }, [])
-  
-  const onEnter = (value: string | number) => {
-
-  }
-
   return (
     <>
       <div>This is home page</div>
@@ -23,9 +9,11 @@ export default function Home() {
       <p>Go to <code>src/components</code> to make your awesome component!</p>
       <p>Go to <code>src/styles</code> to find global styles!</p>
 
-      <Inputcommon placeholder="Enter here" onEnter={onEnter} ref={inputElementRef}/>
-      <Inputcommon placeholder="Enter here" onEnter={onEnter} type={InputType.number}/>
+      <Inputcommon placeholder="Enter here" />
+      <Inputcommon placeholder="Enter here" type='number' />
       <Inputcommon placeholder="Enter here" value="23434" />
+
+      <ButtonCommon type='ghost' icon={<IconBuy/>}>Button</ButtonCommon>
     </>
   )
 }
diff --git a/src/components/common/ButtonCommon/ButtonCommon.module.scss b/src/components/common/ButtonCommon/ButtonCommon.module.scss
index 81866b687..c9d390574 100644
--- a/src/components/common/ButtonCommon/ButtonCommon.module.scss
+++ b/src/components/common/ButtonCommon/ButtonCommon.module.scss
@@ -48,6 +48,18 @@
       }
     }
   }
+
+  &.ghost {
+    @apply bg-white;
+    color: var(--primary);
+    border: 1px solid var(--primary);
+    &.loading {
+      &::before {
+        border-top-color: var(--primary);
+      }
+    }
+  }
+
   &.large {
     padding: 3.2rem 4.8rem;
     &.loading {
diff --git a/src/components/common/ButtonCommon/ButtonCommon.tsx b/src/components/common/ButtonCommon/ButtonCommon.tsx
index 2fd3cf464..82961b43e 100644
--- a/src/components/common/ButtonCommon/ButtonCommon.tsx
+++ b/src/components/common/ButtonCommon/ButtonCommon.tsx
@@ -5,8 +5,8 @@ import s from './ButtonCommon.module.scss'
 
 interface Props {
     children?: React.ReactNode,
-    type?: ButonType,
-    size?: ButtonSize,
+    type?: 'primary' | 'light' | 'ghost',
+    size?: 'default' | 'large',
     icon?: any,
     isIconSuffix?: boolean,
     loading?: boolean,
@@ -14,7 +14,7 @@ interface Props {
     onClick?: () => void,
 }
 
-const ButtonCommon = memo(({ type = ButonType.primary, size = ButtonSize.default,
+const ButtonCommon = memo(({ type = 'primary', size = 'default',
     icon, loading, disabled, isIconSuffix, children, onClick }: Props) => {
     return (
         <button className={classNames({
diff --git a/src/components/common/InputCommon/InputCommon.module.scss b/src/components/common/InputCommon/InputCommon.module.scss
index 8909a6a7f..412b6eb3f 100644
--- a/src/components/common/InputCommon/InputCommon.module.scss
+++ b/src/components/common/InputCommon/InputCommon.module.scss
@@ -1,5 +1,5 @@
 @import "../../../styles/utilities";
 
 .inputCommon {
-  @apply custom-border-radius bg-primary transition-all duration-200 text-white font-bold;
+  @apply custom-border-radius bg-primary transition-all duration-200;
 }
diff --git a/src/components/common/InputCommon/InputCommon.tsx b/src/components/common/InputCommon/InputCommon.tsx
index 6f36c4dce..0e6ef87a9 100644
--- a/src/components/common/InputCommon/InputCommon.tsx
+++ b/src/components/common/InputCommon/InputCommon.tsx
@@ -1,5 +1,5 @@
 import React, { forwardRef, useImperativeHandle, useRef } from 'react';
-import { InputType, KEY } from 'src/utils/constanst.utils';
+import { KEY } from 'src/utils/constanst.utils';
 import s from './InputCommon.module.scss';
 
 type Ref = {
@@ -10,7 +10,7 @@ interface Props {
     children?: React.ReactNode,
     value?: string | number,
     placeholder?: string,
-    type?: InputType,
+    type?: 'text' | 'number',
     onChange?: (value: string | number) => void,
     onEnter?: (value: string | number) => void,
 }
diff --git a/src/utils/constanst.utils.ts b/src/utils/constanst.utils.ts
index 110af9a7e..94f253622 100644
--- a/src/utils/constanst.utils.ts
+++ b/src/utils/constanst.utils.ts
@@ -1,20 +1,3 @@
-
-
-export enum ButonType {
-    primary = 'primary',
-    light = 'light',
-}
-
-export enum ButtonSize {
-    default = 'default',
-    large = 'large',
-}
-
-export enum InputType {
-    text = 'text',
-    number = 'number',
-}
-
 export const KEY = {
     ENTER: 'Enter',
 }