oddsgate-ds 1.0.27 → 1.0.29

package/package.json

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

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

@@ -29,11 +29,11 @@ const ProductCard = ({
     <StyledProductCard className={className} style={style}>
       <StyledProductCardWrapper>
         <Heading tag={'h3'} size={'h3'} className={'fw-bold'}>
-          {firstRowTitle}
+          &nbsp;{firstRowTitle}&nbsp;
         </Heading>
         {imageElement}
         <Heading tag={'h3'} size={'h3'} className={'fw-bold'}>
-          {secondRowTitle}
+          &nbsp;{secondRowTitle}&nbsp;
         </Heading>
       </StyledProductCardWrapper>
       {description && <RichText tag='p' className='color-secondary50 mt-4'>{description}</RichText>}

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

@@ -23,7 +23,11 @@ const image = (
 )
 
 export const Simple: StoryObj<IProductCard> = {
-  render: args => <ProductCard {...args} style={{ maxWidth: '320px' }}></ProductCard>,
+  render: args =>
+    <>
+      <ProductCard {...args} title="Lorem" style={{ maxWidth: '320px' }}></ProductCard>
+      <ProductCard {...args} style={{ maxWidth: '320px' }}></ProductCard>
+    </>,
   args: {
     title: 'Cras vel facilisis tellus',
     imageElement: image,

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

@@ -8,7 +8,7 @@ export const StyledProductCard = styled.div <IProductCard>`
 
   & img{
     width: 100%;
-    max-width: 10rem;
+    max-width: 5rem;
     object-fit: contain;
   }
 `;
@@ -20,5 +20,5 @@ export const StyledProductCardWrapper = styled.div<IProductCard>`
   gap: 1rem;
   background-color: ${colors.primary50};
   padding: 2rem;
-  border-radius: ${radius.md};
+  border-radius: 0 ${radius.lg};
 `;

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

@@ -85,10 +85,12 @@ const CircularSlider = ({
       };
 
     }
+
     const sliderResize = () => {
+      console.log(slider?.current?.getBoundingClientRect().width);
       let radius,
-        w = slider?.current?.getBoundingClientRect().width || 0,
-        h = slider?.current?.getBoundingClientRect().height || 0;
+        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;
 

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

@@ -3,6 +3,7 @@ import styled from 'styled-components';
 
 export const StyledCircularSlider = styled.div<ICircularSlider>`
   width: 100%;
+  min-height: 100dvh;
   overflow: hidden;
 `;