feat(USA Header Dark Variant): Add UsaBanner dark variant

* add UsaBanner dark variant

* arrow should be blue

* fix mobile X background-color

* fix action text

* undo Radio.scss modification

* add dark variant for spanish version

* update comment based on convo w/ Michael

Signed-off-by: James Dinh <jdinh@collabralink.com>
Co-authored-by: James Dinh <jdinh@collabralink.com>

src/assets/theme/_uswds-theme-custom-styles.scss

@@ -13,6 +13,7 @@
 @forward "../../components/SiteAlert/SiteAlert.scss";
 @forward "../../components/Tabs/Tab.scss";
 @forward "../../components/Tabs/Tabs.scss";
+@forward "../../components/UsaBanner/UsaBanner.scss";
 
 @use "../../assets/theme/macbis-colors" as c;
 

src/components/UsaBanner/UsaBanner.scss

@@ -0,0 +1,23 @@
+@use "../../assets/theme/macbis-colors" as c;
+
+// Currently, these colors are only used in the UsaBanner
+$black: #1b1b1b;
+$gray: #adadad;
+$white: #fff;
+
+.usa-banner {
+  &.usa-banner--dark {
+    background-color: $black;
+    .usa-banner__button[aria-expanded="true"]::before {
+      background-color: $black;
+    }
+    .usa-banner__header-text,
+    .usa-media-block__body {
+      color: $white;
+    }
+    .usa-banner__button-text,
+    .usa-banner__header-action {
+      color: $gray;
+    }
+  }
+}

src/components/UsaBanner/UsaBanner.stories.tsx

@@ -19,6 +19,10 @@ export default {
       description:
         "Determines which version of the banner to display (en === english, es === español).",
     },
+    variant: {
+      description:
+        "Indicates which color variant of the banner to display. Defaults to standard light-gray background.",
+    },
   },
 } as ComponentMeta<typeof UsaBanner>;
 
@@ -29,6 +33,9 @@ const Template: ComponentStory<typeof UsaBanner> = ({ ...rest }) => (
 export const Default = Template.bind({});
 Default.args = {};
 
+export const DarkVariant = Template.bind({});
+DarkVariant.args = { variant: "dark" };
+
 export const EnglishBanner = Template.bind({});
 EnglishBanner.args = {
   locale: "en",

src/components/UsaBanner/UsaBanner.test.tsx

@@ -38,6 +38,18 @@ describe("Tests for the Banner component", () => {
     const section = container.firstChild as HTMLElement;
     expect(section.classList.contains("test-class")).toBe(true);
   });
+
+  it("light/default variant", () => {
+    const { container } = render(<UsaBanner />);
+    const section = container.firstChild as HTMLElement;
+    expect(section.className).toBe("usa-banner");
+  });
+
+  it("dark variant", () => {
+    const { container } = render(<UsaBanner variant="dark" />);
+    const section = container.firstChild as HTMLElement;
+    expect(section.className).toBe("usa-banner usa-banner--dark");
+  });
 });
 
 describe("Snapshot tests for UsaBanner component", () => {

src/components/UsaBanner/UsaBanner.tsx

@@ -8,28 +8,34 @@ interface Props {
   className?: string;
   id?: string;
   locale?: "en" | "es";
+  variant?: "default" | "dark";
 }
 
 /**
  * USA Banner Component
  * @param {string}  className     Additional classes to be added to the root `section` element.
  * @param {string}  id            A unique ID to be applied to the banner content at the root `section` element.
  * @param {string}  locale        Determines which version of the banner to display (en === english, es === español).
+ * @param {string}  variant       Indicates which color variant of the banner to display.
  */
 
 export const UsaBanner: React.FC<Props> = ({
   className,
+  variant,
   id,
   locale = "en",
   ...rest
 }) => {
   const [hidden, setHidden] = useState(true);
+  const classNames = `usa-banner${
+    variant === "dark" ? ` usa-banner--dark` : ""
+  }${className ? ` ${className}` : ""}`;
   return (
     <>
       {locale === "en" && (
         <section
           aria-label="Official government website"
-          className={`usa-banner${className ? ` ${className}` : ""}`}
+          className={classNames}
           id={id}
           {...rest}
         >
@@ -138,7 +144,7 @@ export const UsaBanner: React.FC<Props> = ({
       {locale === "es" && (
         <section
           aria-label="Un sitio oficial del Gobierno de Estados Unidos"
-          className={`usa-banner${className ? ` ${className}` : ""}`}
+          className={classNames}
           id={id}
           {...rest}
         >