oddsgate-ds 1.0.115 → 1.0.116

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oddsgate-ds",
-  "version": "1.0.115",
+  "version": "1.0.116",
   "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

@@ -55,7 +55,7 @@ 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 )';
       };
     }
@@ -66,14 +66,14 @@ const ProductsSlider = ({
 
       wrapper.current.style.width = 2 * radius + 'px';
       // wrapper.current.style.height = 2 * radius + 'px';
-      wrapper.current.style.height = '320px';
+      wrapper.current.style.height = '530px';
 
       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 +91,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,44 @@ 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;
+  justify-content: center;
+  align-items: center;
+  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);
     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 +53,6 @@ export const StyledProductsSliderSlide = styled.div<IProductsSlider>`
       width: 100%;
       height: 100%;
       pointer-events:none;
-      transform: rotate(-90deg);
     }
 
     &.active{
@@ -61,6 +68,6 @@ export const StyledProductsSliderContent = styled.div<IProductsSlider>`
   border-radius: ${radius.md};
   padding: 2rem;
   margin: auto;
-  transform: translateY(135px);
+  transform: translateY(-10vw);
 `;