From 259b0cc9474777b30f5ad9984cee6ca363dfdfa2 Mon Sep 17 00:00:00 2001
From: Manuel Salazar <jesus.salazar@bairesde.com>
Date: Tue, 27 Aug 2024 08:41:13 -0700
Subject: [PATCH 1/3] feat(language switcher) adds an optional text justified
 to the right

---
 .../lib/components/Header/Header.stories.tsx  |  8 ++++++
 .../src/lib/components/Header/index.tsx       | 25 +++++++++++++++++++
 .../lib/components/Header/styles.module.scss  | 14 ++++++++++-
 3 files changed, 46 insertions(+), 1 deletion(-)

diff --git a/libs/react-components/src/lib/components/Header/Header.stories.tsx b/libs/react-components/src/lib/components/Header/Header.stories.tsx
index a1e156f..8cb7887 100644
--- a/libs/react-components/src/lib/components/Header/Header.stories.tsx
+++ b/libs/react-components/src/lib/components/Header/Header.stories.tsx
@@ -93,6 +93,14 @@ const meta = {
         type: 'button',
       },
     ],
+    announcementContent: {
+      icon: <Icon className="fa-regular fa-bell" />,
+      text: 'Get started with Teradata today.',
+      link: {
+        url: 'https://www.teradata.com/getting-started/demos/clearscape-analytics',
+        label: 'Start free demo',
+      },
+    },
   },
 } satisfies Meta<typeof Header>;
 
