@newhighsco/chipset 6.27.3 → 7.0.1

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.1",
   "author": "New High Score",
   "license": "ISC",
   "repository": {
@@ -12,6 +12,7 @@
   "bugs": {
     "url": "https://github.com/newhighsco/chipset/issues"
   },
+  "packageManager": "yarn@4.14.1",
   "main": "src/index.js",
   "files": [
     "src",
@@ -22,67 +23,70 @@
   },
   "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"
   },
   "devDependencies": {
     "@babel/core": "7.29.0",
-    "@babel/preset-env": "7.29.0",
+    "@babel/preset-env": "7.29.2",
     "@babel/preset-react": "7.28.5",
-    "@commitlint/cli": "20.4.1",
+    "@commitlint/cli": "20.5.2",
     "@newhighsco/browserslist-config": "2.0.0",
-    "@newhighsco/commitlint-config": "1.1.48",
+    "@newhighsco/commitlint-config": "1.1.53",
     "@newhighsco/editor-config": "1.2.0",
-    "@newhighsco/eslint-config": "6.0.17",
-    "@newhighsco/postcss-config": "4.0.19",
-    "@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/eslint-config": "7.0.54",
+    "@newhighsco/postcss-config": "4.0.46",
+    "@newhighsco/prettier-config": "2.3.5",
+    "@newhighsco/release-config": "1.4.27",
+    "@newhighsco/storybook-preset": "10.2.36",
+    "@newhighsco/stylelint-config": "4.0.39",
     "@newhighsco/svgr-config": "1.0.0",
-    "@omlet/cli": "2.0.0",
-    "@storybook/react-webpack5": "10.2.7",
+    "@newhighsco/yarn-plugin-preset": "1.1.3",
+    "@omlet/cli": "2.2.0",
+    "@storybook/react-webpack5": "10.3.5",
     "@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",
+    "babel-loader": "10.1.1",
+    "chromatic": "16.6.1",
     "concurrently": "9.2.1",
-    "eslint": "9.39.2",
+    "eslint": "10.2.1",
     "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.8.1",
-    "react": "19.2.4",
-    "react-dom": "19.2.4",
+    "jest": "30.3.0",
+    "jest-environment-jsdom": "30.3.0",
+    "jest-junit": "17.0.0",
+    "postcss": "8.5.12",
+    "prettier": "3.8.3",
+    "react": "19.2.5",
+    "react-dom": "19.2.5",
     "sass-true": "10.1.0",
     "semantic-release": "25.0.3",
-    "storybook": "10.2.7",
-    "stylelint": "17.1.1",
-    "webpack": "5.105.0"
+    "storybook": "10.3.5",
+    "stylelint": "17.9.1",
+    "typescript": "6.0.3",
+    "webpack": "5.106.2"
   },
   "peerDependencies": {
-    "react": "19.2.4",
-    "react-dom": "19.2.4"
+    "react": "19.2.5",
+    "react-dom": "19.2.5"
   },
   "browserslist": [
     "extends @newhighsco/browserslist-config"

package/src/components/Card/CardHeading.jsx

@@ -3,7 +3,7 @@ import React from 'react'
 
 import SmartLink from '../SmartLink'
 
-const CardHeading = ({ href, target, children, ref, theme }) => {
+const CardHeading = ({ href, target, children, theme }) => {
   if (!children) return null
 
   return (

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 = ({
@@ -24,15 +20,15 @@ const Menubar = ({
   onToggle = () => {},
   theme
 }) => {
-  const [visible, setVisibility] = useToggle(!toggle)
-  const [listId, iconId] = useIds(['list', 'icon'])
+  const [visible, toggleVisibility] = useToggle(!toggle)
+  const id = useIds()
 
   if (!links.length) return null
 
   const icons = toggle?.icons || ICONS
 
-  const toggleVisibility = () => {
-    setVisibility()
+  const handleToggle = () => {
+    toggleVisibility()
     onToggle({ visible })
   }
 
@@ -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}
+          onClick={handleToggle}
           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'
 
@@ -23,8 +23,8 @@ const Tooltip = ({
   theme,
   className
 }) => {
-  const [visible, setVisibility] = useToggle(!hidden)
-  const id = useId()
+  const [visible, toggleVisibility, setVisibility] = useToggle(!hidden)
+  const id = useIds()
 
   if (!heading && !children) return null
 
@@ -34,11 +34,11 @@ const Tooltip = ({
       aria-describedby={id}
       className={classNames(theme?.root, className)}
       {...(!manual && {
-        onMouseOver: setVisibility,
-        onMouseOut: setVisibility,
-        onFocus: setVisibility,
-        onBlur: setVisibility,
-        onTouchEnd: setVisibility
+        onMouseOver: () => setVisibility(true),
+        onMouseOut: () => setVisibility(false),
+        onFocus: () => setVisibility(true),
+        onBlur: () => setVisibility(false),
+        onTouchEnd: () => setVisibility(false)
       })}
     >
       <SmartLink
@@ -47,7 +47,7 @@ const Tooltip = ({
         target={target}
         disabled={disabled}
         aria-expanded={visible}
-        {...(manual && { onClick: setVisibility })}
+        {...(manual && { onClick: toggleVisibility })}
       >
         {toggle}
       </SmartLink>

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/hooks/use-toggle.js

@@ -4,5 +4,5 @@ export const useToggle = (initialState = false) => {
   const [state, setState] = useState(initialState)
   const toggle = useCallback(() => setState(state => !state), [])
 
-  return [state, toggle]
+  return [state, toggle, setState]
 }

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/styles/mixins/_grid.scss

@@ -143,14 +143,10 @@ $fraction-names: whole half third quarter fifth sixth seventh eighth ninth tenth
   @for $i from 1 through $columns-length {
     $column: list.nth($columns, $i);
     $grid: list.nth($fraction-names, $column);
-    $column-count: if(
-      sass($column == 1): 1; else: $column - 1
-    );
+    $column-count: if(sass($column == 1): 1; else: $column - 1);
 
     @for $j from 1 through $column-count {
-      $plural: if(
-        sass($j == 1): '' ; else: 's'
-      );
+      $plural: if(sass($j == 1): '' ; else: 's');
       $column-width: $j * math.div(100, $column);
       $column-name: list.nth($count-names, $j);
 

package/styles/mixins/_mq.scss

@@ -1,7 +1,5 @@
 @mixin mq($min: false, $max: false, $height: false, $and: false, $media: all) {
-  $-direction: if(
-    sass($height): height; else: width
-  );
+  $-direction: if(sass($height): height; else: width);
   $mq: '#{$media} ';
 
   @if $min {

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>