@newhighsco/chipset 6.17.6 → 6.19.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@newhighsco/chipset",
   "description": "Shareable, theme-able component library by New High Score",
-  "version": "6.17.6",
+  "version": "6.19.0",
   "author": "New High Score",
   "license": "ISC",
   "repository": {
@@ -28,6 +28,7 @@
     "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:js": "eslint --cache --ignore-path .gitignore .",
     "lint:css": "stylelint --cache --ignore-path .gitignore '**/*.?(s)css'",
@@ -41,27 +42,28 @@
     "react-device-detect": "2.2.3"
   },
   "devDependencies": {
-    "@babel/core": "7.28.0",
-    "@babel/preset-env": "7.28.0",
+    "@babel/core": "7.28.3",
+    "@babel/preset-env": "7.28.3",
     "@babel/preset-react": "7.27.1",
     "@commitlint/cli": "19.8.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": "4.1.40",
-    "@newhighsco/postcss-config": "3.5.339",
+    "@newhighsco/eslint-config": "4.1.44",
+    "@newhighsco/postcss-config": "3.5.343",
     "@newhighsco/prettier-config": "2.1.32",
-    "@newhighsco/release-config": "1.4.6",
-    "@newhighsco/storybook-preset": "7.0.145",
+    "@newhighsco/release-config": "1.4.7",
+    "@newhighsco/storybook-preset": "7.1.1",
     "@newhighsco/stylelint-config": "4.0.17",
+    "@omlet/cli": "2.0.0",
     "@storybook/react-webpack5": "8.6.14",
-    "@testing-library/dom": "10.4.0",
-    "@testing-library/jest-dom": "6.6.3",
+    "@testing-library/dom": "10.4.1",
+    "@testing-library/jest-dom": "6.7.0",
     "@testing-library/react": "16.3.0",
     "babel-loader": "10.0.0",
-    "chromatic": "13.1.2",
-    "concurrently": "9.2.0",
+    "chromatic": "13.1.3",
+    "concurrently": "9.2.1",
     "eslint": "8.57.1",
     "husky": "9.1.7",
     "identity-obj-proxy": "3.0.0",
@@ -70,17 +72,17 @@
     "jest-junit": "16.0.0",
     "postcss": "8.5.6",
     "prettier": "3.6.2",
-    "react": "19.1.0",
-    "react-dom": "19.1.0",
+    "react": "19.1.1",
+    "react-dom": "19.1.1",
     "sass-true": "9.0.0",
     "semantic-release": "24.2.7",
     "storybook": "8.6.14",
-    "stylelint": "16.22.0",
-    "webpack": "5.100.2"
+    "stylelint": "16.23.1",
+    "webpack": "5.101.3"
   },
   "peerDependencies": {
-    "react": "19.1.0",
-    "react-dom": "19.1.0"
+    "react": "19.1.1",
+    "react-dom": "19.1.1"
   },
   "browserslist": [
     "extends @newhighsco/browserslist-config"
@@ -95,6 +97,14 @@
       "@newhighsco/eslint-config"
     ]
   },
