oddsgate-ds 1.0.70 → 1.0.72

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

@@ -1,4 +1,4 @@
-import React from 'react';
 import { ISeparator } from './Separator.interface';
-declare const Separator: ({ color, margin, height, ...props }: ISeparator) => React.JSX.Element;
+import React from 'react';
+declare const Separator: ({ type, color, height, margin, ...props }: ISeparator) => React.JSX.Element;
 export default Separator;

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

@@ -1,6 +1,7 @@
 import { CSSProperties } from 'react';
 export type ISeparator = {
     color?: string;
+    type?: string;
     margin?: string;
     height?: string;
     className?: string;

package/dist/types.d.ts

@@ -169,13 +169,14 @@ declare const Spacer: ({ id, color, customHeight, height, className, ...props }:
 
 type ISeparator = {
     color?: string;
+    type?: string;
     margin?: string;
     height?: string;
     className?: string;
     style?: CSSProperties;
 };
 
-declare const Separator: ({ color, margin, height, ...props }: ISeparator) => React__default.JSX.Element;
+declare const Separator: ({ type, color, height, margin, ...props }: ISeparator) => React__default.JSX.Element;
 
 interface IFlexBase {
     className?: string;

package/package.json

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

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

@@ -1,14 +1,15 @@
-import React from 'react';
-
 import { ISeparator } from './Separator.interface';
+import React from 'react';
 import { StyledSeparator } from './Separator.theme';
 
-const Separator = ({ color, margin, height, ...props }: ISeparator) => {
+const Separator = ({ type, color, height, margin, ...props }: ISeparator) => {
   return (
     <StyledSeparator
+
       style={{
-        backgroundColor: color ? color : ``,
-        height: height,
+        borderColor: color ? color : ``,
+        borderWidth: height,
+        borderStyle: type,
         margin: margin ? margin : ''
       }}
       {...props}

package/src/components/atoms/Separator/Separator.interface.tsx

@@ -2,6 +2,7 @@ import { CSSProperties } from 'react';
 
 export type ISeparator = {
   color?: string
+  type?: string
   margin?: string,
   height?: string
   className?: string;

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

@@ -23,6 +23,7 @@ export const Simple: StoryObj<ISeparator> = {
   render: args => <Separator {...args} />,
   args: {
     height: '5px',
-    color: '#000'
+    color: '#000',
+    type: 'solid'
   }
 }

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

@@ -9,6 +9,7 @@ import {
 
 import Heading from '@/components/atoms/Heading/Heading.component';
 import { ICircularSlider } from './CircularSlider.interface'
+import isTouchDevice from '@/helpers/isTouchDevice';
 
 const CircularSlider = ({
   content,
@@ -25,9 +26,12 @@ const CircularSlider = ({
   const slidesHolder = useRef<HTMLDivElement>();
   const contentHolder = useRef<HTMLDivElement>();
 
-  const sliderSize = 1;
-  const slideSize = 0.15;
+  const isMobile = isTouchDevice();
 
+  const sliderSize = isMobile ? 2.6 : 1;
+  const slideSize = isMobile ? 0.12 : 0.15;
+
+  console.log(isMobile);
 
   //force 12 items
   if (content && content.length < 12) {

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

@@ -1,4 +1,5 @@
 import { ICircularSlider } from './CircularSlider.interface';
+import { responsiveMedia } from '@/styles/variables';
 import styled from 'styled-components';
 
 export const StyledCircularSlider = styled.div<ICircularSlider>`
@@ -7,19 +8,20 @@ export const StyledCircularSlider = styled.div<ICircularSlider>`
   min-height: 100dvh;
   overflow: hidden;
 
-
   & > svg{
+    display: none;
     position:absolute;
     top:50%;
     left:0;
     width:66.666%;
     height:auto;
+    transform: translate(-50%, -50%)
+  }
 
-    & path{
-      fill
+  @media only screen and (min-width: ${responsiveMedia}) {
+    & > svg{
+      display: block;
     }
-
-    transform: translate(-50%, -50%)
   }
 `;
 
@@ -30,7 +32,12 @@ export const StyledCircularSliderWrapper = styled.div<ICircularSlider>`
   margin: 0 auto;
   margin-right: 0;
   top: 50%;
-  transform: translate(65%, -50%);
+  transform: translate(23%, -50%);
+
+  @media only screen and (min-width: ${responsiveMedia}) {
+    transform: translate(65%, -50%);
+
+  }
 `;
 
 export const StyledCircularSliderSlides = styled.div<ICircularSlider>`
@@ -62,18 +69,28 @@ export const StyledCircularSliderSlide = styled.div<ICircularSlider>`
 export const StyledCircularSliderContent = styled.div<ICircularSlider>`
   position: absolute;
   top: 50%;
-  left:50%;
+  left:0%;
 
-  width: 25%;
+  width: 50%;
   text-align: center;
 
   opacity: 0;
-  transform: translate(-50%, 5%);
+  transform: translate(0%, 5%);
   transition: all 0.3s ease;
 
   &.active{
     opacity: 1;
-    transform: translate(-50%, -50%);
+    transform: translate(0%, -50%);
+  }
+
+  @media only screen and (min-width: ${responsiveMedia}) {
+    left:50%;
+    width: 25%;
+    transform: translate(-50%, 5%);
+
+    &.active{
+      transform: translate(-50%, -50%);
+    }
   }
 `;