Merge pull request #77 from NASA-PDS/features/create-banner-component

Create banner component

src/components/Banner/Banner.scss

@@ -0,0 +1,62 @@
+.pds-wds-react-banner {
+
+  color: var(--pds-primary-white);
+  padding: 10px 0px;
+  text-align: left;
+
+  span.title {
+    white-space: nowrap;
+  }
+
+  a {
+
+    display: flex;
+    direction: column;
+    gap: 4px;
+    align-items: center;
+    color: var(--pds-primary-white);
+    border-radius: 8px;
+    white-space: nowrap;
+
+    &:hover {
+      text-decoration: underline;
+      text-decoration-style: dashed;
+      text-underline-offset: .3em;
+    }
+
+    span.icon {
+
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      background-color: var(--pds-primary-white);
+      border-radius: 8px;
+      height: 16px;
+      width: 16px;
+
+      &.info {
+        color: var(--pds-secondary-blue-s1);
+      }
+
+      &.alert {
+        color: var(--pds-secondary-red-s1);
+      }
+
+      & svg {
+        height: 10px;
+        width: 10px;
+      }
+
+    }
+
+  }
+
+  &.info {
+    background-color: var(--pds-secondary-blue-s1);
+  }
+
+  &.alert {
+    background-color: var(--pds-secondary-red-s1);
+  }
+
+}

src/components/Banner/Banner.tsx

@@ -0,0 +1,60 @@
+import React from "react";
+import { 
+  Grid as MuiGrid,
+  Box as MuiBox,
+  Container as MuiContainer,
+  Stack as MuiStack
+} from "@mui/material";
+import {
+  IconArrowDiagonal,
+  IconArrowRight,
+} from "../Icons";
+import { Typography } from "../Typography";
+import { Link } from "react-router-dom";
+
+type Link = {
+  href:string;
+  title:string;
+  type:"internal" | "external";
+}
+
+export type BannerProps = {
+  link?:Link;
+  message:string;
+  title:string;
+  variant?:"info" | "alert"
+}
+
+export const Banner = (
+  {
+    link,
+    message,
+    title,
+    variant = "info"
+  }:BannerProps
+) => {
+
+  return <React.Fragment>
+    <MuiBox className={'pds-wds-react-banner ' + variant}>
+      <MuiContainer maxWidth={"xl"}>
+        <MuiGrid container>
+          <MuiGrid xs={12} lg={8}>
+            <MuiStack direction={{xs: "column", sm: "row"}} gap={{xs: "8px", sm:"32px"}} alignItems={{xs: "flex-start", sm:"center"}} justifyContent={"flex-start"}>
+              <MuiStack direction={{xs: "column", sm: "row"}} gap={"8px"} alignItems={{xs: "flex-start", sm: "center"}} justifyContent={"flex-start"}>
+                <Typography variant="h5" weight="semibold" component="span" className="title">{title}</Typography>
+                <Typography variant="h6" weight="regular" component="span">{message}</Typography>
+              </MuiStack>
+              { link && 
+                  <Link to={link.href}>
+                    <Typography variant="h6" weight="semibold" component={"span"}>{link.title}</Typography>
+                    <span className={"icon " + variant}>{link.type ? <IconArrowRight /> : <IconArrowDiagonal />}</span>
+                  </Link>
+              }
+            </MuiStack>
+          </MuiGrid>
+        </MuiGrid>
+      </MuiContainer>
+    </MuiBox>
+  </React.Fragment>
+
+}

src/components/Banner/index.ts

@@ -0,0 +1 @@
+export * from "./Banner";

src/index.ts

@@ -1,4 +1,5 @@
 import "./styles/styles.scss";
+export * from "./components/Banner";
 export * from "./components/Breadcrumbs";
 export * from "./components/Button";
 export * from "./components/Card";

src/styles/styles.scss

@@ -8,6 +8,7 @@
 @import "_animations";
 
 // Components
+@import "../components/Banner/Banner.scss";
 @import "../components/Button/Button.scss";
 @import "../components/Chip/Chip.scss";
 @import "../components/HelloWorld/HelloWorld.scss";