@newhighsco/chipset 6.12.3 → 6.13.3

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@newhighsco/chipset",
   "description": "Shareable, theme-able component library by New High Score",
-  "version": "6.12.3",
+  "version": "6.13.3",
   "author": "New High Score <hello@newhighsco.re>",
   "license": "ISC",
   "config": {
@@ -25,9 +25,9 @@
     "url": "https://main--6004028a0df11e0021f58df8.chromatic.com"
   },
   "scripts": {
-    "start": "start-storybook --static-dir .storybook/static --docs",
+    "start": "start-storybook --docs",
     "prebuild": "rm -rf build",
-    "build": "build-storybook --output-dir build --static-dir .storybook/static --docs --quiet",
+    "build": "build-storybook --output-dir build --docs --quiet",
     "pretest": "yarn lint",
     "test": "npm-run-all --parallel test:*",
     "test:js": "jest --maxWorkers=2 --coverage",
@@ -47,40 +47,40 @@
     "react-device-detect": "2.1.2"
   },
   "devDependencies": {
-    "@babel/core": "7.16.0",
+    "@babel/core": "7.16.7",
     "@babel/polyfill": "7.12.1",
-    "@babel/preset-env": "7.16.0",
-    "@babel/preset-react": "7.16.0",
-    "@commitlint/cli": "14.1.0",
-    "@fullhuman/postcss-purgecss": "4.0.3",
+    "@babel/preset-env": "7.16.7",
+    "@babel/preset-react": "7.16.7",
+    "@commitlint/cli": "16.0.2",
+    "@fullhuman/postcss-purgecss": "4.1.3",
     "@newhighsco/browserslist-config": "1.0.3",
-    "@newhighsco/commitlint-config": "1.0.17",
+    "@newhighsco/commitlint-config": "1.0.20",
     "@newhighsco/editor-config": "1.1.2",
-    "@newhighsco/eslint-config": "2.3.37",
-    "@newhighsco/postcss-config": "3.4.15",
-    "@newhighsco/prettier-config": "2.0.14",
-    "@newhighsco/release-config": "1.0.76",
-    "@newhighsco/storybook-preset": "4.3.26",
-    "@newhighsco/stylelint-config": "3.0.3",
-    "@storybook/react": "6.3.12",
-    "@wojtekmaj/enzyme-adapter-react-17": "0.6.5",
-    "babel-jest": "27.3.1",
+    "@newhighsco/eslint-config": "2.3.56",
+    "@newhighsco/postcss-config": "3.4.43",
+    "@newhighsco/prettier-config": "2.0.16",
+    "@newhighsco/release-config": "1.1.4",
+    "@newhighsco/storybook-preset": "4.4.12",
+    "@newhighsco/stylelint-config": "3.0.9",
+    "@storybook/react": "6.4.10",
+    "@wojtekmaj/enzyme-adapter-react-17": "0.6.6",
+    "babel-jest": "27.4.6",
     "babel-loader": "8.2.3",
-    "chromatic": "6.0.5",
+    "chromatic": "6.3.4",
     "enzyme": "3.11.0",
-    "eslint": "8.1.0",
+    "eslint": "8.6.0",
     "husky": "7.0.4",
     "identity-obj-proxy": "3.0.0",
-    "jest": "27.3.1",
+    "jest": "27.4.7",
     "npm-run-all": "4.1.5",
-    "postcss": "8.3.11",
-    "prettier": "2.4.1",
+    "postcss": "8.4.5",
+    "prettier": "2.5.1",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "sass-true": "6.0.1",
-    "semantic-release": "18.0.0",
-    "stylelint": "14.0.1",
-    "webpack": "5.61.0"
+    "semantic-release": "18.0.1",
+    "stylelint": "14.2.0",
+    "webpack": "5.65.0"
   },
   "peerDependencies": {
     "react": "17.0.2",

package/src/components/Navigation/Navigation.jsx

@@ -1,6 +1,7 @@
-import React, { useState } from 'react'
+import React from 'react'
 import { array, bool, func, shape, string } from 'prop-types'
 import classNames from 'classnames'
+import { useToggle } from '../../hooks'
 import Button from '../Button'
 import Icon from '../Icon'
 import List from '../List'
@@ -22,10 +23,10 @@ const Navigation = ({
 }) => {
   if (!links.length) return null
 
-  const [visible, setVisibility] = useState(!toggle)
+  const [visible, setVisibility] = useToggle(!toggle)
 
   const toggleVisibility = () => {
-    setVisibility(!visible)
+    setVisibility()
     onToggle({ visible })
   }
 

package/src/components/Tooltip/Tooltip.jsx

@@ -0,0 +1,92 @@
+import React from 'react'
+import { bool, node, oneOf, shape, string } from 'prop-types'
+import classNames from 'classnames'
+import { useToggle } from '../../hooks'
+import SmartLink from '../SmartLink'
+
+/**
+ * Use `Tooltip` to present additional information about a specific element
+ */
+const Tooltip = ({
+  hidden = true,
+  manual = true,
+  toggle,
+  href,
+  target,
+  heading,
+  children,
+  align = 'center',
+  valign = 'top',
+  disabled,
+  theme,
+  className
+}) => {
+  if (!heading && !children) return null
+
+  const [visible, setVisibility] = useToggle(!hidden)
+
+  return (
+    <span
+      className={classNames(theme?.root, className)}
+      {...(!manual && {
+        onMouseOver: setVisibility,
+        onMouseOut: setVisibility,
+        onFocus: setVisibility,
+        onBlur: setVisibility,
+        onTouchEnd: setVisibility
+      })}
+    >
+      <SmartLink
+        className={classNames(theme?.toggle, visible && theme?.toggleActive)}
+        href={href}
+        target={target}
+        disabled={disabled}
+        aria-label="Toggle tooltip"
+        {...(manual && {
+          'aria-expanded': visible,
+          onClick: setVisibility
+        })}
+      >
+        {toggle}
+      </SmartLink>
+      {(heading || children) && (
+        <span
+          className={classNames(
+            theme?.content,
+            align && theme?.[align],
+            valign && theme?.[valign]
+          )}
+          hidden={!visible}
+        >
+          {heading && <span className={theme?.heading}>{heading}</span>}
+          {children && <span className={theme?.copy}>{children}</span>}
+        </span>
+      )}
+    </span>
+  )
+}
+
+Tooltip.displayName = 'Tooltip'
+Tooltip.propTypes = {
+  hidden: bool,
+  manual: bool,
+  toggle: node,
+  href: string,
+  target: string,
+  heading: node,
+  children: node,
+  align: oneOf(['left', 'right', 'center']),
+  valign: oneOf(['top', 'middle', 'bottom']),
+  disabled: bool,
+  theme: shape({
+    root: string,
+    toggle: string,
+    toggleActive: string,
+    content: string,
+    heading: string,
+    copy: string
+  }),
+  className: string
+}
+
+export default Tooltip

package/src/components/Tooltip/Tooltip.module.scss

@@ -0,0 +1,68 @@
+.root {
+  display: inline-block;
+  position: relative;
+}
+
+.toggle {
+  cursor: help;
+
+  &[href],
+  &[aria-expanded] {
+    cursor: pointer;
+  }
+}
+
+.content {
+  display: block;
+  position: absolute;
+  z-index: 1;
+
+  &[hidden] {
+    display: none;
+  }
+
+  &.top {
+    bottom: 100%;
+  }
+
+  &.bottom {
+    top: 100%;
+  }
+
+  &.left {
+    left: 0;
+  }
+
+  &.right {
+    right: 0;
+  }
+
+  &.center {
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  &.middle {
+    top: 50%;
+    transform: translateY(-50%);
+
+    &.left {
+      left: auto;
+      right: 100%;
+    }
+
+    &.right {
+      left: 100%;
+      right: auto;
+    }
+
+    &.center {
+      transform: translate(-50%, -50%);
+    }
+  }
+}
+
+.heading,
+.copy {
+  display: block;
+}

package/src/components/Tooltip/index.js

@@ -0,0 +1,11 @@
+import { withTheme } from '../../providers'
+import PureTooltip from './Tooltip'
+
+import theme from './Tooltip.module.scss'
+
+const { displayName } = PureTooltip
+const Tooltip = withTheme(displayName, theme)(PureTooltip)
+
+Tooltip.displayName = displayName
+
+export default Tooltip

package/src/components/index.js

@@ -18,4 +18,5 @@ export { default as Prose } from './Prose'
 export { default as ResponsiveMedia } from './ResponsiveMedia'
 export { default as SiteContainer } from './SiteContainer'
 export { default as SmartLink } from './SmartLink'
+export { default as Tooltip } from './Tooltip'
 export { default as VisuallyHidden } from './VisuallyHidden'

package/src/hooks/index.js

@@ -0,0 +1 @@
+export { useToggle } from './use-toggle'

package/src/hooks/use-toggle.js

@@ -0,0 +1,8 @@
+import { useCallback, useState } from 'react'
+
+export const useToggle = (initialState = false) => {
+  const [state, setState] = useState(initialState)
+  const toggle = useCallback(() => setState(state => !state), [])
+
+  return [state, toggle]
+}

package/src/index.js

@@ -1,3 +1,4 @@
 export * from './utils'
 export * from './components'
+export * from './hooks'
 export * from './providers'