feat: wip

Smile-SA · Oct 16, 2023 · 999a5bc · 999a5bc
1 parent 1b7e8ea
commit 999a5bc
Show file tree

Hide file tree

Showing 3 changed files with 93 additions and 21 deletions.
diff --git a/packages/react-front-kit/src/Components/ResponsiveTabs/ResponsiveTabs.mock.tsx b/packages/react-front-kit/src/Components/ResponsiveTabs/ResponsiveTabs.mock.tsx
@@ -30,23 +30,28 @@ export const contents = (
   </>
 );
 
+const style = {
+  fontSize: 16,
+  fontWeight: 600,
+};
+
 export const tabs = [
-  <Tabs.Tab key={1} id="tab-1" value="1">
+  <Tabs.Tab key={1} id="tab-1" style={style} value="1">
     First
   </Tabs.Tab>,
-  <Tabs.Tab key={2} data-testid="test-tab" id="tab-1" value="2">
+  <Tabs.Tab key={2} data-testid="test-tab" id="tab-1" style={style} value="2">
     Second
   </Tabs.Tab>,
-  <Tabs.Tab key={3} value="3">
+  <Tabs.Tab key={3} style={style} value="3">
     Third
   </Tabs.Tab>,
-  <Tabs.Tab key={4} value="4">
+  <Tabs.Tab key={4} style={style} value="4">
     Fourth
   </Tabs.Tab>,
-  <Tabs.Tab key={5} value="5">
+  <Tabs.Tab key={5} style={style} value="5">
     Overflow 1
   </Tabs.Tab>,
-  <Tabs.Tab key={6} value="6">
+  <Tabs.Tab key={6} style={style} value="6">
     Overflow 2
   </Tabs.Tab>,
 ];
diff --git a/packages/react-front-kit/src/Components/ResponsiveTabs/ResponsiveTabs.tsx b/packages/react-front-kit/src/Components/ResponsiveTabs/ResponsiveTabs.tsx
@@ -1,4 +1,5 @@
-import type { TabsProps } from '@mantine/core';
+import type { IDropdownButtonProps } from '../DropdownButton/DropdownButton';
+import type { TabsListProps, TabsProps } from '@mantine/core';
 import type { ReactElement, ReactNode } from 'react';
 
 import { ActionIcon, Tabs } from '@mantine/core';
@@ -9,11 +10,53 @@ import { useLayoutEffect, useState } from 'react';
 
 import { DropdownButton } from '../DropdownButton/DropdownButton';
 
