oddsgate-ds 1.0.20 → 1.0.21

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ICounter } from './Counter.interface';
+declare const Counter: ({ title, number, prefix, suffix, className, style, }: ICounter) => React.JSX.Element;
+export default Counter;

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

@@ -0,0 +1,9 @@
+import { CSSProperties } from 'react';
+export interface ICounter {
+    title?: string;
+    number?: number;
+    prefix?: string;
+    suffix?: string;
+    className?: string;
+    style?: CSSProperties;
+}

package/dist/esm/types/components/atoms/Counter/Counter.stories.d.ts

@@ -0,0 +1,5 @@
+import type { StoryObj } from '@storybook/react';
+import { ICounter } from './Counter.interface';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react").ReactRenderer, import("@storybook/types").Args>;
+export default _default;
+export declare const Example: StoryObj<ICounter>;

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

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

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

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

package/dist/esm/types/components/molecules/LogosCard/LogosCard.component.d.ts

@@ -0,0 +1,4 @@
+import { ILogosCard } from './LogosCard.interface';
+import React from 'react';
+declare const LogosCard: ({ imageElement, title, className, style, ...props }: ILogosCard) => React.JSX.Element;
+export default LogosCard;

package/dist/esm/types/components/molecules/LogosCard/LogosCard.interface.d.ts

@@ -0,0 +1,7 @@
+import { CSSProperties } from 'react';
+export interface ILogosCard {
+    imageElement?: React.ReactElement;
+    title?: string;
+    className?: string;
+    style?: CSSProperties;
+}

package/dist/esm/types/components/molecules/LogosCard/LogosCard.stories.d.ts

@@ -0,0 +1,5 @@
+import type { StoryObj } from '@storybook/react';
+import { ILogosCard } from './LogosCard.interface';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react").ReactRenderer, import("@storybook/types").Args>;
+export default _default;
+export declare const Simple: StoryObj<ILogosCard>;

package/dist/esm/types/components/molecules/LogosCard/LogosCard.theme.d.ts

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

package/dist/esm/types/components/molecules/LogosCard/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./LogosCard.component";

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

@@ -18,6 +18,7 @@ export { default as CheckRadioField } from './components/atoms/FormField/CheckRa
 export { default as Loader } from './components/atoms/Loader';
 export { default as EmptyState } from './components/atoms/EmptyState';
 export { default as CloseButton } from './components/atoms/CloseButton';
+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';
@@ -33,6 +34,7 @@ export { default as IconBox } from './components/molecules/IconBox';
 export { default as IconTitle } from './components/molecules/IconTitle';
 export { default as BlogCard } from './components/molecules/BlogCard';
 export { default as TeamCard } from './components/molecules/TeamCard';
+export { default as LogosCard } from './components/molecules/LogosCard';
 export { default as ProjectCard } from './components/molecules/ProjectCard';
 export { default as Slider } from './components/organisms/Slider';
 export { default as Cover } from './components/organisms/Cover';

package/dist/types.d.ts

