[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

@@ -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' />

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}