oddsgate-ds 1.0.31 → 1.0.33

package/dist/esm/types/components/atoms/Chip/Chip.component.d.ts

@@ -1,4 +1,4 @@
 import { IChip } from './Chip.interface';
 import React from 'react';
-declare const Chip: ({ variant, hover, className, style, children, ...props }: IChip) => React.JSX.Element;
+declare const Chip: ({ variant, hover, active, className, style, children, onClick, ...props }: IChip) => React.JSX.Element;
 export default Chip;

package/dist/esm/types/components/atoms/Chip/Chip.interface.d.ts

@@ -3,7 +3,11 @@ export interface IChip {
     variant?: string;
     $variant?: string;
     hover?: boolean;
+    $hover?: boolean;
+    active?: boolean;
+    $active?: boolean;
     className?: string;
     style?: CSSProperties;
     children?: React.ReactNode;
+    onClick?: (event?: React.MouseEvent<HTMLElement>) => void;
 }

package/dist/esm/types/components/atoms/Chip/Chip.stories.d.ts

@@ -4,3 +4,4 @@ declare const _default: import("@storybook/types").ComponentAnnotations<import("
 export default _default;
 export declare const Dark: StoryObj<IChip>;
 export declare const Light: StoryObj<IChip>;
+export declare const Active: StoryObj<IChip>;

package/dist/types.d.ts

@@ -204,12 +204,16 @@ interface IChip {
     variant?: string;
     $variant?: string;
     hover?: boolean;
+    $hover?: boolean;
+    active?: boolean;
+    $active?: boolean;
     className?: string;
     style?: CSSProperties;
     children?: React.ReactNode;
+    onClick?: (event?: React.MouseEvent<HTMLElement>) => void;
 }
 
-declare const Chip: ({ variant, hover, className, style, children, ...props }: IChip) => React__default.JSX.Element;
+declare const Chip: ({ variant, hover, active, className, style, children, onClick, ...props }: IChip) => React__default.JSX.Element;
 
 type IQuote = {
     id?: string;

package/package.json

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

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

@@ -39,10 +39,18 @@ const Button = ({
       className={className}
       {...props}
     >
-      {/* {leftIcon} */}
-      {children && <span>{children}</span>}
-      <Icon icon={"icon-arrow-right"} />
-      {/* {rightIcon} */}
+      {variant === "primary" ? (
+        <>
+          {children && <span>{children}</span>}
+          <Icon icon={"icon-arrow-right"} />
+        </>
+      ) : (
+        <>
+          {leftIcon}
+          {children && <span>{children}</span>}
+          {rightIcon}
+        </>
+      )}
     </StyledButton>
   )
 }

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

@@ -6,17 +6,21 @@ import cn from 'classnames'
 const Chip = ({
   variant,
   hover,
+  active,
   className,
   style,
   children,
+  onClick,
   ...props
 }: IChip) => {
   return (
     <StyledChip
       $variant={variant}
-      hover={hover}
-      className={cn('captions', className)}
+      $hover={hover}
+      $active={active}
+      className={cn('captions fw-bold', className)}
       style={style}
+      onClick={onClick}
     >
       {children}
     </StyledChip>

package/src/components/atoms/Chip/Chip.interface.ts

@@ -4,7 +4,11 @@ export interface IChip {
   variant?: string;
   $variant?: string;
   hover?: boolean,
+  $hover?: boolean,
+  active?: boolean,
+  $active?: boolean,
   className?: string,
   style?: CSSProperties
   children?: React.ReactNode
+  onClick?: (event?: React.MouseEvent<HTMLElement>) => void
 }

package/src/components/atoms/Chip/Chip.stories.tsx

@@ -32,3 +32,11 @@ export const Light: StoryObj<IChip> = {
     hover: true
   }
 }
+
+export const Active: StoryObj<IChip> = {
+  render: args => <Chip {...args}>Category name</Chip>,
+  args: {
+    variant: 'light',
+    active: true
+  }
+}

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

@@ -15,32 +15,42 @@ export const StyledChip = styled.div<IChip>`
     switch (props.$variant) {
       case "dark": default:
         return css`
-          color: ${colors.white};
-          border: 1px solid ${colors.white};
+          color: ${colors.secondary50};
+          background-color: ${colors.third50};
 
-          ${props.hover && `
+          ${props.$hover && !props.$active && `
             &:hover{
-              color: ${colors.black};
-              background-color: ${colors.white};
+              color: ${colors.secondary50};
+              background-color: ${colors.primary50};
             }
           `}
+
+          ${props.$active && `
+            color: ${colors.secondary50};
+            background-color: ${colors.primary50};
+          `}
         `;
       case "light":
         return css`
-          color: ${colors.black};
-          border: 1px solid ${colors.black};
+          color: ${colors.secondary50};
+          background-color: ${colors.primary50};
 
-          ${props.hover && `
+          ${props.$hover && !props.$active && `
             &:hover{
-              color: ${colors.white};
-              background-color: ${colors.black};
+              color: ${colors.secondary50};
+              background-color: ${colors.third50};
             }
           `}
+
+          ${props.$active && `
+            color: ${colors.secondary50};
+            background-color: ${colors.third50};
+          `}
         `;
     }
   }}
 
-  ${({ hover }) => hover && `
+  ${({ $hover }) => $hover && `
     transition: all 0.3s linear;
     cursor:pointer;
   `}

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

@@ -9,84 +9,43 @@ export const StyledLoader = styled.div<ILoader>`
 
   & > div {
     position: relative;
-    width: 5rem;
+    width: 15rem;
     height: 5rem;
 
     &::before,
     &::after {
       content: '';
       position: absolute;
-      top: 0;
-      left: 0;
+      top: 50%;
+      left: 50%;
 
-      width: 100%;
-      height: 100%;
+      width: 5rem;
+      height: 5rem;
 
       border-radius: 50%;
+      transform:translate(-50%,-50%);
     }
     &::before{
-      border-style: solid solid dotted dotted;
-
-      animation: rotation 2s linear infinite;
+      left:20%;
+      background:${colors.primary50};
+      animation:osc-l 2.5s ease infinite;
     }
     &::after {
-      top:50%;
-      left: 50%;
-
-      max-width: 2rem;
-      max-height: 2rem;
-
-      margin-top: -1rem;
-      margin-left: -1rem;
-
-      border-style: solid solid dotted;
-
-      animation: rotationBack 1s linear infinite;
-      transform-origin: center center;
+      left:80%;
+      background:${colors.third10};
+      animation:osc-r 2.5s ease infinite;
     }
   }
 
-  ${(props) => {
-    switch (props.$variant) {
-      case "dark": default:
-        return css`
-          & > div {
-            &::before{
-              border: 3px dotted ${colors.white};
-            }
-            &::after {
-              border: 3px dotted ${colors.white};
-            }
-          }
-        `;
-      case "light":
-        return css`
-          & > div {
-            &::before{
-              border: 3px dotted ${colors.primary70};
-            }
-            &::after {
-              border: 3px dotted ${colors.primary70};
-            }
-          }
-        `;
-    }
-  }}
 
-  @keyframes rotation {
-    0% {
-      transform: rotate(0deg);
-    }
-    100% {
-      transform: rotate(360deg);
-    }
+  @keyframes osc-l{
+    0%{left:20%;}
+    50%{left:50%;}
+    100%{left:20%;}
   }
-  @keyframes rotationBack {
-    0% {
-      transform: rotate(0deg);
-    }
-    100% {
-      transform: rotate(-360deg);
-    }
+  @keyframes osc-r{
+    0%{left:80%;}
+    50%{left:50%;}
+    100%{left:80%;}
   }
 `;

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

@@ -27,7 +27,7 @@ export const StyledAccordionTitle = styled.span<IAccordionItem>`
 
     font-size: 1.2rem;
     color: ${colors.secondary50};
-    background: ${colors.primary50};
+    background: ${colors.third10};
 
     transform: translateY(-50%);
     transform-origin: center;
@@ -60,10 +60,10 @@ export const StyledAccordionItem = styled.li<IAccordionItem>`
   transition: all 0.6s ${easeOutExpo};
 
   &:hover{
-    color: ${colors.third10};
+    color: ${colors.primary50};
     & ${StyledAccordionTitle} {
       i{
-        background: ${colors.third10};
+        background: ${colors.primary50};
       }
     }
   }

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

@@ -4,6 +4,7 @@ import { IBlogCard } from './BlogCard.interface'
 import Icon from '@/components/atoms/Icon/Icon.component'
 import ImageWrapper from '@/components/atoms/ImageWrapper'
 import React from 'react'
+import RichText from '@/components/atoms/RichText/RichText.component'
 import { StyledBlogCard } from './BlogCard.theme'
 
 const BlogCard = ({
@@ -21,26 +22,22 @@ const BlogCard = ({
     <StyledBlogCard
       variant={variant}
       imageElement={
-        <ImageWrapper aspectRatioHeight={63}>{imageElement}</ImageWrapper>
+        <>
+          {category && <Chip variant='light'>{category}</Chip>}
+          <ImageWrapper aspectRatioHeight={63}>{imageElement}</ImageWrapper>
+        </>
       }
     >
-      <div className="w-100">
-        {category && <Chip className="mb-3">{category}</Chip>}
-        <div className="d-flex align-items-center justify-content-between">
-          <Heading tag={'h3'} size={'h5'} className={'textEllipsis'}>
-            {title}
-          </Heading>
-          <Icon icon="icon-forward-arrow"></Icon>
-        </div>
+      <Heading tag={'h3'} size={'h4'} className={'fw-bold textEllipsis'}>
+        {title}
+      </Heading>
+      {date && (
+        <RichText tag={'p'} className="fw-bold text-uppercase mt-6">
+          {date}
+        </RichText>
+      )}
 
-        {date && (
-          <Heading tag={'span'} size={'captions'} className="mt-3">
-            {date}
-          </Heading>
-        )}
-
-        {linkElement}
-      </div>
+      {linkElement}
     </StyledBlogCard>
   )
 }

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

@@ -1,10 +1,23 @@
+import { colors, radius } from '@/styles/variables';
 import styled, { css } from 'styled-components';
 
 import Card from '../Card/Card.component';
 import { IBlogCard } from './BlogCard.interface';
-import { colors } from '@/styles/variables';
+import { StyledChip } from '@/components/atoms/Chip/Chip.theme';
 
 export const StyledBlogCard = styled(Card) <IBlogCard>`
+  padding: 1rem;
+  background-color: ${colors.primary50};
+  border-radius: ${radius.sm};
+
+
+  ${StyledChip}{
+    position: absolute;
+    top: 2rem;
+    left: 2rem;
+    z-index: 10;
+  }
+
   & picture{
     &:before{
       content: '';
@@ -19,44 +32,13 @@ export const StyledBlogCard = styled(Card) <IBlogCard>`
   }
 
   & figcaption{
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    align-items: flex-end;
-    padding: 1rem;
-    color: ${colors.white};
-    z-index: 2;
-
-    & i{
-      min-width: 3rem;
-      height: 3rem;
-      line-height: 3rem;
-      font-size: 2.6rem;
-
-      border-radius: 50px;
-      color: ${colors.deepblue};
-      background-color: ${colors.softgreen};
-
-      transition: all 0.3s linear;
-      transform: rotateZ(-45deg);
-      transform-origin: center center;
-      text-align: center;
-
-      &::before{
-        line-height: inherit;
-      }
-    }
+
   }
 
 
   &:hover{
     & figcaption{
-      & i{
-        transform: rotateZ(0);
-      }
+
     }
   }
 `;

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

@@ -17,8 +17,8 @@ const CircularSlider = ({
 }: ICircularSlider) => {
 
   const [slideContent, setSlideContent] = useState({
-    name: '',
-    role: '',
+    name: content && content[0].name,
+    role: content && content[0].role,
   });
   const slider = useRef<HTMLDivElement>();
   const wrapper = useRef<HTMLDivElement>();
@@ -99,18 +99,15 @@ const CircularSlider = ({
     const addStyle = () => {
       setTimeout(() => {
         contentHolder?.current?.classList.add('active');
+        slides[currentSlide].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 = () => {
       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';
+      setTimeout(() => {
+        content && setSlideContent(content[currentSlide] as any)
+        slides[currentSlide].classList.remove('active');
+      }, 400);
     };
 
     const rotateSlider = (e) => {
@@ -120,16 +117,21 @@ const CircularSlider = ({
 
       removeStyle();
 
-      const distanceUntilEnd = slides.length - newSlide;
-      const distanteFromStart = currentSlide;
-      const a = (distanteFromStart + distanceUntilEnd) > 0 ? (distanteFromStart + distanceUntilEnd) * -1 : (distanteFromStart + distanceUntilEnd);
+      let multiplier = 0;
+      let direction = "";
 
-      // const multiplier = newSlide >= (slides.length / 2) ? a : newSlide - currentSlide;
-      const multiplier = newSlide - currentSlide;
+      if (currentSlide === 0 && newSlide === (slides.length - 1)) {
+        multiplier = -1;
+        direction = "-";
+      } else {
+        multiplier = newSlide - currentSlide
+        direction = currentSlide < newSlide ? "+" : "-";
+      }
 
       const newAngle = Math.abs((stepAngle * 180 / Math.PI) * multiplier);
 
-      currentSlide < newSlide ? currentAngle -= newAngle : currentAngle += newAngle;
+
+      currentAngle = direction === "-" ? (currentAngle + newAngle) : (currentAngle - newAngle);
       currentSlide = newSlide;
 
       slidesHolder.current.style.transform = 'rotate( ' + currentAngle + 'deg )';

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

@@ -47,7 +47,7 @@ export const StyledTabsContent = styled.div<ITabsItem>`
   border-radius: 48px 0;
   padding: 36px;
 
-  min-height: 50rem;
+  min-height: 40rem;
 
   opacity: 0;
   transform: translateY(40px);

package/src/styles/Global.ts

@@ -75,7 +75,7 @@ const GlobalStyles = createGlobalStyle`
     font-size: clamp(14px, calc(100vw / ${mobile_width} * 14), 16px);  //reset font size for mobile
     line-height: 1;
 
-    color: var(--color-gray90);
+    color: var(--color-secondary50);
     background: var(--color-white);
 
     @media only screen and (min-width: 580px) { //reset font size for tablet