From bc7dd9c9dee2e6aef90bec2779999d2e65844c03 Mon Sep 17 00:00:00 2001
From: mishevong <michelle@dassana.io>
Date: Mon, 22 Mar 2021 17:49:55 -0700
Subject: [PATCH] Feat #7 - Setup structure for Banner, added temporary stories

---
 src/components/Banner/Banner.stories.tsx | 65 ++++++++++++++++++++++++
 src/components/Banner/index.tsx          | 51 +++++++++++++++++++
 2 files changed, 116 insertions(+)
 create mode 100644 src/components/Banner/Banner.stories.tsx
 create mode 100644 src/components/Banner/index.tsx

diff --git a/src/components/Banner/Banner.stories.tsx b/src/components/Banner/Banner.stories.tsx
new file mode 100644
index 00000000..3b04a0da
--- /dev/null
+++ b/src/components/Banner/Banner.stories.tsx
@@ -0,0 +1,65 @@
+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: {
+		children: { control: 'text' },
+		classes: { control: 'array' }
+	},
+	component: Banner,
+	title: 'Banner'
+} as Meta
+
+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',
+	type: NotificationTypes.error
+}
+
+export const Info = Template.bind({})
+Info.args = {
+	children: 'This is an alert for information',
+	title: 'Information',
+	type: NotificationTypes.info
+}
+
+export const Success = Template.bind({})
+Success.args = {
+	children: 'This is an alert for information',
+	title: 'Information',
+	type: NotificationTypes.success
+}
+
+export const Warning = Template.bind({})
+Warning.args = {
+	children: 'This is an alert for information',
+	title: 'Information',
+	type: NotificationTypes.warning
+}
+
+export const NoIcon = Template.bind({})
+NoIcon.args = {
+	children: 'This is an alert for information',
+	showIcon: false,
+	title: 'Information',
+	type: NotificationTypes.success
+}
diff --git a/src/components/Banner/index.tsx b/src/components/Banner/index.tsx
new file mode 100644
index 00000000..bbbe314f
--- /dev/null
+++ b/src/components/Banner/index.tsx
@@ -0,0 +1,51 @@
+import cn from 'classnames'
+import { createUseStyles } from 'react-jss'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { mappedTypesToIcons } from 'components/NotificationV2/utils'
+import { ev as NotificationTypes } from '@dassana-io/web-utils'
+import React, { FC, ReactNode, useState } from 'react'
+
+const useStyles = createUseStyles({
+	container: {
+		border: '1px solid black'
+	}
+})
+
+export interface BannerProps {
+	children?: ReactNode
+	classes?: string[]
+	showIcon: boolean
+	title: ReactNode
+	type: NotificationTypes
+}
+
+export const Banner: FC<BannerProps> = ({
+	children,
+	classes = [],
+	showIcon = true,
+	title,
+	type
+}: BannerProps) => {
+	const [renderBanner, setRenderBanner] = useState<boolean>(true)
+	const componentClasses = useStyles()
+
+	const toggleRender = () => setRenderBanner(!renderBanner)
+
+	return (
+		<div
+			className={cn(componentClasses.container, classes)}
+			style={{ display: !renderBanner ? 'none' : '' }}
+		>
+			<div>
+				<div>
+					{showIcon && (
+						<FontAwesomeIcon icon={mappedTypesToIcons[type].icon} />
+					)}
+					<p>{title}</p>
+				</div>
+				<div onClick={() => toggleRender()}>close</div>
+			</div>
+			<div>{children}</div>
+		</div>
+	)
+}