@newhighsco/chipset 6.18.0 → 6.19.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@newhighsco/chipset",
   "description": "Shareable, theme-able component library by New High Score",
-  "version": "6.18.0",
+  "version": "6.19.1",
   "author": "New High Score",
   "license": "ISC",
   "repository": {
@@ -42,28 +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.43",
-    "@newhighsco/postcss-config": "3.5.341",
+    "@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/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.1",
-    "@testing-library/jest-dom": "6.6.4",
+    "@testing-library/jest-dom": "6.7.0",
     "@testing-library/react": "16.3.0",
     "babel-loader": "10.0.0",
     "chromatic": "13.1.3",
-    "concurrently": "9.2.0",
+    "concurrently": "9.2.1",
     "eslint": "8.57.1",
     "husky": "9.1.7",
     "identity-obj-proxy": "3.0.0",
@@ -78,7 +78,7 @@
     "semantic-release": "24.2.7",
     "storybook": "8.6.14",
     "stylelint": "16.23.1",
-    "webpack": "5.101.0"
+    "webpack": "5.101.3"
   },
   "peerDependencies": {
     "react": "19.1.1",

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/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/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/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/providers/LinkProvider/LinkProvider.jsx

@@ -0,0 +1,26 @@
+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
+}
+
+export const LinkProvider = ({ children, renderLink }) => {
+  return (
+    <LinkContext.Provider value={renderLink}>{children}</LinkContext.Provider>
+  )
+}
+
+LinkProvider.propTypes = {
+  children: node,
+  renderLink: func
+}

package/src/providers/LinkProvider/index.js

@@ -0,0 +1 @@
+export * from './LinkProvider'

package/src/providers/index.js

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