From b032eeb51efe28fd2f7f084f412d75c2ada79ff4 Mon Sep 17 00:00:00 2001
From: mildtomato <jon.summers.muir@googlemail.com>
Date: Thu, 7 Jan 2021 14:01:30 +0800
Subject: [PATCH 01/11] fix: fix `children` error in Transition in Button
 component

---
 src/components/Button/Button.js | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/Button/Button.js b/src/components/Button/Button.js
index 3957d0cc..709db0c1 100644
--- a/src/components/Button/Button.js
+++ b/src/components/Button/Button.js
@@ -12,7 +12,7 @@ const Button = ({
   children,
   disabled = false,
   onClick,
-  icon = undefined,
+  icon,
   loading = false,
   shadow = true,
   size = 'medium',
@@ -55,6 +55,8 @@ const Button = ({
 
   classes.push(`sbui-btn-${type}`)
 
+  const showIcon = loading || icon
+
   return (
     <React.Fragment>
       <span className={containerClasses.join(' ')}>
@@ -68,8 +70,9 @@ const Button = ({
           style={style}
           type="button"
         >
+          {showIcon && (
           <Transition
-            show={loading || icon ? true : false}
+            show={showIcon ? true : false}
             enter="ease-out duration-300"
             enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             enterTo="opacity-100 translate-y-0 sm:scale-100"
@@ -87,6 +90,7 @@ const Button = ({
               <div className="sbui-btn-icon-container">{icon}</div>
             ) : null}
           </Transition>
+          )}
           {children && <span>{children}</span>}
         </button>
       </span>

From f76f11e58a1ec9b04db0787de5a5ff9fc5f83884 Mon Sep 17 00:00:00 2001
From: mildtomato <jon.summers.muir@googlemail.com>
Date: Thu, 7 Jan 2021 14:04:58 +0800
Subject: [PATCH 02/11] chore: remove sizeClasses as its not needed

---
 src/components/Button/Button.js | 9 +--------
 1 file changed, 1 insertion(+), 8 deletions(-)

diff --git a/src/components/Button/Button.js b/src/components/Button/Button.js
index 709db0c1..43acdb0e 100644
--- a/src/components/Button/Button.js
+++ b/src/components/Button/Button.js
@@ -43,14 +43,7 @@ const Button = ({
   }
 
   if (size) {
-    let sizeClasses = {
-      tiny: 'sbui-btn--tiny',
-      small: 'sbui-btn--small',
-      medium: 'sbui-btn--medium',
-      large: 'sbui-btn--large',
-      xlarge: 'sbui-btn--xlarge',
-    }
-    classes.push(sizeClasses[size])
+    classes.push(`sbui-btn--${size}`)
   }
 
   classes.push(`sbui-btn-${type}`)

From 907d753cefa61f23979023eca0faf485c01ba64e Mon Sep 17 00:00:00 2001
From: mildtomato <jon.summers.muir@googlemail.com>
Date: Thu, 7 Jan 2021 15:07:40 +0800
Subject: [PATCH 03/11] fix: added <Button> context consumer and provider to
 inject icon size depending on size of button. Icon sizes can still be
 overridden though. #29

---
 src/components/Button/Button.css |  6 +--
 src/components/Button/Button.js  |  5 ++-
 src/components/Icon/Icon.tsx     | 68 +++++++++++++++++++++++++-------
 3 files changed, 59 insertions(+), 20 deletions(-)

diff --git a/src/components/Button/Button.css b/src/components/Button/Button.css
index a49ab434..b4c0664d 100644
--- a/src/components/Button/Button.css
+++ b/src/components/Button/Button.css
@@ -3,8 +3,8 @@
 }
 
 .sbui-btn {
+  @apply relative cursor-pointer inline-flex items-center space-x-2 text-center border border-solid border-transparent transition ease-out duration-200;
   @apply font-medium rounded;
-  @apply relative cursor-pointer inline-flex space-x-2 text-center border border-solid border-transparent transition ease-out duration-200;
   font-family: inherit;
   text-shadow: 0 -1px 0 rgba(0,0,0,.12);
   -webkit-box-shadow: 0 2px 0 rgba(0,0,0,.045);
@@ -141,6 +141,6 @@
   /* @apply pl-10; */
 }
 
-.sbui-btn-icon-container {
+/* .sbui-btn-icon-container {
   @apply inset-y-0 flex items-center pointer-events-none;
-}
+} */
diff --git a/src/components/Button/Button.js b/src/components/Button/Button.js
index 43acdb0e..d6679a0e 100644
--- a/src/components/Button/Button.js
+++ b/src/components/Button/Button.js
@@ -2,6 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import './Button.css'
 import { Transition, Icon } from '../../index'
+import { IconContext } from './../Icon/IconContext'
 
 export const SIZES = ['tiny', 'small', 'medium', 'large', 'xlarge']
 export const VARIANTS = ['primary', 'default', 'secondary', 'outline', 'dashed', 'link', 'text']
@@ -75,12 +76,12 @@ const Button = ({
           >
             {loading ? (
               <Icon
-                size={21}
+                size={size}
                 className={'sbui-btn--anim--spin'}
                 type={'Loader'}
               />
             ) : icon ? (
-              <div className="sbui-btn-icon-container">{icon}</div>
+              <IconContext.Provider value={{contextSize: size}}>{icon}</IconContext.Provider>
             ) : null}
           </Transition>
           )}
diff --git a/src/components/Icon/Icon.tsx b/src/components/Icon/Icon.tsx
index 01a2f950..5f642c6f 100644
--- a/src/components/Icon/Icon.tsx
+++ b/src/components/Icon/Icon.tsx
@@ -1,33 +1,71 @@
 import React from 'react'
 import * as Icons from 'react-feather'
+import { IconContext } from './IconContext'
+
+
+// interface ContextProps {
+//   contextSize: string
+// }
 
 interface Props {
   className?: string
-  size?: number,
-  type?: string,
-  color?: string,
-  strokeWidth?: number,
+  size?: 'tiny' | 'small' | 'medium' | 'large' | 'xlarge' | number
+  type?: string
+  color?: string
+  strokeWidth?: number
 }
 
+
 function Icon({
   className,
-  size = 21,
+  size,
   type,
   color,
   strokeWidth,
   ...props
 }: Props) {
-  // @ts-ignore
-  const FeatherIcon = Icons[type]
-
+  
   return (
-    <FeatherIcon
-      color={color ? color : 'currentColor'}
-      className={`${className}`}
-      strokeWidth={strokeWidth}
-      size={size}
-      {...props}
-    />
+    <IconContext.Consumer>
+      {({ contextSize } :any) => {
+
+        const defaultSizes = {
+          tiny: 14,
+          small: 18,
+          medium: 21,
+          large: 21,
+          xlarge: 24,
+        }
+
+        // @ts-ignore
+        const FeatherIcon = Icons[type]
+
+        // const iconSize = typeof size === 'string' ? defaultSizes[contextSize] : 21
+        let iconSize = 21
+        if(size) {
+          iconSize = size ? typeof size === 'string' ? defaultSizes[size] : size : 21
+        }
+
+        if(contextSize) {
+        // @ts-ignore
+          iconSize = contextSize ? typeof contextSize === 'string' ? defaultSizes[contextSize] : contextSize : 21
+        }
+
+        console.log('size: ', size)
+        console.log('contextSize: ', contextSize)
+        console.log('iconSize: ', iconSize)
+
+        return (
+          <FeatherIcon
+            color={color ? color : 'currentColor'}
+            className={`${className}`}
+            strokeWidth={strokeWidth}
+            size={iconSize}
+            {...props}
+          />
+        )
+      }}
+    </IconContext.Consumer>
   )
 }
 

From 61a705ef1d23f14260c4dc08dc49b952f5a53ae8 Mon Sep 17 00:00:00 2001
From: mildtomato <jon.summers.muir@googlemail.com>
Date: Thu, 7 Jan 2021 15:08:04 +0800
Subject: [PATCH 04/11] fix: missing files from last commit

---
 src/components/Icon/Icon.tsx        | 42 +++++++++++++----------------
 src/components/Icon/IconContext.tsx |  7 +++++
 2 files changed, 26 insertions(+), 23 deletions(-)
 create mode 100644 src/components/Icon/IconContext.tsx

diff --git a/src/components/Icon/Icon.tsx b/src/components/Icon/Icon.tsx
index 5f642c6f..8478fa9c 100644
--- a/src/components/Icon/Icon.tsx
+++ b/src/components/Icon/Icon.tsx
@@ -2,7 +2,6 @@ import React from 'react'
 import * as Icons from 'react-feather'
 import { IconContext } from './IconContext'
 
-
 // interface ContextProps {
 //   contextSize: string
 // }
@@ -15,21 +14,15 @@ interface Props {
   strokeWidth?: number
 }
 
+interface StringMap {
+  [key: string]: number
+}
 
-function Icon({
-  className,
-  size,
-  type,
-  color,
-  strokeWidth,
-  ...props
-}: Props) {
-  
+function Icon({ className, size, type, color, strokeWidth, ...props }: Props) {
   return (
     <IconContext.Consumer>
-      {({ contextSize } :any) => {
-
-        const defaultSizes = {
+      {({ contextSize }) => {
+        const defaultSizes: StringMap = {
           tiny: 14,
           small: 18,
           medium: 21,
@@ -41,20 +34,23 @@ function Icon({
         const FeatherIcon = Icons[type]
 
         // const iconSize = typeof size === 'string' ? defaultSizes[contextSize] : 21
-        let iconSize = 21
-        if(size) {
-          iconSize = size ? typeof size === 'string' ? defaultSizes[size] : size : 21
+        let iconSize: any = 21
+        if (size) {
+          iconSize = size
+            ? typeof size === 'string'
+              ? defaultSizes[size]
+              : size
+            : 21
         }
 
-        if(contextSize) {
-        // @ts-ignore
-          iconSize = contextSize ? typeof contextSize === 'string' ? defaultSizes[contextSize] : contextSize : 21
+        if (contextSize) {
+          iconSize = contextSize
+            ? typeof contextSize === 'string'
+              ? defaultSizes[contextSize]
+              : contextSize
+            : 21
         }
 
-        console.log('size: ', size)
-        console.log('contextSize: ', contextSize)
-        console.log('iconSize: ', iconSize)
-
         return (
           <FeatherIcon
             color={color ? color : 'currentColor'}
diff --git a/src/components/Icon/IconContext.tsx b/src/components/Icon/IconContext.tsx
new file mode 100644
index 00000000..77d4cc25
--- /dev/null
+++ b/src/components/Icon/IconContext.tsx
@@ -0,0 +1,7 @@
+import { createContext } from 'react'
+
+// Make sure the shape of the default value passed to
+// createContext matches the shape that the consumers expect!
+export const IconContext = createContext({
+  contextSize: '',
+})

From b1e6f1997b6d7391f1e5bae8e6d459e6f452ff5f Mon Sep 17 00:00:00 2001
From: mildtomato <jon.summers.muir@googlemail.com>
Date: Thu, 7 Jan 2021 15:14:03 +0800
Subject: [PATCH 05/11] chore: tidy Icon component code

---
 src/components/Icon/Icon.tsx | 26 +++++++++++++-------------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/components/Icon/Icon.tsx b/src/components/Icon/Icon.tsx
index 8478fa9c..d99d0170 100644
--- a/src/components/Icon/Icon.tsx
+++ b/src/components/Icon/Icon.tsx
@@ -2,10 +2,6 @@ import React from 'react'
 import * as Icons from 'react-feather'
 import { IconContext } from './IconContext'
 
-// interface ContextProps {
-//   contextSize: string
-// }
-
 interface Props {
   className?: string
   size?: 'tiny' | 'small' | 'medium' | 'large' | 'xlarge' | number
@@ -30,25 +26,29 @@ function Icon({ className, size, type, color, strokeWidth, ...props }: Props) {
           xlarge: 24,
         }
 
+        const defaultSize = defaultSizes['large']
         // @ts-ignore
         const FeatherIcon = Icons[type]
 
         // const iconSize = typeof size === 'string' ? defaultSizes[contextSize] : 21
         let iconSize: any = 21
-        if (size) {
-          iconSize = size
-            ? typeof size === 'string'
-              ? defaultSizes[size]
-              : size
-            : 21
-        }
-
+      
+        // use contextSize of parent (via context hook) if one exists
         if (contextSize) {
           iconSize = contextSize
             ? typeof contextSize === 'string'
               ? defaultSizes[contextSize]
               : contextSize
-            : 21
+            : defaultSize
+        }
+
+        // use size prop of this component if one exists
+        if (size) {
+          iconSize = size
+            ? typeof size === 'string'
+              ? defaultSizes[size]
+              : size
+            : defaultSize
         }
 
         return (

From 9cd233e7a75ec4cd5894e9e9084568c09090cfcb Mon Sep 17 00:00:00 2001
From: mildtomato <jon.summers.muir@googlemail.com>
Date: Thu, 7 Jan 2021 15:24:59 +0800
Subject: [PATCH 06/11] chore: migrate <Button> from JS to TS

---
 .../{Button.stories.js => Button.stories.tsx} | 13 +++---
 .../Button/{Button.js => Button.tsx}          | 42 +++++++++----------
 src/components/Button/{index.js => index.tsx} |  0
 3 files changed, 27 insertions(+), 28 deletions(-)
 rename src/components/Button/{Button.stories.js => Button.stories.tsx} (51%)
 rename src/components/Button/{Button.js => Button.tsx} (75%)
 rename src/components/Button/{index.js => index.tsx} (100%)

diff --git a/src/components/Button/Button.stories.js b/src/components/Button/Button.stories.tsx
similarity index 51%
rename from src/components/Button/Button.stories.js
rename to src/components/Button/Button.stories.tsx
index ef482ef5..ef741c65 100644
--- a/src/components/Button/Button.stories.js
+++ b/src/components/Button/Button.stories.tsx
@@ -8,19 +8,18 @@ export default {
   component: Button,
 }
 
-export const Default = (args) => <Button {...args}>Button text</Button>
-export const withStyles = (args) => <Button {...args}>Button text</Button>
-export const withIcon = (args) => <Button {...args}>Button text</Button>
-export const withBlock = (args) => <Button {...args}>Button text</Button>
-export const withOnlyIcon = (args) => <Button {...args}/>
-export const withOnlyLoading = (args) => <Button {...args}/>
+export const Default = (args: any) => <Button {...args}>Button text</Button>
+export const withStyles = (args: any) => <Button {...args}>Button text</Button>
+export const withIcon = (args: any) => <Button {...args}>Button text</Button>
+export const withBlock = (args: any) => <Button {...args}>Button text</Button>
+export const withOnlyIcon = (args: any) => <Button {...args}/>
+export const withOnlyLoading = (args: any) => <Button {...args}/>
 
 const icon = <Icon type={"Package"}/>
 
 withIcon.args = {
   type: 'primary',
   icon: icon,
-  // style: {backgroundColor: 'red'}
 }
 
 withStyles.args = {
diff --git a/src/components/Button/Button.js b/src/components/Button/Button.tsx
similarity index 75%
rename from src/components/Button/Button.js
rename to src/components/Button/Button.tsx
index d6679a0e..ab02554f 100644
--- a/src/components/Button/Button.js
+++ b/src/components/Button/Button.tsx
@@ -1,11 +1,24 @@
 import React from 'react'
-import PropTypes from 'prop-types'
+import PropTypes, { bool } from 'prop-types'
 import './Button.css'
+// @ts-ignore
 import { Transition, Icon } from '../../index'
-import { IconContext } from './../Icon/IconContext'
+import { IconContext } from '../Icon/IconContext'
 
-export const SIZES = ['tiny', 'small', 'medium', 'large', 'xlarge']
-export const VARIANTS = ['primary', 'default', 'secondary', 'outline', 'dashed', 'link', 'text']
+interface Props {
+  block : boolean
+  className : any
+  children: React.ReactNode
+  disabled: boolean
+  onClick?: React.MouseEventHandler<HTMLButtonElement>
+  icon? : React.ReactNode
+  loading?: boolean
+  shadow?: boolean
+  size?: 'tiny' | 'small' | 'medium' | 'large' | 'xlarge'
+  style? : React.CSSProperties
+  type?: 'primary' | 'default' | 'secondary' | 'outline' | 'dashed' | 'link' | 'text'
+  danger: boolean
+}
 
 const Button = ({
   block,
@@ -21,14 +34,14 @@ const Button = ({
   type = 'primary',
   danger,
   ...props
-}) => {
+} : Props) => {
   // default classes
   let classes = []
   let containerClasses = ['sbui-btn-container']
 
-  if (type !== 'ghost' && shadow) {
-    containerClasses.push('sbui-btn--shadow')
-  }
+  // if (type !== 'ghost' && shadow) {
+  //   containerClasses.push('sbui-btn--shadow')
+  // }
 
   if (block) {
     containerClasses.push('sbui-btn--w-full')
@@ -55,7 +68,6 @@ const Button = ({
     <React.Fragment>
       <span className={containerClasses.join(' ')}>
         <button
-          {...props}
           className={`sbui-btn ${classes.join(' ')} ${classes.join(
             ' '
           )} ${className}`}
@@ -92,16 +104,4 @@ const Button = ({
   )
 }
 
-Button.propTypes = {
-  size: PropTypes.oneOf(SIZES),
-  type: PropTypes.oneOf(VARIANTS),
-  block: PropTypes.bool,
-  shadow: PropTypes.bool,
-  className: PropTypes.string,
-  loading: PropTypes.bool,
-  disabled: PropTypes.bool,
-  icon: PropTypes.string,
-  danger: PropTypes.bool
-}
-
 export default Button
diff --git a/src/components/Button/index.js b/src/components/Button/index.tsx
similarity index 100%
rename from src/components/Button/index.js
rename to src/components/Button/index.tsx

From e6fd58f197a76161f0a30c411b00d09cde08cb85 Mon Sep 17 00:00:00 2001
From: mildtomato <jon.summers.muir@googlemail.com>
Date: Thu, 7 Jan 2021 15:33:52 +0800
Subject: [PATCH 07/11] chore: improve `danger` styling of buttons

---
 src/components/Button/Button.css | 46 ++++++++------------------------
 1 file changed, 11 insertions(+), 35 deletions(-)

diff --git a/src/components/Button/Button.css b/src/components/Button/Button.css
index b4c0664d..3eca5d50 100644
--- a/src/components/Button/Button.css
+++ b/src/components/Button/Button.css
@@ -1,11 +1,12 @@
 .sbui-btn-container {
-  @apply inline-flex;
+  @apply inline-flex font-medium;
 }
 
 .sbui-btn {
   @apply relative cursor-pointer inline-flex items-center space-x-2 text-center border border-solid border-transparent transition ease-out duration-200;
-  @apply font-medium rounded;
+  @apply rounded;
   font-family: inherit;
+  font-weight: inherit;
   text-shadow: 0 -1px 0 rgba(0,0,0,.12);
   -webkit-box-shadow: 0 2px 0 rgba(0,0,0,.045);
 }
@@ -86,8 +87,15 @@
 }
 
 .sbui-btn-primary.sbui-btn--danger {
-  @apply bg-red-500 text-white
+  @apply bg-red-500 text-white;
+  @apply hover:bg-red-600 hover:border-red-600;
 }
+.sbui-btn-default.sbui-btn--danger, .sbui-btn-secondary.sbui-btn--danger, .sbui-btn-outline.sbui-btn--danger, .sbui-btn-dashed.sbui-btn--danger, .sbui-btn-link.sbui-btn--danger, .sbui-btn-text.sbui-btn--danger {
+  @apply hover:bg-red-600 hover:text-white hover:border-red-600;
+}
+ /* {
+  @apply hover:bg-red-600 hover:text-white hover:border-red-600;
+} */
 
 /* 
   Animation for icon
@@ -112,35 +120,3 @@
     transform: rotate(360deg);
   }
 }
-
-/* 
-  Puesdo classes
-*/
-
-.btn:focus {
-  @apply outline-none ring;
-}
-
-/* .sbui-btn-primary:hover svg {
-  @apply text-gray-500;
-}
-.sbui-btn-secondary:hover svg {
-  @apply text-gray-100;
-}
-.sbui-btn-default:hover svg {
-  @apply text-gray-300;
-}
-.sbui-btn-outline:hover svg {
-  @apply text-white;
-}
-.sbui-btn-ghost:hover svg {
-  @apply bg-brand-300;
-} */
-
-.sbui-btn--with-icon {
-  /* @apply pl-10; */
-}
-
-/* .sbui-btn-icon-container {
-  @apply inset-y-0 flex items-center pointer-events-none;
-} */

From 72ac0af0b4d2901b4a03e626ec67af8217d2dd08 Mon Sep 17 00:00:00 2001
From: mildtomato <jon.summers.muir@googlemail.com>
Date: Thu, 7 Jan 2021 15:52:00 +0800
Subject: [PATCH 08/11] fix default icon sizes

---
 src/components/Icon/Icon.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Icon/Icon.tsx b/src/components/Icon/Icon.tsx
index d99d0170..12280a45 100644
--- a/src/components/Icon/Icon.tsx
+++ b/src/components/Icon/Icon.tsx
@@ -21,8 +21,8 @@ function Icon({ className, size, type, color, strokeWidth, ...props }: Props) {
         const defaultSizes: StringMap = {
           tiny: 14,
           small: 18,
-          medium: 21,
-          large: 21,
+          medium: 20,
+          large: 20,
           xlarge: 24,
         }
 

From 4a90ea218386d964b4d31b93d78b982c24a7113f Mon Sep 17 00:00:00 2001
From: mildtomato <jon.summers.muir@googlemail.com>
Date: Thu, 7 Jan 2021 16:12:32 +0800
Subject: [PATCH 09/11] remove unneeded css

---
 src/components/Button/Button.css | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/Button/Button.css b/src/components/Button/Button.css
index 3eca5d50..2a7fbba0 100644
--- a/src/components/Button/Button.css
+++ b/src/components/Button/Button.css
@@ -8,7 +8,6 @@
   font-family: inherit;
   font-weight: inherit;
   text-shadow: 0 -1px 0 rgba(0,0,0,.12);
-  -webkit-box-shadow: 0 2px 0 rgba(0,0,0,.045);
 }
 
 .sbui-btn-container--shadow {

From dc2c20321bef5f5953aaf8b3d6e05912a268d9ce Mon Sep 17 00:00:00 2001
From: mildtomato <jon.summers.muir@googlemail.com>
Date: Thu, 7 Jan 2021 16:13:29 +0800
Subject: [PATCH 10/11] chore: add `iconRight` inline prop to <Button>

both icons are hidden with `loading` is true
---
 src/components/Button/Button.stories.tsx |  6 +++
 src/components/Button/Button.tsx         | 63 ++++++++++++------------
 2 files changed, 38 insertions(+), 31 deletions(-)

diff --git a/src/components/Button/Button.stories.tsx b/src/components/Button/Button.stories.tsx
index ef741c65..e4b9dcce 100644
--- a/src/components/Button/Button.stories.tsx
+++ b/src/components/Button/Button.stories.tsx
@@ -11,6 +11,7 @@ export default {
 export const Default = (args: any) => <Button {...args}>Button text</Button>
 export const withStyles = (args: any) => <Button {...args}>Button text</Button>
 export const withIcon = (args: any) => <Button {...args}>Button text</Button>
+export const withIconRight = (args: any) => <Button {...args}>Button text</Button>
 export const withBlock = (args: any) => <Button {...args}>Button text</Button>
 export const withOnlyIcon = (args: any) => <Button {...args}/>
 export const withOnlyLoading = (args: any) => <Button {...args}/>
@@ -22,6 +23,11 @@ withIcon.args = {
   icon: icon,
 }
 
+withIconRight.args = {
+  type: 'primary',
+  iconRight: <Icon type={"ChevronRight"} strokeWidth={2}/>,
+}
+
 withStyles.args = {
   type: 'primary',
   style: {backgroundColor: 'red', color: 'yellow'}
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index ab02554f..6d8760d9 100644
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -6,18 +6,27 @@ import { Transition, Icon } from '../../index'
 import { IconContext } from '../Icon/IconContext'
 
 interface Props {
-  block : boolean
-  className : any
+  block: boolean
+  className: any
   children: React.ReactNode
   disabled: boolean
   onClick?: React.MouseEventHandler<HTMLButtonElement>
-  icon? : React.ReactNode
+  icon?: React.ReactNode
+  iconRight?: React.ReactNode
   loading?: boolean
   shadow?: boolean
   size?: 'tiny' | 'small' | 'medium' | 'large' | 'xlarge'
-  style? : React.CSSProperties
-  type?: 'primary' | 'default' | 'secondary' | 'outline' | 'dashed' | 'link' | 'text'
+  style?: React.CSSProperties
+  type?:
+    | 'primary'
+    | 'default'
+    | 'secondary'
+    | 'outline'
+    | 'dashed'
+    | 'link'
+    | 'text'
   danger: boolean
+  spaceSize: number
 }
 
 const Button = ({
@@ -27,33 +36,29 @@ const Button = ({
   disabled = false,
   onClick,
   icon,
+  iconRight,
   loading = false,
   shadow = true,
   size = 'medium',
   style,
   type = 'primary',
   danger,
-  ...props
-} : Props) => {
-  // default classes
+  spaceSize,
+}: Props) => {
   let classes = []
   let containerClasses = ['sbui-btn-container']
 
-  // if (type !== 'ghost' && shadow) {
-  //   containerClasses.push('sbui-btn--shadow')
-  // }
-
   if (block) {
     containerClasses.push('sbui-btn--w-full')
     classes.push('sbui-btn--w-full')
   }
 
-  if (icon) {
-    classes.push('sbui-btn--with-icon')
+  if (danger) {
+    classes.push('sbui-btn--danger')
   }
 
-  if (danger ) {
-    classes.push('sbui-btn--danger')
+  if (shadow) {
+    classes.push('sbui-btn-container--shadow')
   }
 
   if (size) {
@@ -76,28 +81,24 @@ const Button = ({
           style={style}
           type="button"
         >
-          {showIcon && (
-          <Transition
-            show={showIcon ? true : false}
-            enter="ease-out duration-300"
-            enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-            enterTo="opacity-100 translate-y-0 sm:scale-100"
-            leave="ease-in duration-200"
-            leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-            leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-          >
-            {loading ? (
+          {showIcon &&
+            (loading ? (
               <Icon
                 size={size}
                 className={'sbui-btn--anim--spin'}
                 type={'Loader'}
               />
             ) : icon ? (
-              <IconContext.Provider value={{contextSize: size}}>{icon}</IconContext.Provider>
-            ) : null}
-          </Transition>
-          )}
+              <IconContext.Provider value={{ contextSize: size }}>
+                {icon}
+              </IconContext.Provider>
+            ) : null)}
           {children && <span>{children}</span>}
+          {iconRight && !loading && (
+            <IconContext.Provider value={{ contextSize: size }}>
+              {iconRight}
+            </IconContext.Provider>
+          )}
         </button>
       </span>
     </React.Fragment>

From 6142d3181e0e2c76547e50b053725ad4f444c51f Mon Sep 17 00:00:00 2001
From: mildtomato <jon.summers.muir@googlemail.com>
Date: Thu, 7 Jan 2021 16:14:02 +0800
Subject: [PATCH 11/11] chore: add `size` default to <Space> component

---
 src/components/Space/Space.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/components/Space/Space.tsx b/src/components/Space/Space.tsx
index ea527e2a..0005afe8 100644
--- a/src/components/Space/Space.tsx
+++ b/src/components/Space/Space.tsx
@@ -1,8 +1,7 @@
 import React from 'react'
 import './Space.css'
 
-function Space (props: any) {
-  const { direction, size, className, block, style, minus } = props
+function Space ({direction, size = 2, className, block, style, minus, children}: any) {
 
   const classes = []
   classes.push(direction === 'vertical' ? 'sbui-space-col' : 'sbui-space-row')
@@ -16,7 +15,7 @@ function Space (props: any) {
 
   return (
     <div className={classes.join(' ')} style={style}>
-      {props.children}
+      {children}
     </div>
   )
 }