oddsgate-ds 1.0.73 → 1.0.74

package/dist/esm/types/components/organisms/Tabs/Tabs.theme.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { ITabs, ITabsItem } from './Tabs.interface';
-export declare const StyledTabsMenu: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, ITabs>> & string;
+export declare const StyledTabsMenu: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("../../atoms/ScrollingNav/ScrollingNav.interface").IScrollingNav, ITabs>> & string & Omit<({ align, children, className, ...props }: import("../../atoms/ScrollingNav/ScrollingNav.interface").IScrollingNav) => import("react").JSX.Element, keyof import("react").Component<any, {}, any>>;
 export declare const StyledTabsLinks: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, ITabsItem>> & string;
 export declare const StyledTabsContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ITabsItem>> & string;
 export declare const StyledTabs: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ITabs>> & string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oddsgate-ds",
-  "version": "1.0.73",
+  "version": "1.0.74",
   "description": "Miew theme component library",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

package/src/components/atoms/ScrollingNav/ScrollingNav.theme.ts

@@ -40,6 +40,9 @@ export const StyledScrollingNav = styled.div<IScrollingNav>`
             &:first-child {
               margin-left: 0 !important;
             }
+            &:last-child {
+              margin-right: 0 !important;
+            }
           }
         `;
       case "right":

package/src/components/molecules/Accordion/Accordion.theme.ts

@@ -1,5 +1,5 @@
 import { IAccordion, IAccordionItem } from './Accordion.interface';
-import { colors, easeOutExpo } from '@/styles/variables';
+import { colors, easeOutExpo, responsiveMedia } from '@/styles/variables';
 import styled, { css } from 'styled-components';
 
 export const StyledAccordionTitle = styled.span<IAccordionItem>`
@@ -34,6 +34,7 @@ export const StyledAccordionTitle = styled.span<IAccordionItem>`
 
     transition: all 0.6s ${easeOutExpo};
   }
+
 `
 
 export const StyledAccordionContent = styled.div<IAccordionItem>`
@@ -41,12 +42,15 @@ export const StyledAccordionContent = styled.div<IAccordionItem>`
   display: grid;
   grid-template-rows: 0fr;
   overflow: hidden;
-  padding-right: 6rem;
   transition: all 0.5s linear;
 
   ${({ active }) => active && `
     grid-template-rows: 1fr;
   `}
+
+  @media only screen and (max-width: ${responsiveMedia}) {
+    padding-right: 6rem;
+  }
 `
 
 export const StyledAccordionItem = styled.li<IAccordionItem>`

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

@@ -15,18 +15,22 @@ const Tabs = ({ id, title, menu, vertical, className, style }: ITabs) => {
   const setActiveEl = (item, index) => {
     if (item?.onClick) item?.onClick()
 
-    setActive(index)
+    setActive(index);
+
+    // setTimeout(() => {
+    //   document.querySelector(`.tabs-menu`).style.height = "auto";
+    // }, 350)
   }
 
   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>
+        <StyledTabsMenu align='left'>
           {menu &&
             menu.map((item, index) => {
               return (
-                <li key={`tab-${item.id}`}>
+                <div key={`tab-${item.id}`}>
                   <StyledTabsLinks
                     $active={index === active}
                     className='h3 fw-bold'
@@ -36,13 +40,13 @@ const Tabs = ({ id, title, menu, vertical, className, style }: ITabs) => {
                   >
                     <span>{item.label}</span>
                   </StyledTabsLinks>
-                </li>
+                </div>
               )
             })}
         </StyledTabsMenu>
       </div>
       {menu && (
-        <div>
+        <div className="tabs-menu">
           {menu.map((item, index) => {
             return (
               <StyledTabsContent

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

@@ -2,16 +2,10 @@ import { ITabs, ITabsItem } from './Tabs.interface';
 import { colors, responsiveMedia } from '@/styles/variables';
 import styled, { css, keyframes } from 'styled-components';
 
-export const StyledTabsMenu = styled.ul<ITabs>`
-  display: inline-flex;
-  flex-flow: column;
-
-  gap: 16px;
-  list-style: none;
-  padding: 0;
+import ScrollingNav from '@/components/atoms/ScrollingNav/ScrollingNav.component';
 
+export const StyledTabsMenu = styled(ScrollingNav) <ITabs>`
   @media only screen and (min-width: ${responsiveMedia}) {
-    flex-flow: row wrap;
     align-items: center;
     justify-content: center;
   }
@@ -47,9 +41,6 @@ export const StyledTabsContent = styled.div<ITabsItem>`
   border-radius: 48px 0;
   padding: 36px;
 
-  opacity: 0;
-  transform: translateY(40px);
-
   @media only screen and (min-width: ${responsiveMedia}) {
     min-height: 40rem;
   }
@@ -71,14 +62,8 @@ export const StyledTabsContent = styled.div<ITabsItem>`
     }
   }
 
-  @keyframes fadeIn{
-    from { display: none; }
-    to { transform: translateY(0px); opacity: 1;}
-  }
-
   ${({ $active }) => $active && `
-    animation: 0.8s fadeIn forwards;
-    display: flex;
+    display:flex;
   `}
 
 `
@@ -90,6 +75,10 @@ export const StyledTabs = styled.div<ITabs>`
   flex-flow: column;
   gap: 16px;
 
+  & > div{
+  width: 100%;
+  }
+
   ${({ vertical }) => vertical && `
     @media only screen and (min-width: ${responsiveMedia}) {
       flex-flow: row;
@@ -106,6 +95,7 @@ export const StyledTabs = styled.div<ITabs>`
       }
 
       ${StyledTabsMenu}{
+        display: inline-flex;
         flex-flow: column;
         align-items: stretch;
         justify-content: flex-start;