oddsgate-ds 1.0.184 → 1.0.186

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

@@ -2,6 +2,7 @@ import { CSSProperties } from 'react';
 export type ILegalLink = {
     label: string;
     url: string;
+    children?: ILegalLink[];
 };
 export type ILegalLinks = {
     links?: ILegalLink[];

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

@@ -0,0 +1,5 @@
+import { ILegalLinksDropdown, ILegalLinksDropdownItem } from './LegalLinksDropdown.interface';
+import React from 'react';
+declare const LegalLinksDropdown: ({ children, title, className, style, ...props }: ILegalLinksDropdown) => React.JSX.Element;
+export default LegalLinksDropdown;
+export declare const LegalLinksDropdownItem: ({ className, style, children, onClick, ...props }: ILegalLinksDropdownItem) => React.JSX.Element;

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

@@ -0,0 +1,17 @@
+import { CSSProperties } from 'react';
+export type ILegalLinksDropdown = {
+    title?: string;
+    className?: string;
+    style?: CSSProperties;
+    children: React.ReactNode;
+};
+export interface ILegalLinksDropdownContainer {
+    isVisible: boolean;
+    openUpward?: boolean;
+}
+export type ILegalLinksDropdownItem = {
+    className?: string;
+    style?: CSSProperties;
+    children: React.ReactNode;
+    onClick?: () => void;
+};

package/dist/esm/types/components/atoms/LegalLinksDropdown/LegalLinksDropdown.theme.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { ILegalLinksDropdown, ILegalLinksDropdownContainer, ILegalLinksDropdownItem } from './LegalLinksDropdown.interface';
+export declare const StyledLegalLinksDropdown: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ILegalLinksDropdown>> & string;
+export declare const StyledLegalLinksDropdownTrigger: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledLegalLinksDropdownTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const StyledLegalLinksDropdownContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, ILegalLinksDropdownContainer>> & string;
+export declare const StyledLegalLinksDropdownItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, ILegalLinksDropdownItem>> & string;
+export declare const StyledLegalLinksDropdownIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;

package/dist/esm/types/components/atoms/LegalLinksDropdown/index.d.ts

@@ -0,0 +1,2 @@
+export { default, LegalLinksDropdownItem } from './LegalLinksDropdown.component';
+export type { ILegalLinksDropdown, ILegalLinksDropdownItem } from './LegalLinksDropdown.interface';

package/dist/public/fonts/miewfont/miewfont.svg

@@ -36,4 +36,5 @@
 <glyph unicode="&#xe91a;" glyph-name="arrowDown" horiz-adv-x="1203" d="M1202.808 305.375l-607.967 654.625-591.229-689.62c168.28-161.372 349.040-333.215 557.639-334.559 208.596-1.347 405.706 86.49 641.556 369.554z" />
 <glyph unicode="&#xe91b;" glyph-name="arrowUp" horiz-adv-x="1174" d="M-0.008 585.975l593.138-638.659 576.809 672.803c-164.177 157.434-340.53 325.085-544.039 326.398s-395.812-84.38-625.909-360.542z" />
 <glyph unicode="&#xe91c;" glyph-name="tumblr" d="M981.322 540.074c-92.269-0.211-182.275 27.258-257.306 78.518v-357.53c-0.026-66.218-21.229-130.851-60.778-185.254-39.549-54.406-95.555-95.99-160.531-119.194-64.976-23.2-135.824-26.915-203.073-10.646-67.248 16.269-127.69 51.747-173.243 101.69s-74.047 111.971-81.671 177.789c-7.624 65.818 5.985 132.288 39.007 190.522 33.022 58.237 83.884 105.462 145.784 135.36 61.9 29.901 131.888 41.050 200.604 31.955v-179.824c-31.446 9.44-65.213 9.155-96.477-0.813-31.266-9.968-58.432-29.114-77.619-54.698-19.187-25.587-29.413-56.304-29.219-87.77 0.194-31.462 10.799-62.064 30.3-87.43 19.501-25.37 46.902-44.205 78.288-53.824 31.386-9.616 65.155-9.52 96.48 0.272 31.328 9.795 58.611 28.787 77.955 54.266 19.344 25.475 29.757 56.138 29.757 87.6v698.938h184.435c-0.128-14.867 1.178-29.713 3.898-44.351v0c6.41-32.678 19.734-63.764 39.162-91.358s44.547-51.114 73.827-69.123c41.651-26.288 90.486-40.3 140.419-40.29v-174.804z" />
+<glyph unicode="&#xe91d;" glyph-name="chevron-down" horiz-adv-x="1593" d="M150.85 960l639.999-640 639.998 640 150.847-150.85-790.844-790.849-790.849 790.849 150.85 150.85z" />
 </font></defs></svg>

package/dist/types.d.ts

@@ -383,6 +383,7 @@ declare const SocialLinks: ({ variant, socials, className, style, ...props }: IS
 type ILegalLink = {
     label: string;
     url: string;
+    children?: ILegalLink[];
 };
 type ILegalLinks = {
     links?: ILegalLink[];

package/package.json

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

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

@@ -22,7 +22,6 @@ const LegalLinks = ({
               <LegalLinksDropdown title={link.label} className="font-epilogue">
                 {link.children.map((childLink, childIndex) => {
                   if (!childLink.label || !childLink.url) return null
-                  
                   return (
                     <LegalLinksDropdownItem key={`childLink-${childIndex}`}>
                       <a

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

@@ -16,45 +16,117 @@ export const Example: StoryObj<ILegalLinks> = {
   args: {
     links: [
       {
-        'label': 'Terms of Service',
-        'url': 'https://www.miew.com/terms-of-service'
+        label: 'Terms of Service',
+        url: 'https://www.miew.com/terms-of-service'
       },
       {
-        'label': 'Privacy Policy',
-        'url': 'https://www.miew.com/privacy-policy'
+        label: 'Privacy Policy',
+        url: 'https://www.miew.com/privacy-policy'
       },
       {
-        'label': 'Cookie Policy',
-        'url': 'https://www.miew.com/cookie-policy'
+        label: 'Cookie Policy',
+        url: 'https://www.miew.com/cookie-policy'
       },
       {
-        'label': 'Accessibility Statement',
-        'url': 'https://www.miew.com/accessibility-statement',
-        'children': [
+        label: 'Accessibility Statement',
+        url: 'https://www.miew.com/accessibility-statement',
+        children: [
           {
-            'label': 'Sub Link 1',
-            'url': 'https://www.miew.com/accessibility-statement/sublink1'
+            label: 'Sub Link 1',
+            url: 'https://www.miew.com/accessibility-statement/sublink1'
           },
           {
-            'label': 'Sub Link 2',
-            'url': 'https://www.miew.com/accessibility-statement/sublink2'
+            label: 'Sub Link 2',
+            url: 'https://www.miew.com/accessibility-statement/sublink2'
           },
           {
-            'label': 'Sub Link 3',
-            'url': 'https://www.miew.com/accessibility-statement/sublink3'
+            label: 'Sub Link 3',
+            url: 'https://www.miew.com/accessibility-statement/sublink3'
           },
           {
-            'label': 'Sub Link 4',
-            'url': 'https://www.miew.com/accessibility-statement/sublink4'
+            label: 'Sub Link 4',
+            url: 'https://www.miew.com/accessibility-statement/sublink4'
           }
         ]
       }
     ]
   },
   decorators: [
-    (Story) => (
-      <div style={{ background: 'black', padding: '2rem' }}>
-        {Story()}
+    Story => (
+      <div style={{ background: 'black', padding: '2rem' }}>{Story()}</div>
+    )
+  ]
+}
+
+export const TestUpwardOpening: StoryObj<ILegalLinks> = {
+  args: {
+    links: [
+      {
+        label: 'Regular Link',
+        url: 'https://www.miew.com/terms'
+      },
+      {
+        label: 'Dropdown Menu',
+        url: 'https://www.miew.com/dropdown',
+        children: [
+          {
+            label: 'First Child Link',
+            url: 'https://www.miew.com/child1'
+          },
+          {
+            label: 'Second Child Link',
+            url: 'https://www.miew.com/child2'
+          },
+          {
+            label: 'Third Child Link',
+            url: 'https://www.miew.com/child3'
+          },
+          {
+            label: 'Fourth Child Link',
+            url: 'https://www.miew.com/child4'
+          },
+          {
+            label: 'Fifth Child Link',
+            url: 'https://www.miew.com/child5'
+          }
+        ]
+      },
+      {
+        label: 'Another Link',
+        url: 'https://www.miew.com/another'
+      }
+    ]
+  },
+  decorators: [
+    Story => (
+      <div
+        style={{
+          background: 'black',
+          height: '100vh',
+          display: 'flex',
+          alignItems: 'flex-end',
+          justifyContent: 'center',
+          paddingBottom: '50px'
+        }}
+      >
+        <div
+          style={{
+            border: '1px dashed #666',
+            padding: '20px',
+            borderRadius: '8px'
+          }}
+        >
+          <p
+            style={{
+              color: 'white',
+              marginBottom: '20px',
+              textAlign: 'center'
+            }}
+          >
+            Test upward opening
+          </p>
+          {Story()}
+        </div>
       </div>
     )
   ]

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

@@ -1,5 +1,8 @@
-import { ILegalLinksDropdown, ILegalLinksDropdownItem } from './LegalLinksDropdown.interface'
-import React, { useState } from 'react'
+import {
+  ILegalLinksDropdown,
+  ILegalLinksDropdownItem
+} from './LegalLinksDropdown.interface'
+import React, { useState, useRef, useEffect } from 'react'
 import {
   StyledLegalLinksDropdown,
   StyledLegalLinksDropdownContainer,
@@ -17,14 +20,43 @@ const LegalLinksDropdown = ({
   style,
   ...props
 }: ILegalLinksDropdown) => {
-  const [isVisible, setIsVisible] = useState(false)
+  const [isOpen, setIsOpen] = useState(false)
+  const [openUpward, setOpenUpward] = useState(false)
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null)
+  const dropdownRef = useRef<HTMLDivElement>(null)
+  const containerRef = useRef<HTMLUListElement>(null)
+
+  const handleMouseEnter = () => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current)
+      timeoutRef.current = null
+    }
+    setIsOpen(true)
+  }
+
+  const handleMouseLeave = () => {
+    timeoutRef.current = setTimeout(() => {
+      setIsOpen(false)
+    }, 100)
+  }
+
+  useEffect(() => {
+    if (isOpen && dropdownRef.current && containerRef.current) {
+      const triggerRect = dropdownRef.current.getBoundingClientRect()
+      const containerHeight = containerRef.current.offsetHeight
+      const spaceBelow = window.innerHeight - triggerRect.bottom
+
+      setOpenUpward(spaceBelow < containerHeight)
+    }
+  }, [isOpen])
 
   return (
     <StyledLegalLinksDropdown
-      className={className} 
+      ref={dropdownRef}
+      className={className}
       style={style}
-      onMouseEnter={() => setIsVisible(true)}
-      onMouseLeave={() => setIsVisible(false)}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
     >
       <StyledLegalLinksDropdownTrigger>
         <StyledLegalLinksDropdownTitle>{title}</StyledLegalLinksDropdownTitle>
@@ -32,7 +64,13 @@ const LegalLinksDropdown = ({
           <Icon icon="icon-chevron-down" />
         </StyledLegalLinksDropdownIcon>
       </StyledLegalLinksDropdownTrigger>
-      <StyledLegalLinksDropdownContainer isVisible={isVisible}>
+      <StyledLegalLinksDropdownContainer
+        ref={containerRef}
+        isVisible={isOpen}
+        openUpward={openUpward}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+      >
         {children}
       </StyledLegalLinksDropdownContainer>
     </StyledLegalLinksDropdown>
@@ -57,4 +95,4 @@ export const LegalLinksDropdownItem = ({
       {children}
     </StyledLegalLinksDropdownItem>
   )
-}
+}

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

@@ -1,19 +1,20 @@
-import { CSSProperties } from 'react';
+import { CSSProperties } from 'react'
 
 export type ILegalLinksDropdown = {
   title?: string
-  className?: string;
+  className?: string
   style?: CSSProperties
   children: React.ReactNode
 }
 
-export type ILegalLinksDropdownContainer = {
+export interface ILegalLinksDropdownContainer {
   isVisible: boolean
+  openUpward?: boolean
 }
 
 export type ILegalLinksDropdownItem = {
-  className?: string;
+  className?: string
   style?: CSSProperties
   children: React.ReactNode
   onClick?: () => void
-}
+}

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

@@ -1,11 +1,15 @@
-import { ILegalLinksDropdown, ILegalLinksDropdownContainer, ILegalLinksDropdownItem } from './LegalLinksDropdown.interface';
-import { colors, radius, responsiveMedia, shadows } from '@/styles/variables';
-import styled from 'styled-components';
+import {
+  ILegalLinksDropdown,
+  ILegalLinksDropdownContainer,
+  ILegalLinksDropdownItem
+} from './LegalLinksDropdown.interface'
+import { colors, radius, responsiveMedia, shadows } from '@/styles/variables'
+import styled from 'styled-components'
 
 export const StyledLegalLinksDropdown = styled.div<ILegalLinksDropdown>`
   position: relative;
   display: inline-flex;
-`;
+`
 
 export const StyledLegalLinksDropdownTrigger = styled.div`
   font-family: var(--alternative-fontFamily);
@@ -16,7 +20,7 @@ export const StyledLegalLinksDropdownTrigger = styled.div`
   display: inline-flex;
   gap: 4px;
   align-items: center;
-  
+
   &:hover {
     opacity: 0.6;
   }
@@ -24,19 +28,19 @@ export const StyledLegalLinksDropdownTrigger = styled.div`
   @media only screen and (min-width: ${responsiveMedia}) {
     font-size: 15px;
   }
-`;
+`
 
 export const StyledLegalLinksDropdownTitle = styled.span`
   text-decoration: underline;
-`;
+`
 
 export const StyledLegalLinksDropdownContainer = styled.ul<ILegalLinksDropdownContainer>`
   position: absolute;
-  top: 100%;
+  ${props => (props.openUpward ? 'bottom: 100%;' : 'top: 100%;')}
   left: 50%;
   transform: translateX(-50%);
 
-  margin-top: 2px;
+  ${props => (props.openUpward ? 'margin-bottom: 2px;' : 'margin-top: 2px;')}
   background: ${colors.primary50};
   box-shadow: ${shadows.sm};
   border-radius: ${radius.md};
@@ -44,17 +48,23 @@ export const StyledLegalLinksDropdownContainer = styled.ul<ILegalLinksDropdownCo
   min-width: 200px;
   white-space: nowrap;
 
-  opacity: ${props => props.isVisible ? 1 : 0};
-  pointer-events: ${props => props.isVisible ? "auto" : "none"};
-  visibility: ${props => props.isVisible ? "visible" : "hidden"};
+  opacity: ${props => (props.isVisible ? 1 : 0)};
+  pointer-events: ${props => (props.isVisible ? 'auto' : 'none')};
+  visibility: ${props => (props.isVisible ? 'visible' : 'hidden')};
 
-  transform: ${props => props.isVisible 
-    ? "translateX(-50%) translateY(0)" 
-    : "translateX(-50%) translateY(-10px)"};
+  transform: ${props => {
+    const baseTransform = 'translateX(-50%)'
+    if (!props.isVisible) {
+      return props.openUpward
+        ? `${baseTransform} translateY(10px)`
+        : `${baseTransform} translateY(-10px)`
+    }
+    return `${baseTransform} translateY(0)`
+  }};
 
   z-index: 100;
   transition: all 0.2s ease-in-out;
-`;
+`
 
 export const StyledLegalLinksDropdownItem = styled.li<ILegalLinksDropdownItem>`
   display: flex;
@@ -64,23 +74,23 @@ export const StyledLegalLinksDropdownItem = styled.li<ILegalLinksDropdownItem>`
   color: ${colors.gray50};
   background-color: ${colors.primary50};
   transition: background-color 0.3s linear;
-  
+
   &:first-child {
     border-radius: ${radius.md} ${radius.md} 0 0;
   }
-  
+
   &:last-child {
     border-radius: 0 0 ${radius.md} ${radius.md};
   }
-  
+
   &:first-child:last-child {
     border-radius: ${radius.md};
   }
-  
+
   &:hover {
     background-color: ${colors.third10};
   }
-  
+
   a {
     font-family: var(--alternative-fontFamily);
     text-decoration: none;
@@ -89,7 +99,7 @@ export const StyledLegalLinksDropdownItem = styled.li<ILegalLinksDropdownItem>`
     color: inherit;
     width: 100%;
     display: block;
-    
+
     &:hover {
       opacity: 1;
     }