oddsgate-ds 1.0.20 → 1.0.22

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/components/organisms/Tabs/Tabs.component.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ITabs } from './Tabs.interface';
+declare const Tabs: ({ id, title, menu, vertical, className, style }: ITabs) => React.JSX.Element;
+export default Tabs;

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

@@ -0,0 +1,16 @@
+import { CSSProperties } from 'react';
+export interface ITabs {
+    id?: string;
+    title?: string;
+    menu?: ITabsItem[];
+    vertical?: boolean;
+    className?: string;
+    style?: CSSProperties;
+}
+export interface ITabsItem {
+    id?: string;
+    label?: string;
+    $active?: boolean;
+    content?: React.ReactNode;
+    onClick?: (event?: React.MouseEvent<HTMLElement>) => void;
+}

package/dist/esm/types/components/organisms/Tabs/Tabs.stories.d.ts

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

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { ITabs, ITabsItem } from './Tabs.interface';
+export declare const StyledTabsMenu: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, ITabs>> & string;
+export declare const StyledTabsLinks: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, ITabsItem>> & string;
+export declare const StyledTabsContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ITabs>> & string;
+export declare const StyledTabs: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ITabs>> & string;

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

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

package/dist/esm/types/helpers/useInterval.d.ts

@@ -0,0 +1 @@
+export declare const useInterval: (callback: any, delay: any) => void;

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,9 +34,11 @@ 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';
+export { default as Tabs } from './components/organisms/Tabs';
 export { default as CircularSlider } from './components/organisms/CircularSlider';
 export { iconsList } from './helpers/getIcons';
 export { default as GlobalStyles } from './styles/Global';

package/dist/esm/types/styles/variables.d.ts

@@ -1,6 +1,6 @@
 export declare const pxToRem: (size: number) => string;
-export declare const fontName = "Red Hat Display";
-export declare const alternativeFont = "MD Nichrome";
+export declare const fontName = "MD Nichrome";
+export declare const alternativeFont = "Red Hat Display";
 export declare const gutter: string;
 export declare const desktop_width = "1360";
 export declare const tablet_width = "768";

package/dist/types.d.ts

@@ -4,8 +4,8 @@ import { spaces as spaces$1 } from '@/styles/variables';
 import * as styled_components from 'styled-components';
 
 declare const pxToRem: (size: number) => string;
-declare const fontName = "Red Hat Display";
-declare const alternativeFont = "MD Nichrome";
+declare const fontName = "MD Nichrome";
+declare const alternativeFont = "Red Hat Display";
 declare const gutter: string;
 declare const desktop_width = "1360";
 declare const tablet_width = "768";
@@ -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;
@@ -533,6 +553,24 @@ type ICover = {
 
 declare const Cover: ({ minHeight, contentPosition, imageElement, overlayOpacity, overlayColor, style, className, children }: ICover) => React__default.JSX.Element;
 
+interface ITabs {
+    id?: string;
+    title?: string;
+    menu?: ITabsItem[];
+    vertical?: boolean;
+    className?: string;
+    style?: CSSProperties;
+}
+interface ITabsItem {
+    id?: string;
+    label?: string;
+    $active?: boolean;
+    content?: React.ReactNode;
+    onClick?: (event?: React.MouseEvent<HTMLElement>) => void;
+}
+
+declare const Tabs: ({ id, title, menu, vertical, className, style }: ITabs) => React__default.JSX.Element;
+
 type ICircularSlider = {
     id?: string;
     className?: string;
@@ -552,4 +590,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, Tabs, TeamCard, Video, VideoEmbed, clickOutSideToClose, iconsList, variables };

package/package.json

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

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

@@ -5,7 +5,6 @@ import { IButtonSC } from './Button.interface';
 import { fontSize } from '@/styles/utilities';
 
 export const StyledButton = styled.a<IButtonSC>`
-  font-family: var(--font-nichrome) !important;
   display: inline-flex;
   vertical-align: middle;
   justify-content: center;
@@ -14,6 +13,7 @@ export const StyledButton = styled.a<IButtonSC>`
   border: 0;
   outline: 0;
   background-color: transparent;
+  font-weight: 700;
 
   margin-right: ${spaces[3]};
 

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

@@ -0,0 +1,50 @@
+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'
+import { useInterval } from '@/helpers/useInterval'
+
+const Counter = ({
+  title,
+  number,
+  prefix,
+  suffix,
+  className,
+  style,
+}: ICounter) => {
+  if (!number) return <></>;
+
+  const [counterValue, setCounterValue] = useState<number>(0);
+
+  const speed = 50;
+  const increment = Math.trunc(number / speed) < 1 ? 1 : Math.trunc(number / speed);
+
+  useInterval(() => {
+    if (counterValue != number) {
+      if (counterValue > number) {
+        setCounterValue(number)
+      } else {
+        setCounterValue(counterValue + increment);
+      }
+    } else {
+      return true;
+    }
+  }, speed);
+
+  return (
+    <StyledCounter
+      className={className}
+      style={style}
+    >
+      <Heading tag="span" size="h1" className='d-flex align-items-center color-primary50 fw-bold'>
+        {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.third10};
+`;

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

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

package/src/components/atoms/FormField/CheckRadioField/CheckRadioField.theme.ts

@@ -57,6 +57,14 @@ export const StyledCheckRadioField = styled.div<ICheckRadioField>`
         opacity: 0;
         visibility: hidden;
       }
+
+      & a {
+        color: ${colors.primary50};
+
+        &:hover{
+          opacity:0.6;
+        }
+      }
     }
   }
 

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

