diff --git a/packages/components/src/Tabs/Tab.tsx b/packages/components/src/Tabs/Tab.tsx index 3faacee0..fed46720 100644 --- a/packages/components/src/Tabs/Tab.tsx +++ b/packages/components/src/Tabs/Tab.tsx @@ -13,6 +13,7 @@ type Props = { hide?: boolean; dark?: boolean; small?: boolean; + disabled?: boolean; }; export default function Tab(props: Props) { @@ -36,7 +37,10 @@ export default function Tab(props: Props) { {props.renderOnlyChild ? ( props.children ) : ( - setActiveTabIndex(props.index)}> + setActiveTabIndex(props.index)} + disabled={props.disabled} + > {props.children} )} diff --git a/packages/components/src/__stories__/Tabs.stories.tsx b/packages/components/src/__stories__/Tabs.stories.tsx index e1d8baf0..c2c2dfac 100644 --- a/packages/components/src/__stories__/Tabs.stories.tsx +++ b/packages/components/src/__stories__/Tabs.stories.tsx @@ -77,6 +77,25 @@ export const HideLastTab: Story = { }, }; +export const DisableLastTab: Story = { + args: { + initialActiveIndex: 0, + children: [ + + {tabs.map((tab, index) => ( + + {tab} + + ))} + + Tab 3 + + , + ...panels, + ], + }, +}; + export const TabWithLink: Story = { args: { children: [ diff --git a/packages/components/src/__tests__/Tabs.test.tsx b/packages/components/src/__tests__/Tabs.test.tsx index cdf8a449..55673245 100644 --- a/packages/components/src/__tests__/Tabs.test.tsx +++ b/packages/components/src/__tests__/Tabs.test.tsx @@ -5,7 +5,7 @@ import { Tab, TabList, TabPanel, Tabs } from "../Tabs"; const mocks = [ { tabWord: "zero", panelWord: "Cero" }, { tabWord: "one", panelWord: "Uno" }, - { tabWord: "two", panelWord: "Dos" }, + { tabWord: "two", panelWord: "Dos", disabled: true }, { tabWord: "three", panelWord: "Tres", hide: true }, ]; @@ -37,6 +37,7 @@ describe("test Tabs", () => { key={`tab-${mock.tabWord}`} aria-label="tab" hide={mock.hide} + disabled={mock.disabled} > {mock.tabWord} @@ -56,6 +57,8 @@ describe("test Tabs", () => { if (mocks[i].hide) { expect(screen.queryByText(mocks[i].panelWord)).not.toBeInTheDocument(); expect(screen.queryByText(mocks[i].tabWord)).not.toBeInTheDocument(); + } else if (mocks[i].disabled) { + expect(buttons[i]).toBeDisabled(); } else { if (i !== 0) { fireEvent.click(buttons[i]);