+  "omlet": {
+    "exports": {
+      ".": "src/index.js"
+    },
+    "ignore": [
+      "example/**"
+    ]
+  },
   "prettier": "@newhighsco/prettier-config",
   "release": {
     "extends": "@newhighsco/release-config",

package/src/components/Backdrop/Backdrop.jsx

@@ -1,7 +1,7 @@
-import classNames from 'classnames'
 import { node, string } from 'prop-types'
 import React from 'react'
 
+import { classNames } from '../../utils'
 import Element from '../Element'
 import styles from './Backdrop.module.scss'
 

package/src/components/Button/Button.jsx

@@ -1,7 +1,7 @@
-import classNames from 'classnames'
 import { bool, func, node, object, oneOfType, shape, string } from 'prop-types'
 import React from 'react'
 
+import { classNames } from '../../utils'
 import SmartLink from '../SmartLink'
 
 const Button = ({ active, children, theme, className, setRef, ...rest }) => {

package/src/components/Button/ButtonGroup.jsx

@@ -1,7 +1,8 @@
-import classNames from 'classnames'
 import { node, shape, string } from 'prop-types'
 import React from 'react'
 
+import { classNames } from '../../utils'
+
 const ButtonGroup = ({ children, theme, className }) => {
   if (!children) return null
 

package/src/components/Card/Card.jsx

@@ -1,4 +1,3 @@
-import classNames from 'classnames'
 import {
   func,
   node,
@@ -10,6 +9,7 @@ import {
 } from 'prop-types'
 import React from 'react'
 
+import { classNames } from '../../utils'
 import CardHeading from './CardHeading'
 import CardImage from './CardImage'
 

package/src/components/ContentContainer/ContentContainer.jsx

@@ -1,7 +1,7 @@
-import classNames from 'classnames'
 import { bool, node, shape, string } from 'prop-types'
 import React from 'react'
 
+import { classNames } from '../../utils'
 import Element from '../Element'
 
 /**

package/src/components/CreditLockup/CreditLockup.jsx

@@ -1,6 +1,7 @@
 import { oneOf, shape, string } from 'prop-types'
 import React from 'react'
 
+import { classNames } from '../../utils'
 import Icon from '../Icon'
 import SmartLink from '../SmartLink'
 import { ReactComponent as LogoSvg } from './images/logo.svg'
@@ -13,8 +14,8 @@ const href = 'http://newhighsco.re'
 /**
  * The `CreditLockup` provides a link to the New High Score website
  */
-const CreditLockup = ({ theme, ...rest }) => (
-  <span className={theme?.root} {...rest}>
+const CreditLockup = ({ theme, className, ...rest }) => (
+  <span className={classNames(theme?.root, className)} {...rest}>
     <SmartLink
       className={theme?.link}
       href={href}
@@ -38,7 +39,8 @@ CreditLockup.displayName = 'CreditLockup'
 CreditLockup.propTypes = {
   align: oneOf(['left', 'right', 'center']),
   dir: oneOf(['ltr', 'rtl']),
-  theme: shape({ root: string, link: string, logo: string, text: string })
+  theme: shape({ root: string, link: string, logo: string, text: string }),
+  className: string
 }
 
 export default CreditLockup

package/src/components/Grid/Grid.jsx

@@ -1,7 +1,8 @@
-import classNames from 'classnames'
 import { bool, node, oneOf, shape, string } from 'prop-types'
 import React from 'react'
 
+import { classNames } from '../../utils'
+
 /**
  * `Grid` provides  a simple `inline-block` based responsive grid
  */

package/src/components/Grid/GridItem.jsx

@@ -1,7 +1,8 @@
-import classNames from 'classnames'
 import { arrayOf, node, oneOf, oneOfType, shape, string } from 'prop-types'
 import React from 'react'
 
+import { classNames } from '../../utils'
+
 const GridItem = ({ sizes, children, theme, className, ...rest }) => {
   if (!children) return null
 

package/src/components/Icon/Icon.jsx

@@ -1,7 +1,7 @@
-import classNames from 'classnames'
 import { node, number, oneOfType, shape, string } from 'prop-types'
 import React from 'react'
 
+import { classNames } from '../../utils'
 import VisuallyHidden from '../VisuallyHidden'
 
 /**

package/src/components/Landmark/Landmark.jsx

@@ -8,13 +8,9 @@ import styles from './Landmark.module.scss'
  * Use `Landmark` to create visually hidden anchors
  */
 const Landmark = ({ children, ...rest }) => (
-  <>
-    {/* eslint-disable jsx-a11y/anchor-is-valid */}
-    <a className={styles.root} {...rest}>
-      <VisuallyHidden>{children}</VisuallyHidden>
-    </a>
-    {/* eslint-enable jsx-a11y/anchor-is-valid */}
-  </>
+  <a className={styles.root} {...rest}>
+    <VisuallyHidden>{children}</VisuallyHidden>
+  </a>
 )
 
 Landmark.propTypes = {

package/src/components/List/List.jsx

@@ -1,7 +1,7 @@
-import classNames from 'classnames'
 import { bool, node, oneOf, shape, string } from 'prop-types'
 import React from 'react'
 
+import { classNames } from '../../utils'
 import Element from '../Element'
 
 const List = ({

package/src/components/LiveStream/LiveStream.jsx

@@ -1,7 +1,7 @@
-import classNames from 'classnames'
 import { bool, shape, string } from 'prop-types'
 import React, { useEffect, useState } from 'react'
 
+import { classNames } from '../../utils'
 import Grid from '../Grid'
 import ResponsiveMedia from '../ResponsiveMedia'
 import VisuallyHidden from '../VisuallyHidden'

package/src/components/Navigation/Navigation.jsx

@@ -1,8 +1,8 @@
-import classNames from 'classnames'
 import { array, bool, func, shape, string } from 'prop-types'
 import React from 'react'
 
-import { useToggle } from '../../hooks'
+import { useIds, useToggle } from '../../hooks'
+import { classNames } from '../../utils'
 import Button from '../Button'
 import Icon from '../Icon'
 import List from '../List'
@@ -22,6 +22,7 @@ const Navigation = ({
   className
 }) => {
   const [visible, setVisibility] = useToggle(!toggle)
+  const [titleId, menuId] = useIds(['title', 'menu'])
 
   if (!links.length) return null
 
@@ -31,11 +32,18 @@ const Navigation = ({
   }
 
   return (
-    <nav role="navigation" className={classNames(theme?.root, className)}>
-      <VisuallyHidden as="h2">{title}</VisuallyHidden>
+    <nav
+      aria-labelledby={titleId}
+      role="navigation"
+      className={classNames(theme?.root, className)}
+    >
+      <VisuallyHidden as="h2" id={titleId}>
+        {title}
+      </VisuallyHidden>
       {toggle && (
         <Button
           active={visible}
+          aria-controls={menuId}
           aria-expanded={visible}
           onClick={toggleVisibility}
           theme={{ root: theme?.toggle, active: theme?.toggleActive }}
@@ -49,6 +57,7 @@ const Navigation = ({
         </Button>
       )}
       <List
+        id={menuId}
         role="menubar"
         unstyled
         inline={inline}

package/src/components/Prose/Prose.jsx

@@ -1,7 +1,8 @@
-import classNames from 'classnames'
 import { node, shape, string } from 'prop-types'
 import React from 'react'
 
+import { classNames } from '../../utils'
+
 const Prose = ({ html, children, theme, className, ...rest }) => {
   if (!html && !children) return null
 

package/src/components/SiteContainer/SiteContainer.jsx

@@ -1,7 +1,7 @@
-import classNames from 'classnames'
 import { node, shape, string } from 'prop-types'
 import React from 'react'
 
+import { classNames } from '../../utils'
 import Element from '../Element'
 
 /**

package/src/components/SmartLink/SmartLink.jsx

@@ -1,6 +1,7 @@
 import { bool, func, node, object, oneOf, oneOfType, string } from 'prop-types'
 import React from 'react'
 
+import { useLink } from '../../providers'
 import { absoluteUrl } from '../../utils'
 
 /**
@@ -16,8 +17,24 @@ const SmartLink = ({
   className,
   ...rest
 }) => {
+  const renderLink = useLink()
+
   if (!children) return null
 
+  if (!href) {
+    return (
+      <button
+        ref={setRef}
+        className={className}
+        disabled={disabled}
+        type={type}
+        {...rest}
+      >
+        {children}
+      </button>
+    )
+  }
+
   if (disabled) {
     const { role = 'link' } = rest
 
@@ -29,14 +46,6 @@ const SmartLink = ({
     )
   }
 
-  if (!href) {
-    return (
-      <button ref={setRef} className={className} type={type} {...rest}>
-        {children}
-      </button>
-    )
-  }
-
   if (absoluteUrl(href)) {
     return (
       <a
@@ -52,11 +61,7 @@ const SmartLink = ({
     )
   }
 
-  return (
-    <a ref={setRef} className={className} href={href} {...rest}>
-      {children}
-    </a>
-  )
+  return renderLink({ ref: setRef, className, href, children, ...rest })
 }
 
 SmartLink.displayName = 'SmartLink'

package/src/components/Tooltip/Tooltip.jsx

@@ -1,8 +1,8 @@
-import classNames from 'classnames'
 import { bool, node, oneOf, shape, string } from 'prop-types'
 import React from 'react'
 
 import { useToggle } from '../../hooks'
+import { classNames } from '../../utils'
 import SmartLink from '../SmartLink'
 
 /**

package/src/docs/README.mdx

@@ -1,4 +1,4 @@
-import { Meta, Title, Unstyled } from '@storybook/blocks'
+import { Meta, Title } from '@storybook/blocks'
 
 import { ReactComponent as LogoSvg } from '../../.storybook/static/logo.svg'
 import { CreditLockup, Image, SmartLink } from '../../src'
@@ -27,7 +27,5 @@ Shareable, theme-able component library
 ---
 
 <p>
-  <Unstyled>
-    <CreditLockup />
-  </Unstyled>
+  <CreditLockup className="sb-unstyled" />
 </p>

package/src/hooks/index.js

@@ -1 +1,2 @@
+export { useIds } from './use-ids'
 export { useToggle } from './use-toggle'

package/src/hooks/use-ids.js

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

package/src/providers/LinkProvider/index.jsx

@@ -0,0 +1,28 @@
+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 = () => {
+  const renderLink = useContext(LinkContext)
+
+  if (!renderLink) {
+    throw new Error("<LinkProvider /> missing 'renderLink'")
+  }
+
+  return renderLink
+}
+
+const LinkProvider = ({ children, renderLink }) => {
+  return (
+    <LinkContext.Provider value={renderLink}>{children}</LinkContext.Provider>
+  )
+}
+
+LinkProvider.propTypes = {
+  children: node,
+  renderLink: func
+}
+
+export default LinkProvider

package/src/providers/index.js

@@ -1 +1,2 @@
+export { default, useLink } from './LinkProvider'
 export { ThemeProvider, withTheme } from './ThemeProvider'

package/src/utils/class-names.js

@@ -0,0 +1,6 @@
+import classnames from 'classnames/dedupe'
+
+export const classNames = (...args) =>
+  classnames(...args)
+    .replace(undefined, '')
+    .trim()

package/src/utils/index.js

@@ -1 +1,2 @@
 export { absoluteUrl } from './absolute-url'
+export { classNames } from './class-names'