feat: remove title prop from Tabs (#1190)

* feat: remove title prop from Tabs * fix: cleaner logic for tab title
bigcommerce · Jul 31, 2024 · d01b4e0 · d01b4e0
1 parent 5c77f41
commit d01b4e0
Show file tree

Hide file tree

Showing 8 changed files with 56 additions and 107 deletions.
diff --git a/.changeset/popular-rings-perform.md b/.changeset/popular-rings-perform.md
@@ -0,0 +1,5 @@
+---
+"@bigcommerce/catalyst-core": patch
+---
+
+Remove title prop from Tabs, remove Tabs from /account since it's not needed.
diff --git a/core/app/[locale]/(default)/account/[tab]/_components/account-status-provider.tsx b/core/app/[locale]/(default)/account/[tab]/_components/account-status-provider.tsx
@@ -1,19 +1,10 @@
 'use client';
 
-import {
-  createContext,
-  ReactNode,
-  RefObject,
-  useContext,
-  useEffect,
-  useRef,
-  useState,
-} from 'react';
+import { createContext, ReactNode, useContext, useEffect, useState } from 'react';
 
 import { State as AccountState } from '../_actions/submit-customer-change-password-form';
 
 export const AccountStatusContext = createContext<{
-  activeTabRef: RefObject<HTMLAnchorElement>;
   accountState: AccountState;
   setAccountState: (state: AccountState | ((prevState: AccountState) => AccountState)) => void;
 } | null>(null);
@@ -26,7 +17,6 @@ export const AccountStatusProvider = ({
   isPermanentBanner?: boolean;
 }) => {
   const [accountState, setAccountState] = useState<AccountState>({ status: 'idle', message: '' });
-  const activeTabRef = useRef<HTMLAnchorElement>(null);
 
   useEffect(() => {
     if (accountState.status !== 'idle' && !isPermanentBanner) {
@@ -37,7 +27,7 @@ export const AccountStatusProvider = ({
   }, [accountState, setAccountState, isPermanentBanner]);
 
   return (
-    <AccountStatusContext.Provider value={{ accountState, setAccountState, activeTabRef }}>
+    <AccountStatusContext.Provider value={{ accountState, setAccountState }}>
       {children}
     </AccountStatusContext.Provider>
   );

diff --git a/core/app/[locale]/(default)/account/[tab]/_components/account-tabs.tsx b/core/app/[locale]/(default)/account/[tab]/_components/account-tabs.tsx
diff --git a/core/app/[locale]/(default)/account/[tab]/layout.tsx b/core/app/[locale]/(default)/account/[tab]/layout.tsx
@@ -2,10 +2,11 @@ import { NextIntlClientProvider } from 'next-intl';
 import { getMessages, getTranslations, unstable_setRequestLocale } from 'next-intl/server';
 import { PropsWithChildren } from 'react';
 
+import { Link } from '~/components/link';
 import { LocaleType } from '~/i18n';
+import { cn } from '~/lib/utils';
 
 import { AccountStatusProvider } from './_components/account-status-provider';
-import { AccountTabs } from './_components/account-tabs';
 
 const tabList = [
   'orders',
@@ -22,20 +23,49 @@ interface Props extends PropsWithChildren {
   params: { locale: LocaleType; tab?: TabType };
 }
 
-export default async function AccountTabLayout({ children, params: { locale, tab } }: Props) {
+export default async function AccountTabLayout({
+  children,
+  params: { locale, tab: activeTab },
+}: Props) {
   unstable_setRequestLocale(locale);
 
   const t = await getTranslations({ locale, namespace: 'Account.Home' });
 
   const messages = await getMessages();
 
+  const tabsTitles = {
+    orders: t('orders'),
+    messages: t('messages'),
+    addresses: t('addresses'),
+    wishlists: t('wishlists'),
+    'recently-viewed': t('recentlyViewed'),
+    settings: t('settings'),
+  };
+
   return (
     <NextIntlClientProvider locale={locale} messages={{ Account: messages.Account ?? {} }}>
       <AccountStatusProvider>
         <h1 className="my-8 text-4xl font-black lg:my-8 lg:text-5xl">{t('heading')}</h1>
-        <AccountTabs activeTab={tab} tabs={[...tabList]}>
-          {children}
-        </AccountTabs>
+        <nav aria-label={t('accountTabsLabel')}>
+          <ul className="mb-8 flex items-start overflow-x-auto">
+            {tabList.map((tab) => (
+              <li key={tab}>
+                <Link
+                  className={cn(
+                    'block whitespace-nowrap px-4 pb-2 font-semibold',
+                    activeTab === tab && 'border-b-4 border-primary text-primary',
+                  )}
+                  href={`/account/${tab}`}
+                  prefetch="viewport"
+                  prefetchKind="full"
+                >
+                  {tabsTitles[tab]}
+                </Link>
+              </li>
+            ))}
+          </ul>
+        </nav>
+        {children}
       </AccountStatusProvider>
     </NextIntlClientProvider>
   );

diff --git a/core/components/ui/tabs/tabs.tsx b/core/components/ui/tabs/tabs.tsx
@@ -3,7 +3,6 @@ import { ComponentPropsWithoutRef, ReactNode } from 'react';
 
 interface Tab {
   content: ReactNode;
-  title: ReactNode;
   value: string;
 }
 
@@ -26,7 +25,7 @@ export function Tabs({ className, defaultValue, label, tabs, ...props }: Props)
             key={tab.value}
             value={tab.value}
           >
-            {tab.title}
+            {tab.value}
           </TabsPrimitive.Trigger>
         ))}
       </TabsPrimitive.List>

diff --git a/core/tests/ui/desktop/e2e/account.spec.ts b/core/tests/ui/desktop/e2e/account.spec.ts
@@ -32,34 +32,34 @@ test('My Account tabs are displayed and clickable', async ({ page }) => {
   await loginWithUserAccount(page, testUserEmail, testUserPassword);
 
   await expect(page).toHaveURL('/account/');
-  await expect(page.getByRole('heading', { name: 'Orders' })).toBeVisible();
-  await expect(page.getByRole('heading', { name: 'Messages' })).toBeVisible();
-  await expect(page.getByRole('heading', { name: 'Addresses' })).toBeVisible();
-  await expect(page.getByRole('heading', { name: 'Wish lists' })).toBeVisible();
-  await expect(page.getByRole('heading', { name: 'Recently viewed' })).toBeVisible();
-  await expect(page.getByRole('heading', { name: 'Account settings' })).toBeVisible();
-
-  await page.getByRole('heading', { name: 'Orders' }).click();
+  await expect(page.getByRole('link', { name: 'Orders' })).toBeVisible();
+  await expect(page.getByRole('link', { name: 'Messages' })).toBeVisible();
+  await expect(page.getByRole('link', { name: 'Addresses' })).toBeVisible();
+  await expect(page.getByRole('link', { name: 'Wish lists' })).toBeVisible();
+  await expect(page.getByRole('link', { name: 'Recently viewed' })).toBeVisible();
+  await expect(page.getByRole('link', { name: 'Account settings' })).toBeVisible();
+
+  await page.getByRole('link', { name: 'Orders' }).click();
   await expect(page).toHaveURL('/account/orders/');
   await expect(page.getByRole('heading', { name: 'Orders' })).toBeVisible();
 
-  await page.getByRole('tab', { name: 'Messages' }).click();
+  await page.getByRole('link', { name: 'Messages' }).click();
   await expect(page).toHaveURL('/account/messages/');
   await expect(page.getByRole('heading', { name: 'Messages' })).toBeVisible();
 
-  await page.getByRole('tab', { name: 'Addresses' }).click();
+  await page.getByRole('link', { name: 'Addresses' }).click();
   await expect(page).toHaveURL('/account/addresses/');
   await expect(page.getByRole('heading', { name: 'Addresses' })).toBeVisible();
 
-  await page.getByRole('tab', { name: 'Wish lists' }).click();
+  await page.getByRole('link', { name: 'Wish lists' }).click();
   await expect(page).toHaveURL('/account/wishlists/');
   await expect(page.getByRole('heading', { name: 'Wish lists' })).toBeVisible();
 
-  await page.getByRole('tab', { name: 'Recently viewed' }).click();
+  await page.getByRole('link', { name: 'Recently viewed' }).click();
   await expect(page).toHaveURL('/account/recently-viewed/');
   await expect(page.getByRole('heading', { name: 'Recently viewed' })).toBeVisible();
 
-  await page.getByRole('tab', { name: 'Account settings' }).click();
+  await page.getByRole('link', { name: 'Account settings' }).click();
   await expect(page).toHaveURL('/account/settings/');
   await expect(page.getByRole('heading', { name: 'Account settings' })).toBeVisible();
 });

diff --git a/core/tests/visual-regression/components/tabs.spec.ts b/core/tests/visual-regression/components/tabs.spec.ts
diff --git a/...l-regression/components/tabs.spec.ts-snapshots/Tabs-1-tests-chromium-darwin.png b/...l-regression/components/tabs.spec.ts-snapshots/Tabs-1-tests-chromium-darwin.png