@infonomic/uikit 5.43.0 → 5.44.0

package/src/components/hamburger/hamburger.astro

@@ -1,30 +1,38 @@
 ---
-// SEE: uikit/src/styles/components/hamburger.css
+// NOTE: In Astro, open/closed state is managed externally
+// (e.g. via nanostores). Toggle the 'infonomic-hamburger-open'
+// class on the button and update aria-expanded from client JS.
 
-// NOTE: we don't use open or color props in Astro.
-// Instead we set open / closed state via nanostores.
-// and then apply global classes according.
-// Class overrides for inner span colors are set in
-// Astro app.css
-
-interface HamburgerProps {
+interface Props {
   class?: string
+  colorScheme?: 'auto' | 'onDark' | 'onLight'
   ariaLabel?: string
   ariaControls?: string
 }
 
-const { class: className, ariaLabel, ariaControls } = Astro.props as HamburgerProps
+import styles from './hamburger.module.css'
+
+const {
+  class: className,
+  colorScheme = 'auto',
+  ariaLabel = 'Toggle menu',
+  ariaControls,
+  ...rest
+} = Astro.props as Props
+
+const colorSchemeClass =
+  colorScheme === 'onDark' ? styles.onDark : colorScheme === 'onLight' ? styles.onLight : undefined
 ---
 
 <button
-  id="component--hamburger"
-  class:list={['component--hamburger', className]}
-  tabindex="0"
+  type="button"
+  class:list={['infonomic-hamburger', styles.hamburger, colorSchemeClass, className]}
   aria-label={ariaLabel}
   aria-controls={ariaControls}
-  aria-haspopup="true"
+  aria-expanded="false"
+  {...rest}
 >
-  <span class="box" aria-hidden="true">
-    <span class="inner"></span>
+  <span class:list={['infonomic-hamburger-box', styles.box]} aria-hidden="true">
+    <span class:list={['infonomic-hamburger-inner', styles.inner]}></span>
   </span>
 </button>

package/src/components/hamburger/hamburger.module.css

@@ -0,0 +1,142 @@
+@layer infonomic-base,
+infonomic-functional,
+infonomic-utilities,
+infonomic-theme,
+infonomic-typography,
+infonomic-components;
+
+@layer infonomic-components {
+
+  .hamburger,
+  :global(.infonomic-hamburger) {
+    --hamburger-color: currentColor;
+    --hamburger-focus-ring-color: currentColor;
+
+    display: flex;
+    position: relative;
+    align-items: center;
+    justify-content: center;
+    z-index: 200;
+    width: 42px;
+    height: 34px;
+    overflow: hidden;
+    cursor: pointer;
+    transition-property: opacity, filter;
+    transition-duration: 0.15s;
+    transition-timing-function: ease;
+    font: inherit;
+    color: inherit;
+    text-transform: none;
+    background-color: transparent;
+    border: 0;
+    margin: 0;
+    padding: 0;
+    border-radius: var(--border-radius-sm);
+  }
+
+  .hamburger:focus-visible,
+  :global(.infonomic-hamburger):focus-visible {
+    outline: 2px solid var(--hamburger-focus-ring-color);
+    outline-offset: 2px;
+  }
+
+  /* Box container for the bars */
+  .box,
+  :global(.infonomic-hamburger-box) {
+    width: 24px;
+    height: 24px;
+    display: block;
+    position: relative;
+    pointer-events: none;
+  }
+
+  /* Inner bar + ::before/::after pseudo-elements form the 3 lines */
+  .inner,
+  :global(.infonomic-hamburger-inner) {
+    display: block;
+    top: 50%;
+    margin-top: -1px;
+    transition-duration: 0.075s;
+    transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+  }
+
+  .inner,
+  .inner::before,
+  .inner::after,
+  :global(.infonomic-hamburger-inner),
+  :global(.infonomic-hamburger-inner)::before,
+  :global(.infonomic-hamburger-inner)::after {
+    position: absolute;
+    width: 24px;
+    height: 2px;
+    border-radius: 0;
+    background-color: var(--hamburger-color);
+    transition-property: transform;
+    transition-duration: 0.15s;
+    transition-timing-function: ease;
+  }
+
+  .inner::before,
+  .inner::after,
+  :global(.infonomic-hamburger-inner)::before,
+  :global(.infonomic-hamburger-inner)::after {
+    content: "";
+    display: block;
+  }
+
+  .inner::before,
+  :global(.infonomic-hamburger-inner)::before {
+    top: -8px;
+    transition:
+      top 0.075s 0.12s ease,
+      opacity 0.075s ease;
+  }
+
+  .inner::after,
+  :global(.infonomic-hamburger-inner)::after {
+    bottom: -8px;
+    transition:
+      bottom 0.075s 0.12s ease,
+      transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19);
+  }
+
+  /* Open state */
+  .open .inner,
+  :global(.infonomic-hamburger-open) :global(.infonomic-hamburger-inner) {
+    transform: rotate(45deg);
+    transition-delay: 0.12s;
+    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+  }
+
+  .open .inner::before,
+  :global(.infonomic-hamburger-open) :global(.infonomic-hamburger-inner)::before {
+    top: 0;
+    opacity: 0;
+    transition:
+      top 0.075s ease,
+      opacity 0.075s 0.12s ease;
+  }
+
+  .open .inner::after,
+  :global(.infonomic-hamburger-open) :global(.infonomic-hamburger-inner)::after {
+    bottom: 0;
+    transform: rotate(-90deg);
+    transition:
+      bottom 0.075s ease,
+      transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
+  }
+
+  /* Color scheme: onDark (white bars for dark backgrounds) */
+  .onDark,
+  :global(.infonomic-hamburger-on-dark) {
+    --hamburger-color: white;
+    --hamburger-focus-ring-color: rgba(255, 255, 255, 0.7);
+  }
+
+  /* Color scheme: onLight (dark bars for light backgrounds) */
+  .onLight,
+  :global(.infonomic-hamburger-on-light) {
+    --hamburger-color: var(--foreground, #1a1a1a);
+    --hamburger-focus-ring-color: var(--foreground, #1a1a1a);
+  }
+}

package/src/components/hamburger/hamburger.stories.tsx

@@ -0,0 +1,35 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import type React from 'react'
+import { useState } from 'react'
+
+import type { Meta } from '@storybook/react-vite'
+
+import { Section } from '../section/section.js'
+import { Hamburger as HamburgerComponent } from './hamburger.js'
+
+const meta: Meta<typeof HamburgerComponent> = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Components/Hamburger',
+  component: HamburgerComponent,
+}
+
+export default meta
+
+export const Hamburger = (): React.JSX.Element => {
+
+  const [open, setOpen] = useState(false)
+
+  return (
+    <Section style={{ height: '100vh', margin: '2rem auto' }}>
+      <HamburgerComponent
+        open={open}
+        onChange={(open) => {
+          setOpen(open)
+        }}
+      />
+    </Section>
+  )
+}

package/src/components/hamburger/hamburger.tsx

@@ -1,65 +1,73 @@
 'use client'
 
 import type React from 'react'
-import { useCallback, useEffect, useState } from 'react'
+import { useCallback, useEffect } from 'react'
 
 import cx from 'classnames'
 
-interface HamburgerProps {
+import styles from './hamburger.module.css'
+
+type ColorScheme = 'auto' | 'onDark' | 'onLight'
+
+export interface HamburgerProps {
   className?: string
-  color?: string
-  activeBorderColor?: string
-  open: boolean
-  onChange: (event: React.MouseEvent<HTMLButtonElement> | null) => void
+  colorScheme?: ColorScheme
+  open?: boolean
+  onChange?: (open: boolean) => void
+  ariaLabel?: string
+  ariaControls?: string
 }
 
 export function Hamburger({
   className,
-  color = 'bg-white before:bg-white after:bg-white',
-  activeBorderColor,
-  open,
+  colorScheme = 'auto',
+  open = false,
   onChange,
+  ariaLabel = 'Toggle menu',
+  ariaControls,
   ...other
 }: HamburgerProps): React.JSX.Element {
-  const [isOpen, setIsOpen] = useState(false)
-
-  const handleClick = (event: React.MouseEvent<HTMLButtonElement>): void => {
-    setIsOpen(!isOpen)
-    onChange(event)
+  const handleClick = (): void => {
+    onChange?.(!open)
   }
 
   const handleEscapeKey = useCallback(
     (event: KeyboardEvent): void => {
-      if (event.key === 'Escape') {
-        if (isOpen) {
-          setIsOpen(false)
-          onChange(null)
-        }
+      if (event.key === 'Escape' && open) {
+        onChange?.(false)
       }
     },
-    [isOpen, onChange]
+    [open, onChange]
   )
 
   useEffect(() => {
-    setIsOpen(open)
     document.addEventListener('keydown', handleEscapeKey, false)
     return () => {
       document.removeEventListener('keydown', handleEscapeKey, false)
     }
-  }, [open, handleEscapeKey])
+  }, [handleEscapeKey])
 
   return (
     <button
+      type="button"
       onClick={handleClick}
-      className={cx(`component--hamburger ${isOpen ? 'is_active' : ''}`, className)}
-      tabIndex={0}
-      aria-label="Open main menu"
-      aria-controls="main-menu"
-      aria-haspopup="true"
+      className={cx(
+        'infonomic-hamburger',
+        styles.hamburger,
+        {
+          [styles.open]: open,
+          [styles.onDark]: colorScheme === 'onDark',
+          [styles.onLight]: colorScheme === 'onLight',
+        },
+        className
+      )}
+      aria-label={ariaLabel}
+      aria-controls={ariaControls}
+      aria-expanded={open}
       {...other}
     >
-      <span className="box" aria-hidden="true">
-        <span className={cx('inner', color)} />
+      <span className={cx('infonomic-hamburger-box', styles.box)} aria-hidden="true">
+        <span className={cx('infonomic-hamburger-inner', styles.inner)} />
       </span>
     </button>
   )

package/src/loaders/ellipses.tsx

@@ -3,7 +3,7 @@ import type React from 'react'
 
 import classNames from 'classnames'
 
-import type { LoaderProps } from './types/index.js'
+import type { LoaderProps } from './@types/index.js'
 
 export function LoaderEllipsis({
   color,

package/src/loaders/ring.tsx

@@ -3,7 +3,7 @@ import type React from 'react'
 
 import classNames from 'classnames'
 
-import type { LoaderProps } from './types/index.js'
+import type { LoaderProps } from './@types/index.js'
 
 export function LoaderRing({ color, size = 60, className, style }: LoaderProps): React.JSX.Element {
   const circles = [...Array(4)].map((_, index) => {

package/src/loaders/spinner.tsx

@@ -3,7 +3,7 @@ import type React from 'react'
 
 import classNames from 'classnames'
 
-import type { LoaderProps } from './types/index.js'
+import type { LoaderProps } from './@types/index.js'
 
 type SpinnerProps = Omit<LoaderProps, 'size'>
 

package/src/styles/components/hamburger.css

@@ -1,9 +1,11 @@
+/* No longer used in our actual hamburger React and Astro components
+but left here as a reference. */
 @layer infonomic-base,
-  infonomic-functional,
-  infonomic-utilities,
-  infonomic-theme,
-  infonomic-typography,
-  infonomic-components;
+infonomic-functional,
+infonomic-utilities,
+infonomic-theme,
+infonomic-typography,
+infonomic-components;
 
 @layer infonomic-components {
   .component--hamburger {
@@ -117,4 +119,4 @@
       bottom 0.075s ease,
       transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
   }
-}
+}