oddsgate-ds 1.0.123 → 1.0.125

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

@@ -0,0 +1,4 @@
+import { ICardMarquee } from './CardMarquee.interface';
+import React from 'react';
+declare const CardMarquee: ({ direction, speed, repeatContent, gap, children, }: ICardMarquee) => React.JSX.Element;
+export default CardMarquee;

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

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

package/dist/esm/types/components/atoms/CardMarquee/CardMarquee.theme.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { ICardMarquee } from './CardMarquee.interface';
+export declare const StyledCardMarquee: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ICardMarquee>> & string;

package/dist/esm/types/components/atoms/CardMarquee/index.d.ts

@@ -0,0 +1 @@
+export { default } from './CardMarquee.component';

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

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

@@ -1,13 +1,7 @@
-/// <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;
+import { CSSProperties } from 'react';
+export type IMarquee = {
+    text?: string;
     className?: string;
     style?: CSSProperties;
-    children: React.ReactNode;
-}
+    onClick?: () => void;
+};

package/dist/esm/types/index.d.ts

@@ -22,6 +22,7 @@ export { default as Counter } from './components/atoms/Counter';
 export { default as ScrollingNav } from './components/atoms/ScrollingNav';
 export { default as SocialLinks } from './components/atoms/SocialLinks';
 export { default as Marquee } from './components/atoms/Marquee';
+export { default as CardMarquee } from './components/atoms/CardMarquee';
 export { default as PortalComponent } from './components/common/PortalComponent';
 export { Accordion as Accordion } from './components/molecules/Accordion';
 export { AccordionItem as AccordionItem } from './components/molecules/Accordion';

package/dist/types.d.ts

