oddsgate-ds 1.0.21 → 1.0.22

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

@@ -38,6 +38,7 @@ 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";
@@ -553,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;
@@ -572,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, 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 };
+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.21",
+  "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

@@ -3,6 +3,7 @@ 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,
@@ -14,31 +15,29 @@ const Counter = ({
 }: ICounter) => {
   if (!number) return <></>;
 
-  const counter = useRef<HTMLDivElement>();
-  let timeout;
+  const [counterValue, setCounterValue] = useState<number>(0);
 
-  let counterValue = 0;
+  const speed = 50;
+  const increment = Math.trunc(number / speed) < 1 ? 1 : Math.trunc(number / speed);
 
-  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);
+  useInterval(() => {
+    if (counterValue != number) {
+      if (counterValue > number) {
+        setCounterValue(number)
+      } else {
+        setCounterValue(counterValue + increment);
+      }
+    } else {
+      return true;
     }
-  }, increment * 1000);
+  }, speed);
 
   return (
     <StyledCounter
       className={className}
       style={style}
     >
-      <Heading tag="span" size="h1" className='d-flex align-items-center color-primary50'>
+      <Heading tag="span" size="h1" className='d-flex align-items-center color-primary50 fw-bold'>
         {prefix && prefix}
         <span>{counterValue}</span>
         {suffix && suffix}

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

@@ -17,5 +17,5 @@ export const StyledCounter = styled.div<ICounter>`
   border-radius: 100%;
   text-align: center;
 
-  background-color: ${colors.third50};
+  background-color: ${colors.third10};
 `;

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;
@@ -99,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/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
+}

package/src/components/organisms/Tabs/Tabs.stories.tsx

@@ -0,0 +1,115 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { ITabs } from './Tabs.interface'
+import React from 'react'
+import RichText from '@/components/atoms/RichText'
+import Tabs from './Tabs.component'
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: 'Components/Tabs',
+  component: Tabs
+} as Meta
+
+export const Simple: StoryObj<ITabs> = {
+  render: args => <Tabs {...args}></Tabs>,
+  args: {
+    title: "Lorem ipsum dolor sit amet",
+    vertical: true,
+    menu: [
+      {
+        id: 'lorem-1',
+        label: 'Lorem 1',
+        content: (
+          <RichText style={{ color: 'var(--color-gray50)' }}>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+            aliquip ex ea commodo consequat. Duis aute irure dolor in
+            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+            pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+            culpa qui officia deserunt mollit anim id est laborum.
+          </RichText>
+        ),
+        onClick: () =>{
+          alert("Tab clicked")
+        }
+      },
+      {
+        id: 'lorem-2',
+        label: 'Lorem 2',
+        content: (
+          <RichText style={{ color: 'var(--color-gray50)' }}>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+            aliquip ex ea commodo consequat. Duis aute irure dolor in
+            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+            pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+            culpa qui officia deserunt mollit anim id est laborum.
+          </RichText>
+        )
+      },
+      {
+        id: 'lorem-3',
+        label: 'Lorem 3',
+        content: (
+          <RichText style={{ color: 'var(--color-gray50)' }}>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+            aliquip ex ea commodo consequat. Duis aute irure dolor in
+            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+            pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+            culpa qui officia deserunt mollit anim id est laborum.
+          </RichText>
+        )
+      },
+      {
+        id: 'lorem-4',
+        label: 'Lorem 4',
+        content: (
+          <RichText style={{ color: 'var(--color-gray50)' }}>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+            aliquip ex ea commodo consequat. Duis aute irure dolor in
+            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+            pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+            culpa qui officia deserunt mollit anim id est laborum.
+          </RichText>
+        )
+      },
+      {
+        id: 'lorem-5',
+        label: 'Lorem 5',
+        content: (
+          <RichText style={{ color: 'var(--color-gray50)' }}>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+            aliquip ex ea commodo consequat. Duis aute irure dolor in
+            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+            pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+            culpa qui officia deserunt mollit anim id est laborum.
+          </RichText>
+        )
+      },
+      {
+        id: 'lorem-6',
+        label: 'Lorem 6',
+        content: (
+          <RichText style={{ color: 'var(--color-gray50)' }}>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+            aliquip ex ea commodo consequat. Duis aute irure dolor in
+            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+            pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+            culpa qui officia deserunt mollit anim id est laborum.
+          </RichText>
+        )
+      }
+    ],
+  }
+}

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

@@ -0,0 +1,70 @@
+import { ITabs, ITabsItem } from './Tabs.interface';
+import { colors, responsiveMedia } from '@/styles/variables';
+import styled, { css } from 'styled-components';
+
+export const StyledTabsMenu = styled.ul<ITabs>`
+  display: inline-flex;
+  flex-flow: column;
+
+  gap: 16px;
+  list-style: none;
+  padding: 0;
+
+  @media only screen and (min-width: ${responsiveMedia}) {
+    flex-flow: row wrap;
+    align-items: center;
+    justify-content: center;
+  }
+`
+
+export const StyledTabsLinks = styled.a<ITabsItem>`
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  color: ${colors.white};
+  background-color: ${colors.third10};
+  padding: 8px 12px;
+  border-radius: 50px;
+  transition: all 0.3s linear;
+  cursor: pointer;
+
+  &:hover{
+    background-color: ${colors.primary50};
+  }
+`
+
+
+export const StyledTabsContent = styled.div<ITabs>`
+  display: none;
+
+  background-color: ${colors.primary50};
+  border-radius: 48px 0;
+  padding: 36px;
+`
+
+export const StyledTabs = styled.div<ITabs>`
+  position: relative;
+  display: flex;
+  align-items: center;
+  flex-flow: column;
+  gap: 16px;
+
+  ${({ vertical }) => vertical && `
+    @media only screen and (max-width: ${responsiveMedia}) {
+      flex-flow: row;
+
+      & > div{
+        &:first-child{
+          width: 60%;
+          flex-grow: 1;
+        }
+        &:last-child{
+          width: 40%;
+          flex-shrink: 1;
+        }
+      }
+    }
+  `}
+`;
+

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

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

package/src/helpers/useInterval.ts

@@ -0,0 +1,25 @@
+import { useEffect, useRef } from "react";
+
+export const useInterval = (callback, delay) => {
+  const savedCallback = useRef();
+  let id
+
+  useEffect(() => {
+    savedCallback.current = callback;
+  });
+
+  useEffect(() => {
+    function tick() {
+      if (savedCallback && savedCallback.current) {
+        const result = (savedCallback as unknown as any).current();
+        if (result === true) {// if callback returs true, clear timeout;
+          clearInterval(id);
+        }
+      }
+    }
+
+    id = setInterval(tick, delay);
+
+    return () => clearInterval(id);
+  }, [delay]);
+}

package/src/index.ts

@@ -45,6 +45,7 @@ export { default as ProjectCard } from './components/molecules/ProjectCard'
 // //organisms
 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'

package/src/styles/variables.ts

@@ -2,8 +2,8 @@ export const pxToRem = (size: number) => {
   return (size / 16) * 1 + 'rem'
 }
 
-export const fontName = "Red Hat Display"
-export const alternativeFont = "MD Nichrome";
+export const fontName = "MD Nichrome"
+export const alternativeFont = "Red Hat Display";
 
 export const gutter = pxToRem(8); //needs to be in this file
 
@@ -132,7 +132,7 @@ export const typography = <Record<string, Record<string, unknown>>>{
 export const radius = <Record<string, string>>{
   sm: '6px',
   md: '10px',
-  lg: '50px',
+  lg: '48px',
   rounded: '100px',
 }
 export const shadows = <Record<string, string>>{