oddsgate-ds 1.0.113 → 1.0.115

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/esm/types/components/organisms/ProductsSlider/ProductsSlider.component.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { IProductsSlider } from './ProductsSlider.interface';
+declare const ProductsSlider: ({ content, style, className, }: IProductsSlider) => React.JSX.Element;
+export default ProductsSlider;

package/dist/esm/types/components/organisms/ProductsSlider/ProductsSlider.interface.d.ts

@@ -0,0 +1,11 @@
+import { CSSProperties } from 'react';
+export type IProductsSlider = {
+    id?: string;
+    className?: string;
+    style?: CSSProperties;
+    content?: {
+        title?: string;
+        description?: string | React.ReactElement;
+        imageElement?: React.ReactElement;
+    }[];
+};

package/dist/esm/types/components/organisms/ProductsSlider/ProductsSlider.theme.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { IProductsSlider } from './ProductsSlider.interface';
+export declare const StyledProductsSlider: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, IProductsSlider>> & string;
+export declare const StyledProductsSliderWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, IProductsSlider>> & string;
+export declare const StyledProductsSliderSlides: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, IProductsSlider>> & string;
+export declare const StyledProductsSliderSlide: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, IProductsSlider>> & string;
+export declare const StyledProductsSliderContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, IProductsSlider>> & string;

package/dist/esm/types/components/organisms/ProductsSlider/index.d.ts

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

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

@@ -44,6 +44,7 @@ export { default as Slider } from './components/organisms/Slider';
 export { default as Cover } from './components/organisms/Cover';
 export { default as Tabs } from './components/organisms/Tabs';
 export { default as CircularSlider } from './components/organisms/CircularSlider';
+export { default as ProductsSlider } from './components/organisms/ProductsSlider';
 export { iconsList } from './helpers/getIcons';
 export { default as GlobalStyles } from './styles/Global';
 export { default as clickOutSideToClose } from './helpers/clickOutsideToClose';

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;
@@ -636,6 +642,19 @@ type ICircularSlider = {
 
 declare const CircularSlider: ({ cta, content, style, className, }: ICircularSlider) => React__default.JSX.Element;
 
+type IProductsSlider = {
+    id?: string;
+    className?: string;
+    style?: CSSProperties;
+    content?: {
+        title?: string;
+        description?: string | React.ReactElement;
+        imageElement?: React.ReactElement;
+    }[];
+};
+
+declare const ProductsSlider: ({ content, style, className, }: IProductsSlider) => React__default.JSX.Element;
+
 declare const iconsList: string[];
 
 declare const GlobalStyles: React$1.NamedExoticComponent<styled_components.ExecutionProps & object>;
@@ -648,4 +667,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, Quote, RichText, Row, ScrollingNav, Separator, ShareModal, Slider, SocialLinks, Spacer, Tabs, TeamCard, Video, VideoEmbed, clickOutSideToClose, debounce, iconsList, isTouchDevice, useMediaMatch, variables };
+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 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oddsgate-ds",
-  "version": "1.0.113",
+  "version": "1.0.115",
   "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
     }
   }
+
 `;

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

@@ -12,7 +12,7 @@ export const StyledCircularSlider = styled.div<ICircularSlider>`
     position:absolute;
     top:50%;
     left:0;
-    width:55%;
+    width:66.666%;
     height:auto;
     transform: translate(-50%, -50%)
   }