@@ -376,8 +376,17 @@ type ISocialLinks = {
 
 declare const SocialLinks: ({ variant, socials, className, style, ...props }: ISocialLinks) => React__default.JSX.Element;
 
+type IMarquee = {
+    text?: string;
+    className?: string;
+    style?: CSSProperties;
+    onClick?: () => void;
+};
+
+declare const Marquee: ({ text, className, onClick, ...props }: IMarquee) => React__default.JSX.Element;
+
 type Direction = 'left' | 'right' | 'up' | 'down';
-interface IMarquee {
+interface ICardMarquee {
     direction?: Direction;
     repeatContent?: number;
     duration?: number;
@@ -388,7 +397,7 @@ interface IMarquee {
     children: React.ReactNode;
 }
 
-declare const Marquee: ({ direction, speed, repeatContent, gap, children, }: IMarquee) => React__default.JSX.Element;
+declare const CardMarquee: ({ direction, speed, repeatContent, gap, children, }: ICardMarquee) => React__default.JSX.Element;
 
 type PortalComponentProps = {
     wrapperId: string;
@@ -667,4 +676,4 @@ declare function useMediaMatch(query?: string): boolean;
 
 declare const debounce: (callback: any, wait: number) => (...args: any) => void;
 
-export { Accordion, AccordionItem, BlogCard, Button, CareersCard, CheckRadioField, Chip, CircularSlider, CloseButton, Column, Counter, Cover, Dropdown, DropdownItem, EmptyState, EventsCard, Flex, FormField, GlobalStyles, Heading, Icon, IconBox, IconTitle, ImageWrapper, LicenseCard, Loader, LogosCard, Marquee, Modal, NewsCard, OffCanvas, PortalComponent, ProductCard, ProductsSlider, Quote, RichText, Row, ScrollingNav, Separator, ShareModal, Slider, SocialLinks, Spacer, Tabs, TeamCard, Video, VideoEmbed, clickOutSideToClose, debounce, iconsList, isTouchDevice, useMediaMatch, variables };
+export { Accordion, AccordionItem, BlogCard, Button, CardMarquee, CareersCard, CheckRadioField, Chip, CircularSlider, CloseButton, Column, Counter, Cover, Dropdown, DropdownItem, EmptyState, EventsCard, Flex, FormField, GlobalStyles, Heading, Icon, IconBox, IconTitle, ImageWrapper, LicenseCard, Loader, LogosCard, Marquee, Modal, NewsCard, OffCanvas, PortalComponent, ProductCard, ProductsSlider, Quote, RichText, Row, ScrollingNav, Separator, ShareModal, Slider, SocialLinks, Spacer, Tabs, TeamCard, Video, VideoEmbed, clickOutSideToClose, debounce, iconsList, isTouchDevice, useMediaMatch, variables };

package/package.json

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

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

@@ -0,0 +1,24 @@
+import { ICardMarquee } from './CardMarquee.interface'
+import React from 'react'
+import { StyledCardMarquee } from './CardMarquee.theme'
+
+const CardMarquee = ({
+  direction = 'left',
+  speed = 20,
+  repeatContent = 5,
+  gap = '0px',
+  children,
+}: ICardMarquee) => {
+  // To ensure continuous flow, duplicate the children multiple times based on the content size and container.
+  const content = Array.from({ length: repeatContent }, () => children);
+
+  return (
+    <StyledCardMarquee direction={direction} duration={speed} gap={gap}>
+      <div>
+        {content}
+      </div>
+    </StyledCardMarquee>
+  )
+}
+
+export default CardMarquee

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

@@ -0,0 +1,15 @@
+import { CSSProperties } from "styled-components";
+
+export type Direction = 'left' | 'right' | 'up' | 'down';
+
+export interface ICardMarquee {
+  direction?: Direction;
+  repeatContent?: number;
+  duration?: number;
+  speed?: number;
+  gap?: string;
+  className?: string;
+  style?: CSSProperties
+  children: React.ReactNode;
+}
+

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

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import CardMarquee from './CardMarquee.component'
+import Heading from '@/components/atoms/Heading/Heading.component'
+import { ICardMarquee } from './CardMarquee.interface'
+import React from 'react'
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: 'Components/CardMarquee',
+  component: CardMarquee,
+  argTypes: {}
+} as Meta
+
+export const Simple: StoryObj<ICardMarquee> = {
+  render: args => <CardMarquee {...args} />,
+  args: {
+    gap: "1rem",
+    children: <Heading>People • Sustainability • Efficiency • Innovation</Heading>
+  }
+}

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

@@ -0,0 +1,48 @@
+import { Direction, ICardMarquee } from './CardMarquee.interface';
+import { colors, radius } from '@/styles/variables';
+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 StyledCardMarquee = styled.div<ICardMarquee>`
+  display: flex;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+
+  &>div{
+    display: flex;
+    ${({ gap }) => css`gap: ${gap}`};
+    white-space: nowrap;
+    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')};
+
+    animation: ${({ direction, duration }) => css`
+      ${getAnimation(direction)} ${duration}s linear infinite
+    `};
+
+    animation-play-state: running; // Ensures the animation is running by default
+
+    &:hover {
+      animation-play-state: paused; // Pauses the animation when hovered
+    }
+  }
+
+`;

package/src/components/atoms/CardMarquee/index.ts

@@ -0,0 +1 @@
+export { default } from './CardMarquee.component'

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

@@ -1,21 +1,16 @@
+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 = ({
-  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);
-
+const Marquee = ({ text, className, onClick, ...props }: IMarquee) => {
   return (
-    <StyledMarquee direction={direction} duration={speed} gap={gap}>
+    <StyledMarquee className={cn(className)} onClick={onClick} {...props}>
       <div>
-        {content}
+        <Heading size="display" tag="span" className='fw-bold text-uppercase'>
+          {text} {text} {text}
+        </Heading>
       </div>
     </StyledMarquee>
   )

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

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

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

@@ -1,6 +1,5 @@
 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'
@@ -9,13 +8,13 @@ import React from 'react'
 export default {
   title: 'Components/Marquee',
   component: Marquee,
+  tags: ['autodocs'],
   argTypes: {}
 } as Meta
 
 export const Simple: StoryObj<IMarquee> = {
   render: args => <Marquee {...args} />,
   args: {
-    gap: "1rem",
-    children: <Heading>People • Sustainability • Efficiency • Innovation</Heading>
+    text: 'People • Sustainability • Efficiency • Innovation'
   }
 }

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

@@ -1,48 +1,40 @@
-import { Direction, IMarquee } from './Marquee.interface';
 import { colors, radius } from '@/styles/variables';
-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%); }
-      `;
-  }
-};
+import styled, { css } from 'styled-components';
+
+import { IMarquee } from './Marquee.interface';
 
 export const StyledMarquee = styled.div<IMarquee>`
-  display: flex;
   position: relative;
+  top: 0;
+  left: 0;
   width: 100%;
-  height: 100%;
-  overflow: hidden;
+  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;
 
-  &>div{
+  & > div{
+    position: relative;
     display: flex;
-    ${({ gap }) => css`gap: ${gap}`};
+    width: fit-content;
     white-space: nowrap;
-    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')};
-
-    animation: ${({ direction, duration }) => css`
-      ${getAnimation(direction)} ${duration}s linear infinite
-    `};
+    transform: translate3d(var(--move-initial), 0, 0);
+    animation: marquee 15s linear infinite;
+  }
 
-    animation-play-state: running; // Ensures the animation is running by default
+  @keyframes marquee {
+    0% {
+      transform: translate3d(var(--move-initial), 0, 0);
+    }
 
-    &:hover {
-      animation-play-state: paused; // Pauses the animation when hovered
+    100% {
+      transform: translate3d(var(--move-final), 0, 0);
     }
   }
-
 `;

package/src/index.ts

@@ -24,6 +24,7 @@ export { default as Counter } from './components/atoms/Counter'
 export { default as ScrollingNav } from './components/atoms/ScrollingNav'
 export { default as SocialLinks } from './components/atoms/SocialLinks'
 export { default as Marquee } from './components/atoms/Marquee'
+export { default as CardMarquee } from './components/atoms/CardMarquee'
 
 //common
 export { default as PortalComponent } from './components/common/PortalComponent'