diff --git a/libs/react-components/src/lib/components/Header/index.tsx b/libs/react-components/src/lib/components/Header/index.tsx
index 0bc7954..a4e48c0 100644
--- a/libs/react-components/src/lib/components/Header/index.tsx
+++ b/libs/react-components/src/lib/components/Header/index.tsx
@@ -54,6 +54,14 @@ interface HeaderProps {
    * Secondary menu content for mobile view
    */
   secondaryMenu?: { menuElement: JSX.Element; title: string };
+  /**
+   * Announcement content to be displayed in the header
+   */
+  announcementContent?: {
+    icon: JSX.Element;
+    text: string;
+    link?: { url: string; label: string };
+  };
 }
 
 const Header: React.FC<HeaderProps> = ({
@@ -65,6 +73,7 @@ const Header: React.FC<HeaderProps> = ({
   onLanguageChange,
   selectedLanguage,
   secondaryMenu,
+  announcementContent,
 }) => {
   const [activeNavItem, setActiveNavItem] = useState<number | null>(
     navItems.findIndex((item) => item.active)
@@ -144,6 +153,22 @@ const Header: React.FC<HeaderProps> = ({
         {/* Header utility bar with the language switcher begins */}
         <section className={styles.headerUtility}>
           <div className={styles.containerWide}>
+            {announcementContent && (
+              <div className={styles.announcement}>
+                {announcementContent.icon && announcementContent.icon}
+                <span className={styles.text}>{announcementContent.text}</span>
+                {announcementContent.link && (
+                  <a
+                    href={announcementContent.link.url}
+                    className={styles.link}
+                    target="_blank"
+                    rel="noreferrer"
+                  >
+                    {announcementContent.link.label}
+                  </a>
+                )}
+              </div>
+            )}
             <ul className={styles.headerUtilityNav}>
               <li>
                 <a href="https://www.teradata.com/" target="_self">
diff --git a/libs/react-components/src/lib/components/Header/styles.module.scss b/libs/react-components/src/lib/components/Header/styles.module.scss
index 654d311..f4ab536 100644
--- a/libs/react-components/src/lib/components/Header/styles.module.scss
+++ b/libs/react-components/src/lib/components/Header/styles.module.scss
@@ -35,7 +35,7 @@ body {
 
 .headerUtility .containerWide {
   display: flex;
-  justify-content: flex-end;
+  justify-content: space-between;
   box-sizing: border-box;
   align-items: center;
 }
@@ -67,6 +67,18 @@ body {
   text-decoration: none;
 }
 
+.headerUtility .announcement i {
+  margin-right: 8px;
+}
+
+.headerUtility .announcement {
+  font-size: 16px !important;
+}
+
+.headerUtility .announcement a {
+  margin-left: 8px;
+}
+
 .headerNavWrapper {
   position: sticky;
   top: 0;

From f60810694ce72dca67b9c3d33865d1cae8a66ff5 Mon Sep 17 00:00:00 2001
From: Manuel Salazar <jesus.salazar@bairesde.com>
Date: Tue, 27 Aug 2024 13:46:08 -0700
Subject: [PATCH 2/3] feat(language-switcher): update component to accept a
 React component

---
 .../lib/components/Header/Header.stories.tsx  | 26 ++++++++++++-----
 .../src/lib/components/Header/index.tsx       | 29 +++++--------------
 .../lib/components/Header/styles.module.scss  | 19 +++++-------
 3 files changed, 32 insertions(+), 42 deletions(-)

diff --git a/libs/react-components/src/lib/components/Header/Header.stories.tsx b/libs/react-components/src/lib/components/Header/Header.stories.tsx
index 8cb7887..be98ec3 100644
--- a/libs/react-components/src/lib/components/Header/Header.stories.tsx
+++ b/libs/react-components/src/lib/components/Header/Header.stories.tsx
@@ -93,14 +93,24 @@ const meta = {
         type: 'button',
       },
     ],
-    announcementContent: {
-      icon: <Icon className="fa-regular fa-bell" />,
-      text: 'Get started with Teradata today.',
-      link: {
-        url: 'https://www.teradata.com/getting-started/demos/clearscape-analytics',
-        label: 'Start free demo',
-      },
-    },
+    announcementContent: (
+      <div>
+        <Icon className="fa-regular fa-bell" style={{ marginRight: '8px' }} />
+        <span>Important Announcement: </span>
+        <a
+          href="https://www.teradata.com"
+          style={{
+            marginLeft: '4px',
+            color: '#007bff',
+            textDecoration: 'underline',
+          }}
+          target="_blank"
+          rel="noreferrer"
+        >
+          Start free demo
+        </a>
+      </div>
+    ),
   },
 } satisfies Meta<typeof Header>;
 
diff --git a/libs/react-components/src/lib/components/Header/index.tsx b/libs/react-components/src/lib/components/Header/index.tsx
index a4e48c0..d7837bb 100644
--- a/libs/react-components/src/lib/components/Header/index.tsx
+++ b/libs/react-components/src/lib/components/Header/index.tsx
@@ -57,11 +57,7 @@ interface HeaderProps {
   /**
    * Announcement content to be displayed in the header
    */
-  announcementContent?: {
-    icon: JSX.Element;
-    text: string;
-    link?: { url: string; label: string };
-  };
+  announcementContent?: React.ReactNode;
 }
 
 const Header: React.FC<HeaderProps> = ({
@@ -152,23 +148,12 @@ const Header: React.FC<HeaderProps> = ({
       >
         {/* Header utility bar with the language switcher begins */}
         <section className={styles.headerUtility}>
-          <div className={styles.containerWide}>
-            {announcementContent && (
-              <div className={styles.announcement}>
-                {announcementContent.icon && announcementContent.icon}
-                <span className={styles.text}>{announcementContent.text}</span>
-                {announcementContent.link && (
-                  <a
-                    href={announcementContent.link.url}
-                    className={styles.link}
-                    target="_blank"
-                    rel="noreferrer"
-                  >
-                    {announcementContent.link.label}
-                  </a>
-                )}
-              </div>
-            )}
+          <div
+            className={`${styles.containerWide} ${
+              announcementContent ? styles.containerWideWithAnnouncment : ''
+            }`}
+          >
+            {announcementContent && announcementContent}
             <ul className={styles.headerUtilityNav}>
               <li>
                 <a href="https://www.teradata.com/" target="_self">
diff --git a/libs/react-components/src/lib/components/Header/styles.module.scss b/libs/react-components/src/lib/components/Header/styles.module.scss
index f4ab536..4d2751c 100644
--- a/libs/react-components/src/lib/components/Header/styles.module.scss
+++ b/libs/react-components/src/lib/components/Header/styles.module.scss
@@ -34,6 +34,13 @@ body {
 }
 
 .headerUtility .containerWide {
+  display: flex;
+  justify-content: flex-end;
+  box-sizing: border-box;
+  align-items: center;
+}
+
+.headerUtility .containerWideWithAnnouncment {
   display: flex;
   justify-content: space-between;
   box-sizing: border-box;
@@ -67,18 +74,6 @@ body {
   text-decoration: none;
 }
 
-.headerUtility .announcement i {
-  margin-right: 8px;
-}
-
-.headerUtility .announcement {
-  font-size: 16px !important;
-}
-
-.headerUtility .announcement a {
-  margin-left: 8px;
-}
-
 .headerNavWrapper {
   position: sticky;
   top: 0;

From 3777b9a1e963229119a54b2955da14fcaafe9225 Mon Sep 17 00:00:00 2001
From: Manuel Salazar <jesus.salazar@bairesde.com>
Date: Tue, 27 Aug 2024 13:53:58 -0700
Subject: [PATCH 3/3] feat(language-switcher): removes duplicate css rules

---
 .../src/lib/components/Header/styles.module.scss               | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/libs/react-components/src/lib/components/Header/styles.module.scss b/libs/react-components/src/lib/components/Header/styles.module.scss
index 4d2751c..3a9078b 100644
--- a/libs/react-components/src/lib/components/Header/styles.module.scss
+++ b/libs/react-components/src/lib/components/Header/styles.module.scss
@@ -41,10 +41,7 @@ body {
 }
 
 .headerUtility .containerWideWithAnnouncment {
-  display: flex;
   justify-content: space-between;
-  box-sizing: border-box;
-  align-items: center;
 }
 
 .headerUtility ul {