oddsgate-ds 1.0.64 → 1.0.65

package/dist/esm/types/helpers/isTouchDevice.d.ts

@@ -0,0 +1,2 @@
+declare const isTouchDevice: () => boolean;
+export default isTouchDevice;

package/dist/esm/types/styles/variables.d.ts

@@ -2,9 +2,9 @@ export declare const pxToRem: (size: number) => string;
 export declare const fontName = "MD Nichrome";
 export declare const alternativeFont = "Red Hat Display";
 export declare const gutter: string;
-export declare const desktop_width = "1620";
-export declare const tablet_width = "768";
-export declare const mobile_width = "375";
+export declare const desktop_width: number;
+export declare const tablet_width: number;
+export declare const mobile_width: number;
 export declare const responsiveMedia = "980px";
 export declare const mobileMedia = "360px";
 export declare const easeOutExpo = "cubic-bezier(.32,.94,.6,1);";

package/dist/types.d.ts

@@ -7,9 +7,9 @@ declare const pxToRem: (size: number) => string;
 declare const fontName = "MD Nichrome";
 declare const alternativeFont = "Red Hat Display";
 declare const gutter: string;
-declare const desktop_width = "1620";
-declare const tablet_width = "768";
-declare const mobile_width = "375";
+declare const desktop_width: number;
+declare const tablet_width: number;
+declare const mobile_width: number;
 declare const responsiveMedia = "980px";
 declare const mobileMedia = "360px";
 declare const easeOutExpo = "cubic-bezier(.32,.94,.6,1);";

package/package.json

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

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

@@ -4,6 +4,7 @@ import Button from '@/components/atoms/Button/Button.component'
 import { ISlider } from './Slider.interface'
 import Icon from '@/components/atoms/Icon/Icon.component'
 import { StyledSlider } from './Slider.theme'
+import isTouchDevice from '@/helpers/isTouchDevice'
 import { useBlazeSlider } from './Slider.utils'
 
 const Slider = ({
@@ -27,6 +28,8 @@ const Slider = ({
   let elRef: any = null
   let sliderRef: any = null
 
+  const isMobile = isTouchDevice();
+
   const setConfig = () => {
     if (sliderRef?.current) sliderRef.current.destroy()
     responsiveCSS = `
@@ -102,7 +105,12 @@ const Slider = ({
   //   mediaQueries
   // ])
 
-  setConfig()
+  if (mobileOnly) {
+    isMobile && setConfig();
+  } else {
+    setConfig();
+  }
+
 
   return (
     <StyledSlider

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

@@ -86,9 +86,11 @@ export const MobileOnly: StoryObj<ISlider> = {
         slidesToScroll={1}
         infinite={false}
         spacing={'1rem'}
+        autoplay={false}
         mediaQueries={{
           900: {
-            slidesToShow: 2
+            slidesToShow: 2,
+            autoplay: true,
           },
           500: {
             slidesToShow: 1
@@ -96,12 +98,12 @@ export const MobileOnly: StoryObj<ISlider> = {
         }}
         {...args}
       >
-        <div>{image}</div>
-        <div>{image}</div>
-        <div>{image}</div>
-        <div>{image}</div>
-        <div>{image}</div>
-        <div>{image}</div>
+        <div style={{ maxWidth: "100%" }}>{image}</div>
+        <div style={{ maxWidth: "25%" }}>{image}</div>
+        <div style={{ maxWidth: "25%" }}>{image}</div>
+        <div style={{ maxWidth: "25%" }}>{image}</div>
+        <div style={{ maxWidth: "25%" }}>{image}</div>
+        <div style={{ maxWidth: "25%" }}>{image}</div>
       </Slider>
     </div>
   ),

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

@@ -3,10 +3,7 @@ import styled, { css } from 'styled-components';
 
 import { ISlider } from './Slider.interface';
 
-export const StyledSlider = styled.div<ISlider>`
-  position:relative;
-  width: 100%;
-
+const SliderStyles = `
   //vendor styles
   .blaze-slider {
     /* default config */
@@ -36,16 +33,9 @@ export const StyledSlider = styled.div<ISlider>`
     );
   }
 
-  .blaze-track,
   .blaze-track > div {
-    box-sizing: border-box;
-  }
-
-  .blaze-track > div {
-    position: relative;
     width: var(--slide-width);
-    flex-basis: unset;
-    max-width: unset;
+    max-width: unset !important;
     flex-shrink: 0;
   }
 
@@ -122,17 +112,45 @@ export const StyledSlider = styled.div<ISlider>`
     `}
 
     ${({ $mobileOnly }) => $mobileOnly && `
-      .blaze-track{
-        flex-flow: row wrap;
-        width: 100% !important;
-        max-width: 100% !important;
-        transform: none !important;
-      }
+      @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;
+        .blaze-arrows,
+        .blaze-controls{
+          display:none;
+        }
       }
     `}
   }
 `;
+
+
+export const StyledSlider = styled.div<ISlider>`
+  position:relative;
+  width: 100%;
+
+  ${({ $mobileOnly }) => $mobileOnly ? (`
+      @media only screen and (max-width: ${responsiveMedia}) {
+        ${SliderStyles}
+      }
+      @media only screen and (min-width: ${responsiveMedia}) {
+        .blaze-controls{
+          display:none;
+        }
+      }
+    `)
+    : (`
+      ${SliderStyles}
+    `)}
+
+`;

package/src/helpers/isTouchDevice.tsx

@@ -0,0 +1,11 @@
+const isTouchDevice = () => {
+  try {
+    document.createEvent('TouchEvent');
+    return true;
+  } catch (e) {
+    return false;
+  }
+}
+
+
+export default isTouchDevice

package/src/styles/utilities.ts

@@ -1,5 +1,6 @@
 import {
   colors,
+  desktop_width,
   gradients,
   grid_conf,
   radius,
@@ -12,17 +13,15 @@ import {
 } from './variables';
 
 export const fontSize = (typo: string) => {
-  return `
-    ${typography[typo]?.sizeMob ? `
-      font-size: ${typography[typo].sizeMob};
+  const size = parseInt(typography[typo].size as string);
+  const percentage = 0.2;
 
-      @media only screen and (min-width: ${responsiveMedia}) {
-        font-size: ${typography[typo].size};
-      }
-    ` : `
-      font-size: ${typography[typo].size};
-    `}
+  const min = typography[typo].sizeMob ?? typography[typo].size; // check if size mobile exists
+  const max = ((size / desktop_width) * 100).toFixed(3); // get vw value divise font size for desktop width
+  const range = Math.ceil(size + (size * percentage)); // use desktop font-size and add a range of percentage
 
+  return `
+    font-size: clamp(${min}, ${max}vw, ${range}px);
     line-height: ${typography[typo].height};
   `
 }

