@newhighsco/chipset 6.27.3 → 7.0.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@newhighsco/chipset",
   "description": "Shareable, theme-able component library by New High Score",
-  "version": "6.27.3",
+  "version": "7.0.0",
   "author": "New High Score",
   "license": "ISC",
   "repository": {
@@ -12,6 +12,7 @@
   "bugs": {
     "url": "https://github.com/newhighsco/chipset/issues"
   },
+  "packageManager": "yarn@4.12.0",
   "main": "src/index.js",
   "files": [
     "src",
@@ -22,22 +23,23 @@
   },
   "scripts": {
     "prepare": "husky",
-    "start": "storybook dev --port 49928 --docs",
+    "start": "storybook dev --port 49928",
     "build": "storybook build --output-dir build --docs --quiet --webpack-stats-json",
     "pretest": "yarn lint",
     "test": "jest --runInBand",
     "test:list": "jest --listTests",
     "snapshot": "chromatic --storybook-build-dir build --auto-accept-changes main --exit-once-uploaded --only-changed",
     "analyze": "omlet analyze",
-    "lint": "concurrently yarn:lint:*",
+    "lint": "concurrently 'yarn:lint:*'",
     "lint:js": "eslint --cache .",
     "lint:css": "stylelint --cache --ignore-path .gitignore '**/*.?(s)css'",
-    "format": "concurrently yarn:format:*",
+    "format": "concurrently 'yarn:format:*'",
     "format:js": "yarn lint:js --fix",
     "format:css": "yarn lint:css --fix"
   },
   "dependencies": {
     "@dr.pogodin/react-themes": "1.10.3",
+    "@iconify/react": "6.0.2",
     "classnames": "2.5.1",
     "react-device-detect": "2.2.3"
   },
@@ -45,26 +47,26 @@
     "@babel/core": "7.29.0",
     "@babel/preset-env": "7.29.0",
     "@babel/preset-react": "7.28.5",
-    "@commitlint/cli": "20.4.1",
+    "@commitlint/cli": "20.4.2",
     "@newhighsco/browserslist-config": "2.0.0",
     "@newhighsco/commitlint-config": "1.1.48",
     "@newhighsco/editor-config": "1.2.0",
-    "@newhighsco/eslint-config": "6.0.17",
-    "@newhighsco/postcss-config": "4.0.19",
+    "@newhighsco/eslint-config": "7.0.10",
+    "@newhighsco/postcss-config": "4.0.20",
     "@newhighsco/prettier-config": "2.3.3",
-    "@newhighsco/release-config": "1.4.24",
-    "@newhighsco/storybook-preset": "10.2.3",
-    "@newhighsco/stylelint-config": "4.0.24",
+    "@newhighsco/release-config": "1.4.25",
+    "@newhighsco/storybook-preset": "10.2.9",
+    "@newhighsco/stylelint-config": "4.0.27",
     "@newhighsco/svgr-config": "1.0.0",
     "@omlet/cli": "2.0.0",
-    "@storybook/react-webpack5": "10.2.7",
+    "@storybook/react-webpack5": "10.2.10",
     "@testing-library/dom": "10.4.1",
     "@testing-library/jest-dom": "6.9.1",
     "@testing-library/react": "16.3.2",
     "babel-loader": "10.0.0",
-    "chromatic": "15.0.0",
+    "chromatic": "15.1.1",
     "concurrently": "9.2.1",
-    "eslint": "9.39.2",
+    "eslint": "10.0.0",
     "husky": "9.1.7",
     "identity-obj-proxy": "3.0.0",
     "jest": "30.2.0",
@@ -76,9 +78,9 @@
     "react-dom": "19.2.4",
     "sass-true": "10.1.0",
     "semantic-release": "25.0.3",
-    "storybook": "10.2.7",
-    "stylelint": "17.1.1",
-    "webpack": "5.105.0"
+    "storybook": "10.2.10",
+    "stylelint": "17.3.0",
+    "webpack": "5.105.2"
   },
   "peerDependencies": {
     "react": "19.2.4",

package/src/components/Icon/Icon.jsx

@@ -1,5 +1,6 @@
+import { Icon as IconifyIcon } from '@iconify/react'
 import { node, number, object, oneOfType, shape, string } from 'prop-types'
-import { Children, cloneElement } from 'react'
+import React, { Children, cloneElement } from 'react'
 
 import { classNames } from '../../utils'
 
@@ -7,8 +8,9 @@ import { classNames } from '../../utils'
  * Use `Icon` to wrap SVGs
  */
 const Icon = ({
+  name,
   width,
-  height,
+  height = width,
   alt,
   children,
   theme,
@@ -16,19 +18,27 @@ const Icon = ({
   style,
   ...rest
 }) => {
-  if (!children) return null
+  if (!name && !children) return null
 
-  return cloneElement(Children.only(children), {
+  const props = {
+    'aria-hidden': alt ? null : true,
+    'aria-label': alt,
     className: classNames(theme?.root, className),
-    ...(alt && { role: 'img', title: alt }),
-    ...(!alt && { 'aria-hidden': true }),
+    role: alt ? 'img' : null,
     style: { ...style, width, height },
     ...rest
-  })
+  }
+
+  if (children) {
+    return cloneElement(Children.only(children), props)
+  }
+
+  return <IconifyIcon icon={name} fallback={<span {...props} />} {...props} />
 }
 
 Icon.displayName = 'Icon'
 Icon.propTypes = {
+  name: string,
   height: oneOfType([number, string]),
   width: oneOfType([number, string]),
   alt: string,

package/src/components/Icon/Icon.module.scss

@@ -3,6 +3,7 @@
   fill: currentColor;
   font-style: normal;
   height: auto;
+  min-height: 1em;
   vertical-align: middle;
   width: 1em;
 }

package/src/components/LiveStream/LiveStream.jsx

@@ -38,7 +38,6 @@ const LiveStream = ({
     }
 
     loadUrls()
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
   if (loading) return <VisuallyHidden>Loading live stream</VisuallyHidden>

package/src/components/Menubar/Menubar.jsx

@@ -6,12 +6,8 @@ import { classNames } from '../../utils'
 import Button from '../Button'
 import Icon from '../Icon'
 import List from '../List'
-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 ICONS = { false: 'material-symbols:menu', true: 'material-symbols:close' }
 const LABELS = { false: 'Show', true: 'Hide' }
 
 const Menubar = ({
@@ -25,7 +21,7 @@ const Menubar = ({
   theme
 }) => {
   const [visible, setVisibility] = useToggle(!toggle)
-  const [listId, iconId] = useIds(['list', 'icon'])
+  const id = useIds()
 
   if (!links.length) return null
 
@@ -41,25 +37,19 @@ const Menubar = ({
       {toggle && (
         <Button
           active={visible}
-          aria-controls={listId}
+          aria-controls={id}
           aria-expanded={visible}
-          aria-labelledby={iconId}
+          aria-label={`${LABELS[visible]} ${title}`}
           aria-haspopup
           onClick={toggleVisibility}
           theme={{ root: theme?.toggle, active: theme?.toggleActive }}
         >
           {toggle.children}
-          <Icon
-            id={iconId}
-            theme={{ root: theme?.toggleIcon }}
-            alt={`${LABELS[visible]} ${title}`}
-          >
-            {icons[visible]}
-          </Icon>
+          <Icon theme={{ root: theme?.toggleIcon }} name={icons[visible]} />
         </Button>
       )}
       <List
-        id={listId}
+        id={id}
         role={role}
         unstyled
         inline={inline}
@@ -83,7 +73,10 @@ const Menubar = ({
                   role="menu"
                   links={links}
                   toggle={{
-                    icons: { true: <ArrowUpSvg />, false: <ArrowDownSvg /> },
+                    icons: {
+                      false: 'material-symbols:arrow-drop-down',
+                      true: 'material-symbols:arrow-drop-up'
+                    },
                     ...props
                   }}
                   theme={{ ...theme, toggle: theme?.link }}

package/src/components/Navigation/Navigation.jsx

@@ -1,6 +1,7 @@
 import { shape, string } from 'prop-types'
-import React, { useId } from 'react'
+import React from 'react'
 
+import { useIds } from '../../hooks'
 import { classNames } from '../../utils'
 import Menubar from '../Menubar'
 import SmartLink from '../SmartLink'
@@ -16,7 +17,7 @@ const Navigation = ({
   theme,
   className
 }) => {
-  const id = useId()
+  const id = useIds()
 
   if (!links.length) return null
 

package/src/components/SmartLink/SmartLink.jsx

@@ -39,7 +39,6 @@ const SmartLink = ({
     const { role = 'link' } = rest
 
     return (
-      // eslint-disable-next-line jsx-a11y/anchor-is-valid
       <a ref={setRef} className={className} role={role} aria-disabled="true">
         {children}
       </a>

package/src/components/Tooltip/Tooltip.jsx

@@ -1,7 +1,7 @@
 import { bool, node, oneOf, shape, string } from 'prop-types'
-import React, { useId } from 'react'
+import React from 'react'
 
-import { useToggle } from '../../hooks'
+import { useIds, useToggle } from '../../hooks'
 import { classNames } from '../../utils'
 import SmartLink from '../SmartLink'
 
@@ -24,7 +24,7 @@ const Tooltip = ({
   className
 }) => {
   const [visible, setVisibility] = useToggle(!hidden)
-  const id = useId()
+  const id = useIds()
 
   if (!heading && !children) return null
 

package/src/hooks/use-ids.js

@@ -1,7 +1,9 @@
 import { useId } from 'react'
 
-export const useIds = (elements = []) => {
+export const useIds = (...elements) => {
   const id = useId()
 
+  if (!elements.length) return id
+
   return elements.map(element => [id, element].join('-'))
 }

package/src/providers/ImageProvider/ImageProvider.jsx

@@ -1,7 +1,6 @@
 import { func, node } from 'prop-types'
 import React, { createContext, useContext } from 'react'
 
-// eslint-disable-next-line jsx-a11y/alt-text
 const ImageContext = createContext(props => <img {...props} />)
 
 export const useImage = () => {

package/src/providers/LinkProvider/LinkProvider.jsx

@@ -1,7 +1,6 @@
 import { func, node } from 'prop-types'
 import React, { createContext, useContext } from 'react'
 
-// eslint-disable-next-line jsx-a11y/anchor-has-content
 const LinkContext = createContext(props => <a {...props} />)
 
 export const useLink = () => {

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

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

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

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

package/src/components/Menubar/images/close.svg

@@ -1 +0,0 @@
-<svg viewBox="0 0 24 24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>

package/src/components/Menubar/images/menu.svg

@@ -1 +0,0 @@
-<svg viewBox="0 0 24 24"><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/></svg>