Teradata · owilliams320 · Jun 14, 2024 · Jun 14, 2024 · Jun 14, 2024 · Jun 14, 2024
diff --git a/libs/react-components/.storybook/main.ts b/libs/react-components/.storybook/main.ts
@@ -1,13 +1,17 @@
 import type { StorybookConfig } from '@storybook/react-vite';
 import { resolve } from 'path';
+import { terser } from 'rollup-plugin-terser';
 
 const config: StorybookConfig = {
   stories: ['../src/lib/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
+
   addons: [
     '@storybook/addon-essentials',
     '@storybook/addon-interactions',
     '@storybook/addon-a11y',
+    '@chromatic-com/storybook',
   ],
+
   framework: {
     name: '@storybook/react-vite',
     options: {
@@ -16,6 +20,33 @@ const config: StorybookConfig = {
       },
     },
   },
+
+  viteFinal: async (config, { configType }) => {
+    // Custom Vite configurations can be added here
+    if (configType === 'PRODUCTION') {
+      config?.plugins?.push(
+        terser({
+          compress: {
+            // Disable name mangling
+            keep_classnames: true,
+            keep_fnames: true,
+          },
+          mangle: {
+            keep_classnames: true,
+            keep_fnames: true,
+          },
+        })
+      );
+    }
+
+    return config;
+  },
+
+  docs: {},
+
+  typescript: {
+    reactDocgen: 'react-docgen-typescript',
+  },
 };
 
 export default config;

diff --git a/libs/react-components/.storybook/preview.ts b/libs/react-components/.storybook/preview.ts
@@ -16,6 +16,8 @@ const preview: Preview = {
       },
     },
   },
+
+  tags: ['autodocs']
 };
 
 export default preview;
diff --git a/libs/react-components/src/lib/components/Banner/index.tsx b/libs/react-components/src/lib/components/Banner/index.tsx
@@ -47,4 +47,6 @@ const Banner: React.FC<BannerProps> = ({
   );
 };
 
+Banner.displayName = 'Banner';
+
 export default Banner;
diff --git a/libs/react-components/src/lib/components/Blackout/index.tsx b/libs/react-components/src/lib/components/Blackout/index.tsx
@@ -15,9 +15,13 @@ interface BlackoutProps {
 const Blackout: React.FC<BlackoutProps> = ({ active = false, className }) => {
   return (
     <div
-      className={`${styles.pageBlackout} ${active ? styles.show : ''} ${className}`}
+      className={`${styles.pageBlackout} ${
+        active ? styles.show : ''
+      } ${className}`}
     ></div>
   );
 };
 
+Blackout.displayName = 'Blackout';
+
 export default Blackout;
diff --git a/libs/react-components/src/lib/components/Chip/index.tsx b/libs/react-components/src/lib/components/Chip/index.tsx
@@ -57,4 +57,6 @@ const Chip: React.FC<ChipProps> = ({
   );
 };
 
+Chip.displayName = 'Chip';
+
 export default Chip;
diff --git a/libs/react-components/src/lib/components/ChipSet/index.tsx b/libs/react-components/src/lib/components/ChipSet/index.tsx
@@ -79,4 +79,6 @@ const ChipSet: React.FC<ChipSetProps> = ({
   );
 };
 
+ChipSet.displayName = 'ChipSet';
+
 export default ChipSet;
diff --git a/libs/react-components/src/lib/components/CodeSnippet/index.tsx b/libs/react-components/src/lib/components/CodeSnippet/index.tsx
@@ -59,4 +59,6 @@ const CodeSnippet: React.FC<CodeSnippetProps> = (props) => {
   );
 };
 
+CodeSnippet.displayName = 'CodeSnippet';
+
 export default CodeSnippet;
