Merge pull request #129 from GovConnex/feat/banner-addition-for-radar

Feat/banner addition for radar

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@govconnex/ui",
-  "version": "0.0.163",
+  "version": "0.0.164",
   "description": "GovConnex UI - React Component Library",
   "scripts": {
     "build:tokens": "./tokens-build.sh",

src/components/Banner/Banner.tsx

@@ -18,6 +18,7 @@ import {
   faInfoCircle,
 } from "@fortawesome/pro-regular-svg-icons";
 import {useTheme} from "styled-components";
+import {TypographySize} from "../../theming/global-theme.interface";
 
 export interface BannerProps {
   /**
@@ -28,11 +29,17 @@ export interface BannerProps {
    * description of the banner
    */
   description?: string;
+  /**
+   * text size of description
+   */
+  descriptionSize?: keyof TypographySize;
   /**
    * variant of the banner
    */
   variant?: "info" | "warning" | "error" | "success";
 
+  icon?: IconProp;
+
   primaryButton?: {
     label: string;
     onClick: () => void;
@@ -63,7 +70,9 @@ const variantMap = {
 const Banner = (props: BannerProps) => {
   const {
     title,
+    icon,
     description,
+    descriptionSize = "sm",
     variant = "info",
     primaryButton,
     secondaryButton,
@@ -73,15 +82,15 @@ const Banner = (props: BannerProps) => {
   return (
     <StyledBanner variant={variant} data-cy={props["data-cy"]}>
       <Icon
-        icon={variantMap[variant] as IconProp}
+        icon={icon || (variantMap[variant] as IconProp)}
         color={theme.extended.support[`${variant}Dark`]}
       />
       <MainContentContainer>
         <StyledTextWrapper variant={variant}>
           <Typography noMargin variant="label">
             {title}
           </Typography>
-          <Typography noMargin variant="body" size="sm">
+          <Typography noMargin variant="body" size={descriptionSize}>
             {description}
           </Typography>
         </StyledTextWrapper>