oddsgate-ds 1.0.20 → 1.0.22

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

@@ -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,10 +40,12 @@ 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'
 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
 
@@ -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,
   },
 };
@@ -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>>{