oddsgate-ds 1.0.53 → 1.0.57

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oddsgate-ds",
-  "version": "1.0.53",
+  "version": "1.0.57",
   "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,
+  variant = "primary",
   mode,
   outlined,
   leftIcon,
@@ -42,7 +42,7 @@ const Button = ({
       {variant === "primary" ? (
         <>
           {children && <span>{children}</span>}
-          <Icon icon={"icon-arrow-right"} />
+          {!rightIcon && !leftIcon && (<Icon icon={"icon-arrow-right"} />)}
         </>
       ) : (
         <>

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

@@ -99,22 +99,26 @@ export const StyledButton = styled.a<IButtonSC>`
         `;
       case "link":
         return css`
-          ${fontSize('h5')};
-          text-transform:uppercase;
+            ${fontSize('h5')};
+            text-transform:uppercase;
 
-          ${props.$mode === "light" ? `
-            color: ${colors.third50};
+            ${props.$mode === "light" ? `
+              color: ${colors.third50};
 
-            &:hover{
+              &:hover{
+                color: ${colors.secondary50};
+              }
+              ` : `
               color: ${colors.secondary50};
-            }
-            ` : `
-            color: ${colors.secondary50};
 
-            &:hover{
-              color: ${colors.primary50};
-            }
-          `}
+              &:hover{
+                color: ${colors.primary50};
+              }
+            `}
+          `;
+      case "icon":
+        return css`
+
         `;
     }
   }}

package/src/components/atoms/FormField/FormField.theme.tsx

@@ -59,14 +59,12 @@ export const StyledFieldContainer = styled.div<IFormField>`
       input,
       textarea,
       select {
-        ${fontSize('h4')};
-        font-weight: 700;
-        text-transform:uppercase;
+        ${fontSize('h5')};
 
         border-radius: 50px;
         border: 0;
 
-        padding: 12px;
+        padding: 1rem 2rem;
         color: ${colors.secondary90};
         background: ${colors.secondary50};
         outline: none;

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='fw-bold 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 };