oddsgate-ds 1.0.73 → 1.0.75

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.75",
   "description": "Miew theme component library",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -14,6 +14,7 @@
     "./package.json": "./package.json"
   },
   "scripts": {
+    "publish": "yarn bump-version && yarn build && npm publish",
     "build": "npm run clean && rollup -c --bundleConfigAsCjs",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",

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

@@ -1,7 +1,7 @@
+import { colors, responsiveMedia } from '@/styles/variables';
 import styled, { css } from 'styled-components';
 
 import { ICounter } from './Counter.interface';
-import { colors } from '@/styles/variables';
 
 export const StyledCounter = styled.div<ICounter>`
   display: inline-flex;
@@ -10,12 +10,18 @@ export const StyledCounter = styled.div<ICounter>`
   justify-content: center;
   align-items: center;
 
-  min-width: 20rem;
-  min-height: 20rem;
+  min-width: 10rem;
+  min-height: 10rem;
 
   padding: 8px 22px;
   border-radius: 100%;
   text-align: center;
+  margin: 12px;
 
   background-color: ${colors.third10};
+
+  @media only screen and (min-width: ${responsiveMedia}) {
+    min-width: 20rem;
+    min-height: 20rem;
+  }
 `;

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/molecules/BlogCard/BlogCard.theme.ts

@@ -10,7 +10,7 @@ export const StyledBlogCard = styled(Card) <IBlogCard>`
   padding: 1rem;
   color: ${colors.secondary50};
   background-color: ${colors.primary50};
-  border-radius: ${radius.sm};
+  border-radius: ${radius.md};
   text-align: center;
 
   ${StyledChip}{

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

@@ -10,7 +10,7 @@ export const StyledNewsCard = styled(Card) <INewsCard>`
   padding: 1rem;
   color: ${colors.secondary50};
   background-color: ${colors.third10};
-  border-radius: ${radius.sm};
+  border-radius: ${radius.md};
   text-align:center;
 
   ${StyledChip}{

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

@@ -31,8 +31,6 @@ const CircularSlider = ({
   const sliderSize = isMobile ? 2.6 : 1;
   const slideSize = isMobile ? 0.12 : 0.15;
 
-  console.log(isMobile);
-
   //force 12 items
   if (content && content.length < 12) {
     let counter = 0;
@@ -108,9 +106,10 @@ const CircularSlider = ({
     };
     const removeStyle = () => {
       contentHolder?.current?.classList.remove('active');
+      const prevElement = slides[currentSlide];
       setTimeout(() => {
         content && setSlideContent(content[currentSlide] as any)
-        slides[currentSlide].classList.remove('active');
+        prevElement.classList.remove('active');
       }, 400);
     };
 
@@ -127,7 +126,10 @@ const CircularSlider = ({
       if (currentSlide === 0 && newSlide === (slides.length - 1)) {
         multiplier = -1;
         direction = "-";
-      } else {
+      } else if(currentSlide === (slides.length - 1) && newSlide === 0) {
+        multiplier = 1;
+        direction = "+";
+      }else{
         multiplier = newSlide - currentSlide
         direction = currentSlide < newSlide ? "+" : "-";
       }

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

@@ -31,13 +31,13 @@ export const StyledCircularSliderWrapper = styled.div<ICircularSlider>`
   justify-content: center;
   margin: 0 auto;
   margin-right: 0;
-  top: 50%;
+  /* top: 50%;
   transform: translate(23%, -50%);
 
   @media only screen and (min-width: ${responsiveMedia}) {
     transform: translate(65%, -50%);
 
-  }
+  } */
 `;
 
 export const StyledCircularSliderSlides = styled.div<ICircularSlider>`

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

@@ -11,22 +11,39 @@ import { ITabs } from './Tabs.interface'
 
 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)
+    setActive(index);
+
+    // setTimeout(() => {
+    //   document.querySelector(`.tabs-menu`).style.height = "auto";
+    // }, 350)
   }
 
+  const setTabsHeight = () => {
+    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`;
+  }
+
+  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>
+        <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 +53,13 @@ const Tabs = ({ id, title, menu, vertical, className, style }: ITabs) => {
                   >
                     <span>{item.label}</span>
                   </StyledTabsLinks>
-                </li>
+                </div>
               )
             })}
         </StyledTabsMenu>
       </div>
       {menu && (
-        <div>
+        <div ref={tabsContent as any}>
           {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;
   }
@@ -38,18 +32,21 @@ export const StyledTabsLinks = styled.a<ITabsItem>`
   `}
 `
 
-
 export const StyledTabsContent = styled.div<ITabsItem>`
-  display: none;
+  position: absolute;
+  top: 0;
+  left: 0%;
+  display: flex;
   flex-flow: row wrap;
 
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+
   background-color: ${colors.primary50};
   border-radius: 48px 0;
   padding: 36px;
 
-  opacity: 0;
-  transform: translateY(40px);
-
   @media only screen and (min-width: ${responsiveMedia}) {
     min-height: 40rem;
   }
@@ -71,14 +68,10 @@ 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;
+    opacity: 1;
+    visibility: visible;
+    pointer-events: auto;
   `}
 
 `
@@ -86,10 +79,13 @@ export const StyledTabsContent = styled.div<ITabsItem>`
 export const StyledTabs = styled.div<ITabs>`
   position: relative;
   display: flex;
-  align-items: center;
   flex-flow: column;
   gap: 16px;
 
+  & > div{
+  width: 100%;
+  }
+
   ${({ vertical }) => vertical && `
     @media only screen and (min-width: ${responsiveMedia}) {
       flex-flow: row;
@@ -100,12 +96,14 @@ export const StyledTabs = styled.div<ITabs>`
           flex-grow: 1;
         }
         &:last-child{
+          position:relative;
           width: 40%;
           flex-shrink: 1;
         }
       }
 
       ${StyledTabsMenu}{
+        display: inline-flex;
         flex-flow: column;
         align-items: stretch;
         justify-content: flex-start;