oddsgate-ds 1.0.52 → 1.0.56

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

@@ -3,128 +3,17 @@ import { IMarquee } from './Marquee.interface'
 import React from 'react'
 import { StyledMarquee } from './Marquee.theme'
 import cn from 'classnames'
-import styled from 'styled-components'
 
 const Marquee = ({ text, className, onClick, ...props }: IMarquee) => {
   return (
-        <Div3>
-          <Img
-            loading="lazy"
-            srcSet="..."
-          />
-          <Div4>
-            <Div5>
-              <Div6>
-                Transports
-                <br />& Infrastructers{" "}
-              </Div6>
-              <Div7>
-                <Img2
-                  loading="lazy"
-                  srcSet="..."
-                />
-              </Div7>
-            </Div5>
-          </Div4>
-        </Div3>
-  );
+    <StyledMarquee className={cn(className)} onClick={onClick} {...props}>
+      <div>
+        <Heading size="display" tag="span" className='text-uppercase'>
+          {text} {text} {text}
+        </Heading>
+      </div>
+    </StyledMarquee>
+  )
 }
 
-const Div = styled.div`
-  display: flex;
-  flex-direction: column;
-`;
-
-const Div2 = styled.div`
-  align-items: flex-start;
-  align-self: end;
-  display: flex;
-  margin-top: 100px;
-  width: 417px;
-  max-width: 100%;
-  flex-grow: 1;
-  flex-direction: column;
-`;
-
-const Div3 = styled.div`
-  disply: flex;
-  flex-direction: column;
-  border-radius: 10px;
-  align-self: stretch;
-  position: relative;
-  display: flex;
-  aspect-ratio: 1.2337278106508875;
-  flex-grow: 1;
-  padding-top: 8px;
-  padding-right: 17px;
-  padding-bottom: 16px;
-  padding-left: 16px;
-`;
-
-const Img = styled.img`
-  position: absolute;
-  height: 100%;
-  width: 100%;
-  object-fit: cover;
-  object-position: center;
-`;
-
-const Div4 = styled.div`
-  position: relative;
-  justify-content: flex-end;
-  align-items: flex-end;
-  border-bottom: 1px solid var(--White, #fff);
-  align-self: stretch;
-  display: flex;
-  padding-top: 40px;
-  padding-bottom: 24px;
-  flex-direction: column;
-`;
-
-const Div5 = styled.div`
-  align-self: stretch;
-  display: flex;
-  margin-top: 192px;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 20px;
-`;
-
-const Div6 = styled.div`
-  align-self: start;
-  color: #fff;
-  font-feature-settings: "clig" off, "liga" off;
-  font-family: Noto Sans, sans-serif;
-  font-size: 24px;
-  font-weight: 300;
-  line-height: 120%;
-  max-width: 324px;
-  flex-grow: 1;
-  flex-basis: auto;
-`;
-
-const Div7 = styled.div`
-  justify-content: center;
-  align-items: center;
-  border-radius: 100px;
-  background-color: var(--Soft-Green, #f2f1ef);
-  align-self: start;
-  display: flex;
-  margin-top: 18px;
-  width: 40px;
-  max-width: 100%;
-  padding-top: 3px;
-  padding-right: 3px;
-  padding-bottom: 3px;
-  padding-left: 3px;
-  flex-direction: column;
-`;
-
-const Img2 = styled.img`
-  aspect-ratio: 1;
-  object-fit: cover;
-  object-position: center;
-  width: 34px;
-`;
-
 export default Marquee

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

@@ -8,13 +8,12 @@ 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: {
-    text: 'People • Sustainability • Efficiency • Innovation'
+    text: "People • Sustainability • Efficiency • Innovation"
   }
 }

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

@@ -15,9 +15,7 @@ export const StyledMarquee = styled.div<IMarquee>`
   --move-initial: calc(-25% + var(--offset));
   --move-final: calc(-50% + var(--offset));
 
-  color: ${colors.white};
-  background-color: ${colors.primary50};
-  border-radius: ${radius.md};
+  color: ${colors.primary50};
 
   padding: 8px 0;
 
@@ -27,7 +25,7 @@ export const StyledMarquee = styled.div<IMarquee>`
     width: fit-content;
     white-space: nowrap;
     transform: translate3d(var(--move-initial), 0, 0);
-    animation: marquee 5s linear infinite;
+    animation: marquee 15s linear infinite;
   }
 
   @keyframes marquee {

package/src/styles/Global.ts

@@ -292,6 +292,4 @@ const GlobalStyles = createGlobalStyle`
 
   ${Object.keys(utilities).map((util, i) => `${generateUtilities(util, '')}`)}
 `
-
-
 export default GlobalStyles;

package/types.d.ts

@@ -1,79 +0,0 @@
-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 responsiveMedia = "980px";
-declare const mobileMedia = "360px";
-declare const easeOutExpo = "cubic-bezier(.32,.94,.6,1);";
-type IBreakpoints = {
-    $xs?: string;
-    $sm?: string;
-    $md?: string;
-    $lg?: string;
-    $xl?: string;
-    $xxl?: string;
-};
-declare const colors: Record<string, string>;
-declare const spaces: Record<string, string>;
-declare const spacesNegative: Record<string, string>;
-declare const typography: Record<string, Record<string, unknown>>;
-declare const radius: Record<string, string>;
-declare const shadows: Record<string, string>;
-declare const zIndexes: Record<string, string>;
-declare const grid_conf: {
-    gridSize: number;
-    gutter: number;
-    mediaQuery: string;
-    container: IBreakpoints;
-    breakpoints: IBreakpoints;
-};
-
-type variables_IBreakpoints = IBreakpoints;
-declare const variables_alternativeFont: typeof alternativeFont;
-declare const variables_colors: typeof colors;
-declare const variables_desktop_width: typeof desktop_width;
-declare const variables_easeOutExpo: typeof easeOutExpo;
-declare const variables_fontName: typeof fontName;
-declare const variables_grid_conf: typeof grid_conf;
-declare const variables_gutter: typeof gutter;
-declare const variables_mobileMedia: typeof mobileMedia;
-declare const variables_mobile_width: typeof mobile_width;
-declare const variables_pxToRem: typeof pxToRem;
-declare const variables_radius: typeof radius;
-declare const variables_responsiveMedia: typeof responsiveMedia;
-declare const variables_shadows: typeof shadows;
-declare const variables_spaces: typeof spaces;
-declare const variables_spacesNegative: typeof spacesNegative;
-declare const variables_tablet_width: typeof tablet_width;
-declare const variables_typography: typeof typography;
-declare const variables_zIndexes: typeof zIndexes;
-declare namespace variables {
-  export {
-    variables_IBreakpoints as IBreakpoints,
-    variables_alternativeFont as alternativeFont,
-    variables_colors as colors,
-    variables_desktop_width as desktop_width,
-    variables_easeOutExpo as easeOutExpo,
-    variables_fontName as fontName,
-    variables_grid_conf as grid_conf,
-    variables_gutter as gutter,
-    variables_mobileMedia as mobileMedia,
-    variables_mobile_width as mobile_width,
-    variables_pxToRem as pxToRem,
-    variables_radius as radius,
-    variables_responsiveMedia as responsiveMedia,
-    variables_shadows as shadows,
-    variables_spaces as spaces,
-    variables_spacesNegative as spacesNegative,
-    variables_tablet_width as tablet_width,
-    variables_typography as typography,
-    variables_zIndexes as zIndexes,
-  };
-}
-
-declare function export_default(): void;
-
-export { export_default as default, variables };