fix: Table of contents - make tabs of horizontal mode configurable and scrollable (#1286)

* 💄 Make tabs of horizontal table of content scrollable

* 🚧 Improve type hinting

Author: arkadiy93

src/molecules/Tabs/Tabs.types.ts

@@ -12,13 +12,16 @@ export interface Tab<T> {
   disabled?: boolean;
 }
 
-export interface Tabs<T> {
+export interface TabsScrollProps {
+  scrollable?: boolean;
+  amountPerScrollPage?: number;
+}
+
+export interface Tabs<T> extends TabsScrollProps {
   selected: T;
   onChange: (value: T) => void;
   onHover?: (hoveredTabValue: T) => void;
   options: Tab<T>[];
-  scrollable?: boolean;
-  amountPerScrollPage?: number;
   centered?: boolean;
   animated?: boolean;
 }

src/organisms/TableOfContents/TableOfContents.stories.tsx

@@ -5,10 +5,7 @@ import { tokens } from '@equinor/eds-tokens';
 import { faker } from '@faker-js/faker';
 import { Meta, StoryFn, StoryObj } from '@storybook/react-vite';
 
-import {
-  TableOfContents,
-  TableOfContentsProps,
-} from 'src/organisms/TableOfContents/TableOfContents';
+import { TableOfContents } from 'src/organisms/TableOfContents/TableOfContents';
 import {
   TableOfContentsItemType,
   TableOfContentsProvider,
@@ -20,7 +17,12 @@ import styled from 'styled-components';
 
 const { colors } = tokens;
 
-const meta: Meta = {
+type StoryProps = TableOfContentsProviderProps & {
+  mode?: 'vertical' | 'horizontal';
+  onlyShowSelectedChildren?: boolean;
+};
+
+const meta: Meta<StoryProps> = {
   title: 'Organisms/TableOfContents',
   component: TableOfContents,
   parameters: {
@@ -32,7 +34,6 @@ const meta: Meta = {
   argTypes: {
     items: { control: 'object' },
     onlyShowSelectedChildren: { control: 'boolean' },
-    variant: { control: 'radio', items: ['border', 'buttons'] },
   },
   args: {
     items: [
@@ -48,9 +49,20 @@ const meta: Meta = {
         label: 'Third section',
         value: 'id-3',
       },
+      {
+        label: 'Fourth section',
+        value: 'id-4',
+      },
+      {
+        label: 'Fifth section',
+        value: 'id-5',
+      },
+      {
+        label: 'Sixth section',
+        value: 'id-6',
+      },
     ],
     onlyShowSelectedChildren: false,
-    variant: 'buttons',
   },
 };
 
@@ -118,6 +130,9 @@ const COLORS = [
   colors.infographic.substitute__blue_ocean.rgba,
   colors.infographic.substitute__blue_sky.rgba,
   colors.infographic.substitute__blue_overcast.rgba,
+  colors.infographic.substitute__green_cucumber.rgba,
+  colors.infographic.substitute__green_succulent.rgba,
+  colors.infographic.substitute__green_mint.rgba,
 ];
 
 function Section({
@@ -141,8 +156,6 @@ function Section({
   );
 }
 
-type StoryProps = TableOfContentsProviderProps & TableOfContentsProps;
-
 type Story = StoryObj<StoryProps>;
 
 export const Default: Story = {
@@ -235,6 +248,33 @@ export const Horizontal: Story = {
   },
 };
 
+export const HorizontalScrollable: Story = {
+  render: (args) => {
+    return (
+      <div style={{ width: '40rem', maxWidth: '40rem' }}>
+        <TableOfContentsProvider items={args.items}>
+          <HorizontalContainer>
+            <TableOfContents
+              mode="horizontal"
+              tabsProps={{ scrollable: true, amountPerScrollPage: 3 }}
+            />
+            <section>
+              {args.items.map((item, index) => (
+                <Section
+                  key={item.value}
+                  label={item.label}
+                  value={item.value}
+                  color={COLORS[index]}
+                />
+              ))}
+            </section>
+          </HorizontalContainer>
+        </TableOfContentsProvider>
+      </div>
+    );
+  },
+};
+
 const ITEMS_WITH_CHILDREN: TableOfContentsItemType[] = [
   {
     label: '2023',

src/organisms/TableOfContents/TableOfContents.styles.ts

@@ -65,6 +65,7 @@ export const Button = styled.button<ButtonProps>`
 `;
 
 export const HorizontalItemsContainer = styled.div`
+  overflow: hidden;
   button[role='tab'] {
     .count {
       background: ${colors.ui.background__light_medium.rgba};

src/organisms/TableOfContents/TableOfContents.tsx

@@ -5,20 +5,32 @@ import {
   TableOfContentsContainer,
   VerticalItemsContainer,
 } from './TableOfContents.styles';
-import { TableOfContentsMode } from './TableOfContents.types';
 import { TableOfContentsItem } from './TableOfContentsItem';
 import { Tabs } from 'src/molecules/Tabs/Tabs';
+import { TabsScrollProps } from 'src/molecules/Tabs/Tabs.types';
 import { useTableOfContents } from 'src/providers/TableOfContentsProvider';
 import { getValues } from 'src/providers/TableOfContentsProvider.utils';
 
-export interface TableOfContentsProps {
-  mode?: TableOfContentsMode;
+interface TableOfContentsBaseProps {
   onlyShowSelectedChildren?: boolean;
 }
 
+interface TableOfContentsVerticalProps extends TableOfContentsBaseProps {
+  mode?: 'vertical';
+}
+
+interface TableOfContentsHorizontalProps extends TableOfContentsBaseProps {
+  mode: 'horizontal';
+  tabsProps?: TabsScrollProps;
+}
+
+export type TableOfContentsProps =
+  | TableOfContentsVerticalProps
+  | TableOfContentsHorizontalProps;
+
 export const TableOfContents: FC<TableOfContentsProps> = ({
-  mode = 'vertical',
   onlyShowSelectedChildren = true,
+  ...props
 }) => {
   const { items, selected, setSelected } = useTableOfContents();
 
@@ -40,7 +52,7 @@ export const TableOfContents: FC<TableOfContentsProps> = ({
     /* v8 ignore end */
   }, [items, selected]);
 
-  if (mode === 'horizontal') {
+  if (props.mode === 'horizontal') {
     return (
       <HorizontalItemsContainer>
         <Tabs
@@ -49,6 +61,7 @@ export const TableOfContents: FC<TableOfContentsProps> = ({
             if (value) setSelected(value);
           }}
           options={items}
+          {...props.tabsProps}
         />
       </HorizontalItemsContainer>
     );