From d42a349c8676552c92468dcc1e95f9628a0aca37 Mon Sep 17 00:00:00 2001
From: Meis <meissadia@gmail.com>
Date: Wed, 9 Aug 2023 08:31:45 -0600
Subject: [PATCH] [Banner] Propagate attributes (#114)

* feat: [Banner] Allow additional classnames; propagate other attributes to wrapper element

* chore: [Banner] Update test code
---
 src/components/Banner/Banner.test.tsx | 12 ++++++++++++
 src/components/Banner/Banner.tsx      | 14 +++++++++++---
 2 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/src/components/Banner/Banner.test.tsx b/src/components/Banner/Banner.test.tsx
index 579f0142..44ac6d5f 100644
--- a/src/components/Banner/Banner.test.tsx
+++ b/src/components/Banner/Banner.test.tsx
@@ -4,6 +4,18 @@ import { Banner } from './Banner';
 import { LanguageLink } from './BannerLanguageLink';
 
 describe('<Banner />', () => {
+  it('Propagates additional HTML properties to main component element', () => {
+    const testClass = 'this-is-a-test-classname';
+    const testTitle = 'test-title';
+
+    const testId = 'eyebrow';
+
+    render(<Banner className={testClass} title={testTitle} />);
+    expect(screen.getByTestId(testId)).toBeInTheDocument();
+    expect(screen.getByTestId(testId)).toHaveClass(testClass);
+    expect(screen.getByTestId(testId)).toHaveAttribute('title', testTitle);
+  });
+
   it('renders tagline correctly', () => {
     render(
       <Banner tagline='An official website of the United States government' />
diff --git a/src/components/Banner/Banner.tsx b/src/components/Banner/Banner.tsx
index 3c8cb77c..e2f70b3b 100644
--- a/src/components/Banner/Banner.tsx
+++ b/src/components/Banner/Banner.tsx
@@ -3,7 +3,7 @@ import type { JSXElement } from '../../types/jsxElement';
 import { Tagline } from '../Tagline/Tagline';
 import './Banner.less';
 
-interface BannerProperties {
+interface BannerProperties extends React.HTMLProps<HTMLDivElement> {
   isHorizontal?: boolean;
   links?: JSX.Element[];
   phoneNumber?: string;
@@ -37,7 +37,9 @@ export const Banner = ({
   isHorizontal = true,
   tagline = 'This is a tagline',
   phoneNumber,
-  links = []
+  links = [],
+  className,
+  ...properties
 }: BannerProperties): JSX.Element => {
   const eyebrowClasses = ['m-global-eyebrow'];
   const wrapperClasses = ['wrapper'];
@@ -53,8 +55,14 @@ export const Banner = ({
     eyebrowClasses.push('m-global-eyebrow__list');
   }
 
+  if (className) eyebrowClasses.push(className);
+
   return (
-    <div className={classnames(eyebrowClasses)} data-testid='eyebrow'>
+    <div
+      className={classnames(eyebrowClasses)}
+      data-testid='eyebrow'
+      {...properties}
+    >
       <div className={classnames(wrapperClasses)}>
         {taglineContent}