@@ -333,6 +333,17 @@ type ICloseButton = {
 
 declare const CloseButton: ({ variant, className, onClick, ...props }: ICloseButton) => React__default.JSX.Element;
 
+interface ICounter {
+    title?: string;
+    number?: number;
+    prefix?: string;
+    suffix?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+
+declare const Counter: ({ title, number, prefix, suffix, className, style, }: ICounter) => React__default.JSX.Element;
+
 interface IScrollingNav {
     align?: string;
     className?: string;
@@ -491,6 +502,15 @@ interface ITeamCard extends ICard {
 
 declare const TeamCard: ({ title, imageElement, role, description, ...props }: ITeamCard) => React__default.JSX.Element;
 
+interface ILogosCard {
+    imageElement?: React.ReactElement;
+    title?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+
+declare const LogosCard: ({ imageElement, title, className, style, ...props }: ILogosCard) => React__default.JSX.Element;
+
 interface IProjectCard extends ICard {
     category?: string;
     title?: string;
@@ -552,4 +572,4 @@ declare const GlobalStyles: React$1.NamedExoticComponent<styled_components.Execu
 
 declare function clickOutSideToClose(ref: React.RefObject<HTMLDivElement>, closeFunction: () => void): void;
 
-export { Accordion, AccordionItem, BlogCard, Button, CheckRadioField, Chip, CircularSlider, CloseButton, Column, Cover, Dropdown, DropdownItem, EmptyState, Flex, FormField, GlobalStyles, Heading, Icon, IconBox, IconTitle, ImageWrapper, Loader, Marquee, Modal, OffCanvas, PortalComponent, ProjectCard, Quote, RichText, Row, ScrollingNav, Separator, ShareModal, Slider, SocialLinks, Spacer, TeamCard, Video, VideoEmbed, clickOutSideToClose, iconsList, variables };
+export { Accordion, AccordionItem, BlogCard, Button, CheckRadioField, Chip, CircularSlider, CloseButton, Column, Counter, Cover, Dropdown, DropdownItem, EmptyState, Flex, FormField, GlobalStyles, Heading, Icon, IconBox, IconTitle, ImageWrapper, Loader, LogosCard, Marquee, Modal, OffCanvas, PortalComponent, ProjectCard, Quote, RichText, Row, ScrollingNav, Separator, ShareModal, Slider, SocialLinks, Spacer, TeamCard, Video, VideoEmbed, clickOutSideToClose, iconsList, variables };

package/package.json

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

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

@@ -0,0 +1,51 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react'
+
+import Heading from '../Heading/Heading.component'
+import { ICounter } from './Counter.interface'
+import { StyledCounter } from '@/components/atoms/Counter/Counter.theme'
+
+const Counter = ({
+  title,
+  number,
+  prefix,
+  suffix,
+  className,
+  style,
+}: ICounter) => {
+  if (!number) return <></>;
+
+  const counter = useRef<HTMLDivElement>();
+  let timeout;
+
+  let counterValue = 0;
+
+  const speed = 200;
+
+  // const increment = Math.trunc(number / speed) < 1 ? 1 : Math.trunc(number / speed);
+  const increment = 2;
+
+  timeout = setInterval(() => {
+    counterValue = counterValue + increment;
+
+    if (counterValue > number) {
+      counterValue = number;
+      clearTimeout(timeout);
+    }
+  }, increment * 1000);
+
+  return (
+    <StyledCounter
+      className={className}
+      style={style}
+    >
+      <Heading tag="span" size="h1" className='d-flex align-items-center color-primary50'>
+        {prefix && prefix}
+        <span>{counterValue}</span>
+        {suffix && suffix}
+      </Heading>
+      {title && <Heading tag="span" size="h5" className='color-secondary50 fw-bold'>{title}</Heading>}
+    </StyledCounter>
+  )
+}
+
+export default Counter

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

@@ -0,0 +1,10 @@
+import { CSSProperties } from 'react';
+
+export interface ICounter {
+  title?: string,
+  number?: number,
+  prefix?: string,
+  suffix?: string,
+  className?: string,
+  style?: CSSProperties
+}

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

@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import Counter from './Counter.component'
+import { ICounter } from './Counter.interface'
+import React from 'react'
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: 'Components/Counter',
+  component: Counter,
+  tags: ['autodocs'],
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+  argTypes: {}
+} as Meta
+
+export const Example: StoryObj<ICounter> = {
+  render: args => (
+    <Counter {...args}></Counter>
+  ),
+  args: {
+    title: "lorem ipsum",
+    number: 30,
+    prefix: "+",
+    suffix: "%",
+  }
+}

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

@@ -0,0 +1,21 @@
+import styled, { css } from 'styled-components';
+
+import { ICounter } from './Counter.interface';
+import { colors } from '@/styles/variables';
+
+export const StyledCounter = styled.div<ICounter>`
+  display: inline-flex;
+  vertical-align: top;
+  flex-flow: column;
+  justify-content: center;
+  align-items: center;
+
+  min-width: 20rem;
+  min-height: 20rem;
+
+  padding: 8px 22px;
+  border-radius: 100%;
+  text-align: center;
+
+  background-color: ${colors.third50};
+`;

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

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

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

@@ -69,6 +69,7 @@ export const StyledFieldContainer = styled.div<IFormField>`
         border: 0;
 
         padding: 12px;
+        color: ${colors.secondary90};
         background: ${colors.secondary50};
         outline: none;
         width: 100%;

package/src/components/molecules/LogosCard/LogosCard.component.tsx

@@ -0,0 +1,14 @@
+import { ILogosCard } from './LogosCard.interface'
+import ImageWrapper from '@/components/atoms/ImageWrapper/ImageWrapper.component'
+import React from 'react'
+import { StyledLogosCard } from './LogosCard.theme'
+
+const LogosCard = ({ imageElement, title, className, style, ...props }: ILogosCard) => {
+  return (
+    <StyledLogosCard className={className} style={style}>
+      {imageElement}
+    </StyledLogosCard>
+  )
+}
+
+export default LogosCard

package/src/components/molecules/LogosCard/LogosCard.interface.ts

@@ -0,0 +1,8 @@
+import { CSSProperties } from 'react';
+
+export interface ILogosCard {
+  imageElement?: React.ReactElement
+  title?: string
+  className?: string;
+  style?: CSSProperties
+}

package/src/components/molecules/LogosCard/LogosCard.stories.tsx

@@ -0,0 +1,38 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { ILogosCard } from './LogosCard.interface';
+import LogosCard from './LogosCard.component';
+import React from 'react';
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: 'Components/LogosCard',
+  component: LogosCard
+} as Meta
+
+const image = (
+  <img
+    width="100%"
+    height="100%"
+    sizes="100vw"
+    decoding="async"
+    src="/assets/placeholder.png"
+    alt="Empty state"
+  />
+)
+
+export const Simple: StoryObj<ILogosCard> = {
+  render: args => (
+    <>
+      <LogosCard {...args}></LogosCard>
+      <LogosCard {...args}></LogosCard>
+      <LogosCard {...args}></LogosCard>
+      <LogosCard {...args}></LogosCard>
+      <LogosCard {...args}></LogosCard>
+    </>
+  ),
+  args: {
+    imageElement: image,
+    title: "Logo Teste",
+  }
+}

package/src/components/molecules/LogosCard/LogosCard.theme.ts

@@ -0,0 +1,19 @@
+import { colors, radius, shadows, spaces } from '@/styles/variables';
+import styled, { css } from 'styled-components';
+
+import { ILogosCard } from './LogosCard.interface';
+
+export const StyledLogosCard = styled.div<ILogosCard>`
+  display: inline-flex;
+  vertical-align: middle;
+  width: 100%;
+  max-width: 160px;
+
+  overflow: hidden;
+  margin: ${spaces[2]} ${spaces[3]};
+
+  & img{
+    object-fit: contain;
+    aspect-ratio: 18/2;
+  }
+`;

package/src/components/molecules/LogosCard/index.ts

@@ -0,0 +1 @@
+export { default } from "./LogosCard.component";

package/src/index.ts

@@ -20,6 +20,7 @@ export { default as CheckRadioField } from './components/atoms/FormField/CheckRa
 export { default as Loader } from './components/atoms/Loader'
 export { default as EmptyState } from './components/atoms/EmptyState'
 export { default as CloseButton } from './components/atoms/CloseButton'
+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'
@@ -39,6 +40,7 @@ export { default as IconBox } from './components/molecules/IconBox'
 export { default as IconTitle } from './components/molecules/IconTitle'
 export { default as BlogCard } from './components/molecules/BlogCard'
 export { default as TeamCard } from './components/molecules/TeamCard'
+export { default as LogosCard } from './components/molecules/LogosCard'
 export { default as ProjectCard } from './components/molecules/ProjectCard'
 // //organisms
 export { default as Slider } from './components/organisms/Slider'

package/src/styles/variables.ts

@@ -84,22 +84,22 @@ export const spacesNegative = <Record<string, string>>{
 export const typography = <Record<string, Record<string, unknown>>>{
   display: {
     size: pxToRem(250),
-    sizeMob: pxToRem(180),
+    sizeMob: pxToRem(64),
     height: 1.2,
   },
   h1: {
     size: pxToRem(120),
-    sizeMob: pxToRem(64),
+    sizeMob: pxToRem(48),
     height: 1.2,
   },
   h2: {
     size: pxToRem(80),
-    sizeMob: pxToRem(42),
+    sizeMob: pxToRem(36),
     height: 1.2,
   },
   h3: {
     size: pxToRem(48),
-    sizeMob: pxToRem(28),
+    sizeMob: pxToRem(24),
     height: 1.2,
   },
   h4: {
@@ -108,8 +108,8 @@ export const typography = <Record<string, Record<string, unknown>>>{
     height: 1.2,
   },
   h5: {
-    size: pxToRem(20),
-    sizeMob: pxToRem(16),
+    size: pxToRem(24),
+    sizeMob: pxToRem(18),
     height: 1.4,
   },
   h6: {
@@ -118,13 +118,13 @@ export const typography = <Record<string, Record<string, unknown>>>{
     height: 1.4,
   },
   texts: {
-    size: "16px",
-    sizeMob: "13px",
+    size: "18px",
+    sizeMob: "16px",
     height: 1.6,
   },
   captions: {
-    size: "12px",
-    sizeMob: "10px",
+    size: "16px",
+    sizeMob: "13px",
     height: 1.2,
   },
 };