oddsgate-ds 1.0.115 → 1.0.117

package/package.json

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

package/src/components/molecules/ProductCard/ProductCard.component.tsx

@@ -45,7 +45,7 @@ const ProductCard = ({
            {secondRowTitle} 
         </Heading>
       </StyledProductCardWrapper>
-      {description && <RichText tag='p' className='color-secondary50 mt-6'>{description}</RichText>}
+      {description && <RichText tag='p' className='color-secondary50 mt-4'>{description}</RichText>}
 
       {linkElement}
     </StyledProductCard>

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

@@ -26,15 +26,6 @@ const ProductsSlider = ({
   const contentHolder = useRef<HTMLDivElement>();
   const isMobile = useMediaMatch();
 
-  //force 12 items
-  if (content && content.length < 26) {
-    let counter = 0;
-    for (let i = content.length; i <= 26; i++) {
-      content[i] = content[counter];
-      counter++;
-    }
-  }
-
   useEffect(() => {
     if (!slidesHolder.current) return //bail out;
 
@@ -55,25 +46,25 @@ const ProductsSlider = ({
         let x = r * Math.cos(stepAngle * i - Math.PI / 2),
           y = r * Math.sin(stepAngle * i - Math.PI / 2);
 
-        slides[i].style.transform = 'translate( ' + x + 'px, ' + y + 'px ) rotate( ' + (((stepAngle * 180 / Math.PI * i) + 90)) + 'deg )';
+        slides[i].style.transform = 'translate( ' + x + 'px, ' + y + 'px ) rotate( ' + (((stepAngle * 180 / Math.PI * i) + 90) - 90) + 'deg )';
         // slides[i].style.transform = 'translate( ' + x + 'px, ' + y + 'px )';
       };
     }
     const setSize = (radius: number) => {
       if (!wrapper.current || !slidesHolder.current || isMobile) return //bail out;
 
-      const slideSize = 0.08;
+      const slideSize = 0.11;
 
       wrapper.current.style.width = 2 * radius + 'px';
       // wrapper.current.style.height = 2 * radius + 'px';
-      wrapper.current.style.height = '320px';
+      wrapper.current.style.height = '680px';
 
       let r = 2 * radius * (1 - slideSize);
       slidesHolder.current.style.width = r + 'px'
       slidesHolder.current.style.height = r + 'px';
       slidesRepositioning(r / 2);
 
-      slidesSize = Math.min(2 * radius * slideSize, stepAngle * radius * (1 - slideSize) - 80);
+      slidesSize = Math.min(2 * radius * slideSize, stepAngle * radius * (1 - slideSize) - 20);
       slidesHolder.current.style.marginTop = slidesSize + 'px';
 
 
@@ -91,7 +82,7 @@ const ProductsSlider = ({
         w = slider?.current ? slider?.current?.getBoundingClientRect().width : 0,
         h = slider?.current ? slider?.current.getBoundingClientRect().height : 0;
 
-      2 * h <= w ? radius = h * sliderSize : radius = (w / 2) * sliderSize;
+      radius = (w / 2) * sliderSize
 
       setSize(Math.round(radius));
     }, 250)

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

@@ -128,6 +128,5 @@ export const Simple: StoryObj<IProductsSlider> = {
         description: 'My role',
       }
     ],
-    className: "h-100",
   }
 }

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

@@ -6,36 +6,45 @@ import styled from 'styled-components';
 export const StyledProductsSlider = styled.div<IProductsSlider>`
   position: relative;
   width: 100%;
-  overflow: hidden;
+  contain: paint;
 `;
 
 export const StyledProductsSliderWrapper = styled.div<IProductsSlider>`
   position: relative;
-  display: flex;
-  justify-content: center;
+  overflow: hidden;
+
   @media only screen and (min-width: ${responsiveMedia}) {
-    margin: 0 auto;
-    margin-right: 0;
-    transform: translate(-30%, 0%);
+    transform: translateX(-25%);
   }
 `;
 
 export const StyledProductsSliderSlides = styled.div<IProductsSlider>`
+  position: relative;
+  display: flex;
+  flex-flow: row wrap;
+
   @media only screen and (min-width: ${responsiveMedia}) {
-    transform-origin: center;
-    display: flex;
     justify-content: center;
     align-items: center;
-    position: relative;
-    z-index: 100;
-    transform: rotate(0deg);
+
+    transform-origin: center;
     transition: all 0.6s;
+    transform: rotate(0deg);
+    z-index: 100;
   }
 `;
 export const StyledProductsSliderSlide = styled.div<IProductsSlider>`
+  width: 100%;
+  padding: 0.5rem;
+  margin-bottom: 4rem;
+
+  @media only screen and (min-width: 560px) {
+    width: 50%;
+  }
   @media only screen and (min-width: ${responsiveMedia}) {
     position: absolute;
     width: 26rem;
+    margin-bottom: 0;
     transform-origin: center;
     opacity: 0.4;
     transition: .3s linear all;
@@ -45,7 +54,6 @@ export const StyledProductsSliderSlide = styled.div<IProductsSlider>`
       width: 100%;
       height: 100%;
       pointer-events:none;
-      transform: rotate(-90deg);
     }
 
     &.active{
@@ -61,6 +69,6 @@ export const StyledProductsSliderContent = styled.div<IProductsSlider>`
   border-radius: ${radius.md};
   padding: 2rem;
   margin: auto;
-  transform: translateY(135px);
+  transform: translateY(-10vw);
 `;