diff --git a/libs/react-components/src/lib/components/DropdownMenu/styles.module.scss b/libs/react-components/src/lib/components/DropdownMenu/styles.module.scss
@@ -29,10 +29,9 @@
 
 .dropdownMenu {
   margin-top: 5px;
-  padding: 0;
   list-style: none;
   background-color: transparent;
-  padding: 0 2.5rem;
+  padding: 0 1.5rem;
 }
 
 .dropdownMenuItem {

diff --git a/libs/react-components/src/lib/components/Footer/index.tsx b/libs/react-components/src/lib/components/Footer/index.tsx
@@ -164,4 +164,6 @@ const Footer: React.FC<FooterProps> = ({
   );
 };
 
+Footer.displayName = 'Footer';
+
 export default Footer;
diff --git a/libs/react-components/src/lib/components/Footer/styles.module.scss b/libs/react-components/src/lib/components/Footer/styles.module.scss
@@ -55,10 +55,6 @@
     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/Header/Header.stories.tsx b/libs/react-components/src/lib/components/Header/Header.stories.tsx
@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 
 import Header from './index';
 import Icon from '../Icon';
+import Button from '../Button';
 
 const meta = {
   title: 'Components/Header',
@@ -86,7 +87,10 @@ const meta = {
         ),
         type: 'search',
       },
-      { actionElement: <Icon className="fa fa-home" />, type: 'button' },
+      {
+        actionElement: <Button icon="fa fa-home" label="Start free demo" />,
+        type: 'button',
+      },
     ],
   },
 } 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
