oddsgate-ds 1.0.94 → 1.0.96

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

@@ -4,6 +4,7 @@ export interface ITabs {
     title?: string;
     menu?: ITabsItem[];
     vertical?: boolean;
+    $vertical?: boolean;
     className?: string;
     style?: CSSProperties;
 }

package/dist/types.d.ts

@@ -603,6 +603,7 @@ interface ITabs {
     title?: string;
     menu?: ITabsItem[];
     vertical?: boolean;
+    $vertical?: boolean;
     className?: string;
     style?: CSSProperties;
 }

package/package.json

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

package/src/components/atoms/FormField/FormField.theme.tsx

@@ -103,4 +103,13 @@ export const StyledFieldContainer = styled.div<IFormField>`
         gap: 1rem;
       }
   `}
+
+
+  ::placeholder {
+    color: rbga(${colors.third10}, 0.2);
+  }
+
+  ::-ms-input-placeholder { /* Edge 12 -18 */
+    color: rbga(${colors.third10}, 0.2);
+  }
 `

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

@@ -29,9 +29,6 @@ const CircularSlider = ({
 
   const isMobile = useMediaMatch();
 
-  const sliderSize = isMobile ? 2.6 : 1;
-  const slideSize = isMobile ? 0.12 : 0.15;
-
   //force 12 items
   if (content && content.length < 12) {
     let counter = 0;
@@ -58,7 +55,6 @@ const CircularSlider = ({
     let currentSlide = 0;
 
     slidesHolder.current.style.transitionDuration = animationDuration + 'ms';
-
     const slidesRepositioning = (r) => {
       for (let i = 0; i < slides.length; i++) {
 
@@ -72,6 +68,8 @@ const CircularSlider = ({
     const setSize = (radius: number) => {
       if (!wrapper.current || !slidesHolder.current) return //bail out;
 
+      const slideSize = isMobile ? 0.12 : 0.15;
+
       wrapper.current.style.width = 2 * radius + 'px';
       wrapper.current.style.height = 2 * radius + 'px';
 
@@ -90,6 +88,8 @@ const CircularSlider = ({
     }
 
     const sliderResize = debounce(() => {
+      const sliderSize = isMobile ? 2.6 : 1;
+
       let radius,
         w = slider?.current ? slider?.current?.getBoundingClientRect().width : 0,
         h = slider?.current ? slider?.current.getBoundingClientRect().height : 0;
@@ -162,7 +162,7 @@ const CircularSlider = ({
 
       window.removeEventListener('resize', sliderResize)
     }
-  }, [])
+  }, [isMobile])
 
   if (!content) return <></>
 

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

@@ -60,6 +60,7 @@ export const StyledCircularSliderSlide = styled.div<ICircularSlider>`
     height: 100%;
     object-fit: cover;
     pointer-events:none;
+    filter: grayscale(100%);
   }
 
   &.active{

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

@@ -42,7 +42,7 @@ const Tabs = ({ id, title, menu, vertical, className, style }: ITabs) => {
 
 
   return (
-    <StyledTabs id={id} vertical={vertical} className={className} style={style}>
+    <StyledTabs id={id} $vertical={vertical} className={className} style={style}>
       <div>
         {title && <Heading tag="h3" size="h1" className='text-uppercase mb-4'>{title}</Heading>}
         <StyledTabsMenu align='left'>

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

@@ -5,6 +5,7 @@ export interface ITabs {
   title?: string
   menu?: ITabsItem[]
   vertical?: boolean
+  $vertical?: boolean
   className?: string
   style?: CSSProperties
 }

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

@@ -86,7 +86,7 @@ export const StyledTabs = styled.div<ITabs>`
   width: 100%;
   }
 
-  ${({ vertical }) => vertical && `
+  ${({ $vertical }) => $vertical && `
     @media only screen and (min-width: ${responsiveMedia}) {
       flex-flow: row;