-const useStyles = createStyles(() => ({
+const useStyles = createStyles((theme) => ({
+  button: {
+    '&[data-expanded]': {
+      backgroundColor:
+        theme.colorScheme === 'light'
+          ? theme.colors.gray[0]
+          : theme.colors.dark[6],
+    },
+    ':hover': {
+      background:
+        theme.colorScheme === 'light'
+          ? theme.colors.gray[0]
+          : theme.colors.dark[6],
+    },
+    alignSelf: 'center',
+    marginBottom: 6,
+    marginLeft: 'auto',
+  },
   container: {
     position: 'relative',
   },
   dropdown: {
+    background:
+      theme.colorScheme === 'light' ? theme.white : theme.colors.dark[0],
+    borderColor:
+      theme.colorScheme === 'light' ? theme.white : theme.colors.dark[0],
+    borderRadius: 4,
+    padding: '20px',
+  },
+  dropdownContainer: {
+    '> .mantine-Tabs-tab': {
+      '&[data-active]': {
+        background: theme.colors.gray[0],
+        border: 'none',
+      },
+      ':hover': {
+        backgroundColor: theme.colors.gray[0],
+        border: 'none',
+      },
+      '> span': {
+        color: theme.colorScheme === 'light' ? theme.black : theme.white,
+        fontWeight: 'initial',
+      },
+      border: 'none',
+      borderRadius: 4,
+      padding: '10px',
+    },
     display: 'flex',
     flexDirection: 'column',
   },
@@ -26,18 +69,27 @@ const useStyles = createStyles(() => ({
     visibility: 'hidden',
     width: '100%',
   },
+  tab: {
+    '&[data-active]': {
+      color: theme.colorScheme === 'light' ? theme.black : theme.colors.dark[0],
+    },
+    paddingBottom: 16,
+  },
   tabs: {
     flexWrap: 'nowrap',
   },
 }));
 
 export interface IResponsiveTabs extends TabsProps {
   children: ReactNode;
+  dropdownButtonProps?: IDropdownButtonProps;
   tabs: ReactElement[];
+  tabsListProps?: TabsListProps;
 }
 
 export function ResponsiveTabs(props: IResponsiveTabs): ReactNode {
-  const { children, tabs, ...tabsProps } = props;
+  const { children, tabs, tabsListProps, dropdownButtonProps, ...tabsProps } =
+    props;
   const { ref, width } = useElementSize<HTMLDivElement>();
   const generatedId = useId();
   const overflowButtonId = tabsProps.id
@@ -60,22 +112,31 @@ export function ResponsiveTabs(props: IResponsiveTabs): ReactNode {
   }, [overflowButtonId, ref, tabs.length, width]);
 
   return (
-    <Tabs {...tabsProps} className={classes.container}>
+    <Tabs
+      className={classes.container}
+      classNames={{ tab: classes.tab }}
+      radius="sm"
+      {...tabsProps}
+    >
       <div ref={ref} className={classes.hidden}>
         {tabs}
       </div>
-      <Tabs.List className={classes.tabs}>
+      <Tabs.List className={classes.tabs} grow {...tabsListProps}>
         {tabs.slice(0, overflowIndex)}
         {Boolean(overflowIndex < tabs.length) && (
           <DropdownButton
             buttonComponent={
-              <ActionIcon>
+              <ActionIcon className={classes.button} radius="sm">
                 <CaretDoubleRight />
               </ActionIcon>
             }
+            classNames={{ dropdown: classes.dropdown }}
             id={overflowButtonId}
+            offset={4}
+            position="bottom-end"
+            {...dropdownButtonProps}
           >
-            <div className={classes.dropdown}>
+            <div className={classes.dropdownContainer}>
               {tabs.slice(overflowIndex, tabs.length)}
             </div>
           </DropdownButton>

diff --git a/.../react-front-kit/src/Components/ResponsiveTabs/__snapshots__/ResponsiveTabs.test.tsx.snap b/.../react-front-kit/src/Components/ResponsiveTabs/__snapshots__/ResponsiveTabs.test.tsx.snap
@@ -11,9 +11,10 @@ exports[`ResponsiveTabs matches snapshot 1`] = `
     >
       <button
         aria-selected="false"
-        class="mantine-UnstyledButton-root mantine-Tabs-tab mantine-1z10kp0"
+        class="mantine-UnstyledButton-root mantine-Tabs-tab mantine-1kjub9k"
         id="responsive-tabs-tab-1"
         role="tab"
+        style="font-size: 16px; font-weight: 600;"
         tabindex="0"
         type="button"
       >
@@ -25,10 +26,11 @@ exports[`ResponsiveTabs matches snapshot 1`] = `
       </button>
       <button
         aria-selected="false"
-        class="mantine-UnstyledButton-root mantine-Tabs-tab mantine-1z10kp0"
+        class="mantine-UnstyledButton-root mantine-Tabs-tab mantine-1kjub9k"
         data-testid="test-tab"
         id="responsive-tabs-tab-2"
         role="tab"
+        style="font-size: 16px; font-weight: 600;"
         tabindex="0"
         type="button"
       >
@@ -40,9 +42,10 @@ exports[`ResponsiveTabs matches snapshot 1`] = `
       </button>
       <button
         aria-selected="false"
-        class="mantine-UnstyledButton-root mantine-Tabs-tab mantine-1z10kp0"
+        class="mantine-UnstyledButton-root mantine-Tabs-tab mantine-1kjub9k"
         id="responsive-tabs-tab-3"
         role="tab"
+        style="font-size: 16px; font-weight: 600;"
         tabindex="0"
         type="button"
       >
@@ -54,9 +57,10 @@ exports[`ResponsiveTabs matches snapshot 1`] = `
       </button>
       <button
         aria-selected="false"
-        class="mantine-UnstyledButton-root mantine-Tabs-tab mantine-1z10kp0"
+        class="mantine-UnstyledButton-root mantine-Tabs-tab mantine-1kjub9k"
         id="responsive-tabs-tab-4"
         role="tab"
+        style="font-size: 16px; font-weight: 600;"
         tabindex="0"
         type="button"
       >
@@ -68,9 +72,10 @@ exports[`ResponsiveTabs matches snapshot 1`] = `
       </button>
       <button
         aria-selected="false"
-        class="mantine-UnstyledButton-root mantine-Tabs-tab mantine-1z10kp0"
+        class="mantine-UnstyledButton-root mantine-Tabs-tab mantine-1kjub9k"
         id="responsive-tabs-tab-5"
         role="tab"
+        style="font-size: 16px; font-weight: 600;"
         tabindex="0"
         type="button"
       >
@@ -82,9 +87,10 @@ exports[`ResponsiveTabs matches snapshot 1`] = `
       </button>
       <button
         aria-selected="false"
-        class="mantine-UnstyledButton-root mantine-Tabs-tab mantine-1z10kp0"
+        class="mantine-UnstyledButton-root mantine-Tabs-tab mantine-1kjub9k"
         id="responsive-tabs-tab-6"
         role="tab"
+        style="font-size: 16px; font-weight: 600;"
         tabindex="0"
         type="button"
       >
@@ -97,14 +103,14 @@ exports[`ResponsiveTabs matches snapshot 1`] = `
     </div>
     <div
       aria-orientation="horizontal"
-      class="mantine-Tabs-tabsList mantine-i7gwaj"
+      class="mantine-Tabs-tabsList mantine-1c0ih2u"
       role="tablist"
     >
       <button
         aria-controls="responsive-tabs-overflow-button-dropdown"
         aria-expanded="false"
         aria-haspopup="menu"
-        class="mantine-UnstyledButton-root mantine-ActionIcon-root mantine-3zan65"
+        class="mantine-UnstyledButton-root mantine-ActionIcon-root mantine-1wqogov"
         id="responsive-tabs-overflow-button-target"
         type="button"
       >