oddsgate-ds 1.0.169 → 1.0.174

package/src/components/organisms/Tabs/Tabs.component.tsx

@@ -1,88 +1,88 @@
-import React, { useEffect, useRef, useState } from 'react'
-import {
-  StyledTabs,
-  StyledTabsContent,
-  StyledTabsLinks,
-  StyledTabsMenu
-} from './Tabs.theme'
-
-import Heading from '@/components/atoms/Heading/Heading.component'
-import { ITabs } from './Tabs.interface'
-import { debounce } from '@/helpers/events'
-
-const Tabs = ({ id, title, menu, vertical, className, style }: ITabs) => {
-  const [active, setActive] = useState(0)
-  const tabsContent = useRef<HTMLDivElement>();
-
-  const setActiveEl = (item, index) => {
-    if (item?.onClick) item?.onClick()
-
-    setActive(index);
-  }
-
-
-  const setTabsHeight = debounce(() => {
-    if (!tabsContent.current) return;
-
-    const heights: number[] = [];
-    Array.from(tabsContent?.current?.children).map((child: any) => {
-      heights.push(child?.offsetHeight as number)
-    })
-    tabsContent.current.style.height = `${Math.max(...heights)}px`;
-  }, 250)
-
-  useEffect(()=>{
-    setTabsHeight();
-    window.addEventListener('resize', setTabsHeight);
-
-    return () => {
-      window.removeEventListener('resize', setTabsHeight);
-    }
-  }, [])
-
-
-  return (
-    <StyledTabs id={id} $vertical={vertical} className={className} style={style}>
-      <div>
-        {title && <Heading tag="h3" size="h1" className='text-uppercase mb-4'>{title}</Heading>}
-        <StyledTabsMenu align='left'>
-          {menu &&
-            menu.map((item, index) => {
-              return (
-                <div key={`tab-${item.id}`}>
-                  <StyledTabsLinks
-                    $active={index === active}
-                    className='h3 fw-bold'
-                    onClick={() => {
-                      setActiveEl(item, index);
-                    }}
-                  >
-                    <span>{item.label}</span>
-                  </StyledTabsLinks>
-                </div>
-              )
-            })}
-        </StyledTabsMenu>
-      </div>
-      {menu && (
-        <div ref={tabsContent as any} className='position-relative'>
-          {menu.map((item, index) => {
-            return (
-              <StyledTabsContent
-                key={`tab-content-${item.id}`}
-                $active={index === active}
-                className='h4'
-              >
-
-                <div>{item.content}</div>
-                <Heading tag='span' size='h3' className='color-secondary50 fw-bold mt-5'>{item.label}</Heading>
-              </StyledTabsContent>
-            )
-          })}
-        </div>
-      )}
-    </StyledTabs>
-  )
-}
-
-export default Tabs
+import React, { useEffect, useRef, useState } from 'react'
+import {
+  StyledTabs,
+  StyledTabsContent,
+  StyledTabsLinks,
+  StyledTabsMenu
+} from './Tabs.theme'
+
+import Heading from '@/components/atoms/Heading/Heading.component'
+import { ITabs } from './Tabs.interface'
+import { debounce } from '@/helpers/events'
+
+const Tabs = ({ id, title, menu, vertical, className, style }: ITabs) => {
+  const [active, setActive] = useState(0)
+  const tabsContent = useRef<HTMLDivElement>();
+
+  const setActiveEl = (item, index) => {
+    if (item?.onClick) item?.onClick()
+
+    setActive(index);
+  }
+
+
+  const setTabsHeight = debounce(() => {
+    if (!tabsContent.current) return;
+
+    const heights: number[] = [];
+    Array.from(tabsContent?.current?.children).map((child: any) => {
+      heights.push(child?.offsetHeight as number)
+    })
+    tabsContent.current.style.height = `${Math.max(...heights)}px`;
+  }, 250)
+
+  useEffect(()=>{
+    setTabsHeight();
+    window.addEventListener('resize', setTabsHeight);
+
+    return () => {
+      window.removeEventListener('resize', setTabsHeight);
+    }
+  }, [])
+
+
+  return (
+    <StyledTabs id={id} $vertical={vertical} className={className} style={style}>
+      <div>
+        {title && <Heading tag="h3" size="h1" className='text-uppercase mb-4'>{title}</Heading>}
+        <StyledTabsMenu align='left'>
+          {menu &&
+            menu.map((item, index) => {
+              return (
+                <div key={`tab-${item.id}`}>
+                  <StyledTabsLinks
+                    $active={index === active}
+                    className='h3 fw-bold'
+                    onClick={() => {
+                      setActiveEl(item, index);
+                    }}
+                  >
+                    <span>{item.label}</span>
+                  </StyledTabsLinks>
+                </div>
+              )
+            })}
+        </StyledTabsMenu>
+      </div>
+      {menu && (
+        <div ref={tabsContent as any} className='position-relative'>
+          {menu.map((item, index) => {
+            return (
+              <StyledTabsContent
+                key={`tab-content-${item.id}`}
+                $active={index === active}
+                className='h4'
+              >
+
+                <div>{item.content}</div>
+                <Heading tag='span' size='h3' className='color-secondary50 fw-bold mt-5'>{item.label}</Heading>
+              </StyledTabsContent>
+            )
+          })}
+        </div>
+      )}
+    </StyledTabs>
+  )
+}
+
+export default Tabs

