Skip to content

Commit

Permalink
feat: remove title prop from Tabs
Browse files Browse the repository at this point in the history
  • Loading branch information
jorgemoya committed Jul 30, 2024
1 parent 1c79950 commit cd6a9fc
Show file tree
Hide file tree
Showing 7 changed files with 34 additions and 94 deletions.
5 changes: 5 additions & 0 deletions .changeset/popular-rings-perform.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@bigcommerce/catalyst-core": patch
---

Remove title prop from Tabs, remove Tabs from /account since it's not needed.
Original file line number Diff line number Diff line change
@@ -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);
Expand All @@ -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) {
Expand All @@ -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>
);
Expand Down

This file was deleted.

31 changes: 26 additions & 5 deletions core/app/[locale]/(default)/account/[tab]/layout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -22,7 +23,10 @@ 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' });
Expand All @@ -33,9 +37,26 @@ export default async function AccountTabLayout({ children, params: { locale, tab
<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 list-none items-start overflow-x-auto text-base">
{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"
>
{tab === 'recently-viewed' ? t('recentlyViewed') : t(tab)}
</Link>
</li>
))}
</ul>
</nav>
{children}
</AccountStatusProvider>
</NextIntlClientProvider>
);
Expand Down
3 changes: 1 addition & 2 deletions core/components/ui/tabs/tabs.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import { ComponentPropsWithoutRef, ReactNode } from 'react';

interface Tab {
content: ReactNode;
title: ReactNode;
value: string;
}

Expand All @@ -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>
Expand Down
23 changes: 0 additions & 23 deletions core/tests/visual-regression/components/tabs.spec.ts

This file was deleted.

Binary file not shown.

0 comments on commit cd6a9fc

Please sign in to comment.