@newhighsco/chipset 6.25.5 → 6.26.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@newhighsco/chipset",
   "description": "Shareable, theme-able component library by New High Score",
-  "version": "6.25.5",
+  "version": "6.26.1",
   "author": "New High Score",
   "license": "ISC",
   "repository": {
@@ -42,48 +42,48 @@
     "react-device-detect": "2.2.3"
   },
   "devDependencies": {
-    "@babel/core": "7.28.5",
-    "@babel/preset-env": "7.28.5",
+    "@babel/core": "7.28.6",
+    "@babel/preset-env": "7.28.6",
     "@babel/preset-react": "7.28.5",
-    "@commitlint/cli": "20.1.0",
+    "@commitlint/cli": "20.3.1",
     "@fullhuman/postcss-purgecss": "7.0.2",
     "@newhighsco/browserslist-config": "2.0.0",
     "@newhighsco/commitlint-config": "1.1.46",
     "@newhighsco/editor-config": "1.2.0",
-    "@newhighsco/eslint-config": "6.0.0",
-    "@newhighsco/postcss-config": "4.0.7",
+    "@newhighsco/eslint-config": "6.0.7",
+    "@newhighsco/postcss-config": "4.0.11",
     "@newhighsco/prettier-config": "2.3.2",
-    "@newhighsco/release-config": "1.4.19",
-    "@newhighsco/storybook-preset": "9.0.0",
-    "@newhighsco/stylelint-config": "4.0.18",
+    "@newhighsco/release-config": "1.4.20",
+    "@newhighsco/storybook-preset": "9.0.8",
+    "@newhighsco/stylelint-config": "4.0.19",
     "@newhighsco/svgr-config": "1.0.0",
     "@omlet/cli": "2.0.0",
-    "@storybook/react-webpack5": "10.0.8",
+    "@storybook/react-webpack5": "10.1.11",
     "@testing-library/dom": "10.4.1",
     "@testing-library/jest-dom": "6.9.1",
-    "@testing-library/react": "16.3.0",
+    "@testing-library/react": "16.3.1",
     "babel-loader": "10.0.0",
-    "chromatic": "13.3.4",
+    "chromatic": "13.3.5",
     "concurrently": "9.2.1",
-    "eslint": "9.39.1",
+    "eslint": "9.39.2",
     "husky": "9.1.7",
     "identity-obj-proxy": "3.0.0",
     "jest": "30.2.0",
     "jest-environment-jsdom": "30.2.0",
     "jest-junit": "16.0.0",
     "postcss": "8.5.6",
-    "prettier": "3.6.2",
-    "react": "19.2.0",
-    "react-dom": "19.2.0",
-    "sass-true": "10.0.0",
+    "prettier": "3.8.0",
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
+    "sass-true": "10.1.0",
     "semantic-release": "25.0.2",
-    "storybook": "10.0.8",
-    "stylelint": "16.26.0",
-    "webpack": "5.103.0"
+    "storybook": "10.1.11",
+    "stylelint": "17.0.0",
+    "webpack": "5.104.1"
   },
   "peerDependencies": {
-    "react": "19.2.0",
-    "react-dom": "19.2.0"
+    "react": "19.2.3",
+    "react-dom": "19.2.3"
   },
   "browserslist": [
     "extends @newhighsco/browserslist-config"

package/src/components/Menubar/Menubar.jsx

@@ -0,0 +1,122 @@
+import { any, array, bool, func, node, oneOf, shape, string } from 'prop-types'
+import React, { useId } from 'react'
+
+import { useToggle } from '../../hooks'
+import { classNames } from '../../utils'
+import Button from '../Button'
+import Icon from '../Icon'
+import List from '../List'
+import SmartLink from '../SmartLink'
+import { ReactComponent as ArrowDownSvg } from './images/arrow-down.svg'
+import { ReactComponent as ArrowUpSvg } from './images/arrow-up.svg'
+import { ReactComponent as CloseSvg } from './images/close.svg'
+import { ReactComponent as MenuSvg } from './images/menu.svg'
+
+const ICONS = { true: <CloseSvg />, false: <MenuSvg /> }
+const LABELS = { false: 'Show', true: 'Hide' }
+
+const Menubar = ({
+  title,
+  role = 'menubar',
+  links = [],
+  inline,
+  renderLink = props => <Button {...props} />,
+  toggle,
+  onToggle = () => {},
+  theme
+}) => {
+  const [visible, setVisibility] = useToggle(!toggle)
+  const id = useId()
+
+  if (!links.length) return null
+
+  const icons = toggle?.icons || ICONS
+
+  const toggleVisibility = () => {
+    setVisibility()
+    onToggle({ visible })
+  }
+
+  return (
+    <>
+      {toggle && (
+        <Button
+          active={visible}
+          aria-controls={id}
+          aria-expanded={visible}
+          onClick={toggleVisibility}
+          theme={{ root: theme?.toggle, active: theme?.toggleActive }}
+        >
+          {toggle.children}
+          <Icon
+            theme={{ root: theme?.toggleIcon }}
+            alt={`${LABELS[visible]} ${title}`}
+          >
+            {icons[visible]}
+          </Icon>
+        </Button>
+      )}
+      <List
+        id={id}
+        role={role}
+        unstyled
+        inline={inline}
+        hidden={!visible}
+        theme={{ root: theme?.list, inline: theme?.inline }}
+      >
+        {links.map(({ links = [], ...rest }, index) => {
+          const props = { ...rest, className: theme?.link }
+          const hasLinks = !!links.length
+
+          return (
+            <li
+              key={index}
+              role="menuitem"
+              className={classNames(theme?.item, hasLinks && theme?.itemToggle)}
+            >
+              {!hasLinks ? (
+                renderLink(props, index)
+              ) : (
+                <Menubar
+                  title="Sub-navigation"
+                  role="menu"
+                  links={links}
+                  toggle={{
+                    icons: { true: <ArrowUpSvg />, false: <ArrowDownSvg /> },
+                    ...props
+                  }}
+                  theme={{ ...theme, toggle: theme?.link }}
+                />
+              )}
+            </li>
+          )
+        })}
+      </List>
+    </>
+  )
+}
+
+Menubar.displayName = 'Menubar'
+Menubar.propTypes = {
+  title: string,
+  role: string,
+  links: array,
+  inline: bool,
+  renderLink: func,
+  toggle: oneOf([
+    bool,
+    shape({ icons: { true: any, false: any }, children: node })
+  ]),
+  onToggle: func,
+  theme: shape({
+    list: string,
+    item: string,
+    itemToggle: string,
+    link: string,
+    toggle: string,
+    toggleActive: string,
+    toggleIcon: string
+  })
+}
+
+export default Menubar

package/src/components/Menubar/images/arrow-down.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24"><path d="M7 10l5 5 5-5H7z"/></svg>

package/src/components/Menubar/images/arrow-up.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24"><path d="M7 14l5-5 5 5H7z"/></svg>

package/src/components/Menubar/index.js

@@ -0,0 +1 @@
+export { default } from './Menubar'

package/src/components/Navigation/Navigation.jsx

@@ -1,99 +1,51 @@
-import { array, bool, func, shape, string } from 'prop-types'
-import React from 'react'
+import { shape, string } from 'prop-types'
+import React, { useId } from 'react'
 
-import { useIds, useToggle } from '../../hooks'
 import { classNames } from '../../utils'
-import Button from '../Button'
-import Icon from '../Icon'
-import List from '../List'
+import Menubar from '../Menubar'
 import SmartLink from '../SmartLink'
 import VisuallyHidden from '../VisuallyHidden'
-import { ReactComponent as CloseSvg } from './images/close.svg'
-import { ReactComponent as MenuSvg } from './images/menu.svg'
 
 const Navigation = ({
   title = 'Navigation',
   links = [],
   inline,
-  renderLink,
+  renderLink = props => <SmartLink {...props} />,
   toggle,
   onToggle = () => {},
   theme,
   className
 }) => {
-  const [visible, setVisibility] = useToggle(!toggle)
-  const [titleId, menuId] = useIds(['title', 'menu'])
+  const id = useId()
 
   if (!links.length) return null
 
-  const toggleVisibility = () => {
-    setVisibility()
-    onToggle({ visible })
-  }
-
   return (
     <nav
-      aria-labelledby={titleId}
+      aria-labelledby={id}
       role="navigation"
       className={classNames(theme?.root, className)}
     >
-      <VisuallyHidden as="h2" id={titleId}>
+      <VisuallyHidden as="h2" id={id}>
         {title}
       </VisuallyHidden>
-      {toggle && (
-        <Button
-          active={visible}
-          aria-controls={menuId}
-          aria-expanded={visible}
-          onClick={toggleVisibility}
-          theme={{ root: theme?.toggle, active: theme?.toggleActive }}
-        >
-          <Icon
-            theme={{ root: theme?.toggleIcon }}
-            alt={`${!visible ? 'Show' : 'Hide'} ${title}`}
-          >
-            {!visible ? <MenuSvg /> : <CloseSvg />}
-          </Icon>
-        </Button>
-      )}
-      <List
-        id={menuId}
-        role="menubar"
-        unstyled
+      <Menubar
+        title={title}
+        links={links}
         inline={inline}
-        hidden={!visible}
-        theme={{ root: theme?.list, inline: theme?.inline }}
-      >
-        {links.map((link, index) => {
-          const props = { ...link, className: theme?.link }
-
-          return (
-            <li key={index} role="menuitem" className={theme?.item}>
-              {renderLink ? renderLink(props, index) : <SmartLink {...props} />}
-            </li>
-          )
-        })}
-      </List>
+        renderLink={renderLink}
+        toggle={toggle}
+        onToggle={onToggle}
+        theme={theme}
+      />
     </nav>
   )
 }
 
 Navigation.displayName = 'Navigation'
 Navigation.propTypes = {
-  title: string,
-  links: array,
-  inline: bool,
-  renderLink: func,
-  toggle: bool,
-  onToggle: func,
-  theme: shape({
-    root: string,
-    item: string,
-    link: string,
-    toggle: string,
-    toggleActive: string,
-    toggleIcon: string
-  }),
+  ...Menubar.propTypes,
+  theme: shape({ root: string, ...Menubar.propTypes.theme }),
   className: string
 }
 

package/src/components/Navigation/Navigation.module.scss

@@ -1,3 +1,17 @@
 .list[hidden] {
   display: none;
 }
+
+.itemToggle {
+  position: relative;
+
+  .inline & .list {
+    position: absolute;
+    z-index: 1;
+  }
+}
+
+.link {
+  display: block;
+  width: 100%;
+}