oddsgate-ds 1.0.82 → 1.0.83

package/dist/esm/types/components/organisms/Slider/Slider.stories.d.ts

@@ -3,4 +3,5 @@ import { ISlider } from './Slider.interface';
 declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react").ReactRenderer, import("@storybook/types").Args>;
 export default _default;
 export declare const Simple: StoryObj<ISlider>;
+export declare const LessSliders: StoryObj<ISlider>;
 export declare const MobileOnly: StoryObj<ISlider>;

package/package.json

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

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

@@ -5,19 +5,28 @@ import Card from '../Card/Card.component';
 import { IEventsCard } from './EventsCard.interface';
 
 export const StyledEventsCard = styled(Card) <IEventsCard>`
-  padding: 0;
+  padding: 1rem;
+  border-radius: ${radius.md};
+  transition: all 0.3s;
 
   picture{
     border-radius: 100%;
+    & img{
+      opacity: 1 !important;
+    }
   }
   & figcaption{
     color: ${colors.third10};
-    padding:0;
+    padding:1rem;
     margin-top: 1rem;
   }
 
   &:hover{
+    background-color: ${colors.third10};
 
+    & figcaption{
+      color: ${colors.secondary50};
+    }
   }
 `;
 

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

@@ -20,6 +20,12 @@ export const StyledNewsCard = styled(Card) <INewsCard>`
     z-index: 10;
   }
 
+  & picture{
+    & img{
+      opacity: 1 !important;
+    }
+  }
+
   & figcaption{
 
   }

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

@@ -33,8 +33,8 @@ const Slider = ({
   const setConfig = () => {
     if (sliderRef?.current) sliderRef.current.destroy()
     responsiveCSS = `
-      --slides-to-show: ${slidesToShow ? slidesToShow : 4};
-      --slide-gap: ${spacing ? spacing : '1rem'};
+      --slides-to-show: ${slidesToShow ? slidesToShow : 4} !important;
+      --slide-gap: ${spacing ? spacing : '1rem'} !important;
     `
 
     if (mediaQueries) {
@@ -111,7 +111,6 @@ const Slider = ({
     setConfig();
   }
 
-
   return (
     <StyledSlider
       $responsiveCSS={responsiveCSS}

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

@@ -73,6 +73,37 @@ export const Simple: StoryObj<ISlider> = {
 }
 
 
+
+export const LessSliders: StoryObj<ISlider> = {
+  render: args => (
+    <div
+      style={{
+        margin: 'auto'
+      }}
+    >
+      <Slider
+        slidesToShow={4}
+        slidesToScroll={1}
+        infinite={false}
+        spacing={'1rem'}
+        mediaQueries={{
+          900: {
+            slidesToShow: 2
+          },
+          500: {
+            slidesToShow: 1
+          }
+        }}
+        {...args}
+      >
+        <div>{image}</div>
+        <div>{image}</div>
+      </Slider>
+    </div>
+  ),
+}
+
+
 export const MobileOnly: StoryObj<ISlider> = {
   render: args => (
     <div

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

@@ -4,8 +4,7 @@ import styled, { css } from 'styled-components';
 import { ISlider } from './Slider.interface';
 
 const SliderStyles = `
-  //vendor styles
-  .blaze-slider {
+    .blaze-slider {
     /* default config */
     --slides-to-show: 1;
     --slide-gap: 1rem;
@@ -106,31 +105,6 @@ const SliderStyles = `
       opacity: 0.5;
       cursor:not-allowed;
     }
-
-    ${({ $responsiveCSS }) => $responsiveCSS && `
-      ${$responsiveCSS};
-    `}
-
-    ${({ $mobileOnly }) => $mobileOnly && `
-      @media only screen and (min-width: ${responsiveMedia}) {
-        .blaze-track{
-          flex-flow: row wrap;
-          width: 100% !important;
-          max-width: 100% !important;
-          transform: none !important;
-          gap: 0 !important;
-
-          &>div{
-            width: 100% !important;
-          }
-        }
-
-        .blaze-arrows,
-        .blaze-controls{
-          display:none;
-        }
-      }
-    `}
   }
 `;
 
@@ -162,4 +136,10 @@ export const StyledSlider = styled.div<ISlider>`
 
       ${SliderStyles}
     `)}
+
+  ${({ $responsiveCSS }) => $responsiveCSS && `
+    .blaze-slider {
+      ${$responsiveCSS};
+    }
+  `}
 `;