package/src/styles/variables.ts

@@ -7,9 +7,9 @@ export const alternativeFont = "Red Hat Display";
 
 export const gutter = pxToRem(8); //needs to be in this file
 
-export const desktop_width = "1620"; //container size of design on desktop
-export const tablet_width = "768"; //container size of design on tablet
-export const mobile_width = "375"; //container size of design on mobile
+export const desktop_width:number = 1620; //container size of design on desktop
+export const tablet_width:number = 768; //container size of design on tablet
+export const mobile_width:number = 375; //container size of design on mobile
 export const responsiveMedia = "980px"; //mobile media value for bootstrap
 export const mobileMedia = "360px"; //mobile media value
 
@@ -89,38 +89,38 @@ export const spacesNegative = <Record<string, string>>{
 //if responsive is not needed for a size just set the size as px instead of rem
 export const typography = <Record<string, Record<string, unknown>>>{
   display: {
-    size: pxToRem(250),
-    sizeMob: pxToRem(64),
+    size: "250px",
+    sizeMob: "64px",
     height: 1.2,
   },
   h1: {
-    size: pxToRem(120),
-    sizeMob: pxToRem(48),
+    size: "120px",
+    sizeMob: "48px",
     height: 1.2,
   },
   h2: {
-    size: pxToRem(80),
-    sizeMob: pxToRem(36),
+    size: "80px",
+    sizeMob: "36px",
     height: 1.2,
   },
   h3: {
-    size: pxToRem(48),
-    sizeMob: pxToRem(24),
+    size: "48px",
+    sizeMob: "24px",
     height: 1.2,
   },
   h4: {
-    size: pxToRem(36),
-    sizeMob: pxToRem(20),
+    size: "36px",
+    sizeMob: "20px",
     height: 1.2,
   },
   h5: {
-    size: pxToRem(24),
-    sizeMob: pxToRem(18),
+    size: "24px",
+    sizeMob: "18px",
     height: 1.4,
   },
   h6: {
-    size: pxToRem(18),
-    sizeMob: pxToRem(16),
+    size: "18px",
+    sizeMob: "16px",
     height: 1.4,
   },
   texts: {