oddsgate-ds 1.0.23 → 1.0.25

package/package.json

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

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

@@ -1,7 +1,9 @@
 import { IDropdown, IDropdownContainer, IDropdownItem, IDropdownTitle } from './Dropdown.interface';
-import { colors, responsiveMedia, shadows } from '@/styles/variables';
+import { colors, radius, responsiveMedia, shadows } from '@/styles/variables';
 import styled, { css } from 'styled-components';
 
+import { fontSize } from '@/styles/utilities';
+
 export const StyledDropdown = styled.div<IDropdown>`
   position: relative;
   display: inline-flex;
@@ -10,12 +12,26 @@ export const StyledDropdown = styled.div<IDropdown>`
 export const StyledDropdownTitle = styled.div<IDropdownTitle>`
   display: flex;
   align-items: center;
+
+  color: ${colors.primary50};
+  background-color: ${colors.secondary50};
+
+  ${fontSize('h5')};
+  padding: 10px 20px;
+  border-radius: 50px;
+  text-transform:uppercase;
+
   transition: color 0.15s ease-in-out;
   cursor: pointer;
 
+  &:hover{
+    color: ${colors.secondary50};
+    background-color: ${colors.primary50};
+  }
+
   ${({ open }) => open && `
-    color: ${colors.primary70} !important;
-    user-select: none
+    color: ${colors.secondary50};
+    background-color: ${colors.primary50};
   `}
 `;
 
@@ -26,25 +42,28 @@ export const StyledDropdownContainer = styled.ul<IDropdownContainer>`
   left: 0;
 
   margin-top: 12px;
-  padding-bottom: 12px;
-  background: ${colors.white};
+  padding: 20px;
+  background: ${colors.secondary50};
   box-shadow: ${shadows.sm};
+  border-radius: ${radius.md};
+
+  min-width: 18rem;
 
   opacity: ${props => props.open ? 1 : 0};
   pointer-events: ${props => props.open ? "auto" : "none"};
 
+  transform:  ${props => props.open ? "rotate(0deg) translateY(0)" : "rotate(8deg) translateY(30px)"}; ;
+
   z-index: 1;
-  transition: opacity 0.15s ease-in-out;
+  transition: all 0.35s ease-in-out;
 `;
 export const StyledDropdownItem = styled.li<IDropdownItem>`
   display:flex;
-  justify-content: space-between;
+  gap: 8px;
   align-items: center;
-  width: 100%;
-  padding: 8px 18px;
   cursor: pointer;
 
   &:hover {
-    color: ${colors.primary70}
+    color: ${colors.primary50}
   }
 `;

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/Cover/Cover.component.tsx

@@ -33,11 +33,11 @@ const Cover = ({
       style={{ ...style, minHeight: minHeight || undefined }}
     >
       {imageElement}
-      {overlayColor && overlayOpacity && (
+      {overlayColor && overlayOpacity ? (
         <StyledCoverOverlay
           style={{ backgroundColor: overlayColor, opacity: overlayOpacity }}
         ></StyledCoverOverlay>
-      )}
+      ) : (<></>)}
       <StyledCoverContent>{children}</StyledCoverContent>
     </StyledCover>
   )

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;
@@ -32,6 +32,10 @@ export const StyledTabsLinks = styled.a<ITabsItem>`
   &:hover{
     background-color: ${colors.primary50};
   }
+
+  ${({ $active }) => $active && `
+    background-color: ${colors.primary50};
+  `}
 `
 
 
@@ -66,6 +70,8 @@ export const StyledTabs = styled.div<ITabs>`
       }
 
       ${StyledTabsMenu}{
+        flex-flow: column;
+        align-items: stretch;
         justify-content: flex-start;
       }
     }