oddsgate-ds 1.0.151 → 1.0.153

package/dist/esm/types/components/atoms/Marquee/Marquee.component.d.ts

@@ -1,4 +1,4 @@
 import { IMarquee } from './Marquee.interface';
 import React from 'react';
-declare const Marquee: ({ text, className, onClick, repeat, ...props }: IMarquee) => React.JSX.Element;
+declare const Marquee: ({ text, className, onClick, repeat, duration, ...props }: IMarquee) => React.JSX.Element;
 export default Marquee;

package/dist/esm/types/components/atoms/Marquee/Marquee.interface.d.ts

@@ -2,6 +2,7 @@ import { CSSProperties } from 'react';
 export type IMarquee = {
     text?: string;
     repeat?: number;
+    duration: number;
     className?: string;
     style?: CSSProperties;
     onClick?: () => void;

package/dist/types.d.ts

@@ -379,12 +379,13 @@ declare const SocialLinks: ({ variant, socials, className, style, ...props }: IS
 type IMarquee = {
     text?: string;
     repeat?: number;
+    duration: number;
     className?: string;
     style?: CSSProperties;
     onClick?: () => void;
 };
 
-declare const Marquee: ({ text, className, onClick, repeat, ...props }: IMarquee) => React__default.JSX.Element;
+declare const Marquee: ({ text, className, onClick, repeat, duration, ...props }: IMarquee) => React__default.JSX.Element;
 
 type Direction = 'left' | 'right' | 'up' | 'down';
 interface ICardMarquee {

package/package.json

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

package/src/components/atoms/Button/Button.component.tsx

@@ -7,7 +7,7 @@ const Button = ({
   id,
   as = 'a',
   children,
-  variant = "primary",
+  variant = 'primary',
   mode,
   outlined,
   leftIcon,
@@ -39,12 +39,12 @@ const Button = ({
       className={className}
       {...props}
     >
-      {(variant === "primary" || variant === "secondary") ? (
+      {variant === 'primary' || variant === 'secondary' ? (
         <>
           {leftIcon}
           {children && <span>{children}</span>}
           {rightIcon}
-          {!rightIcon && !leftIcon && (<Icon icon={"icon-arrow-right"} />)}
+          {!rightIcon && !leftIcon && <Icon icon={'icon-arrow-right'} />}
         </>
       ) : (
         <>

package/src/components/atoms/Button/Button.theme.ts

@@ -27,74 +27,87 @@ export const StyledButton = styled.a<IButtonSC>`
     margin-right: 0;
   }
 
-  &>i {
+  & > i {
     color: currentColor;
     transition: all 0.3s ease;
   }
 
-  ${(props) => {
+  @media only screen and (max-width: ${responsiveMedia}) {
+    & i {
+      display: none !important;
+    }
+    span {
+      transform: unset !important;
+    }
+    transform: unset !important;
+  }
+
+  ${props => {
     switch (props.$variant) {
-      case "primary": default:
+      case 'primary':
+      default:
         return css`
-            ${fontSize('h4')};
-            padding: 0.8rem 1.6rem;
-            border-radius: 100px;
-            text-transform:uppercase;
-
-            ${props.$mode === "light" ? `
-              color: ${colors.primary50};
-              background-color: ${colors.secondary50};
-
-              ` : `
-              color: ${colors.secondary50};
-              background-color: ${colors.primary50};
-            `}
-
-            & span{
-              transition: all 0.3s ease;
-            }
-            & i{
-              position: absolute;
-              top: 50%;
-              right: 1.8rem;
-              opacity: 0;
-              transform: scale(0) translateX(-4px) translateY(-50%);
-            }
+          ${fontSize('h4')};
+          padding: 0.8rem 1.6rem;
+          border-radius: 100px;
+          text-transform: uppercase;
 
-            &:hover{
-              & span{
-                transform: translateX(-1rem);
-              }
-              & i{
-                opacity: 1;
-                transform: scale(1) translateX(0) translateY(-50%);
-              }
-            }
+          ${props.$mode === 'light'
+            ? css`
+                color: ${colors.primary50};
+                background-color: ${colors.secondary50};
+              `
+            : css`
+                color: ${colors.secondary50};
+                background-color: ${colors.primary50};
+              `}
 
-            @media only screen and (min-width: ${responsiveMedia}) {
-              padding: 1.5rem 2.6rem;
+          & span {
+            transition: all 0.3s ease;
+          }
+          & i {
+            position: absolute;
+            top: 50%;
+            right: 1.8rem;
+            opacity: 0;
+            transform: scale(0) translateX(-4px) translateY(-50%);
+          }
+
+          &:hover {
+            & span {
+              transform: translateX(-1rem);
             }
-          `;
-      case "secondary":
+            & i {
+              opacity: 1;
+              transform: scale(1) translateX(0) translateY(-50%);
+            }
+          }
+
+          @media only screen and (min-width: ${responsiveMedia}) {
+            padding: 1.5rem 2.6rem;
+          }
+        `
+      case 'secondary':
         return css`
           ${fontSize('h5')};
           padding: 0.8rem 1.6rem;
           border-radius: 50px;
-          text-transform:uppercase;
-
-          ${props.$mode === "light" ? `
-            color: ${colors.primary50};
-            background-color: ${colors.secondary50};
+          text-transform: uppercase;
 
-            ` : `
-            color: ${colors.secondary50};
-            background-color: ${colors.primary50};
-          `}
+          ${props.$mode === 'light'
+            ? css`
+                color: ${colors.primary50};
+                background-color: ${colors.secondary50};
+              `
+            : css`
+                color: ${colors.secondary50};
+                background-color: ${colors.primary50};
+              `}
 
-          & span{
+          & span {
             transition: all 0.3s ease;
           }
-          & i{
+          & i {
             position: absolute;
             top: 50%;
             right: 0.6rem;
@@ -103,63 +116,65 @@ export const StyledButton = styled.a<IButtonSC>`
             transform: scale(0) translateX(-4px) translateY(-50%);
           }
 
-          &:hover{
-            & span{
+          &:hover {
+            & span {
               transform: translateX(-0.5rem);
             }
-            & i{
+            & i {
               opacity: 1;
               transform: scale(1) translateX(0) translateY(-50%);
             }
           }
-        `;
-      case "link":
+        `
+      case 'link':
         return css`
-            ${fontSize('h5')};
-            text-transform:uppercase;
-            padding: 0;
-
-            ${props.$mode === "light" ? `
-              color: ${colors.third50};
-
-              &:hover{
+          ${fontSize('h5')};
+          text-transform: uppercase;
+          padding: 0;
+
+          ${props.$mode === 'light'
+            ? css`
+                color: ${colors.third50};
+
+                &:hover {
+                  color: ${colors.secondary50};
+                }
+              `
+            : css`
                 color: ${colors.secondary50};
-              }
-              ` : `
-              color: ${colors.secondary50};
 
-              &:hover{
-                color: ${colors.primary50};
-              }
-            `}
-          `;
-      case "icon":
-        return css`
-
-        `;
+                &:hover {
+                  color: ${colors.primary50};
+                }
+              `}
+        `
+      case 'icon':
+        return css``
     }
   }}
 
-
-  ${({ removeLabel }) => removeLabel && `
-    @media only screen and (max-width: ${responsiveMedia}) {
-      & span {
-        display: none
+  ${({ removeLabel }) =>
+    removeLabel &&
+    css`
+      @media only screen and (max-width: ${responsiveMedia}) {
+        & span {
+          display: none;
+        }
+
+        & * ~ span,
+        & span ~ * {
+          margin-left: 0;
+        }
       }
+    `}
 
-      & *~span,
-      & span~* {
-        margin-left: 0
-      }
-    }
-  `}
-
-  ${({ disabled }) => disabled && `
+  ${({ disabled }) =>
+    disabled &&
+    css`
     color: ${colors.gray50} !important;
     border: 1px solid transparent;
 
     pointer-events: none;
     user-select: none;
   `}
-
-`;
+`

package/src/components/atoms/Marquee/Marquee.component.tsx

@@ -9,10 +9,17 @@ const Marquee = ({
   className,
   onClick,
   repeat = 5,
+  duration = 15,
   ...props
 }: IMarquee) => {
   return (
-    <StyledMarquee className={cn(className)} onClick={onClick} {...props}>
+    <StyledMarquee
+      duration={duration}
+      repeat={repeat}
+      className={cn(className)}
+      onClick={onClick}
+      {...props}
+    >
       <div>
         <Heading size="display" tag="span" className="fw-bold">
           {Array.from({ length: repeat }, () => text).join(' ')}

package/src/components/atoms/Marquee/Marquee.interface.ts

@@ -3,6 +3,7 @@ import { CSSProperties } from 'react';
 export type IMarquee = {
   text?: string
   repeat?: number
+  duration: number
   className?: string
   style?: CSSProperties
   onClick?: () => void

package/src/components/atoms/Marquee/Marquee.theme.ts

@@ -25,7 +25,7 @@ export const StyledMarquee = styled.div<IMarquee>`
     width: fit-content;
     white-space: nowrap;
     transform: translate3d(var(--move-initial), 0, 0);
-    animation: marquee 15s linear infinite;
+    animation: marquee ${({ duration = 15 }) => duration}s linear infinite;
   }
 
   @keyframes marquee {