Feat #7 - Setup structure for Banner, added temporary stories

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
+}

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>
+	)
+}