@@ -261,18 +261,16 @@ const Header: React.FC<HeaderProps> = ({
                   secondaryMenu?.menuElement ? { paddingTop: '6.5rem' } : {}
                 }
               >
-                <div>
-                  <div className={styles.sidenavHeader}>
-                    <h3>{secondaryMenu?.title}</h3>
-                    <img
-                      src={closeIcon}
-                      onClick={handleDocsIconClick}
-                      alt="Docs Menu"
-                    />
-                  </div>
-                  <div className={styles.sidenavContent}>
-                    {secondaryMenu?.menuElement}
-                  </div>
+                <div className={styles.sidenavHeader}>
+                  <h3>{secondaryMenu?.title}</h3>
+                  <img
+                    src={closeIcon}
+                    onClick={handleDocsIconClick}
+                    alt="Docs Menu"
+                  />
+                </div>
+                <div className={styles.sidenavContent}>
+                  {secondaryMenu?.menuElement}
                 </div>
               </Sidenav>
             </aside>
@@ -290,6 +288,17 @@ const Header: React.FC<HeaderProps> = ({
                 </div>
 
                 <footer>
+                  <ul
+                    className={`${styles.headerNavActions} ${styles.headerNavElement} ${styles.headerNavMobileActions}`}
+                  >
+                    {headerActions &&
+                      headerActions.map(
+                        (action, index) =>
+                          action.type === 'button' && (
+                            <li key={index}>{action.actionElement}</li>
+                          )
+                      )}
+                  </ul>
                   <div className={styles.headerNavMobileFooter}>
                     <ul>
                       <li>
@@ -322,4 +331,6 @@ const Header: React.FC<HeaderProps> = ({
   );
 };
 
+Header.displayName = 'Header';
+
 export default Header;
diff --git a/libs/react-components/src/lib/components/Header/styles.module.scss b/libs/react-components/src/lib/components/Header/styles.module.scss
@@ -220,7 +220,7 @@ body {
 
 .headerNavMobileFooter ul {
   margin: 1em 0;
-  padding: 0 2rem;
+  padding: 0 1.5rem;
   display: flex;
   align-items: center;
 }
@@ -232,6 +232,18 @@ body {
   font-weight: 700;
 }
 
+.headerNavMobileDropdownMenu {
+  overflow: auto;
+}
+
+.headerNavMobileActions {
+  padding: 0 1.5rem;
+
+  li {
+    margin: 1.5rem 0;
+  }
+}
+
 .headerNavMobileSecondaryMenu {
   padding-top: 1.5rem;
   padding-left: 2px;
@@ -265,6 +277,8 @@ body {
 
 .sidenavContent {
   padding: 1rem;
+  overflow: auto;
+  height: 100%;
 }
 
 @media screen and (min-width: 768px) and (max-width: 1024px) {

diff --git a/libs/react-components/src/lib/components/Icon/index.tsx b/libs/react-components/src/lib/components/Icon/index.tsx
@@ -7,4 +7,6 @@ const Icon: React.FC<React.HTMLProps<HTMLSpanElement>> = ({
   return <i className={className} style={style}></i>;
 };
 
+Icon.displayName = 'Icon';
+
 export default Icon;
diff --git a/libs/react-components/src/lib/components/IconButton/index.tsx b/libs/react-components/src/lib/components/IconButton/index.tsx
@@ -54,4 +54,6 @@ const IconButton: React.FC<IconButtonProps> = ({
   return <IconButtonComponent {...customProps}></IconButtonComponent>;
 };
 
+IconButton.displayName = 'IconButton';
+
 export default IconButton;
diff --git a/libs/react-components/src/lib/components/IconLink/index.tsx b/libs/react-components/src/lib/components/IconLink/index.tsx
@@ -51,4 +51,6 @@ const IconLink: React.FC<IconLinkProps> = ({
   );
 };
 
+IconLink.displayName = 'IconLink';
+
 export default IconLink;
diff --git a/libs/react-components/src/lib/components/LanguageDropdown/index.tsx b/libs/react-components/src/lib/components/LanguageDropdown/index.tsx
@@ -99,4 +99,6 @@ const LanguageDropdown: React.FC<LanguageDropdownProps> = ({
   );
 };
 
+LanguageDropdown.displayName = 'LanguageDropdown';
+
 export default LanguageDropdown;
diff --git a/libs/react-components/src/lib/components/NavItem/index.tsx b/libs/react-components/src/lib/components/NavItem/index.tsx
@@ -154,4 +154,6 @@ const NavItem: React.FC<NavItemProps> = ({
   );
 };
 
+NavItem.displayName = 'NavItem';
+
 export default NavItem;
diff --git a/libs/react-components/src/lib/components/Sidenav/index.tsx b/libs/react-components/src/lib/components/Sidenav/index.tsx
@@ -15,12 +15,16 @@ interface SidenavProps extends PropsWithChildren, HTMLProps<HTMLDivElement> {
 const Sidenav: React.FC<SidenavProps> = ({ children, show, left, style }) => {
   return (
     <div
-      className={`${styles.sidenav} ${show ? styles.show : ''} ${left ? styles.left : styles.right}`}
+      className={`${styles.sidenav} ${show ? styles.show : ''} ${
+        left ? styles.left : styles.right
+      }`}
       style={style}
     >
       {children}
     </div>
   );
 };
 
+Sidenav.displayName = 'Sidenav';
+
 export default Sidenav;
diff --git a/libs/react-components/src/lib/components/Tabs/index.tsx b/libs/react-components/src/lib/components/Tabs/index.tsx
@@ -72,4 +72,7 @@ const TabBar: React.FC<TabBarProps> = ({
   );
 };
 
+Tab.displayName = 'Tab';
+TabBar.displayName = 'TabBar';
+
 export { Tab, TabBar };
diff --git a/libs/react-components/src/lib/components/Typography/index.tsx b/libs/react-components/src/lib/components/Typography/index.tsx
@@ -26,4 +26,6 @@ const Typography: React.FC<TypographyProps> = ({
   );
 };
 
+Typography.displayName = 'Typography';
+
 export default Typography;
diff --git a/libs/react-components/src/lib/index.ts b/libs/react-components/src/lib/index.ts
@@ -20,6 +20,7 @@ import NavItem, { NavListItem } from './components/NavItem';
 import Chip from './components/Chip';
 import ChipSet from './components/ChipSet';
 import { Tab, TabBar } from './components/Tabs';
+import Typography from './components/Typography';
 
 export {
   Banner,
@@ -37,7 +38,8 @@ export {
   LanguageDropdown,
   NavItem,
   Tab,
-  TabBar
+  TabBar,
+  Typography,
 };
 
 export type {