oddsgate-ds 1.0.74 → 1.0.75

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oddsgate-ds",
-  "version": "1.0.74",
+  "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/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,6 +11,7 @@ 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()
@@ -22,6 +23,18 @@ const Tabs = ({ id, title, menu, vertical, className, style }: ITabs) => {
     // }, 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>
@@ -46,7 +59,7 @@ const Tabs = ({ id, title, menu, vertical, className, style }: ITabs) => {
         </StyledTabsMenu>
       </div>
       {menu && (
-        <div className="tabs-menu">
+        <div ref={tabsContent as any}>
           {menu.map((item, index) => {
             return (
               <StyledTabsContent

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

@@ -32,11 +32,17 @@ 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;
@@ -63,7 +69,9 @@ export const StyledTabsContent = styled.div<ITabsItem>`
   }
 
   ${({ $active }) => $active && `
-    display:flex;
+    opacity: 1;
+    visibility: visible;
+    pointer-events: auto;
   `}
 
 `
@@ -71,7 +79,6 @@ export const StyledTabsContent = styled.div<ITabsItem>`
 export const StyledTabs = styled.div<ITabs>`
   position: relative;
   display: flex;
-  align-items: center;
   flex-flow: column;
   gap: 16px;
 
@@ -89,6 +96,7 @@ export const StyledTabs = styled.div<ITabs>`
           flex-grow: 1;
         }
         &:last-child{
+          position:relative;
           width: 40%;
           flex-shrink: 1;
         }