oddsgate-ds 1.0.113 → 1.0.114

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, ...props }: IMarquee) => React.JSX.Element;
+declare const Marquee: ({ direction, speed, repeatContent, gap, children, }: IMarquee) => React.JSX.Element;
 export default Marquee;

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

@@ -1,7 +1,13 @@
-import { CSSProperties } from 'react';
-export type IMarquee = {
-    text?: string;
+/// <reference types="react" />
+import { CSSProperties } from "styled-components";
+export type Direction = 'left' | 'right' | 'up' | 'down';
+export interface IMarquee {
+    direction?: Direction;
+    repeatContent?: number;
+    duration?: number;
+    speed?: number;
+    gap?: string;
     className?: string;
     style?: CSSProperties;
-    onClick?: () => void;
-};
+    children: React.ReactNode;
+}

package/dist/types.d.ts

@@ -2,6 +2,7 @@ import * as React$1 from 'react';
 import React__default, { CSSProperties } from 'react';
 import { spaces as spaces$1 } from '@/styles/variables';
 import * as styled_components from 'styled-components';
+import { CSSProperties as CSSProperties$1 } from 'styled-components';
 
 declare const pxToRem: (size: number) => string;
 declare const fontName = "MD Nichrome";
@@ -375,14 +376,19 @@ type ISocialLinks = {
 
 declare const SocialLinks: ({ variant, socials, className, style, ...props }: ISocialLinks) => React__default.JSX.Element;
 
-type IMarquee = {
-    text?: string;
+type Direction = 'left' | 'right' | 'up' | 'down';
+interface IMarquee {
+    direction?: Direction;
+    repeatContent?: number;
+    duration?: number;
+    speed?: number;
+    gap?: string;
     className?: string;
-    style?: CSSProperties;
-    onClick?: () => void;
-};
+    style?: CSSProperties$1;
+    children: React.ReactNode;
+}
 
-declare const Marquee: ({ text, className, onClick, ...props }: IMarquee) => React__default.JSX.Element;
+declare const Marquee: ({ direction, speed, repeatContent, gap, children, }: IMarquee) => React__default.JSX.Element;
 
 type PortalComponentProps = {
     wrapperId: string;

package/package.json

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

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

@@ -1,16 +1,21 @@
-import Heading from '../Heading/Heading.component'
 import { IMarquee } from './Marquee.interface'
 import React from 'react'
 import { StyledMarquee } from './Marquee.theme'
-import cn from 'classnames'
 
-const Marquee = ({ text, className, onClick, ...props }: IMarquee) => {
+const Marquee = ({
+  direction = 'left',
+  speed = 20,
+  repeatContent = 5,
+  gap = '0px',
+  children,
+}: IMarquee) => {
+  // To ensure continuous flow, duplicate the children multiple times based on the content size and container.
+  const content = Array.from({ length: repeatContent }, () => children);
+
   return (
-    <StyledMarquee className={cn(className)} onClick={onClick} {...props}>
+    <StyledMarquee direction={direction} duration={speed} gap={gap}>
       <div>
-        <Heading size="display" tag="span" className='fw-bold text-uppercase'>
-          {text} {text} {text}
-        </Heading>
+        {content}
       </div>
     </StyledMarquee>
   )

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

@@ -1,8 +1,15 @@
-import { CSSProperties } from 'react';
+import { CSSProperties } from "styled-components";
 
-export type IMarquee = {
-  text?: string
-  className?: string,
+export type Direction = 'left' | 'right' | 'up' | 'down';
+
+export interface IMarquee {
+  direction?: Direction;
+  repeatContent?: number;
+  duration?: number;
+  speed?: number;
+  gap?: string;
+  className?: string;
   style?: CSSProperties
-  onClick?: () => void
+  children: React.ReactNode;
 }
+

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

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react'
 
+import Heading from '@/components/atoms/Heading/Heading.component'
 import { IMarquee } from './Marquee.interface'
 import Marquee from './Marquee.component'
 import React from 'react'
@@ -14,6 +15,7 @@ export default {
 export const Simple: StoryObj<IMarquee> = {
   render: args => <Marquee {...args} />,
   args: {
-    text: "People • Sustainability • Efficiency • Innovation"
+    gap: "1rem",
+    children: <Heading>People • Sustainability • Efficiency • Innovation</Heading>
   }
 }

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

@@ -1,40 +1,48 @@
+import { Direction, IMarquee } from './Marquee.interface';
 import { colors, radius } from '@/styles/variables';
-import styled, { css } from 'styled-components';
-
-import { IMarquee } from './Marquee.interface';
+import styled, { css, keyframes } from 'styled-components';
+
+const getAnimation = (direction?: Direction) => {
+  switch (direction) {
+    case 'up':
+    case 'down':
+      return keyframes`
+        from { transform: translateY(0); }
+        to { transform: translateY(-100%); }
+      `;
+    case 'left':
+    case 'right':
+      return keyframes`
+        from { transform: translateX(0); }
+        to { transform: translateX(-100%); }
+      `;
+  }
+};
 
 export const StyledMarquee = styled.div<IMarquee>`
+  display: flex;
   position: relative;
-  top: 0;
-  left: 0;
   width: 100%;
-  contain: paint;
-  pointer-events: none;
-
-  --offset: 20vw;
-  --move-initial: calc(-25% + var(--offset));
-  --move-final: calc(-50% + var(--offset));
-
-  color: ${colors.primary50};
-
-  padding: 8px 0;
+  height: 100%;
+  overflow: hidden;
 
-  & > div{
-    position: relative;
+  &>div{
     display: flex;
-    width: fit-content;
+    ${({ gap }) => css`gap: ${gap}`};
     white-space: nowrap;
-    transform: translate3d(var(--move-initial), 0, 0);
-    animation: marquee 15s linear infinite;
-  }
+    width: ${({ direction }) => (direction === 'left' || direction === 'right' ? '200%' : 'auto')};
+    height: ${({ direction }) => (direction === 'up' || direction === 'down' ? '200%' : 'auto')};
+    flex-direction: ${({ direction }) => (direction === 'up' || direction === 'down' ? 'column' : 'row')};
 
-  @keyframes marquee {
-    0% {
-      transform: translate3d(var(--move-initial), 0, 0);
-    }
+    animation: ${({ direction, duration }) => css`
+      ${getAnimation(direction)} ${duration}s linear infinite
+    `};
 
-    100% {
-      transform: translate3d(var(--move-final), 0, 0);
+    animation-play-state: running; // Ensures the animation is running by default
+
+    &:hover {
+      animation-play-state: paused; // Pauses the animation when hovered
     }
   }
+
 `;