From e8876d3b90572d1696b33cb77f559938511656a6 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Fri, 4 Feb 2022 18:22:30 -0800
Subject: [PATCH] Slight update adding Button type

Previous type prop renamed to icon
---
 components/Button/index.scss | 21 ++++++++++++++++++++-
 components/Button/index.tsx  | 33 ++++++++++++++++++++++++---------
 public/icons/Cross.svg       |  3 +++
 3 files changed, 47 insertions(+), 10 deletions(-)
 create mode 100644 public/icons/Cross.svg

diff --git a/components/Button/index.scss b/components/Button/index.scss
index 818625be..6bd0fdde 100644
--- a/components/Button/index.scss
+++ b/components/Button/index.scss
@@ -16,7 +16,21 @@
         color: $grey-00;
 
         .icon svg {
-            fill: $grey-50;
+            fill: $grey-00;
+        }
+
+        .icon.stroke svg {
+            fill: none;
+            stroke: $grey-00;
+        }
+    }
+
+    &.destructive:hover {
+        background: $error;
+        color: white;
+
+        .icon svg {
+            fill: white;
         }
     }
 
@@ -28,6 +42,11 @@
             height: 12px;
             width: 12px;
         }
+
+        &.stroke svg {
+            fill: none;
+            stroke: $grey-50;
+        }
     }
 
     &.btn-blue {
diff --git a/components/Button/index.tsx b/components/Button/index.tsx
index b24b1550..d355730f 100644
--- a/components/Button/index.tsx
+++ b/components/Button/index.tsx
@@ -1,15 +1,22 @@
 import React from 'react'
 import classNames from 'classnames'
 
+import Link from 'next/link'
+
 import AddIcon from '~public/icons/Add.svg'
+import CrossIcon from '~public/icons/Cross.svg'
+import EditIcon from '~public/icons/Edit.svg'
+import LinkIcon from '~public/icons/Link.svg'
 import MenuIcon from '~public/icons/Menu.svg'
 
 import './index.scss'
 
+import { ButtonType } from '~utils/enums'
+
 interface Props {
-    color: string
     disabled: boolean
-    type: string | null
+    icon: string | null
+    type: ButtonType
     click: any
 }
 
@@ -19,9 +26,9 @@ interface State {
 
 class Button extends React.Component<Props, State> {
     static defaultProps: Props = {
-        color: 'grey',
         disabled: false,
-        type: null,
+        icon: null,
+        type: ButtonType.Base,
         click: () => {}
     }
 
@@ -34,17 +41,25 @@ class Button extends React.Component<Props, State> {
 
     render() {
         let icon
-        if (this.props.type === 'new') {
+        if (this.props.icon === 'new') {
             icon = <span className='icon'>
                 <AddIcon />
             </span>
-        } else if (this.props.type === 'menu') {
+        } else if (this.props.icon === 'menu') {
             icon = <span className='icon'>
                 <MenuIcon />
             </span>
-        } else if (this.props.type === 'link') {
+        } else if (this.props.icon === 'link') {
+            icon = <span className='icon stroke'>
+                <LinkIcon />
+            </span>
+        } else if (this.props.icon === 'cross') {
             icon = <span className='icon'>
-                <img alt="" src="/icons/Link.svg" />
+                <CrossIcon />
+            </span>
+        } else if (this.props.icon === 'edit') {
+            icon = <span className='icon'>
+                <EditIcon />
             </span>
         }
 
@@ -52,7 +67,7 @@ class Button extends React.Component<Props, State> {
             Button: true,
             'btn-pressed': this.state.isPressed,
             'btn-disabled': this.props.disabled,
-            [`btn-${this.props.color}`]: true
+            'destructive': this.props.type == ButtonType.Destructive
         })
 
         return <button className={classes} disabled={this.props.disabled} onClick={this.props.click}>
diff --git a/public/icons/Cross.svg b/public/icons/Cross.svg
new file mode 100644
index 00000000..0b1bbd9f
--- /dev/null
+++ b/public/icons/Cross.svg
@@ -0,0 +1,3 @@
+<svg viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.9425 11.8186C11.1844 12.0605 11.5766 12.0605 11.8186 11.8186C12.0605 11.5766 12.0605 11.1844 11.8186 10.9425L7.8761 7L11.8186 3.05755C12.0605 2.81562 12.0605 2.42338 11.8186 2.18145C11.5766 1.93952 11.1844 1.93952 10.9425 2.18145L7 6.1239L3.05755 2.18145C2.81562 1.93952 2.42338 1.93952 2.18145 2.18145C1.93952 2.42338 1.93952 2.81562 2.18145 3.05755L6.1239 7L2.18145 10.9425C1.93952 11.1844 1.93952 11.5766 2.18145 11.8186C2.42338 12.0605 2.81562 12.0605 3.05755 11.8186L7 7.8761L10.9425 11.8186Z" />
+</svg>