oddsgate-ds 1.0.24 → 1.0.26

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

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

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { ICard } from '../Card/Card.interface';
+export interface IProductCard extends ICard {
+    title?: string;
+    description?: string | React.ReactElement;
+}

package/dist/{cjs/types/components/molecules/ProjectCard/ProjectCard.stories.d.ts → esm/types/components/molecules/ProductCard/ProductCard.stories.d.ts}

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

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

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

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

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

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

@@ -35,7 +35,7 @@ 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 ProductCard } from './components/molecules/ProductCard';
 export { default as Slider } from './components/organisms/Slider';
 export { default as Cover } from './components/organisms/Cover';
 export { default as Tabs } from './components/organisms/Tabs';

package/dist/types.d.ts

@@ -511,14 +511,12 @@ interface ILogosCard {
 
 declare const LogosCard: ({ imageElement, title, className, style, ...props }: ILogosCard) => React__default.JSX.Element;
 
-interface IProjectCard extends ICard {
-    category?: string;
+interface IProductCard extends ICard {
     title?: string;
-    buttonLabel?: string;
-    linkElement?: React.ReactElement;
+    description?: string | React.ReactElement;
 }
 
-declare const ProjectCard: ({ variant, category, title, imageElement, linkElement, buttonLabel, ...props }: IProjectCard) => React__default.JSX.Element;
+declare const ProductCard: ({ title, imageElement, description, className, style, ...props }: IProductCard) => React__default.JSX.Element;
 
 interface ISlider {
     $responsiveCSS?: string;
@@ -590,4 +588,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, Tabs, 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, ProductCard, 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.24",
+  "version": "1.0.26",
   "description": "Miew theme component library",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

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

@@ -63,7 +63,7 @@ export const StyledButton = styled.a<IButtonSC>`
           ${fontSize('h5')};
           font-weight: 700;
           text-transform:uppercase;
-          padding: 18px 26px;
+          padding: 10px 20px;
           border-radius: 50px;
 
           ${props.$mode === "light" ? `
@@ -99,7 +99,7 @@ export const StyledButton = styled.a<IButtonSC>`
             color: ${colors.secondary50};
 
             &:hover{
-              color: ${colors.third50};
+              color: ${colors.primary50};
             }
           `}
         `;

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

@@ -4,7 +4,7 @@ import { ISocialLinks } from './SocialLinks.interface';
 import { colors } from '@/styles/variables';
 
 export const StyledSocialLinks = styled.ul<ISocialLinks>`
-  display: flex;
+  display: inline-flex;
   align-items: center;
   gap: 12px;
 

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

@@ -0,0 +1,31 @@
+import { StyledProductCard, StyledProductCardWrapper } from './ProductCard.theme'
+
+import Heading from '@/components/atoms/Heading'
+import { IProductCard } from './ProductCard.interface'
+import ImageWrapper from '@/components/atoms/ImageWrapper'
+import React from 'react'
+import RichText from '@/components/atoms/RichText/RichText.component'
+
+const ProductCard = ({
+  title,
+  imageElement,
+  description,
+  className,
+  style,
+  ...props
+}: IProductCard) => {
+
+  return (
+    <StyledProductCard className={className} style={style}>
+      <StyledProductCardWrapper>
+        <Heading tag={'h3'} size={'h3'} className={'fw-bold'}>
+          {title}
+        </Heading>
+        {imageElement}
+      </StyledProductCardWrapper>
+      {description && <RichText tag='p' className='color-secondary50 mt-4'>{description}</RichText>}
+    </StyledProductCard>
+  )
+}
+
+export default ProductCard

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

@@ -0,0 +1,6 @@
+import { ICard } from '../Card/Card.interface';
+
+export interface IProductCard extends ICard {
+  title?: string
+  description?: string | React.ReactElement
+}

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

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { IProductCard } from './ProductCard.interface'
+import ProductCard from './ProductCard.component'
+import React from 'react'
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: 'Components/ProductCard',
+  component: ProductCard,
+  tags: ['autodocs']
+} as Meta
+
+const image = (
+  <img
+    width="100%"
+    height="100%"
+    sizes="100vw"
+    decoding="async"
+    src="/assets/placeholder.png"
+    alt="Empty state"
+  />
+)
+
+export const Simple: StoryObj<IProductCard> = {
+  render: args => <ProductCard {...args} style={{ maxWidth: '320px' }}></ProductCard>,
+  args: {
+    title: 'Lorem ipsum',
+    imageElement: image,
+    description:
+      'Cras vel facilisis tellus, id iaculis risus. Vestibulum non mollis ipsum. Vestibulum faucibus nisl sit amet magna interdum tristique. Cras vel facilisis tellus, id iaculis risus. Vestibulum non mollis ipsum. Vestibulum faucibus nisl sit amet magna interdum tristique.',
+  }
+}

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

@@ -0,0 +1,27 @@
+import { colors, radius } from '@/styles/variables';
+import styled, { css } from 'styled-components';
+
+import { IProductCard } from './ProductCard.interface';
+
+export const StyledProductCard = styled.div <IProductCard>`
+  text-align:center;
+
+  & picture{
+    width: 100%;
+    max-width: 10rem;
+
+    &img{
+      object-fit: contain;
+    }
+  }
+`;
+
+export const StyledProductCardWrapper = styled.div<IProductCard>`
+  display:flex;
+  flex-flow:column;
+  align-items: center;
+  gap: 1rem;
+  background-color: ${colors.primary50};
+  padding: 2rem;
+  border-radius: ${radius.md};
+`;

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

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

package/src/components/organisms/CircularSlider/CircularSlider.component.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import {
   StyledCircularSlider,
   StyledCircularSliderContent,
@@ -7,6 +7,7 @@ import {
   StyledCircularSliderWrapper
 } from './CircularSlider.theme'
 
+import Heading from '@/components/atoms/Heading/Heading.component';
 import { ICircularSlider } from './CircularSlider.interface'
 
 const CircularSlider = ({
@@ -15,14 +16,28 @@ const CircularSlider = ({
   className,
 }: ICircularSlider) => {
 
+  const [slideContent, setSlideContent] = useState({
+    name: '',
+    role: '',
+  });
   const slider = useRef<HTMLDivElement>();
   const wrapper = useRef<HTMLDivElement>();
   const slidesHolder = useRef<HTMLDivElement>();
+  const contentHolder = useRef<HTMLDivElement>();
 
-  const sliderSize = 80 / 100;
-  const slideSize = 15 / 100;
+  const sliderSize = 1;
+  const slideSize = 0.15;
 
 
+  //force 12 items
+  if (content && content.length < 12) {
+    let counter = 0;
+    for (let i = content.length; i <= 12; i++) {
+      content[i] = content[counter];
+      counter++;
+    }
+  }
+
   useEffect(() => {
     if (!slidesHolder.current) return //bail out;
 
@@ -34,8 +49,8 @@ const CircularSlider = ({
 
     let currentAngle = -90;
 
-    // const stepAngle = 2 * Math.PI / slidesHolder?.current?.children.length;
-    const stepAngle = 0.52;
+    const stepAngle = 2 * Math.PI / slidesHolder?.current?.children.length;
+    // const stepAngle = 0.52;
 
     let currentSlide = 0;
 
@@ -81,11 +96,19 @@ const CircularSlider = ({
     }
 
     const addStyle = () => {
-      slides[currentSlide].classList.add('slides-holder__item_active');
+      setTimeout(() => {
+        contentHolder?.current?.classList.add('active');
+      }, 400);
+
+      content && setSlideContent(content[currentSlide] as any)
+      slides[currentSlide].classList.add('active');
       slides[currentSlide].style.height = slides[currentSlide].style.width = slidesSize + 20 + 'px';
     };
     const removeStyle = () => {
-      slides[currentSlide].classList.remove('slides-holder__item_active');
+      contentHolder?.current?.classList.remove('active');
+
+      content && setSlideContent(content[currentSlide] as any)
+      slides[currentSlide].classList.remove('active');
       slides[currentSlide].style.height = slides[currentSlide].style.width = slidesSize + 'px';
     };
 
@@ -131,18 +154,17 @@ const CircularSlider = ({
     }
   }, [])
 
+  if (!content) return <></>
 
   return (
-    <StyledCircularSlider ref={slider as any}>
+    <StyledCircularSlider ref={slider as any} className={className} style={style}>
+      <StyledCircularSliderContent ref={contentHolder as any}>
+        <div>
+          <Heading tag="span" size="h2" className='color-primary50 fw-bold'>{slideContent?.name}</Heading>
+          <Heading tag="span" size="h4" className='color-secondary50'>{slideContent?.role}</Heading>
+        </div>
+      </StyledCircularSliderContent>
       <StyledCircularSliderWrapper ref={wrapper as any}>
-        {/* <div className="controls">
-          <div className="controls__left">
-            <div className="icon-wrapper">left</div>
-          </div>
-          <div className="controls__right">
-            <div className="icon-wrapper">right</div>
-          </div>
-        </div> */}
         <StyledCircularSliderSlides ref={slidesHolder as any}>
           {content?.map((item, index) => {
             return (
@@ -150,9 +172,6 @@ const CircularSlider = ({
             )
           })}
         </StyledCircularSliderSlides>
-        <StyledCircularSliderContent>
-
-        </StyledCircularSliderContent>
       </StyledCircularSliderWrapper>
     </StyledCircularSlider>
 

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

@@ -1,12 +1,8 @@
 import type { Meta, StoryObj } from '@storybook/react'
 
-import Button from '../../atoms/Button/Button.component'
 import CircularSlider from './CircularSlider.component'
-import Flex from '../../atoms/Flex/Flex.component'
 import { ICircularSlider } from './CircularSlider.interface'
 import React from 'react'
-import RichText from '../../atoms/RichText/RichText.component'
-import Video from '../../atoms/Video/Video.component'
 
 // More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
 export default {
@@ -35,37 +31,37 @@ export const Simple: StoryObj<ICircularSlider> = {
   args: {
     content: [
       {
-        name: "My name",
+        name: "My name 1",
         role: "My role",
         img: image
       },
       {
-        name: "My name",
+        name: "My name 2",
         role: "My role",
         img: image
       },
       {
-        name: "My name",
+        name: "My name 3",
         role: "My role",
         img: image
       },
       {
-        name: "My name",
+        name: "My name 4",
         role: "My role",
         img: image
       },
       {
-        name: "My name",
+        name: "My name 5",
         role: "My role",
         img: image
       },
       {
-        name: "My name",
+        name: "My name 6",
         role: "My role",
         img: image
       },
       {
-        name: "My name",
+        name: "My name 7",
         role: "My role",
         img: image
       }

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

@@ -1,31 +1,22 @@
 import { ICircularSlider } from './CircularSlider.interface';
-import { StyledVideo } from '../../atoms/Video/Video.theme';
 import styled from 'styled-components';
 
 export const StyledCircularSlider = styled.div<ICircularSlider>`
   width: 100%;
-  min-height: 100vh;
   overflow: hidden;
-  display: flex;
-  justify-content: center;
-  align-items: flex-end;
-
 `;
 
 export const StyledCircularSliderWrapper = styled.div<ICircularSlider>`
-  margin: 0 auto;
-  margin-right: 0;
+  position: relative;
   display: flex;
   justify-content: center;
-  position: relative;
-  padding: 20px 20px 0px 20px;
-  overflow: hidden;
-  transform: translateX(60%);
+  margin: 0 auto;
+  margin-right: 0;
+  top: 50%;
+  transform: translate(65%, -50%);
 `;
 
 export const StyledCircularSliderSlides = styled.div<ICircularSlider>`
-  border-radius: 50%;
-  border: 2px solid #8EB8E5;
   transform-origin: center;
   display: flex;
   justify-content: center;
@@ -35,11 +26,8 @@ export const StyledCircularSliderSlides = styled.div<ICircularSlider>`
   transform: rotate(-90deg);
 `;
 export const StyledCircularSliderSlide = styled.div<ICircularSlider>`
-  border-radius: 50%;
-  border: 2px solid #7C99B4;
   position: absolute;
   transform-origin: center;
-  background-color: #222;
   transition: .3s linear all;
   filter: brightness(70%);
 
@@ -47,12 +35,26 @@ export const StyledCircularSliderSlide = styled.div<ICircularSlider>`
     pointer-events:none;
   }
 
-  &.slides-holder__item_active{
+  &.active{
     filter: brightness(100%);
   }
 `;
 
 export const StyledCircularSliderContent = styled.div<ICircularSlider>`
+  position: absolute;
+  top: 50%;
+  left:33.333%;
 
+  width: 25%;
+  text-align: center;
+
+  opacity: 0;
+  transform: translateY(5%);
+  transition: all 0.3s ease;
+
+  &.active{
+    opacity: 1;
+    transform: translateY(-50%);
+  }
 `;
 

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

@@ -22,7 +22,7 @@ export const StyledTabsLinks = styled.a<ITabsItem>`
   align-items: center;
   justify-content: space-between;
   width: 100%;
-  color: ${colors.white};
+  color: ${colors.secondary50};
   background-color: ${colors.third10};
   padding: 8px 18px;
   border-radius: 50px;
@@ -71,6 +71,7 @@ export const StyledTabs = styled.div<ITabs>`
 
       ${StyledTabsMenu}{
         flex-flow: column;
+        align-items: stretch;
         justify-content: flex-start;
       }
     }

package/src/index.ts

@@ -41,7 +41,7 @@ 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 ProductCard } from './components/molecules/ProductCard'
 // //organisms
 export { default as Slider } from './components/organisms/Slider'
 export { default as Cover } from './components/organisms/Cover'

package/src/styles/utilities.ts

@@ -68,6 +68,7 @@ export const utilities: {
     values: {
       relative: "relative",
       absolute: "absolute",
+      sticky: "sticky",
       fixed: "fixed"
     },
   },
@@ -210,6 +211,12 @@ export const utilities: {
     class: "ms",
     values: spacers
   },
+  "negative-margin-start": {
+    responsive: true,
+    property: "margin-left",
+    class: "ms-neg",
+    values: spacesNegative
+  },
   "padding": {
     responsive: true,
     property: "padding",

package/dist/cjs/types/components/molecules/ProjectCard/ProjectCard.component.d.ts

@@ -1,4 +0,0 @@
-import { IProjectCard } from './ProjectCard.interface';
-import React from 'react';
-declare const ProjectCard: ({ variant, category, title, imageElement, linkElement, buttonLabel, ...props }: IProjectCard) => React.JSX.Element;
-export default ProjectCard;

package/dist/cjs/types/components/molecules/ProjectCard/ProjectCard.interface.d.ts

@@ -1,8 +0,0 @@
-/// <reference types="react" />
-import { ICard } from '../Card/Card.interface';
-export interface IProjectCard extends ICard {
-    category?: string;
-    title?: string;
-    buttonLabel?: string;
-    linkElement?: React.ReactElement;
-}

package/dist/cjs/types/components/molecules/ProjectCard/ProjectCard.theme.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-import { IProjectCard } from './ProjectCard.interface';
-export declare const StyledProjectCard: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("../Card/Card.interface").ICard, IProjectCard>> & string & Omit<({ variant, imageElement, children, className, style, ...props }: import("../Card/Card.interface").ICard) => import("react").JSX.Element, keyof import("react").Component<any, {}, any>>;

package/dist/cjs/types/components/molecules/ProjectCard/index.d.ts

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

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

@@ -1,4 +0,0 @@
-import { IProjectCard } from './ProjectCard.interface';
-import React from 'react';
-declare const ProjectCard: ({ variant, category, title, imageElement, linkElement, buttonLabel, ...props }: IProjectCard) => React.JSX.Element;
-export default ProjectCard;

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

@@ -1,8 +0,0 @@
-/// <reference types="react" />
-import { ICard } from '../Card/Card.interface';
-export interface IProjectCard extends ICard {
-    category?: string;
-    title?: string;
-    buttonLabel?: string;
-    linkElement?: React.ReactElement;
-}

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

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-import { IProjectCard } from './ProjectCard.interface';
-export declare const StyledProjectCard: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("../Card/Card.interface").ICard, IProjectCard>> & string & Omit<({ variant, imageElement, children, className, style, ...props }: import("../Card/Card.interface").ICard) => import("react").JSX.Element, keyof import("react").Component<any, {}, any>>;

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

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

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

@@ -1,45 +0,0 @@
-import Button from '@/components/atoms/Button/Button.component'
-import Chip from '@/components/atoms/Chip/Chip.component'
-import Heading from '@/components/atoms/Heading'
-import { IProjectCard } from './ProjectCard.interface'
-import Icon from '@/components/atoms/Icon/Icon.component'
-import ImageWrapper from '@/components/atoms/ImageWrapper'
-import React from 'react'
-import Separator from '@/components/atoms/Separator/Separator.component'
-import { StyledProjectCard } from './ProjectCard.theme'
-
-const ProjectCard = ({
-  variant,
-  category,
-  title,
-  imageElement,
-  linkElement,
-  buttonLabel,
-  ...props
-}: IProjectCard) => {
-  return (
-    <StyledProjectCard
-      variant={variant}
-      imageElement={
-        <ImageWrapper aspectRatioHeight={variant === 'featured' ? 40 : 82}>
-          {imageElement}
-        </ImageWrapper>
-      }
-      {...props}
-    >
-      <div className="w-100">
-        <div className="d-flex align-items-center justify-content-between mb-4">
-          <Heading tag={'h3'} size={'h5'} className={'textEllipsis'}>
-            {title}
-          </Heading>
-          <Icon icon="icon-forward-arrow"></Icon>
-        </div>
-
-        <Separator color="#fff" height="1px" />
-        {linkElement}
-      </div>
-    </StyledProjectCard>
-  )
-}
-
-export default ProjectCard

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

@@ -1,8 +0,0 @@
-import { ICard } from '../Card/Card.interface';
-
-export interface IProjectCard extends ICard {
-  category?: string
-  title?: string
-  buttonLabel?: string,
-  linkElement?: React.ReactElement
-}