@axinom/mosaic-ui 0.42.0-rc.3 → 0.42.0-rc.5

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

@@ -0,0 +1,108 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+import { faker } from '@faker-js/faker';
+import { useArgs } from '@storybook/preview-api';
+import { Meta, StoryObj } from '@storybook/react';
+import React, { useMemo } from 'react';
+import { TabsProps } from 'react-tabs';
+import { Tab, TabList, TabPanel, Tabs } from '.';
+import { createGroups } from '../../helpers/storybook';
+
+const groups = createGroups({
+  Storybook: ['amount'],
+});
+
+type TabsStoryComponentProps = React.FC<
+  typeof Tabs & {
+    amount: number;
+    selectedIndex?: number;
+  }
+>;
+
+const meta: Meta<TabsStoryComponentProps> = {
+  title: 'Other Components/Tabs',
+  component: Tabs,
+  argTypes: {
+    ...groups,
+    amount: {
+      ...groups.amount,
+      description: '<b>[Storybook only]</b> The amount of tabs to render.',
+      type: 'number',
+      control: { type: 'number', min: 0, max: 30 },
+    },
+    children: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+  args: {
+    amount: 3,
+  },
+};
+
+const generateItems = (count: number): [JSX.Element[], JSX.Element[]] => {
+  const tabs = [];
+  const panels = [];
+
+  for (let i = 0; i < count; i++) {
+    const title = faker.random.words(faker.datatype.number({ min: 1, max: 3 }));
+    tabs.push(<Tab key={i}>{title}</Tab>);
+    panels.push(
+      <TabPanel key={i}>
+        <h2>{title}</h2>
+        <p>{faker.lorem.paragraph(20)}</p>
+      </TabPanel>,
+    );
+  }
+
+  return [tabs, panels];
+};
+
+export default meta;
+
+export const Default: StoryObj<TabsStoryComponentProps> = {
+  render: (props) => {
+    const [tabs, panels] = generateItems(props.amount);
+
+    return (
+      <Tabs>
+        <TabList>{tabs}</TabList>
+        {panels}
+      </Tabs>
+    );
+  },
+};
+
+export const Controlled: StoryObj<TabsStoryComponentProps> = {
+  argTypes: {
+    ...meta.argTypes,
+    selectedIndex: {
+      ...groups.amount,
+      description: '<b>[Storybook only]</b> Index of the selected Tab.',
+      type: 'number',
+      control: { type: 'number', min: 0, max: 30 },
+    },
+  },
+  args: {
+    ...meta.args,
+    selectedIndex: 0,
+  },
+  render: (props) => {
+    const [tabs, panels] = useMemo(
+      () => generateItems(props.amount),
+      [props.amount],
+    );
+    const [{ selectedIndex }, updateArgs] = useArgs();
+
+    const onSelect: TabsProps['onSelect'] = (index) => {
+      updateArgs({ selectedIndex: index });
+    };
+
+    return (
+      <Tabs selectedIndex={selectedIndex} onSelect={onSelect}>
+        <TabList>{tabs}</TabList>
+        {panels}
+      </Tabs>
+    );
+  },
+};

package/src/components/Tabs/index.ts

@@ -0,0 +1,4 @@
+export { Tabs } from 'react-tabs';
+export { Tab } from './Tab';
+export { TabList } from './TabList';
+export { TabPanel } from './TabPanel';

package/src/styles/variables.scss

@@ -207,6 +207,9 @@ $radio-checked-fill-color: $blue;
 $toggle-button-stroke-color: $blue;
 $toggle-button-off-text-color: $blue;
 $toggle-button-on-bg-color: $blue;
+$live-suggest-border-color: $blue;
+$live-suggest-background-selected-color: rgba($blue, 0.15);
+$live-suggest-text-color: $blue;
 
 /* Inline Menu */
 $inline-menu-button-stroke-color: $blue;