oddsgate-ds 1.0.24 → 1.0.25

package/package.json

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

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,10 +96,18 @@ const CircularSlider = ({
     }
 
     const addStyle = () => {
+      setTimeout(() => {
+        contentHolder?.current?.classList.add('active');
+      }, 400);
+
+      content && setSlideContent(content[currentSlide] as any)
       slides[currentSlide].classList.add('slides-holder__item_active');
       slides[currentSlide].style.height = slides[currentSlide].style.width = slidesSize + 20 + 'px';
     };
     const removeStyle = () => {
+      contentHolder?.current?.classList.remove('active');
+
+      content && setSlideContent(content[currentSlide] as any)
       slides[currentSlide].classList.remove('slides-holder__item_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,5 +1,4 @@
 import { ICircularSlider } from './CircularSlider.interface';
-import { StyledVideo } from '../../atoms/Video/Video.theme';
 import styled from 'styled-components';
 
 export const StyledCircularSlider = styled.div<ICircularSlider>`
@@ -13,19 +12,16 @@ export const StyledCircularSlider = styled.div<ICircularSlider>`
 `;
 
 export const StyledCircularSliderWrapper = styled.div<ICircularSlider>`
-  margin: 0 auto;
-  margin-right: 0;
+  position: relative;
   display: flex;
   justify-content: center;
-  position: relative;
+  margin: 0 auto;
+  margin-right: 0;
   padding: 20px 20px 0px 20px;
-  overflow: hidden;
-  transform: translateX(60%);
+  transform: translateX(65%);
 `;
 
 export const StyledCircularSliderSlides = styled.div<ICircularSlider>`
-  border-radius: 50%;
-  border: 2px solid #8EB8E5;
   transform-origin: center;
   display: flex;
   justify-content: center;
@@ -35,11 +31,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%);
 
@@ -53,6 +46,21 @@ export const StyledCircularSliderSlide = styled.div<ICircularSlider>`
 `;
 
 export const StyledCircularSliderContent = styled.div<ICircularSlider>`
+  position: absolute;
+  top: 50%;
+  left:33.333%;
+
+  width: 25%;
+  text-align: center;
 
+  opacity: 0;
+  transform: translateY(10%);
+  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;
       }
     }