Merge pull request #13 from Teradata/fix/banner-styles

fix(banner): fix banner styles for tablet breakpoint
Teradata · Jul 10, 2024 · 2695f11 · 2695f11
2 parents 9562eca + a912441
commit 2695f11
Show file tree

Hide file tree

Showing 9 changed files with 48 additions and 14 deletions.
diff --git a/libs/react-components/src/lib/components/Banner/Banner.stories.tsx b/libs/react-components/src/lib/components/Banner/Banner.stories.tsx
@@ -48,7 +48,6 @@ export const Hero: Story = {
     content:
       'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequa.',
     isHero: true,
-    imageSrc:
-      'https://s3-alpha-sig.figma.com/img/07ea/17f4/495f02efa84e03a9d184758288dce2f0?Expires=1719187200&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=FNLOp0rxTclfS4rHH5J0Yg42soFr1apjc9FvPr1T2qAMIBQE5vR3fdyikaiJOXb1oW2jWsXZXHWLjXO4smprKq0Lq~Z8vwZXio5IY-1~ss3ptWNM-EqVRaM6w-XOXcTeJLfE4NlV2b2F5f8bGTcTrmwY9ZKr6-hnQPbIXvdc85ApLPGNe3XawzMxxDf90~yEgkTD9zsgfV70vcLfxk7zhTVZpqdwrRXTZIvHStOh-VgYLUFahZTUEAazIQ67nfT9lDyrjP2x9~dD~uy6pj-PE~ox00ZlwFB5eKMUa3ZQeRY9GuRdBmysY8fFUXcqTynBdMBGj8OazN54WySG~sPw8Q__',
+    imageSrc: 'https://quickstarts.teradata.com/_/img/possible2024.png',
   },
 };
diff --git a/libs/react-components/src/lib/components/Banner/index.tsx b/libs/react-components/src/lib/components/Banner/index.tsx
@@ -7,6 +7,10 @@ interface BannerProps {
    * Content to be displayed in the banner. Accepts any ReactNode.
    */
   content: ReactNode;
+  /**
+   * Custom styles for the banner image.
+   */
+  imageClassName?: string;
   /**
    * Source for the banner image.
    */
@@ -27,8 +31,9 @@ interface BannerProps {
 
 const Banner: React.FC<BannerProps> = ({
   content = '',
-  imageSrc = '',
   imageAltText = 'Banner Image',
+  imageClassName = '',
+  imageSrc = '',
   isHero = false,
   title = '',
 }) => {
@@ -42,7 +47,11 @@ const Banner: React.FC<BannerProps> = ({
           <div className={styles.bannerContent}>{content}</div>
         </Typography>
       </section>
-      <img className={styles.bannerImage} src={imageSrc} alt={imageAltText} />
+      <img
+        className={`${styles.bannerImage} ${imageClassName}`}
+        src={imageSrc}
+        alt={imageAltText}
+      />
     </div>
   );
 };

diff --git a/libs/react-components/src/lib/components/Banner/styles.module.scss b/libs/react-components/src/lib/components/Banner/styles.module.scss
@@ -47,7 +47,7 @@
   }
 }
 
-@media screen and (min-width: 768px) {
+@media screen and (min-width: 769px) {
   .banner {
     flex-direction: row;
   }

diff --git a/libs/react-components/src/lib/components/ChipSet/index.tsx b/libs/react-components/src/lib/components/ChipSet/index.tsx
@@ -1,8 +1,14 @@
-import React, { ReactElement, ReactNode, useEffect, useState } from 'react';
+import React, {
+  HTMLProps,
+  ReactElement,
+  ReactNode,
+  useEffect,
+  useState,
+} from 'react';
 import styles from './styles.module.scss';
 import Chip from '../Chip';
 
-interface ChipSetProps {
+interface ChipSetProps extends HTMLProps<HTMLDivElement> {
   /**
    * Child nodes or children passed to the ChipSet.
    */
@@ -27,6 +33,7 @@ interface ChipSetProps {
 
 const ChipSet: React.FC<ChipSetProps> = ({
   children,
+  className = '',
   defaultSelected,
   multiSelect = false,
   onChipSelect,
@@ -62,7 +69,7 @@ const ChipSet: React.FC<ChipSetProps> = ({
   }, [defaultSelected]);
 
   return (
-    <div className={styles.chipSet}>
+    <div className={`${styles.chipSet} ${className}`}>
       {chips.map((chip) => {
         const { label } = (chip as ReactElement).props;
         return (

diff --git a/libs/react-components/src/lib/components/Header/styles.module.scss b/libs/react-components/src/lib/components/Header/styles.module.scss
@@ -54,10 +54,6 @@ body {
     var(--td-web-primary-navy),
     var(--td-web-primary-navy)
   );
-  background-image: webkit-linear-gradient(
-    var(--td-web-primary-navy),
-    var(--td-web-primary-navy)
-  );
   background-position: 0 100%;
   background-repeat: no-repeat;
   background-size: 0 1px;

diff --git a/libs/react-components/src/lib/components/Tabs/Tabs.stories.tsx b/libs/react-components/src/lib/components/Tabs/Tabs.stories.tsx
@@ -51,6 +51,24 @@ const meta = {
           title="This is another demo title"
         />
       </Tab>,
+      <Tab key="tab3" label="Tab 3">
+        <Banner
+          content={<p>{demoContent}</p>}
+          imageSrc={
+            'https://www.teradata.com/getmedia/b6c99212-cd32-42ec-beec-a12436b0296a/roles-data_leader.svg?origin=fd'
+          }
+          title="This is another demo title tab 3"
+        />
+      </Tab>,
+      <Tab key="tab4" label="Tab 4">
+        <Banner
+          content={<p>{demoContent}</p>}
+          imageSrc={
+            'https://www.teradata.com/getmedia/b6c99212-cd32-42ec-beec-a12436b0296a/roles-data_leader.svg?origin=fd'
+          }
+          title="This is another demo title tab 4"
+        />
+      </Tab>,
     ],
   },
 } satisfies Meta<typeof TabBar>;

diff --git a/libs/react-components/src/lib/components/Tabs/index.tsx b/libs/react-components/src/lib/components/Tabs/index.tsx
@@ -58,6 +58,7 @@ const TabBar: React.FC<TabBarProps> = ({
         <ChipSet
           onChipSelect={onTabChange}
           defaultSelected={defaultSelectedTab}
+          className={styles.chipSet}
         >
           {children.map((child, index) => {
             const { label } = (child as ReactElement<TabProps>).props;

diff --git a/libs/react-components/src/lib/components/Tabs/styles.module.scss b/libs/react-components/src/lib/components/Tabs/styles.module.scss
@@ -1,6 +1,10 @@
+.chipSet {
+  flex: 1;
+  justify-content: center;
+}
+
 .tabBar {
   display: flex;
-  justify-content: center;
   overflow-x: auto;
   scrollbar-width: none;
 }

diff --git a/libs/react-components/src/lib/components/Typography/styles.module.scss b/libs/react-components/src/lib/components/Typography/styles.module.scss
@@ -95,7 +95,7 @@
 }
 
 /* Mobile styles */
-@media only screen and (max-width: 767px) {
+@media only screen and (max-width: 768px) {
   .headline1 {
     font-size: var(--td-web-typography-headline1-mb-font-size);
     line-height: var(--td-web-typography-headline1-mb-line-height);