pixel-react 1.6.9 → 1.7.0

package/src/components/Tabs/Tabs.scss

@@ -1,132 +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-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;
-  }
-}
+@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,153 +1,153 @@
-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;
+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;