@@ -33,7 +33,6 @@ export const StyledFieldContainer = styled.div<IFormField>`
 
       label {
         display: block;
-        font-family: var(--font-nichrome) !important;
       }
 
       &:has(select) {
@@ -60,7 +59,6 @@ export const StyledFieldContainer = styled.div<IFormField>`
       input,
       textarea,
       select {
-        font-family: var(--font-nichrome) !important;
         ${fontSize('h4')};
         font-weight: 700;
         text-transform:uppercase;
@@ -69,6 +67,7 @@ export const StyledFieldContainer = styled.div<IFormField>`
         border: 0;
 
         padding: 12px;
+        color: ${colors.secondary90};
         background: ${colors.secondary50};
         outline: none;
         width: 100%;
@@ -98,27 +97,6 @@ export const StyledFieldContainer = styled.div<IFormField>`
       input[type="search"]::-webkit-search-results-decoration {
         -webkit-appearance: none;
       }
-
-      .style-dark & {
-        &:has(select) {
-          & > div {
-            &::after {
-              background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7.33333 9.24435L11.016 5.33398L12 6.3788L7.33333 11.334L2.66667 6.3788L3.65065 5.33398L7.33333 9.24435Z' fill='%23fff'/%3E%3C/svg%3E%0A");
-            }
-          }
-        }
-
-        i {
-          color: ${colors.white};
-        }
-
-        & input,
-        & textarea,
-        & select {
-          color: ${colors.white};
-          border-color: ${colors.white};
-        }
-      }
   `
       : `
       & > div{

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

@@ -40,6 +40,7 @@ export const StyledSocialLinks = styled.ul<ISocialLinks>`
             background-color: ${colors.primary50};
           }
         `;
+
       case "dark":
         return css`
           & li a{
@@ -47,6 +48,19 @@ export const StyledSocialLinks = styled.ul<ISocialLinks>`
             background-color: ${colors.secondary50};
           }
         `;
+
+      case "text":
+        return css`
+          & li a{
+            width: auto;
+            height: auto;
+            border-radius: 0%;
+
+            & span{
+              font-weight: 700;
+            }
+          }
+        `;
     }
   }}
 `;

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/components/organisms/Tabs/Tabs.component.tsx

@@ -0,0 +1,62 @@
+import React, { useRef, useState } from 'react'
+import {
+  StyledTabs,
+  StyledTabsContent,
+  StyledTabsLinks,
+  StyledTabsMenu
+} from './Tabs.theme'
+
+import Heading from '@/components/atoms/Heading/Heading.component'
+import { ITabs } from './Tabs.interface'
+import Icon from '@/components/atoms/Icon/Icon.component'
+
+const Tabs = ({ id, title, menu, vertical, className, style }: ITabs) => {
+  const [active, setActive] = useState(0)
+
+  return (
+    <StyledTabs id={id} vertical={vertical} className={className} style={style}>
+      <div>
+        {title && <Heading tag="h3" size="h1" className='text-uppercase mb-4'>{title}</Heading>}
+        <StyledTabsMenu>
+          {menu &&
+            menu.map((item, index) => {
+              return (
+                <li key={`tab-${item.id}`}>
+                  <StyledTabsLinks
+                    $active={index === active}
+                    className='h3 fw-bold'
+                    onClick={() => {
+                      if (item?.onClick) item?.onClick()
+
+                      setActive(index)
+                    }}
+                  >
+                    <span>{item.label}</span>
+                  </StyledTabsLinks>
+                </li>
+              )
+            })}
+        </StyledTabsMenu>
+      </div>
+      {menu && (
+        <div>
+          {menu.map((item, index) => {
+            return (
+              <StyledTabsContent
+                key={`tab-content-${item.id}`}
+                className='h4'
+                style={
+                  active === index ? { display: 'block' } : { display: 'none' }
+                }
+              >
+                {item.content}
+              </StyledTabsContent>
+            )
+          })}
+        </div>
+      )}
+    </StyledTabs>
+  )
+}
+
+export default Tabs

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

@@ -0,0 +1,17 @@
+import { CSSProperties } from 'react';
+
+export interface ITabs {
+  id?: string
+  title?: string
+  menu?: ITabsItem[]
+  vertical?: boolean
+  className?: string
+  style?: CSSProperties
+}
+export interface ITabsItem {
+  id?: string
+  label?: string
+  $active?: boolean
+  content?: React.ReactNode
+  onClick?: (event?: React.MouseEvent<HTMLElement>) => void
+}