Fixes #266 - Remove close icon from assets, changed close button to b…

…e IconButton from WC, cleaned up stories

src/components/Banner/Banner.stories.tsx

@@ -18,52 +18,37 @@ 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
 }
 
 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
 }
 
 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
 }
 
 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
-}

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>