pixel-react 1.6.6 → 1.6.8

package/src/components/Tabs/Tabs.scss

@@ -1,79 +1,132 @@
-@use '../../assets/styles/colors';
-@use '../../assets/styles/fonts';
-
-.ff-tabs-container {
-  box-sizing: border-box;
-
-  .ff-tab-row {
-    &--default {
-      display: flex;
-      gap: 8px;
-      border: 1px solid var(--tabs-border-color);
-      border-radius: 8px 8px 0 0;
-      padding: 7px 8px 0;
-
-      .ff-tab-button {
-        &--default {
-          border: none;
-          background: none;
-          padding: 0 4px;
-          display: flex;
-          flex-direction: column;
-          cursor: pointer;
-
-          .ff-tab-label {
-            padding-bottom: 4px;
-          }
-
-          .ff-tab-bar {
-            width: 100%;
-            border-radius: 2px 2px 0 0;
-
-            &--active {
-              border-top: 2px solid var(--tabs-label-active-color);
-            }
-          }
-
-          &.disabled {
-            opacity: 0.5;
-            cursor: not-allowed;
-          }
-        }
-      }
-    }
-
-    &--capsule {
-      display: flex;
-      gap: 8px;
-      border: 1px solid var(--tabs-border-color);
-      border-radius: 8px;
-      padding: 3px 4px;
-      background-color: var(--tabs-bg-color);
-
-      .ff-tab-button {
-        &--capsule {
-          background: transparent;
-          border: none;
-          padding: 3px 4px;
-          border-radius: 4px;
-          cursor: pointer;
-
-          &.active {
-            background-color: var(--tab-bg-color);
-          }
-
-          .ff-tab-bar {
-            display: none;
-          }
-        }
-      }
-    }
-    &--no-border {
-      border: none;
-    }
-  }
-
-  .ff-tab-content {
-    width: inherit;
-  }
-}
+@use '../../assets/styles/colors';
+@use '../../assets/styles/fonts';
+
+.ff-tabs-container {
+  box-sizing: border-box;
+
+  .ff-tab-row {
+    &--default {
+      display: flex;
+      gap: 8px;
+      border-radius: 8px 8px 0 0;
+      padding: 6px 8px 0;
+
+      .ff-tab-button {
+        &--default {
+          border: none;
+          background: none;
+          padding: 0 4px;
+          display: flex;
+          flex-direction: column;
+          gap: 4px;
+          cursor: pointer;
+
+          .label-count-section {
+            display: flex;
+            align-items: center;
+            gap: 5px;
+
+            .tab-count {
+              background-color: var(--input-default-label-color);
+              color: var(--tab-bg-color);
+              height: 12px;
+              border-radius: 4px;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              font-size: 8px;
+              font-weight: 600;
+              padding: 0 2px;
+              &--active {
+                background-color: var(--tabs-label-active-color);
+              }
+            }
+          }
+          .ff-tab-bar {
+            width: 100%;
+            border-radius: 2px 2px 0 0;
+            border-color: var(--input-default-label-color);
+
+            &--active {
+              border-top: 2px solid var(--tabs-label-active-color);
+            }
+          }
+
+          &:hover {
+            .ff-tab-bar {
+              border-top: 2px solid var(--input-hover-border-color);
+
+              &--active {
+                border-top: 2px solid var(--tabs-label-active-color);
+              }
+            }
+
+            .ff-tab-label {
+              color: var(--input-hover-border-color) !important;
+
+              &--active {
+                color: var(--tabs-label-active-color) !important;
+              }
+            }
+            .tab-count {
+              background-color: var(--input-hover-border-color);
+              &--active {
+                background-color: var(--tabs-label-active-color);
+              }
+            }
+          }
+
+          &.disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+          }
+        }
+      }
+    }
+
+    &--capsule {
+      display: flex;
+      gap: 8px;
+      border: 1px solid var(--tabs-border-color);
+      border-radius: 8px;
+      padding: 3px 4px;
+      background-color: var(--tabs-bg-color);
+
+      .ff-tab-button {
+        &--capsule {
+          background: transparent;
+          border: none;
+          padding: 3px 4px;
+          border-radius: 4px;
+          cursor: pointer;
+
+          &:hover {
+            .ff-tab-label {
+              color: var(--input-hover-border-color) !important;
+
+              &--active {
+                color: var(--tabs-label-active-color) !important;
+              }
+            }
+          }
+
+          &.active {
+            background-color: var(--tab-bg-color);
+          }
+
+          .ff-tab-bar {
+            display: none;
+          }
+        }
+      }
+    }
+
+    &--no-border {
+      border: none;
+    }
+  }
+
+  .ff-tab-content {
+    width: inherit;
+  }
+}

