oddsgate-ds 1.0.22 → 1.0.24

package/package.json

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

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

@@ -15,25 +15,74 @@ const Counter = ({
 }: ICounter) => {
   if (!number) return <></>;
 
+  const savedCallback: any = useRef();
+  const targetRef = useRef<HTMLDivElement>()
   const [counterValue, setCounterValue] = useState<number>(0);
+  const [counterVisible, setCounterVisible] = useState<boolean>(false);
 
+  let timeout
   const speed = 50;
   const increment = Math.trunc(number / speed) < 1 ? 1 : Math.trunc(number / speed);
 
-  useInterval(() => {
-    if (counterValue != number) {
-      if (counterValue > number) {
-        setCounterValue(number)
+
+  useEffect(() => {
+    savedCallback.current = () => {
+      if (counterValue != number) {
+        if (counterValue > number) {
+          setCounterValue(number)
+        } else {
+          setCounterValue(counterValue + increment);
+        }
       } else {
-        setCounterValue(counterValue + increment);
+        return true;
+      }
+    };
+  });
+
+  useEffect(() => {
+    function tick() {
+      if (savedCallback && savedCallback.current) {
+        const result = (savedCallback as unknown as any).current();
+        if (result === true) {// if callback returs true, clear timeout;
+          clearInterval(timeout);
+        }
       }
-    } else {
-      return true;
     }
-  }, speed);
+
+    if (counterVisible) timeout = setInterval(tick, speed);
+
+    return () => clearInterval(timeout);
+  }, [counterVisible]);
+
+  useEffect(() => {
+    let observer = new IntersectionObserver((entries, observer) => {
+      entries.forEach((entry) => {
+        const element = targetRef.current;
+
+        if (!entry.target || !element) return;
+
+        if (entry.intersectionRatio > 0) {
+          setCounterVisible(true);
+          observer.unobserve(element);
+        }
+      });
+    }, {});
+
+    observer.observe(targetRef.current as any);
+
+    // Cleanup function to unobserve when the component unmounts
+    return () => {
+      if (targetRef.current) {
+        observer.unobserve(targetRef.current);
+      }
+    };
+  }, []);
+
+
 
   return (
     <StyledCounter
+      ref={targetRef as any}
       className={className}
       style={style}
     >

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

@@ -15,7 +15,11 @@ export default {
 
 export const Example: StoryObj<ICounter> = {
   render: args => (
-    <Counter {...args}></Counter>
+    <>
+      <div style={{ height: "2000px" }}>
+      </div>
+      <Counter {...args}></Counter>
+    </>
   ),
   args: {
     title: "lorem ipsum",

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

@@ -8,7 +8,6 @@ import {
 
 import Heading from '@/components/atoms/Heading/Heading.component'
 import { ITabs } from './Tabs.interface'
-import Icon from '@/components/atoms/Icon/Icon.component'
 
 const Tabs = ({ id, title, menu, vertical, className, style }: ITabs) => {
   const [active, setActive] = useState(0)

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

@@ -24,7 +24,7 @@ export const StyledTabsLinks = styled.a<ITabsItem>`
   width: 100%;
   color: ${colors.white};
   background-color: ${colors.third10};
-  padding: 8px 12px;
+  padding: 8px 18px;
   border-radius: 50px;
   transition: all 0.3s linear;
   cursor: pointer;
@@ -32,6 +32,10 @@ export const StyledTabsLinks = styled.a<ITabsItem>`
   &:hover{
     background-color: ${colors.primary50};
   }
+
+  ${({ $active }) => $active && `
+    background-color: ${colors.primary50};
+  `}
 `
 
 
@@ -51,7 +55,7 @@ export const StyledTabs = styled.div<ITabs>`
   gap: 16px;
 
   ${({ vertical }) => vertical && `
-    @media only screen and (max-width: ${responsiveMedia}) {
+    @media only screen and (min-width: ${responsiveMedia}) {
       flex-flow: row;
 
       & > div{
@@ -64,6 +68,11 @@ export const StyledTabs = styled.div<ITabs>`
           flex-shrink: 1;
         }
       }
+
+      ${StyledTabsMenu}{
+        flex-flow: column;
+        justify-content: flex-start;
+      }
     }
   `}
 `;

package/src/helpers/useInterval.ts

@@ -10,6 +10,7 @@ export const useInterval = (callback, delay) => {
 
   useEffect(() => {
     function tick() {
+      console.log("tou2");
       if (savedCallback && savedCallback.current) {
         const result = (savedCallback as unknown as any).current();
         if (result === true) {// if callback returs true, clear timeout;