Feat #7 - Added space-around and flex-end to styleguide. Adjusted sto…

…ries. Added icon for closing banner

src/components/Banner/Banner.stories.tsx

@@ -1,14 +1,7 @@
+import { ev as NotificationTypes } from '@dassana-io/web-utils'
 import React from 'react'
 import { Banner, BannerProps } from '.'
 import { Meta, Story } from '@storybook/react'
-import { createUseStyles } from 'react-jss'
-import { ev as NotificationTypes } from '@dassana-io/web-utils'
-
-const useStyles = createUseStyles({
-	test: {
-		backgroundColor: 'red'
-	}
-})
 
 export default {
 	argTypes: {
@@ -21,45 +14,43 @@ export default {
 
 const Template: Story<BannerProps> = args => <Banner {...args} />
 
-export const Test = Template.bind({})
-Test.args = {
-	children: 'this is a long ass message',
-	title: 'hello',
-	type: NotificationTypes.info
-}
-
 export const Error = Template.bind({})
 Error.args = {
-	children: 'This is an alert for information',
-	title: 'Information',
+	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.',
+	title: 'Error',
 	type: NotificationTypes.error
 }
 
 export const Info = Template.bind({})
 Info.args = {
-	children: 'This is an alert for information',
-	title: 'Information',
+	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.',
+	title: 'Info',
 	type: NotificationTypes.info
 }
 
 export const Success = Template.bind({})
 Success.args = {
-	children: 'This is an alert for information',
-	title: 'Information',
+	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.',
+	title: 'Success',
 	type: NotificationTypes.success
 }
 
 export const Warning = Template.bind({})
 Warning.args = {
-	children: 'This is an alert for information',
-	title: 'Information',
+	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.',
+	title: 'Warning',
 	type: NotificationTypes.warning
 }
 
 export const NoIcon = Template.bind({})
 NoIcon.args = {
-	children: 'This is an alert for information',
+	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: 'Information',
+	title: 'No Icon',
 	type: NotificationTypes.success
 }

src/components/Banner/index.tsx

@@ -1,5 +1,6 @@
 import cn from 'classnames'
 import { createUseStyles } from 'react-jss'
+import { faTimes } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { mappedTypesToIcons } from 'components/NotificationV2/utils'
 import { ev as NotificationTypes } from '@dassana-io/web-utils'
@@ -43,7 +44,9 @@ export const Banner: FC<BannerProps> = ({
 					)}
 					<p>{title}</p>
 				</div>
-				<div onClick={() => toggleRender()}>close</div>
+				<div onClick={() => toggleRender()}>
+					<FontAwesomeIcon icon={faTimes} />
+				</div>
 			</div>
 			<div>{children}</div>
 		</div>

src/components/assets/styles/styleguide.ts

@@ -38,6 +38,14 @@ export const styleguide = {
 		display: 'flex',
 		justifyContent: 'flex-end'
 	},
+	flexJustifyStart: {
+		display: 'flex',
+		justifyContent: 'flex-start'
+	},
+	flexSpaceAround: {
+		display: 'flex',
+		justifyContent: 'space-around'
+	},
 	flexSpaceBetween: {
 		display: 'flex',
 		justifyContent: 'space-between'