feat(Tabs, NavTabs): Add support for overwriting TextTransform. (#1494

) Co-authored-by: Nikita Orliak <[email protected]>
cengage · Oct 21, 2024 · 40708c7 · 40708c7 · github-actions · Oct 21, 2024
1 parent ebcaea2
commit 40708c7
Show file tree

Hide file tree

Showing 15 changed files with 337 additions and 58 deletions.
diff --git a/.changeset/feat-navTab-support-overwriting-textTransform.md b/.changeset/feat-navTab-support-overwriting-textTransform.md
@@ -0,0 +1,5 @@
+---
+'react-magma-dom': minor
+---
+
+feat(Tabs, NavTabs): Add support for overwriting `TextTransform`: add `textTransform` prop.
diff --git a/packages/react-magma-dom/src/components/Drawer/Drawer.stories.tsx b/packages/react-magma-dom/src/components/Drawer/Drawer.stories.tsx
@@ -4,7 +4,7 @@ import { Button } from '../Button';
 import { VisuallyHidden } from '../VisuallyHidden';
 import { DrawerPosition } from './Drawer';
 import { NavTab, NavTabs } from '../NavTabs';
-import { TabsOrientation } from '../Tabs';
+import { TabsOrientation } from '../Tabs/shared';
 
 const info = {
   component: Drawer,
@@ -23,15 +23,15 @@ export default info;
 
 export const Default = args => {
   const [showDrawer, setShowDrawer] = React.useState(false);
-  const buttonRef = React.useRef<HTMLButtonElement>();
+  const buttonRef = React.useRef<HTMLButtonElement | null>(null);
 
   return (
     <>
       <Drawer
         header="Drawer Title"
         onClose={() => {
           setShowDrawer(false);
-          buttonRef.current.focus();
+          buttonRef.current?.focus();
         }}
         isOpen={showDrawer}
         closeAriaLabel="Close drawer"
@@ -52,14 +52,14 @@ export const Default = args => {
 
 export const SiteNavigation = args => {
   const [showDrawer, setShowDrawer] = React.useState(false);
-  const buttonRef = React.useRef<HTMLButtonElement>();
+  const buttonRef = React.useRef<HTMLButtonElement | null>(null);
 
   return (
     <>
       <Drawer
         onClose={() => {
           setShowDrawer(false);
-          buttonRef.current.focus();
+          buttonRef.current?.focus();
         }}
         isOpen={showDrawer}
         position={DrawerPosition.right}

diff --git a/packages/react-magma-dom/src/components/NavTabs/NavTab.tsx b/packages/react-magma-dom/src/components/NavTabs/NavTab.tsx
@@ -9,9 +9,9 @@ import {
   TabStyles,
   TabsIconPosition,
 } from '../Tabs';
-import { TabsOrientation } from '../Tabs/shared';
+import { TabsOrientation, TabsTextTransform } from '../Tabs/shared';
 import { ThemeContext } from '../../theme/ThemeContext';
-import { omit, useForkedRef, XOR } from '../../utils';
+import { omit, resolveProps, useForkedRef, XOR } from '../../utils';
 
 export interface BaseNavTabProps
   extends React.HTMLAttributes<HTMLAnchorElement> {
@@ -37,6 +37,11 @@ export interface BaseNavTabProps
    * @default TabsOrientation.horizontal
    */
   orientation?: TabsOrientation;
+  /**
+   * Determines whether the tab appears in all-caps
+   * @default TabsTextTransform.uppercase
+   */
+  textTransform?: TabsTextTransform;
   /**
    * @internal
    */
@@ -91,6 +96,7 @@ const StyledTab = styled.a<{
   isFullWidth?: boolean;
   isInverse?: boolean;
   orientation: TabsOrientation;
+  textTransform?: TabsTextTransform;
   theme: any;
 }>`
   ${TabStyles}
@@ -137,7 +143,9 @@ export const NavTab = React.forwardRef<any, NavTabProps>(
   (props, forwardRef) => {
     let children;
     let component;
-    const { isActive, icon, isFocused, testId, to, ...other } = props;
+    const contextProps = React.useContext(NavTabsContext);
+    const resolvedProps = resolveProps(contextProps, props);
+    const { isActive, icon, isFocused, testId, to, ...other } = resolvedProps;
     const theme = React.useContext(ThemeContext);
 
     if (instanceOfNavComponentTab(props)) {
@@ -154,7 +162,8 @@ export const NavTab = React.forwardRef<any, NavTabProps>(
       iconPosition,
       isInverse,
       isFullWidth,
-    } = React.useContext(NavTabsContext);
+      textTransform,
+    } = resolvedProps;
 
     const tabIconPosition = iconPosition
       ? iconPosition
@@ -216,6 +225,7 @@ export const NavTab = React.forwardRef<any, NavTabProps>(
             iconPosition={tabIconPosition}
             isInverse={isInverse}
             orientation={orientation}
+            textTransform={textTransform}
             theme={theme}
           >
             {icon && (

diff --git a/packages/react-magma-dom/src/components/NavTabs/NavTabs.stories.tsx b/packages/react-magma-dom/src/components/NavTabs/NavTabs.stories.tsx
@@ -1,52 +1,108 @@
 import React from 'react';
-import { NavTabs } from '.';
+import { NavTabs, NavTabsProps } from '.';
 import { NavTab } from './NavTab';
 import { Card } from '../Card';
 import { magma } from '../../theme/magma';
-import { Meta } from '@storybook/react/types-6-0';
+import { Meta, Story } from '@storybook/react/types-6-0';
 import { AndroidIcon, EmailIcon, NotificationsIcon } from 'react-magma-icons';
+import { TabsAlignment, TabsBorderPosition, TabsIconPosition } from '../Tabs';
+import { TabsOrientation, TabsTextTransform } from '../Tabs/shared';
 
 export default {
   component: NavTabs,
   title: 'NavTabs',
+  argTypes: {
+    alignment: {
+      control: {
+        type: 'select',
+        options: TabsAlignment,
+      },
+    },
+    borderPosition: {
+      control: {
+        type: 'select',
+        options: TabsBorderPosition,
+      },
+    },
+    iconPosition: {
+      control: {
+        type: 'select',
+        options: TabsIconPosition,
+      },
+    },
+    orientation: {
+      control: {
+        type: 'select',
+        options: TabsOrientation,
+      },
+    },
+    textTransform: {
+      control: {
+        type: 'select',
+        options: TabsTextTransform,
+      },
+    },
+    isInverse: {
+      control: {
+        type: 'boolean',
+      },
+    },
+  },
 } as Meta;
 
-export const Default = () => {
+const Template: Story<NavTabsProps> = args => {
   return (
-    <NavTabs aria-label="Nav Tabs">
-      <NavTab isActive to="#">
-        Current Page
-      </NavTab>
-      <NavTab to="http://google.com">Link to Google</NavTab>
-    </NavTabs>
+    <Card isInverse={args.isInverse}>
+      <NavTabs aria-label="Nav Tabs" {...args}>
+        <NavTab isActive to="#">
+          Current Page
+        </NavTab>
+        <NavTab to="http://google.com">Link to Google</NavTab>
+      </NavTabs>
+    </Card>
   );
 };
 
-export const IconOnly = () => {
+export const Default = Template.bind({});
+Default.args = {};
+
+export const IconOnly: Story<NavTabsProps> = args => {
   return (
-    <NavTabs aria-label="Icon Only Nav Tabs">
-      <NavTab aria-label="Email" icon={<EmailIcon />} to="#" isActive />
-      <NavTab aria-label="Android" icon={<AndroidIcon />} to="#" />
-      <NavTab aria-label="Notifications" icon={<NotificationsIcon />} to="#" />
-    </NavTabs>
+    <Card isInverse={args.isInverse}>
+      <NavTabs aria-label="Icon Only Nav Tabs" {...args}>
+        <NavTab aria-label="Email" icon={<EmailIcon />} to="#" isActive />
+        <NavTab aria-label="Android" icon={<AndroidIcon />} to="#" />
+        <NavTab
+          aria-label="Notifications"
+          icon={<NotificationsIcon />}
+          to="#"
+        />
+      </NavTabs>
+    </Card>
   );
 };
 
-export const BackgroundColor = () => {
+export const BackgroundColor: Story<NavTabsProps> = args => {
   return (
-    <NavTabs aria-label="Nav Tabs" backgroundColor={magma.colors.neutral200}>
-      <NavTab isActive to="#">
-        Current Page
-      </NavTab>
-      <NavTab to="http://yahoo.com">Link to Yahoo</NavTab>
-    </NavTabs>
+    <Card isInverse={args.isInverse}>
+      <NavTabs
+        aria-label="Nav Tabs"
+        backgroundColor={args.isInverse ? '' : magma.colors.neutral200}
+        {...args}
+      >
+        <NavTab isActive to="#">
+          Current Page
+        </NavTab>
+        <NavTab to="http://yahoo.com">Link to Yahoo</NavTab>
+      </NavTabs>
+    </Card>
   );
 };
 
-export const Inverse = () => {
+const InverseTemplate: Story<NavTabsProps> = args => {
   return (
-    <Card isInverse>
-      <NavTabs aria-label="Nav Tabs" isInverse>
+    <Card isInverse={args.isInverse}>
+      <NavTabs aria-label="Nav Tabs" {...args}>
         <NavTab isActive to="#">
           Current Page
         </NavTab>
@@ -55,18 +111,22 @@ export const Inverse = () => {
     </Card>
   );
 };
+export const Inverse = InverseTemplate.bind({});
+Inverse.args = { isInverse: true };
 
-export const CustomTab = () => {
+export const CustomTab: Story<NavTabsProps> = args => {
   const Link = ({ to, children, ...rest }) => (
     <a href={to} {...rest}>
       {children}
     </a>
   );
   return (
-    <NavTabs aria-label="Sample Custom Component Navigation Tabs">
-      <NavTab component={<Link to="./">Main page</Link>} />
-      <NavTab isActive component={<Link to="./">FAQ</Link>} />
-      <NavTab component={<Link to="./">About us</Link>} />
-    </NavTabs>
+    <Card isInverse={args.isInverse}>
+      <NavTabs aria-label="Sample Custom Component Navigation Tabs" {...args}>
+        <NavTab component={<Link to="./">Main page</Link>} />
+        <NavTab isActive component={<Link to="./">FAQ</Link>} />
+        <NavTab component={<Link to="./">About us</Link>} />
+      </NavTabs>
+    </Card>
   );
 };
diff --git a/packages/react-magma-dom/src/components/NavTabs/NavTabs.test.js b/packages/react-magma-dom/src/components/NavTabs/NavTabs.test.js
@@ -71,6 +71,30 @@ describe('NavTabs', () => {
     );
   });
 
+  it('should render navtabs with textTransform prop', () => {
+    const { container, rerender } = render(
+      <NavTabs>
+        <NavTab>Tab 1</NavTab>
+      </NavTabs>
+    );
+
+    expect(container.querySelector('a')).toHaveStyleRule(
+      'text-transform',
+      'uppercase'
+    );
+
+    rerender(
+      <NavTabs textTransform="none">
+        <NavTab>Tab 1</NavTab>
+      </NavTabs>
+    );
+
+    expect(container.querySelector('a')).toHaveStyleRule(
+      'text-transform',
+      'none'
+    );
+  });
+
   it('should show icon in top position', () => {
     const testId = 'test-id';
 

diff --git a/packages/react-magma-dom/src/components/NavTabs/NavTabs.tsx b/packages/react-magma-dom/src/components/NavTabs/NavTabs.tsx
@@ -10,7 +10,7 @@ import {
   Orientation,
 } from '../Tabs';
 import { NavTabProps, NavTab } from './NavTab';
-import { TabsOrientation } from '../Tabs/shared';
+import { TabsOrientation, TabsTextTransform } from '../Tabs/shared';
 import { Omit } from '../../utils';
 import { ThemeContext } from '../../theme/ThemeContext';
 import { ButtonNext, ButtonPrev } from '../Tabs/TabsScrollButtons';
@@ -25,6 +25,7 @@ interface NavTabsContextInterface {
   isInverse?: boolean;
   isFullWidth?: boolean;
   orientation?: TabsOrientation;
+  textTransform?: TabsTextTransform;
 }
 
 export const NavTabsContext = React.createContext<NavTabsContextInterface>({
@@ -33,6 +34,7 @@ export const NavTabsContext = React.createContext<NavTabsContextInterface>({
   isInverse: false,
   isFullWidth: false,
   orientation: TabsOrientation.horizontal,
+  textTransform: TabsTextTransform.uppercase,
 });
 
 export const NavTabs = React.forwardRef<
@@ -47,6 +49,7 @@ export const NavTabs = React.forwardRef<
     iconPosition,
     isFullWidth,
     orientation,
+    textTransform,
     testId,
     ...rest
   } = props;
@@ -128,6 +131,7 @@ export const NavTabs = React.forwardRef<
               isInverse: isInverse,
               isFullWidth,
               orientation,
+              textTransform: textTransform || TabsTextTransform.uppercase,
             }}
           >
             {navTabsChildren}