@@ -21,14 +21,8 @@ export const StyledCircularSlider = styled.div<ICircularSlider>`
     min-height: 100dvh;
     & > svg{
       display: block;
-      transition: all 0.8s ease-in-out;
     }
   }
-
-  @keyframes spin {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(80deg); }
-  }
 `;
 
 export const StyledCircularSliderWrapper = styled.div<ICircularSlider>`

package/src/components/organisms/{CircularSliderTeste/CircularSliderTeste.component.tsx → ProductsSlider/ProductsSlider.component.tsx}

@@ -1,37 +1,35 @@
 import React, { useEffect, useRef, useState } from 'react'
 import {
-  StyledCircularSliderTeste,
-  StyledCircularSliderTesteContent,
-  StyledCircularSliderTesteSlide,
-  StyledCircularSliderTesteSlides,
-  StyledCircularSliderTesteWrapper
-} from './CircularSliderTeste.theme'
+  StyledProductsSlider,
+  StyledProductsSliderContent,
+  StyledProductsSliderSlide,
+  StyledProductsSliderSlides,
+  StyledProductsSliderWrapper
+} from './ProductsSlider.theme'
 
 import Heading from '@/components/atoms/Heading/Heading.component';
-import { ICircularSliderTeste } from './CircularSliderTeste.interface'
+import { IProductsSlider } from './ProductsSlider.interface'
+import ProductCard from '@/components/molecules/ProductCard/ProductCard.component';
 import { debounce } from '@/helpers/events';
 import useMediaMatch from '@/helpers/useMediaMatch';
 
-const CircularSliderTeste = ({
-  cta,
+const ProductsSlider = ({
   content,
   style,
   className,
-}: ICircularSliderTeste) => {
+}: IProductsSlider) => {
 
-  const [slideContent, setSlideContent] = useState({
-    name: content && content[0].name,
-    role: content && content[0].role,
-  });
+  const [activeElement, setActiveElement] = useState(content && content[0]);
   const slider = useRef<HTMLDivElement>();
   const wrapper = useRef<HTMLDivElement>();
   const slidesHolder = useRef<HTMLDivElement>();
   const contentHolder = useRef<HTMLDivElement>();
+  const isMobile = useMediaMatch();
 
   //force 12 items
-  if (content && content.length < 12) {
+  if (content && content.length < 26) {
     let counter = 0;
-    for (let i = content.length; i <= 12; i++) {
+    for (let i = content.length; i <= 26; i++) {
       content[i] = content[counter];
       counter++;
     }
@@ -40,53 +38,54 @@ const CircularSliderTeste = ({
   useEffect(() => {
     if (!slidesHolder.current) return //bail out;
 
-    const animationDuration = 600;
-
     const slides = Array.prototype.slice.call(slidesHolder?.current?.children);
-
     let slidesSize = 0;
-
-    let currentAngle =  -180;
+    let currentAngle = 0;
 
     const stepAngle = 2 * Math.PI / slidesHolder?.current?.children.length;
     // const stepAngle = 0.52;
 
     let currentSlide = 0;
 
-    slidesHolder.current.style.transitionDuration = animationDuration + 'ms';
     const slidesRepositioning = (r) => {
+      if (isMobile) return;
+
       for (let i = 0; i < slides.length; i++) {
 
         let x = r * Math.cos(stepAngle * i - Math.PI / 2),
           y = r * Math.sin(stepAngle * i - Math.PI / 2);
 
-        slides[i].style.transform = 'translate( ' + x + 'px, ' + y + 'px ) rotate( ' + ((stepAngle * 180 / Math.PI * i) + 4) + 'deg )';
+        slides[i].style.transform = 'translate( ' + x + 'px, ' + y + 'px ) rotate( ' + (((stepAngle * 180 / Math.PI * i) + 90)) + 'deg )';
         // slides[i].style.transform = 'translate( ' + x + 'px, ' + y + 'px )';
       };
     }
     const setSize = (radius: number) => {
-      if (!wrapper.current || !slidesHolder.current) return //bail out;
+      if (!wrapper.current || !slidesHolder.current || isMobile) return //bail out;
 
-      const slideSize = 0.15;
+      const slideSize = 0.08;
 
       wrapper.current.style.width = 2 * radius + 'px';
-      wrapper.current.style.height = 2 * radius + 'px';
+      // wrapper.current.style.height = 2 * radius + 'px';
+      wrapper.current.style.height = '320px';
 
       let r = 2 * radius * (1 - slideSize);
-      slidesHolder.current.style.width = r*2 + 'px';
-      slidesHolder.current.style.height = r/2 + 'px';
+      slidesHolder.current.style.width = r + 'px'
+      slidesHolder.current.style.height = r + 'px';
       slidesRepositioning(r / 2);
 
-      slidesSize = Math.min(2 * radius * slideSize, stepAngle * radius * (1 - slideSize) - 50);
+      slidesSize = Math.min(2 * radius * slideSize, stepAngle * radius * (1 - slideSize) - 80);
+      slidesHolder.current.style.marginTop = slidesSize + 'px';
+
 
       for (let i = 0; i < slides.length; i++) {
-        slides[i].style.width = slides[i].style.height = slidesSize + 'px';
+        slides[i].style.width = slidesSize + 'px';
       };
 
     }
 
     const sliderResize = debounce(() => {
-      const sliderSize = 1;
+      if (isMobile) return;
+      const sliderSize = 2.4;
 
       let radius,
         w = slider?.current ? slider?.current?.getBoundingClientRect().width : 0,
@@ -107,7 +106,7 @@ const CircularSliderTeste = ({
       contentHolder?.current?.classList.remove('active');
       const prevElement = slides[currentSlide];
       setTimeout(() => {
-        content && setSlideContent(content[currentSlide] as any)
+        content && setActiveElement(content[currentSlide] as any)
         prevElement.classList.remove('active');
       }, 400);
     };
@@ -143,15 +142,27 @@ const CircularSliderTeste = ({
       addStyle();
     }
 
-    sliderResize();
-    addStyle();
-
+    if (isMobile) {
+      setTimeout(() => {
+        if (wrapper?.current) wrapper.current.removeAttribute('style');
+        if (slidesHolder?.current) slidesHolder.current.removeAttribute('style');
+
+        for (let i = 0; i < slides.length; i++) {
+          slides[i].removeAttribute('style');
+          slides[i].removeEventListener('click', rotateSlider);
+        };
+        window.removeEventListener('resize', sliderResize)
+      }, 250)
+    } else {
+      sliderResize();
+      addStyle();
 
-    for (let i = 0; i < slides.length; i++) {
-      slides[i].addEventListener('click', rotateSlider, { passive: true });
-    };
+      for (let i = 0; i < slides.length; i++) {
+        slides[i].addEventListener('click', rotateSlider, { passive: true });
+      };
 
-    window.addEventListener('resize', sliderResize)
+      window.addEventListener('resize', sliderResize)
+    }
 
     return () => {
       for (let i = 0; i < slides.length; i++) {
@@ -160,31 +171,39 @@ const CircularSliderTeste = ({
 
       window.removeEventListener('resize', sliderResize)
     }
-  }, [])
+  }, [isMobile])
 
   if (!content) return <></>
 
   return (
-    <StyledCircularSliderTeste ref={slider as any} className={className} style={style}>
-      <StyledCircularSliderTesteWrapper ref={wrapper as any}>
-        <StyledCircularSliderTesteSlides ref={slidesHolder as any}>
+    <StyledProductsSlider ref={slider as any} className={className} style={style}>
+      <StyledProductsSliderWrapper ref={wrapper as any}>
+        <StyledProductsSliderSlides ref={slidesHolder as any}>
           {content?.map((item, index) => {
             return (
-              <StyledCircularSliderTesteSlide key={`slide-${index}`}>{item.img}</StyledCircularSliderTesteSlide>
+              <StyledProductsSliderSlide key={`ProductCard-${index}`}>
+                <ProductCard
+                  imageElement={item.imageElement}
+                  title={item.title}
+                  description={isMobile ? item?.description : ""}
+                />
+              </StyledProductsSliderSlide>
             )
           })}
-        </StyledCircularSliderTesteSlides>
-      </StyledCircularSliderTesteWrapper>
-      <StyledCircularSliderTesteContent ref={contentHolder as any}>
-        <div className='mb-4'>
-          <Heading tag="span" size="h2" className='color-primary50 fw-bold'>{slideContent?.name}</Heading>
-          <Heading tag="span" size="h4" className='color-secondary50'>{slideContent?.role}</Heading>
-        </div>
-        {cta}
-      </StyledCircularSliderTesteContent>
-    </StyledCircularSliderTeste>
+        </StyledProductsSliderSlides>
+      </StyledProductsSliderWrapper>
+      {!isMobile && (
+        <StyledProductsSliderContent ref={contentHolder as any} className='mt-6'>
+          <Heading tag="h5" size="h5">
+            <strong>{activeElement?.title}</strong>
+            <br />
+            {activeElement?.description}
+          </Heading>
+        </StyledProductsSliderContent>
+      )}
+    </StyledProductsSlider>
 
   )
 }
 
-export default CircularSliderTeste
+export default ProductsSlider

package/src/components/organisms/ProductsSlider/ProductsSlider.interface.ts

@@ -0,0 +1,12 @@
+import { CSSProperties } from 'react';
+
+export type IProductsSlider = {
+  id?: string;
+  className?: string;
+  style?: CSSProperties;
+  content?: {
+    title?: string,
+    description?: string | React.ReactElement,
+    imageElement?: React.ReactElement
+  }[],
+}