Merge pull request #20 from Teradata/feat/header-title-link

feat(header): pass title link as a prop
Teradata · Aug 7, 2024 · a2997da · a2997da
2 parents 0c9b1da + bb6d827
commit a2997da
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 39 deletions.
diff --git a/libs/react-components/src/lib/components/Footer/index.tsx b/libs/react-components/src/lib/components/Footer/index.tsx
@@ -163,7 +163,7 @@ const Footer: React.FC<FooterProps> = ({
                     <IconLink
                       iconName={item.icon}
                       href={item.href}
-                      size={12}
+                      size={14}
                       label={item.label}
                     />
                   </li>

diff --git a/libs/react-components/src/lib/components/Footer/styles.module.scss b/libs/react-components/src/lib/components/Footer/styles.module.scss
@@ -24,6 +24,7 @@
 
 .footerLinkTitle {
   color: var(--td-web-primary-navy);
+  font-size: 18px;
   font-weight: 600;
   line-height: 28px;
   position: relative;
@@ -62,9 +63,10 @@
 }
 
 .socialLinksList {
-  display: grid;
-  grid-template-columns: repeat(3, 0fr);
+  display: flex;
+  flex-wrap: wrap;
   gap: 1rem 0.75rem;
+  padding-top: 1rem;
 }
 
 .legalLinksWrapper {
@@ -107,12 +109,6 @@
   color: var(--td-web-primary-navy);
   font-family: Inter, sans-serif;
   -webkit-font-smoothing: antialiased;
-
-  ul {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-  }
 }
 
 .linksOfInterest {
@@ -132,6 +128,12 @@
   font-size: 14px;
 }
 
+ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
 @media screen and (min-width: 768px) {
   .footer {
     padding: 60px 0 40px;
@@ -191,7 +193,7 @@
 
     .footerLinkTitle {
       pointer-events: all;
-
+      font-size: 1rem;
       padding: 1rem 0;
       display: flex;
       align-items: center;
@@ -212,7 +214,7 @@
   }
 
   .socialLinksList {
-    grid-template-columns: repeat(4, 1fr);
+    max-width: 215px;
   }
 
   .socialLinksWrapper {

diff --git a/libs/react-components/src/lib/components/Header/Header.stories.tsx b/libs/react-components/src/lib/components/Header/Header.stories.tsx
@@ -15,6 +15,7 @@ const meta = {
   },
   args: {
     title: 'Developers',
+    titleLink: 'https://developers.teradata.com/',
     navItems: [
       {
         href: 'test',

diff --git a/libs/react-components/src/lib/components/Header/index.tsx b/libs/react-components/src/lib/components/Header/index.tsx
@@ -26,6 +26,10 @@ interface HeaderProps {
    * Title of the header, displayed after the brand image
    */
   title: string;
+  /**
+   *  Link associated with the title of the header
+   */
+  titleLink: string;
   /**
    * Nav items to be displayed in the navbar
    */
@@ -54,6 +58,7 @@ interface HeaderProps {
 
 const Header: React.FC<HeaderProps> = ({
   title,
+  titleLink = '',
   navItems = [],
   languages,
   headerActions,
@@ -141,7 +146,7 @@ const Header: React.FC<HeaderProps> = ({
           <div className={styles.containerWide}>
             <ul className={styles.headerUtilityNav}>
               <li>
-                <a href="https://teradata.com" target="_self">
+                <a href="https://www.teradata.com/" target="_self">
                   Teradata.com
                 </a>
               </li>
@@ -158,20 +163,21 @@ const Header: React.FC<HeaderProps> = ({
           <header className={`${styles.headerNav} ${styles.containerWide}`}>
             <nav>
               <div className={styles.headerNavElement}>
-                <a
-                  className={styles.headerNavLogo}
-                  href="https://www.teradata.com/"
-                  target="_self"
-                >
-                  <img
-                    className={styles.teradataLogo}
-                    src={logo}
-                    alt="Teradata Logo"
-                  />
+                <span className={styles.headerNavLogo}>
+                  <a href="https://www.teradata.com/" target="_self">
+                    <img
+                      className={styles.teradataLogo}
+                      src={logo}
+                      alt="Teradata Logo"
+                    />
+                  </a>
+
                   {title && (
-                    <span className={styles.headerNavLogoText}>{title}</span>
+                    <a href={titleLink} target="_self">
+                      <span className={styles.headerNavLogoText}>{title}</span>
+                    </a>
                   )}
-                </a>
+                </span>
               </div>
               {navItems && (
                 <div className={styles.headerNavElement}>
@@ -211,20 +217,23 @@ const Header: React.FC<HeaderProps> = ({
           <header className={styles.headerNavMobile}>
             <nav>
               <section className={styles.headerNavMobileWrapper}>
-                <a
-                  className={styles.headerNavLogo}
-                  href="http://developers.teradata.com/"
-                  target="_self"
-                >
-                  <img
-                    className={styles.teradataLogo}
-                    src={logo}
-                    alt="Teradata Logo"
-                  />
-                  <span className={styles.headerNavMobileLogoText}>
-                    {title}
-                  </span>
-                </a>
+                <span className={styles.headerNavLogo}>
+                  <a href="http://www.teradata.com/" target="_self">
+                    <img
+                      className={styles.teradataLogo}
+                      src={logo}
+                      alt="Teradata Logo"
+                    />
+                  </a>
+                  {title && (
+                    <a href={titleLink} target="_self">
+                      <span className={styles.headerNavMobileLogoText}>
+                        {title}
+                      </span>
+                    </a>
+                  )}
+                </span>
+
                 <ul className={styles.headerNavMobileTopLinks}>
                   {search && <li>{search.actionElement}</li>}
                   <li>

diff --git a/libs/react-components/src/lib/components/Header/styles.module.scss b/libs/react-components/src/lib/components/Header/styles.module.scss
@@ -133,7 +133,7 @@ body {
 
 .headerNavLogo {
   display: flex;
-  align-items: end;
+  align-items: flex-end;
 }
 
 .headerNavMobile {