@newhighsco/chipset 6.19.1 → 6.20.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@newhighsco/chipset",
   "description": "Shareable, theme-able component library by New High Score",
-  "version": "6.19.1",
+  "version": "6.20.0",
   "author": "New High Score",
   "license": "ISC",
   "repository": {
@@ -51,15 +51,16 @@
     "@newhighsco/commitlint-config": "1.1.46",
     "@newhighsco/editor-config": "1.2.0",
     "@newhighsco/eslint-config": "4.1.44",
-    "@newhighsco/postcss-config": "3.5.343",
+    "@newhighsco/postcss-config": "3.5.345",
     "@newhighsco/prettier-config": "2.1.32",
     "@newhighsco/release-config": "1.4.7",
-    "@newhighsco/storybook-preset": "7.1.1",
+    "@newhighsco/storybook-preset": "7.1.2",
     "@newhighsco/stylelint-config": "4.0.17",
+    "@newhighsco/svgo-config": "1.0.2",
     "@omlet/cli": "2.0.0",
     "@storybook/react-webpack5": "8.6.14",
     "@testing-library/dom": "10.4.1",
-    "@testing-library/jest-dom": "6.7.0",
+    "@testing-library/jest-dom": "6.8.0",
     "@testing-library/react": "16.3.0",
     "babel-loader": "10.0.0",
     "chromatic": "13.1.3",
@@ -67,8 +68,8 @@
     "eslint": "8.57.1",
     "husky": "9.1.7",
     "identity-obj-proxy": "3.0.0",
-    "jest": "30.0.5",
-    "jest-environment-jsdom": "30.0.5",
+    "jest": "30.1.1",
+    "jest-environment-jsdom": "30.1.1",
     "jest-junit": "16.0.0",
     "postcss": "8.5.6",
     "prettier": "3.6.2",
@@ -121,5 +122,8 @@
     "extends": [
       "@newhighsco/stylelint-config"
     ]
+  },
+  "svgr": {
+    "titleProp": true
   }
 }

package/src/components/Icon/Icon.jsx

@@ -1,38 +1,31 @@
-import { node, number, oneOfType, shape, string } from 'prop-types'
-import React from 'react'
+import { node, number, object, oneOfType, shape, string } from 'prop-types'
+import { Children, cloneElement } from 'react'
 
 import { classNames } from '../../utils'
-import VisuallyHidden from '../VisuallyHidden'
 
 /**
  * Use `Icon` to wrap SVGs
  */
-const Icon = ({ height, width, alt, children, theme }) => {
+const Icon = ({
+  width,
+  height,
+  alt,
+  children,
+  theme,
+  className,
+  style,
+  ...rest
+}) => {
   if (!children) return null
 
-  return (
-    <span
-      className={classNames(
-        theme?.root,
-        (width ?? height) && theme?.customSize
-      )}
-      {...(alt && {
-        role: 'img',
-        'aria-label': alt
-      })}
-      {...(!alt && {
-        'aria-hidden': 'true'
-      })}
-      style={{
-        width,
-        height,
-        lineHeight: height
-      }}
-    >
-      {alt && <VisuallyHidden>{alt}</VisuallyHidden>}
-      {children}
-    </span>
-  )
+  return cloneElement(Children.only(children), {
+    className: classNames(theme?.root, className),
+    ...(alt && { role: 'img' }),
+    ...(!alt && { 'aria-hidden': true }),
+    style: { ...style, width, height },
+    title: alt,
+    ...rest
+  })
 }
 
 Icon.displayName = 'Icon'
@@ -41,7 +34,9 @@ Icon.propTypes = {
   width: oneOfType([number, string]),
   alt: string,
   children: node,
-  theme: shape({ root: string })
+  theme: shape({ root: string }),
+  className: string,
+  style: object
 }
 
 export default Icon

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

@@ -1,18 +1,8 @@
 .root {
   display: inline-block;
   fill: currentColor;
-  vertical-align: middle;
   font-style: normal;
+  height: auto;
+  vertical-align: middle;
   width: 1em;
-
-  svg {
-    vertical-align: top;
-    height: auto;
-  }
-}
-
-.customSize {
-  svg {
-    width: inherit;
-  }
 }

package/src/utils/class-names.js

@@ -1,6 +1,9 @@
 import classnames from 'classnames/dedupe'
 
-export const classNames = (...args) =>
-  classnames(...args)
+export const classNames = (...args) => {
+  const names = classnames(...args)
     .replace(undefined, '')
     .trim()
+
+  return names.length ? names : undefined
+}