Component: Banner Alert

src/components/Alerts/Alerts.stories.tsx

@@ -9,8 +9,10 @@ import {
   number,
 } from "@storybook/addon-knobs"
 import Alert from "./Alert"
+import BannerAlert from "./BannerAlert"
 import { AlertProps, placementType } from "./types"
 import { Button } from ".."
+import Icon from "../Icon"
 import Alerts from "./"
 
 const Readme = require("./Alerts.README.md")
@@ -550,6 +552,16 @@ stories
       </>
     )
   })
+  .add("BannerAlert", () => {
+    return (
+      <BannerAlert type="danger">
+        <Icon type="oWarning" size="18px" fill="white" />
+        <p style={{ marginLeft: 7 }}>
+          You don't seem to be connected to Internet.
+        </p>
+      </BannerAlert>
+    )
+  })
 
 const MyStyledComponent = styled.div`
   border: 1px solid red;

src/components/Alerts/BannerAlert.tsx

@@ -0,0 +1,24 @@
+import React from "react"
+import ReactDOM from "react-dom"
+import { BannerAlertProps } from "./types"
+import { BannerAlertWrapper } from "./StyledAlert"
+
+const BannerAlert = (props: BannerAlertProps) => {
+  const alertMountNode = document.createElement("div")
+  alertMountNode.classList.add("knitui-alerts-root")
+
+  document.body.appendChild(alertMountNode)
+
+  return (
+    <div>
+      {ReactDOM.createPortal(
+        <BannerAlertWrapper customProps={{ type: props.type || "warning" }}>
+          {props.children}
+        </BannerAlertWrapper>,
+        alertMountNode
+      )}
+    </div>
+  )
+}
+
+export default BannerAlert

src/components/Alerts/StyledAlert.tsx

@@ -213,3 +213,18 @@ export const AlertActionsWrapper = styled.span<IStyledAlert>`
     margin-right: 0.7rem;
   }
 `
+
+export const BannerAlertWrapper = styled.div<IStyledAlert>`
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 4.8rem;
+  padding: 0 2.8rem;
+  display: flex;
+  align-items: center;
+  color: white;
+  font-size: 1.4rem;
+  line-height: 2rem;
+  background-color: ${props => getBackgroundColor(props)};
+`

src/components/Alerts/index.tsx

@@ -1,23 +1,26 @@
-import { FC, Component, ComponentClass } from "react"
+import { FC, ComponentClass } from "react"
 import Alert from "./Alert"
+import BannerAlert from "./BannerAlert"
 import AlertsProvider from "./AlertsProvider"
 import useAlerts from "./useAlerts"
 import withAlerts from "./withAlerts"
 
-import { AlertProps, useAlertType } from "./types"
+import { AlertProps, useAlertType, BannerAlertProps } from "./types"
 
 interface IAlertWrapper {
   Alert: FC<AlertProps>
+  BannerAlert: FC<BannerAlertProps>
   AlertsProvider: ComponentClass
   useAlerts: useAlertType
   withAlerts: (component: any) => any
 }
 
 const AlertWrapper: IAlertWrapper = {
   Alert,
+  BannerAlert,
   AlertsProvider,
   useAlerts,
-  withAlerts
+  withAlerts,
 }
 
 export default AlertWrapper

src/components/Alerts/types.ts

@@ -81,4 +81,9 @@ export type AlertProviderType = Component<{}, AlertsProviderState>
 export type useAlertType = () => {
   addAlert: addAlertType
   removeAlert: removeAlertType
-}
+}
+
+export interface BannerAlertProps {
+  children: ReactNode
+  type: string
+}