Merge pull request #28 from Teradata/feature/demo-text

feat(language switcher) adds an optional text justified to the right
Teradata · Aug 28, 2024 · 9f7d564 · 9f7d564
2 parents c5e9058 + 3777b9a
commit 9f7d564
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 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
@@ -93,6 +93,24 @@ const meta = {
         type: 'button',
       },
     ],
+    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
@@ -54,6 +54,10 @@ interface HeaderProps {
    * Secondary menu content for mobile view
    */
   secondaryMenu?: { menuElement: JSX.Element; title: string };
+  /**
+   * Announcement content to be displayed in the header
+   */
+  announcementContent?: React.ReactNode;
 }
 
 const Header: React.FC<HeaderProps> = ({
@@ -65,6 +69,7 @@ const Header: React.FC<HeaderProps> = ({
   onLanguageChange,
   selectedLanguage,
   secondaryMenu,
+  announcementContent,
 }) => {
   const [activeNavItem, setActiveNavItem] = useState<number | null>(
     navItems.findIndex((item) => item.active)
@@ -143,7 +148,12 @@ const Header: React.FC<HeaderProps> = ({
       >
         {/* Header utility bar with the language switcher begins */}
         <section className={styles.headerUtility}>
-          <div className={styles.containerWide}>
+          <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
@@ -40,6 +40,10 @@ body {
   align-items: center;
 }
 
+.headerUtility .containerWideWithAnnouncment {
+  justify-content: space-between;
+}
+
 .headerUtility ul {
   margin: 0;
   padding: 0;