Merge branch 'main' into jl/bump-multichain-api-client-0.2.0

Author: jiexi

ui/components/ui/tabs/tab/index.scss

@@ -10,15 +10,21 @@
     color: unset;
     font-weight: 500;
     transition: color 50ms ease, border-color 50ms ease;
+
+    &:not([disabled]) {
+      &:hover {
+        color: var(--color-text-default);
+      }
+    }
   }
 
-  &--single {
-    color: var(--color-text-default);
-    border-bottom: none;
+  &--disabled {
+    color: var(--color-text-muted);
   }
 
-  &:hover {
+  &--single {
     color: var(--color-text-default);
+    border-bottom: none;
   }
 
   &--active {

ui/components/ui/tabs/tab/tab.component.js

@@ -37,13 +37,16 @@ const Tab = (props) => {
       data-testid={dataTestId}
       onClick={(event) => {
         event.preventDefault();
-        onClick(tabIndex);
+        if (!disabled) {
+          onClick(tabIndex);
+        }
       }}
       key={tabKey}
       {...rest}
       className={classnames('tab', className, {
         'tab--single': isSingleTab,
         'tab--active': isActive,
+        'tab--disabled': disabled,
         [activeClassName]: activeClassName && isActive,
         ...rest?.className,
       })}

ui/components/ui/tabs/tab/tab.component.test.tsx

@@ -97,4 +97,23 @@ describe('Tab', () => {
     const { getByTestId } = renderTab({ name: complexName });
     expect(getByTestId('complex-name')).toBeInTheDocument();
   });
+
+  it('applies disabled class when disabled is true', () => {
+    const { container } = renderTab({ disabled: true });
+    expect(container.firstChild).toHaveClass('tab--disabled');
+  });
+
+  it('does not call onClick when disabled and clicked', () => {
+    const onClick = jest.fn();
+    const { getByRole } = renderTab({ disabled: true, onClick });
+
+    fireEvent.click(getByRole('button'));
+
+    expect(onClick).not.toHaveBeenCalled();
+  });
+
+  it('applies disabled attribute to button when disabled', () => {
+    const { getByRole } = renderTab({ disabled: true });
+    expect(getByRole('button')).toHaveAttribute('disabled');
+  });
 });

ui/components/ui/tabs/tabs.stories.js

@@ -4,46 +4,37 @@ import Tabs from './tabs.component';
 
 export default {
   title: 'Components/UI/Tabs',
+  component: Tabs,
+};
 
-  argTypes: {
-    tabs: {
-      control: 'object',
-      name: 'Tabs',
-    },
-    defaultActiveTabKey: {
-      control: {
-        type: 'text',
-      },
-    },
-    onTabClick: { action: 'onTabClick' },
-    onChange: { action: 'onChange' },
-  },
+export const Default = {
   args: {
-    tabs: [
-      { name: 'Tab A', content: 'Tab A Content' },
-      { name: 'Tab B', content: 'Tab B Content' },
-      { name: 'Tab C', content: 'Tab C Content' },
+    children: [
+      <Tab key="tab1" name="Tab 1" tabKey="tab1">
+        Content 1
+      </Tab>,
+      <Tab key="tab2" name="Tab 2" tabKey="tab2">
+        Content 2
+      </Tab>,
+      <Tab key="tab3" name="Tab 3" tabKey="tab3">
+        Content 3
+      </Tab>,
     ],
   },
 };
 
-function renderTab({ name, content }, index) {
-  return (
-    <Tab tabKey={name} key={name + index} name={name}>
-      {content}
-    </Tab>
-  );
-}
-
-export const DefaultStory = (args) => {
-  return (
-    <Tabs
-      defaultActiveTabKey={args.defaultActiveTabKey}
-      onTabClick={args.onTabClick}
-    >
-      {args.tabs.map((tabProps, i) => renderTab(tabProps, i, args.t))}
-    </Tabs>
-  );
+export const Disabled = {
+  args: {
+    children: [
+      <Tab key="tab1" name="Tab 1" tabKey="tab1">
+        Content 1
+      </Tab>,
+      <Tab key="tab2" name="Tab 2" tabKey="tab2" disabled>
+        Content 2 (Disabled)
+      </Tab>,
+      <Tab key="tab3" name="Tab 3" tabKey="tab3">
+        Content 3
+      </Tab>,
+    ],
+  },
 };
-
-DefaultStory.storyName = 'Default';

ui/components/ui/tabs/tabs.test.tsx

@@ -121,4 +121,59 @@ describe('Tabs', () => {
     expect(getByText('Tab 1')).toBeInTheDocument();
     expect(getByText('Tab 1 Content')).toBeInTheDocument();
   });
+
+  it('renders disabled tab with proper styling', () => {
+    const { getByText } = render(
+      <Tabs defaultActiveTabKey="" onTabClick={() => null}>
+        <Tab tabKey="tab1" name="Tab 1">
+          Tab 1 Content
+        </Tab>
+        <Tab tabKey="tab2" name="Tab 2" disabled>
+          Tab 2 Content
+        </Tab>
+      </Tabs>,
+    );
+
+    const disabledTab = getByText('Tab 2').closest('li');
+    expect(disabledTab).toHaveClass('tab--disabled');
+
+    const disabledButton = getByText('Tab 2').closest('button');
+    expect(disabledButton).toHaveAttribute('disabled');
+  });
+
+  it('does not switch to disabled tab when clicked', () => {
+    const { getByText, queryByText } = render(
+      <Tabs defaultActiveTabKey="tab1" onTabClick={() => null}>
+        <Tab tabKey="tab1" name="Tab 1">
+          Tab 1 Content
+        </Tab>
+        <Tab tabKey="tab2" name="Tab 2" disabled>
+          Tab 2 Content
+        </Tab>
+      </Tabs>,
+    );
+
+    fireEvent.click(getByText('Tab 2'));
+
+    expect(getByText('Tab 1 Content')).toBeInTheDocument();
+    expect(queryByText('Tab 2 Content')).not.toBeInTheDocument();
+  });
+
+  it('does not call onTabClick when disabled tab is clicked', () => {
+    const onTabClick = jest.fn();
+    const { getByText } = render(
+      <Tabs defaultActiveTabKey="tab1" onTabClick={onTabClick}>
+        <Tab tabKey="tab1" name="Tab 1">
+          Tab 1 Content
+        </Tab>
+        <Tab tabKey="tab2" name="Tab 2" disabled>
+          Tab 2 Content
+        </Tab>
+      </Tabs>,
+    );
+
+    fireEvent.click(getByText('Tab 2'));
+
+    expect(onTabClick).not.toHaveBeenCalled();
+  });
 });