From 6dc197f07b3f50e334d3bd613f1e1a8668cc3744 Mon Sep 17 00:00:00 2001
From: mishevong <michelle@dassana.io>
Date: Wed, 24 Mar 2021 16:30:23 -0700
Subject: [PATCH] Fixes #266 - Remove close icon from assets, changed close
 button to be IconButton from WC, cleaned up stories

---
 src/components/Banner/Banner.stories.tsx | 19 ++-----------------
 src/components/Banner/index.tsx          | 12 +++++-------
 src/components/assets/icons/close.svg    |  3 ---
 3 files changed, 7 insertions(+), 27 deletions(-)
 delete mode 100644 src/components/assets/icons/close.svg

diff --git a/src/components/Banner/Banner.stories.tsx b/src/components/Banner/Banner.stories.tsx
index 53209652..6c5aea9d 100644
--- a/src/components/Banner/Banner.stories.tsx
+++ b/src/components/Banner/Banner.stories.tsx
@@ -18,8 +18,6 @@ const Template: Story<BannerProps> = args => <Banner {...args} />
 
 export const Error = Template.bind({})
 Error.args = {
-	children:
-		'Once we receive an alert we scan it against policy risk rules. The rules are evaluated in order from top to bottom. The first rule that matches determines the risk of the alert. Updating a rule will not impact the past alerts. However you can use past alerts as a reference to edit rules such that future alerts get your desired risk classification.',
 	showIcon: true,
 	title: 'Error',
 	type: error
@@ -27,8 +25,6 @@ Error.args = {
 
 export const Info = Template.bind({})
 Info.args = {
-	children:
-		'Once we receive an alert we scan it against policy risk rules. The rules are evaluated in order from top to bottom. The first rule that matches determines the risk of the alert. Updating a rule will not impact the past alerts. However you can use past alerts as a reference to edit rules such that future alerts get your desired risk classification.',
 	showIcon: true,
 	title: 'Info',
 	type: info
@@ -36,8 +32,6 @@ Info.args = {
 
 export const Success = Template.bind({})
 Success.args = {
-	children:
-		'Once we receive an alert we scan it against policy risk rules. The rules are evaluated in order from top to bottom. The first rule that matches determines the risk of the alert. Updating a rule will not impact the past alerts. However you can use past alerts as a reference to edit rules such that future alerts get your desired risk classification.',
 	showIcon: true,
 	title: 'Success',
 	type: success
@@ -45,25 +39,16 @@ Success.args = {
 
 export const Warning = Template.bind({})
 Warning.args = {
-	children:
-		'Once we receive an alert we scan it against policy risk rules. The rules are evaluated in order from top to bottom. The first rule that matches determines the risk of the alert. Updating a rule will not impact the past alerts. However you can use past alerts as a reference to edit rules such that future alerts get your desired risk classification.',
 	showIcon: true,
 	title: 'Warning',
 	type: warning
 }
 
-export const NoIcon = Template.bind({})
-NoIcon.args = {
+export const NoIconWithChildren = Template.bind({})
+NoIconWithChildren.args = {
 	children:
 		'Once we receive an alert we scan it against policy risk rules. The rules are evaluated in order from top to bottom. The first rule that matches determines the risk of the alert. Updating a rule will not impact the past alerts. However you can use past alerts as a reference to edit rules such that future alerts get your desired risk classification.',
 	showIcon: false,
 	title: 'Policy Risk Rules',
 	type: success
 }
-
-export const NoIconAndChildren = Template.bind({})
-NoIconAndChildren.args = {
-	showIcon: false,
-	title: 'Policy Risk Rules',
-	type: success
-}
diff --git a/src/components/Banner/index.tsx b/src/components/Banner/index.tsx
index 33270eef..c7d6aa16 100644
--- a/src/components/Banner/index.tsx
+++ b/src/components/Banner/index.tsx
@@ -1,7 +1,7 @@
-import Close from '../assets/icons/close.svg'
 import cn from 'classnames'
 import { createUseStyles } from 'react-jss'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { IconButton } from 'components/IconButton'
 import { mappedTypesToIcons } from 'components/NotificationV2/utils'
 import { ev as NotificationTypes } from '@dassana-io/web-utils'
 import { styleguide } from 'components/assets/styles'
@@ -76,12 +76,10 @@ export const Banner: FC<BannerProps> = ({
 					)}
 					<div className={componentClasses.title}>{title}</div>
 				</div>
-				<div
-					className={componentClasses.closeBtn}
-					onClick={() => toggleRender()}
-				>
-					<img alt='Close banner' src={Close} />
-				</div>
+				<IconButton
+					classes={[componentClasses.closeBtn]}
+					onClick={toggleRender}
+				/>
 			</div>
 			<div>{children}</div>
 		</div>
diff --git a/src/components/assets/icons/close.svg b/src/components/assets/icons/close.svg
deleted file mode 100644
index 5d383e16..00000000
--- a/src/components/assets/icons/close.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="10" height="12" viewBox="0 0 10 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M5.80926 6L9.91082 1.11094C9.97957 1.02969 9.92176 0.90625 9.81551 0.90625H8.56863C8.49519 0.90625 8.42488 0.939062 8.37644 0.995312L4.99363 5.02813L1.61082 0.995312C1.56394 0.939062 1.49363 0.90625 1.41863 0.90625H0.171756C0.0655061 0.90625 0.00769351 1.02969 0.0764435 1.11094L4.17801 6L0.0764435 10.8891C0.0610429 10.9072 0.0511628 10.9293 0.0479759 10.9529C0.0447889 10.9764 0.048429 11.0004 0.0584644 11.022C0.0684997 11.0435 0.0845088 11.0617 0.104591 11.0745C0.124672 11.0872 0.147983 11.0939 0.171756 11.0938H1.41863C1.49207 11.0938 1.56238 11.0609 1.61082 11.0047L4.99363 6.97188L8.37644 11.0047C8.42332 11.0609 8.49363 11.0938 8.56863 11.0938H9.81551C9.92176 11.0938 9.97957 10.9703 9.91082 10.8891L5.80926 6Z" fill="#696A72"/>
-</svg>