package/src/components/Tabs/Tabs.stories.tsx

@@ -1,134 +1,153 @@
-import { useState } from 'react';
-import { Meta, StoryObj } from '@storybook/react';
-import Tabs from './Tabs';
-import Typography from '../Typography';
-
-const meta: Meta<typeof Tabs> = {
-  title: 'Components/Tabs',
-  component: Tabs,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-};
-
-type Story = StoryObj<typeof Tabs>;
-
-const TabContentOne = () => (
-  <div>
-    <Typography as="h1" children="Tab--1" fontSize={32} fontWeight="bold" />
-    <Typography as="p" children="This is the content for Tab - 1" />
-  </div>
-);
-const TabContentTwo = () => (
-  <div>
-    <Typography as="h1" children="Tab--2" fontSize={32} fontWeight="bold" />
-    <Typography as="p" children="This is the content for Tab - 2" />
-  </div>
-);
-const TabContentThree = () => (
-  <div>
-    <Typography as="h1" children="Tab--3" fontSize={32} fontWeight="bold" />
-    <Typography as="p" children="This is the content for Tab - 3" />
-  </div>
-);
-const TabContentFour = () => (
-  <div>
-    <Typography as="h1" children="Tab--4" fontSize={32} fontWeight="bold" />
-    <Typography as="p" children="This is the content for Tab - 4" />
-  </div>
-);
-
-const tabsData = [
-  { id: 'tab-1', label: 'Tab--1', component: <TabContentOne /> },
-  { id: 'tab-2', label: 'Tab--2', component: <TabContentTwo /> },
-  { id: 'tab-3', label: 'Tab--3', component: <TabContentThree /> },
-];
-
-export const DefaultTabs: Story = {
-  render: () => {
-    const [activeTabIdDefault, setActiveTabIdDefault] = useState<string>('tab-1');
-
-    return (
-      <Tabs
-        tabsData={tabsData}
-        activeTabId={activeTabIdDefault}
-        onTabClick={setActiveTabIdDefault}
-      />
-    );
-  },
-};
-export const CapsuleTabs: Story = {
-  render: () => {
-    const [activeTabIdCapsule, setActiveTabIdCapsule] = useState<string>('tab-1');
-
-    const tabsDataForCapsule = [
-      { id: 'tab-1', label: 'Loremipsum_1', component: <TabContentOne /> },
-      { id: 'tab-2', label: 'Loremipsum_2', component: <TabContentTwo /> },
-      { id: 'tab-3', label: 'Loremipsum_3', component: <TabContentThree /> },
-      { id: 'tab-4', label: 'Loremipsum_4', component: <TabContentFour /> },
-      { id: 'tab-5', label: 'Loremipsum_5', component: <TabContentFour /> },
-    ];
-
-    return (
-      <Tabs
-        variant={'capsule'}
-        tabsData={tabsDataForCapsule}
-        activeTabId={activeTabIdCapsule}
-        onTabClick={setActiveTabIdCapsule}
-      />
-    );
-  },
-};
-
-export const TabsWithDisabledTab: Story = {
-  render: () => {
-    const [activeTabId, setActiveTabId] = useState<string>('tab-1');
-
-    const tabsDataWithOneDisableAttribute = [
-      { id: 'tab-1', label: 'Tab--1', component: <TabContentOne /> },
-      {
-        id: 'tab-2',
-        label: 'Tab--2',
-        component: <TabContentTwo />,
-        disabled: true,
-      },
-      { id: 'tab-3', label: 'Tab--3', component: <TabContentThree /> },
-    ];
-
-    return (
-      <Tabs
-        tabsData={tabsDataWithOneDisableAttribute}
-        activeTabId={activeTabId}
-        onTabClick={setActiveTabId}
-      />
-    );
-  },
-};
-
-export const WithoutBorder: Story = {
-  render: () => {
-    const [activeTabIdDefault, setActiveTabIdDefault] = useState<string>('tab-1');
-
-    return (
-      <div style={{ display: 'flex', gap: '10px' }}>
-        <Tabs
-          tabsData={tabsData}
-          activeTabId={activeTabIdDefault}
-          onTabClick={setActiveTabIdDefault}
-          noBorder={true}
-        />{' '}
-        <hr />
-        <Tabs
-          variant="capsule"
-          tabsData={tabsData}
-          activeTabId={activeTabIdDefault}
-          onTabClick={setActiveTabIdDefault}
-          noBorder={true}
-        />
-      </div>
-    );
-  },
-};
-
-export default meta;
+import React, { useState } from 'react';
+import { Meta, StoryObj } from '@storybook/react';
+import Tabs from './Tabs';
+import Typography from '../Typography';
+
+const meta: Meta<typeof Tabs> = {
+  title: 'Components/Tabs',
+  component: Tabs,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+type Story = StoryObj<typeof Tabs>;
+
+const TabContentOne = () => (
+  <div>
+    <Typography as="h1" children="Tab--1" fontSize={32} fontWeight="bold" />
+    <Typography as="p" children="This is the content for Tab - 1" />
+  </div>
+);
+const TabContentTwo = () => (
+  <div>
+    <Typography as="h1" children="Tab--2" fontSize={32} fontWeight="bold" />
+    <Typography as="p" children="This is the content for Tab - 2" />
+  </div>
+);
+const TabContentThree = () => (
+  <div>
+    <Typography as="h1" children="Tab--3" fontSize={32} fontWeight="bold" />
+    <Typography as="p" children="This is the content for Tab - 3" />
+  </div>
+);
+const TabContentFour = () => (
+  <div>
+    <Typography as="h1" children="Tab--4" fontSize={32} fontWeight="bold" />
+    <Typography as="p" children="This is the content for Tab - 4" />
+  </div>
+);
+
+const tabsData = [
+  { id: 'tab-1', label: 'Tab--1', component: <TabContentOne />, count: '02' },
+  { id: 'tab-2', label: 'Tab--2', component: <TabContentTwo />, count: 35 },
+  { id: 'tab-3', label: 'Tab--3', component: <TabContentThree />, count: 205 },
+];
+
+export const DefaultTabs: Story = {
+  render: () => {
+    const [activeTabIdDefault, setActiveTabIdDefault] =
+      useState<string>('tab-1');
+
+    return (
+      <Tabs
+        tabsData={tabsData}
+        activeTabId={activeTabIdDefault}
+        onTabClick={setActiveTabIdDefault}
+      />
+    );
+  },
+};
+export const CapsuleTabs: Story = {
+  render: () => {
+    const [activeTabIdCapsule, setActiveTabIdCapsule] =
+      useState<string>('tab-1');
+
+    const tabsDataForCapsule = [
+      {
+        id: 'tab-1',
+        label: 'Loremipsum_1',
+        component: <TabContentOne />,
+      },
+      {
+        id: 'tab-2',
+        label: 'Loremipsum_2',
+        component: <TabContentTwo />,
+      },
+      {
+        id: 'tab-3',
+        label: 'Loremipsum_3',
+        component: <TabContentThree />,
+      },
+      {
+        id: 'tab-4',
+        label: 'Loremipsum_4',
+        component: <TabContentFour />,
+      },
+      { id: 'tab-5', label: 'Loremipsum_5', component: <TabContentFour /> },
+    ];
+
+    return (
+      <Tabs
+        variant={'capsule'}
+        tabsData={tabsDataForCapsule}
+        activeTabId={activeTabIdCapsule}
+        onTabClick={setActiveTabIdCapsule}
+      />
+    );
+  },
+};
+
+export const TabsWithDisabledTab: Story = {
+  render: () => {
+    const [activeTabId, setActiveTabId] = useState<string>('tab-1');
+
+    const tabsDataWithOneDisableAttribute = [
+      { id: 'tab-1', label: 'Tab--1', component: <TabContentOne /> },
+      {
+        id: 'tab-2',
+        label: 'Tab--2',
+        component: <TabContentTwo />,
+        disabled: true,
+      },
+      { id: 'tab-3', label: 'Tab--3', component: <TabContentThree /> },
+    ];
+
+    return (
+      <Tabs
+        tabsData={tabsDataWithOneDisableAttribute}
+        activeTabId={activeTabId}
+        onTabClick={setActiveTabId}
+      />
+    );
+  },
+};
+
+export const WithoutBorder: Story = {
+  render: () => {
+    const [activeTabIdDefault, setActiveTabIdDefault] =
+      useState<string>('tab-1');
+
+    return (
+      <div style={{ display: 'flex', gap: '10px' }}>
+        <Tabs
+          tabsData={tabsData}
+          activeTabId={activeTabIdDefault}
+          onTabClick={setActiveTabIdDefault}
+          noBorder={true}
+        />{' '}
+        <hr />
+        <Tabs
+          variant="capsule"
+          tabsData={tabsData}
+          activeTabId={activeTabIdDefault}
+          onTabClick={setActiveTabIdDefault}
+          noBorder={true}
+        />
+      </div>
+    );
+  },
+};
+
+export default meta;

package/src/components/Tabs/Tabs.tsx

@@ -1,62 +1,71 @@
-import { TabsProps } from './types';
-import './Tabs.scss';
-import classNames from 'classnames';
-import Typography from '../Typography';
-import '../../assets/styles/_colors.scss';
-
-const Tabs = ({
-  variant = 'default',
-  tabsData,
-  activeTabId,
-  onTabClick,
-  noBorder = false,
-}: TabsProps) => {
-  return (
-    <div className={`ff-tabs-container`}>
-      <div
-        className={classNames(`ff-tab-row--${variant}`, {
-          'ff-tab-row--no-border': noBorder,
-        })}
-      >
-        {tabsData.map((tab) => (
-          <button
-            key={tab.id}
-            onClick={() => !tab.disabled && onTabClick(tab.id)}
-            disabled={tab.disabled}
-            className={classNames(`ff-tab-button--${variant}`, {
-              disabled: tab.disabled,
-              active: activeTabId === tab.id,
-            })}
-          >
-            <Typography
-              children={tab.label}
-              lineHeight="18px"
-              fontWeight={activeTabId === tab.id ? 'semi-bold' : 'regular'}
-              color={
-                activeTabId === tab.id
-                  ? 'var(--tabs-label-active-color)'
-                  : 'var(--tabs-label-default-color)'
-              }
-              className={classNames('ff-tab-label', {
-                'ff-tab-label--active': activeTabId === tab.id,
-              })}
-            />
-
-            <Typography
-              children=""
-              color=""
-              className={classNames('ff-tab-bar', {
-                'ff-tab-bar--active': activeTabId === tab.id,
-              })}
-            />
-          </button>
-        ))}
-      </div>
-      <div className={`ff-tab-content`}>
-        {tabsData.find((tab) => tab.id === activeTabId)?.component}
-      </div>
-    </div>
-  );
-};
-
-export default Tabs;
+import { TabsProps } from './types';
+import './Tabs.scss';
+import classNames from 'classnames';
+import Typography from '../Typography';
+import '../../assets/styles/_colors.scss';
+
+const Tabs = ({
+  variant = 'default',
+  tabsData,
+  activeTabId,
+  onTabClick,
+  noBorder = false,
+}: TabsProps) => {
+  return (
+    <div className={`ff-tabs-container`}>
+      <div
+        className={classNames(`ff-tab-row--${variant}`, {
+          'ff-tab-row--no-border': noBorder,
+        })}
+      >
+        {tabsData.map((tab) => (
+          <button
+            key={tab.id}
+            onClick={() => !tab.disabled && onTabClick(tab.id)}
+            disabled={tab.disabled}
+            className={classNames(`ff-tab-button--${variant}`, {
+              disabled: tab.disabled,
+              active: activeTabId === tab.id,
+            })}
+          >
+            <div className="label-count-section">
+              <Typography
+                children={tab.label}
+                lineHeight="18px"
+                fontWeight={activeTabId === tab.id ? 'semi-bold' : 'regular'}
+                color={
+                  activeTabId === tab.id
+                    ? 'var(--tabs-label-active-color)'
+                    : 'var(--tabs-label-default-color)'
+                }
+                className={classNames('ff-tab-label', {
+                  'ff-tab-label--active': activeTabId === tab.id,
+                })}
+              />
+              {variant === 'default' && tab.count && (
+                <span
+                  className={classNames('tab-count', {
+                    'tab-count--active': activeTabId === tab.id,
+                  })}
+                >
+                  {tab.count}
+                </span>
+              )}
+            </div>
+
+            <div
+              className={classNames('ff-tab-bar', {
+                'ff-tab-bar--active': activeTabId === tab.id,
+              })}
+            ></div>
+          </button>
+        ))}
+      </div>
+      <div className={`ff-tab-content`}>
+        {tabsData.find((tab) => tab.id === activeTabId)?.component}
+      </div>
+    </div>
+  );
+};
+
+export default Tabs;

package/src/components/Tabs/index.ts

@@ -1 +1 @@
-export { default } from './Tabs';
+export { default } from './Tabs';