package/src/components/organisms/Tabs/Tabs.interface.ts

@@ -1,18 +1,18 @@
-import { CSSProperties } from 'react';
-
-export interface ITabs {
-  id?: string
-  title?: string
-  menu?: ITabsItem[]
-  vertical?: boolean
-  $vertical?: boolean
-  className?: string
-  style?: CSSProperties
-}
-export interface ITabsItem {
-  id?: string
-  label?: string
-  $active?: boolean
-  content?: React.ReactNode
-  onClick?: (event?: React.MouseEvent<HTMLElement>) => void
-}
+import { CSSProperties } from 'react';
+
+export interface ITabs {
+  id?: string
+  title?: string
+  menu?: ITabsItem[]
+  vertical?: boolean
+  $vertical?: boolean
+  className?: string
+  style?: CSSProperties
+}
+export interface ITabsItem {
+  id?: string
+  label?: string
+  $active?: boolean
+  content?: React.ReactNode
+  onClick?: (event?: React.MouseEvent<HTMLElement>) => void
+}

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

@@ -1,118 +1,118 @@
-import type { Meta, StoryObj } from '@storybook/react'
-
-import { ITabs } from './Tabs.interface'
-import React from 'react'
-import RichText from '@/components/atoms/RichText'
-import Tabs from './Tabs.component'
-
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-  title: 'Components/Tabs',
-  component: Tabs
-} as Meta
-
-export const Simple: StoryObj<ITabs> = {
-  render: args => <Tabs {...args}></Tabs>,
-  args: {
-    title: 'Lorem ipsum dolor sit amet',
-    vertical: true,
-    menu: [
-      {
-        id: 'lorem-1',
-        label: 'Lorem 1',
-        content: (
-          <RichText style={{ color: 'var(--color-gray50)' }}>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
-            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-            aliquip ex ea commodo consequat. Duis aute irure dolor in
-            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-            pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
-            culpa qui officia deserunt mollit anim id est laborum.
-          </RichText>
-        ),
-        onClick: () => {
-          alert('Tab clicked')
-        }
-      },
-      {
-        id: 'lorem-2',
-        label: 'Lorem 2',
-        content: (
-          <RichText style={{ color: 'var(--color-gray50)' }}>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
-            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-            aliquip ex ea commodo consequat. Duis aute irure dolor in
-            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-            pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
-            culpa qui officia deserunt mollit anim id est eiusmod tempor
-            incididunt ut labore et dolore magna aliqua. Ut enim ad minim
-            veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
-            ea commodo consequat. Duis aute irure dolor in reprehenderit in
-            voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
-            officia deserunt mollit anim id est laborum.
-          </RichText>
-        )
-      },
-      {
-        id: 'lorem-3',
-        label: 'Lorem 3',
-        content: (
-          <RichText style={{ color: 'var(--color-gray50)' }}>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
-            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-            aliquip ex ea commodo consequat. Duis aute irure dolor in
-          </RichText>
-        )
-      },
-      {
-        id: 'lorem-4',
-        label: 'Lorem 4',
-        content: (
-          <RichText style={{ color: 'var(--color-gray50)' }}>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
-            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-            aliquip ex ea commodo consequat. Duis aute irure dolor in
-            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-            pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
-            culpa qui officia deserunt mollit anim id est laborum.
-          </RichText>
-        )
-      },
-      {
-        id: 'lorem-5',
-        label: 'Lorem 5',
-        content: (
-          <RichText style={{ color: 'var(--color-gray50)' }}>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
-            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-            aliquip ex ea commodo consequat. Duis aute irure dolor in
-            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-            pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
-            culpa qui officia deserunt mollit anim id est laborum.
-          </RichText>
-        )
-      },
-      {
-        id: 'lorem-6',
-        label: 'Lorem 6',
-        content: (
-          <RichText style={{ color: 'var(--color-gray50)' }}>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
-            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-            aliquip ex ea commodo consequat. Duis aute irure dolor in
-            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-            pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
-            culpa qui officia deserunt mollit anim id est laborum.
-          </RichText>
-        )
-      }
-    ]
-  }
-}
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { ITabs } from './Tabs.interface'
+import React from 'react'
+import RichText from '@/components/atoms/RichText'
+import Tabs from './Tabs.component'
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: 'Components/Tabs',
+  component: Tabs
+} as Meta
+
+export const Simple: StoryObj<ITabs> = {
+  render: args => <Tabs {...args}></Tabs>,
+  args: {
+    title: 'Lorem ipsum dolor sit amet',
+    vertical: true,
+    menu: [
+      {
+        id: 'lorem-1',
+        label: 'Lorem 1',
+        content: (
+          <RichText style={{ color: 'var(--color-gray50)' }}>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+            aliquip ex ea commodo consequat. Duis aute irure dolor in
+            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+            pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+            culpa qui officia deserunt mollit anim id est laborum.
+          </RichText>
+        ),
+        onClick: () => {
+          alert('Tab clicked')
+        }
+      },
+      {
+        id: 'lorem-2',
+        label: 'Lorem 2',
+        content: (
+          <RichText style={{ color: 'var(--color-gray50)' }}>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+            aliquip ex ea commodo consequat. Duis aute irure dolor in
+            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+            pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+            culpa qui officia deserunt mollit anim id est eiusmod tempor
+            incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+            veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
+            ea commodo consequat. Duis aute irure dolor in reprehenderit in
+            voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
+            officia deserunt mollit anim id est laborum.
+          </RichText>
+        )
+      },
+      {
+        id: 'lorem-3',
+        label: 'Lorem 3',
+        content: (
+          <RichText style={{ color: 'var(--color-gray50)' }}>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+            aliquip ex ea commodo consequat. Duis aute irure dolor in
+          </RichText>
+        )
+      },
+      {
+        id: 'lorem-4',
+        label: 'Lorem 4',
+        content: (
+          <RichText style={{ color: 'var(--color-gray50)' }}>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+            aliquip ex ea commodo consequat. Duis aute irure dolor in
+            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+            pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+            culpa qui officia deserunt mollit anim id est laborum.
+          </RichText>
+        )
+      },
+      {
+        id: 'lorem-5',
+        label: 'Lorem 5',
+        content: (
+          <RichText style={{ color: 'var(--color-gray50)' }}>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+            aliquip ex ea commodo consequat. Duis aute irure dolor in
+            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+            pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+            culpa qui officia deserunt mollit anim id est laborum.
+          </RichText>
+        )
+      },
+      {
+        id: 'lorem-6',
+        label: 'Lorem 6',
+        content: (
+          <RichText style={{ color: 'var(--color-gray50)' }}>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+            aliquip ex ea commodo consequat. Duis aute irure dolor in
+            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+            pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+            culpa qui officia deserunt mollit anim id est laborum.
+          </RichText>
+        )
+      }
+    ]
+  }
+}