oddsgate-ds 1.0.102 → 1.0.103

package/dist/esm/types/components/organisms/CircularSlider/CircularSlider.component.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { ICircularSlider } from './CircularSlider.interface';
-declare const CircularSlider: ({ content, style, className, }: ICircularSlider) => React.JSX.Element;
+declare const CircularSlider: ({ cta, content, style, className, }: ICircularSlider) => React.JSX.Element;
 export default CircularSlider;

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

@@ -8,4 +8,5 @@ export type ICircularSlider = {
         role?: string;
         img?: React.ReactNode;
     }[];
+    cta?: React.ReactNode;
 };

package/dist/types.d.ts

@@ -629,9 +629,10 @@ type ICircularSlider = {
         role?: string;
         img?: React.ReactNode;
     }[];
+    cta?: React.ReactNode;
 };
 
-declare const CircularSlider: ({ content, style, className, }: ICircularSlider) => React__default.JSX.Element;
+declare const CircularSlider: ({ cta, content, style, className, }: ICircularSlider) => React__default.JSX.Element;
 
 declare const iconsList: string[];
 

package/package.json

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

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

@@ -39,7 +39,7 @@ const Button = ({
       className={className}
       {...props}
     >
-      {variant === "primary" ? (
+      {(variant === "primary" || variant === "secondary") ? (
         <>
           {leftIcon}
           {children && <span>{children}</span>}

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

@@ -37,7 +37,7 @@ export const StyledButton = styled.a<IButtonSC>`
       case "primary": default:
         return css`
             ${fontSize('h4')};
-            padding: 2rem 2.8rem;
+            padding: 0.8rem 1.6rem;
             border-radius: 50px;
             text-transform:uppercase;
 
@@ -70,6 +70,10 @@ export const StyledButton = styled.a<IButtonSC>`
                 transform: scale(1) translateX(0) translateY(-50%);
               }
             }
+
+            @media only screen and (max-width: ${responsiveMedia}) {
+              padding: 2rem 2.8rem;
+            }
           `;
       case "secondary":
         return css`

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

@@ -23,7 +23,7 @@ const BlogCard = ({
       variant={variant}
       imageElement={
         <>
-          {category && <Chip variant='light'>{category}</Chip>}
+          {category && <Chip variant='light' className='font-redhat'>{category}</Chip>}
           <ImageWrapper aspectRatioHeight={63}>{imageElement}</ImageWrapper>
         </>
       }

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

@@ -23,7 +23,7 @@ const EventsCard = ({
         <ImageWrapper aspectRatioHeight={100}>{imageElement}</ImageWrapper>
       }
     >
-      {category && <Chip variant='dark' className='mb-5'>{category}</Chip>}
+      {category && <Chip variant='dark' className='mb-5 font-redhat'>{category}</Chip>}
       <Heading tag={'h3'} size={'h4'} className={'fw-bold textEllipsis'}>
         {title}
       </Heading>

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

@@ -21,7 +21,7 @@ const NewsCard = ({
       $variant={variant}
       imageElement={
         <>
-          {category && <Chip variant='light'>{category}</Chip>}
+          {category && <Chip variant='light' className='font-redhat'>{category}</Chip>}
           <ImageWrapper aspectRatioHeight={63}>{imageElement}</ImageWrapper>
         </>
       }

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

@@ -13,6 +13,7 @@ import { debounce } from '@/helpers/events';
 import useMediaMatch from '@/helpers/useMediaMatch';
 
 const CircularSlider = ({
+  cta,
   content,
   style,
   className,
@@ -47,7 +48,7 @@ const CircularSlider = ({
 
     let slidesSize = 0;
 
-    let currentAngle = -90;
+    let currentAngle = isMobile ? -180 : -90;
 
     const stepAngle = 2 * Math.PI / slidesHolder?.current?.children.length;
     // const stepAngle = 0.52;
@@ -71,13 +72,13 @@ const CircularSlider = ({
       const slideSize = isMobile ? 0.12 : 0.15;
 
       wrapper.current.style.width = 2 * radius + 'px';
-      wrapper.current.style.height = isMobile ? (2 * radius) - 250 + 'px' : 2 * radius + 'px';
+      wrapper.current.style.height = 2 * radius + 'px';
 
       let r = 2 * radius * (1 - slideSize);
       slidesHolder.current.style.width = slidesHolder.current.style.height = r + 'px';
       slidesRepositioning(r / 2);
 
-      slidesHolder.current.style.marginTop = radius * slideSize + 'px';
+      slidesHolder.current.style.marginTop = (isMobile ? 0 : (radius * slideSize)) + 'px';
 
       slidesSize = Math.min(2 * radius * slideSize, stepAngle * radius * (1 - slideSize) - 50);
 
@@ -172,10 +173,11 @@ const CircularSlider = ({
         <path d="M887.551 584.892L904.187 504.729L531.591 461.981C531.824 459.769 532.012 457.775 531.984 455.735L906.794 468.208L902.047 386.545L531.043 441.754C530.798 439.669 530.336 437.54 529.829 435.627L895.322 350.347L869.628 272.699L525.63 422.1C524.69 420.097 523.922 418.356 522.981 416.353L853.852 239.821L808.868 171.277L515.038 404.535C513.792 402.92 512.328 401.26 510.82 399.817L784.811 143.459L723.799 88.9898L500.604 390.24C498.834 388.969 497.28 387.742 495.465 386.688L693.744 68.2895L620.714 31.439L483.014 380.262C481.154 379.424 479.032 378.757 477.127 378.136L585.693 19.4255L505.53 2.78951L462.783 375.385C460.571 375.152 458.576 374.964 456.537 374.993L469.01 0.182176L387.347 4.92974L442.556 375.933C440.471 376.179 438.342 376.641 436.429 377.148L351.149 11.6549L273.501 37.3486L422.902 381.346C420.899 382.286 419.158 383.055 417.155 383.995L240.361 53.2959L171.817 98.2799L405.12 391.893C403.505 393.14 401.846 394.603 400.403 396.112L144.261 122.166L89.7918 183.178L391.042 406.373C389.77 408.143 388.544 409.696 387.49 411.511L69.2632 213.494L32.4127 286.524L381.235 424.224C380.397 426.084 379.731 428.206 379.11 430.111L20.2275 321.283L3.59147 401.446L376.187 444.194C375.954 446.405 375.766 448.4 375.795 450.44L0.984138 437.967L5.73169 519.63L376.735 464.42C376.981 466.505 377.443 468.635 377.95 470.548L12.4569 555.828L38.1505 633.476L382.148 484.075C383.088 486.078 383.857 487.819 384.797 489.822L54.0979 666.616L99.0819 735.16L392.695 501.857C393.942 503.471 395.405 505.131 396.914 506.574L122.968 762.715L183.98 817.185L407.175 515.935C408.945 517.206 410.498 518.432 412.313 519.487L214.034 837.885L287.064 874.736L424.765 525.913C426.625 526.751 428.746 527.417 430.651 528.038L322.085 886.749L402.248 903.385L444.996 530.789C447.207 531.022 449.202 531.21 451.242 531.182L438.769 905.992L520.432 901.245L465.222 530.241C467.307 529.996 469.437 529.534 471.35 529.027L556.629 894.52L634.278 868.826L484.876 524.828C486.88 523.888 488.621 523.12 490.624 522.179L667.156 853.05L735.7 808.066L502.442 514.236C504.056 512.99 505.716 511.526 507.159 510.018L763.517 784.009L817.987 722.997L516.737 499.802C518.008 498.032 519.234 496.478 520.289 494.663L838.687 692.942L875.538 619.912L526.715 482.212C527.553 480.352 528.219 478.23 528.84 476.325L887.551 584.892Z" fill="#FC3151" />
       </svg>
       <StyledCircularSliderContent ref={contentHolder as any}>
-        <div>
+        <div className='mb-4'>
           <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>
+        {cta}
       </StyledCircularSliderContent>
       <StyledCircularSliderWrapper ref={wrapper as any}>
         <StyledCircularSliderSlides ref={slidesHolder as any}>

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

@@ -8,5 +8,6 @@ export type ICircularSlider = {
     name?: string,
     role?: string,
     img?: React.ReactNode
-  }[]
+  }[],
+  cta?: React.ReactNode
 }

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

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react'
 
+import Button from '@/components/atoms/Button/Button.component'
 import CircularSlider from './CircularSlider.component'
 import { ICircularSlider } from './CircularSlider.interface'
 import React from 'react'
@@ -23,8 +24,9 @@ const image = (
 )
 
 export const Simple: StoryObj<ICircularSlider> = {
-  render: args => <CircularSlider {...args}></CircularSlider>,
+  render: args => <div style={{ width: "100%", height: "200dvh" }}><CircularSlider {...args}></CircularSlider></div>,
   args: {
+    cta: <Button variant={'secondary'}>Join the Team</Button>,
     content: [
       {
         name: 'My name 1',

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

@@ -5,6 +5,7 @@ import styled from 'styled-components';
 export const StyledCircularSlider = styled.div<ICircularSlider>`
   position: relative;
   width: 100%;
+  height: 100%;
   min-height: 100dvh;
   overflow: hidden;
 
@@ -31,12 +32,11 @@ export const StyledCircularSliderWrapper = styled.div<ICircularSlider>`
   justify-content: center;
   margin: 0 auto;
   margin-right: 0;
-  top: 50%;
-  transform: translate(23%, -50%);
+  transform: translate(-30%, -80%);
 
   @media only screen and (min-width: ${responsiveMedia}) {
+    top: 50%;
     transform: translate(65%, -50%);
-
   }
 `;
 
@@ -47,7 +47,11 @@ export const StyledCircularSliderSlides = styled.div<ICircularSlider>`
   align-items: center;
   position: relative;
   z-index: 100;
-  transform: rotate(-90deg);
+  transform: rotate(-180deg);
+
+  @media only screen and (min-width: ${responsiveMedia}) {
+    transform: rotate(-90deg);
+  }
 `;
 export const StyledCircularSliderSlide = styled.div<ICircularSlider>`
   position: absolute;
@@ -71,28 +75,27 @@ export const StyledCircularSliderSlide = styled.div<ICircularSlider>`
 export const StyledCircularSliderContent = styled.div<ICircularSlider>`
   position: absolute;
   top: 50%;
-  left:0%;
+  left:50%;
 
   width: 50%;
   text-align: center;
 
-  opacity: 0;
-  transform: translate(0%, 5%);
-  transition: all 0.3s ease;
+  transform: translate(-50%, -50%);
 
+  &>div{
+    opacity: 0;
+    transform: translate(0%, 5%);
+    transition: all 0.3s ease;
+  }
   &.active{
-    opacity: 1;
-    transform: translate(0%, -50%);
+    &>div{
+      opacity: 1;
+      transform: translate(0%, 0%);
+    }
   }
 
   @media only screen and (min-width: ${responsiveMedia}) {
-    left:50%;
     width: 25%;
-    transform: translate(-50%, 5%);
-
-    &.active{
-      transform: translate(-50%, -50%);
-    }
   }
 `;
 

package/src/styles/variables.ts

@@ -111,7 +111,7 @@ export const typography = <Record<string, Record<string, unknown>>>{
   h4: {
     size: "36px",
     sizeMob: "20px",
-    height: 1.2,
+    height: 1.4,
   },
   h5: {
     size: "24px",