@newhighsco/chipset 6.12.2 → 6.13.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@newhighsco/chipset",
   "description": "Shareable, theme-able component library by New High Score",
-  "version": "6.12.2",
+  "version": "6.13.2",
   "author": "New High Score <hello@newhighsco.re>",
   "license": "ISC",
   "config": {
@@ -35,8 +35,8 @@
     "snapshot": "npm-run-all --parallel snapshot:*",
     "snapshot:chromatic": "chromatic --storybook-build-dir build --auto-accept-changes main --exit-once-uploaded",
     "lint": "npm-run-all --parallel lint:*",
-    "lint:js": "eslint --cache --ext .js,.json,.jsx,.mdx .",
-    "lint:css": "stylelint '**/*.{css,scss}' --cache",
+    "lint:js": "eslint --cache --ignore-path .gitignore --ext .js,.json,.jsx,.mdx .",
+    "lint:css": "stylelint '**/*.{css,scss}' --cache --ignore-path .gitignore",
     "format": "npm-run-all --parallel format:*",
     "format:js": "yarn lint:js --fix",
     "format:css": "yarn lint:css --fix"
@@ -47,39 +47,40 @@
     "react-device-detect": "2.1.2"
   },
   "devDependencies": {
-    "@babel/core": "7.15.8",
+    "@babel/core": "7.16.0",
     "@babel/polyfill": "7.12.1",
-    "@babel/preset-env": "7.15.8",
-    "@babel/preset-react": "7.14.5",
-    "@commitlint/cli": "13.2.1",
+    "@babel/preset-env": "7.16.0",
+    "@babel/preset-react": "7.16.0",
+    "@commitlint/cli": "14.1.0",
     "@fullhuman/postcss-purgecss": "4.0.3",
     "@newhighsco/browserslist-config": "1.0.3",
-    "@newhighsco/commitlint-config": "1.0.16",
+    "@newhighsco/commitlint-config": "1.0.17",
     "@newhighsco/editor-config": "1.1.2",
-    "@newhighsco/eslint-config": "2.3.36",
-    "@newhighsco/postcss-config": "3.4.10",
+    "@newhighsco/eslint-config": "2.3.37",
+    "@newhighsco/postcss-config": "3.4.15",
     "@newhighsco/prettier-config": "2.0.14",
-    "@newhighsco/release-config": "1.0.73",
-    "@newhighsco/storybook-preset": "4.3.24",
-    "@newhighsco/stylelint-config": "2.0.48",
+    "@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",
     "babel-loader": "8.2.3",
-    "chromatic": "6.0.4",
+    "chromatic": "6.0.5",
     "enzyme": "3.11.0",
     "eslint": "8.1.0",
     "husky": "7.0.4",
     "identity-obj-proxy": "3.0.0",
     "jest": "27.3.1",
     "npm-run-all": "4.1.5",
+    "postcss": "8.3.11",
     "prettier": "2.4.1",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "sass-true": "6.0.1",
     "semantic-release": "18.0.0",
-    "stylelint": "13.13.1",
-    "webpack": "5.59.1"
+    "stylelint": "14.0.1",
+    "webpack": "5.61.0"
   },
   "peerDependencies": {
     "react": "17.0.2",

package/src/components/Grid/Grid.module.scss

@@ -1,4 +1,4 @@
 @use '../../../styles/mixins/grid';
 
-@include grid.initialize();
+@include grid.initialize;
 @include grid.gutter('gutterless', 0);

package/src/components/Icon/Icon.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { node, number, shape, string } from 'prop-types'
+import { node, number, oneOfType, shape, string } from 'prop-types'
 import classNames from 'classnames'
 import VisuallyHidden from '../VisuallyHidden'
 
@@ -23,9 +23,9 @@ const Icon = ({ height, width, alt, children, theme }) => {
         'aria-hidden': 'true'
       })}
       style={{
-        width: width && `${width}px`,
-        height: height && `${height}px`,
-        lineHeight: height && `${height}px`
+        width,
+        height,
+        lineHeight: height
       }}
     >
       {alt && <VisuallyHidden>{alt}</VisuallyHidden>}
@@ -36,8 +36,8 @@ const Icon = ({ height, width, alt, children, theme }) => {
 
 Icon.displayName = 'Icon'
 Icon.propTypes = {
-  height: number,
-  width: number,
+  height: oneOfType([number, string]),
+  width: oneOfType([number, string]),
   alt: string,
   children: node,
   theme: shape({ root: string })

package/src/components/LiveStream/LiveStream.module.scss

@@ -8,7 +8,7 @@
 .video {
   background: black;
 
-  @include mixins.mq(breakpoints.$tabletLandscape) {
+  @include mixins.mq(breakpoints.$tablet-landscape) {
     display: flex;
     align-items: center;
     flex-grow: 1;
@@ -17,7 +17,7 @@
 }
 
 .chat {
-  @include mixins.mq(breakpoints.$tabletLandscape) {
+  @include mixins.mq(breakpoints.$tablet-landscape) {
     width: 340px;
   }
 

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/VisuallyHidden/VisuallyHidden.module.scss

@@ -1,5 +1,5 @@
 @use '../../../styles/mixins/visually-hidden' as *;
 
 .root {
-  @include visually-hidden();
+  @include visually-hidden;
 }

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'

package/styles/_breakpoints.module.scss

@@ -1,28 +1,31 @@
 @use './functions/strip-unit' as *;
 
 $mobile: 320px !default;
-$mobileLandscape: 400px !default;
+$mobile-landscape: 400px !default;
 $tablet: 550px !default;
-$tabletLandscape: 800px !default;
+$tablet-landscape: 800px !default;
 $desktop: 960px !default;
-$desktopMedium: 1280px !default;
-$desktopLarge: 1600px !default;
+$desktop-medium: 1280px !default;
+$desktop-large: 1600px !default;
+
+/* stylelint-disable value-keyword-case */
 $all: (
   mobile: $mobile,
-  mobileLandscape: $mobileLandscape,
+  mobileLandscape: $mobile-landscape,
   tablet: $tablet,
-  tabletLandscape: $tabletLandscape,
+  tabletLandscape: $tablet-landscape,
   desktop: $desktop,
-  desktopMedium: $desktopMedium,
-  desktopLarge: $desktopLarge
+  desktopMedium: $desktop-medium,
+  desktopLarge: $desktop-large
 );
+/* stylelint-enable value-keyword-case */
 
 :export {
   mobile: strip-unit($mobile);
-  mobileLandscape: strip-unit($mobileLandscape);
+  mobileLandscape: strip-unit($mobile-landscape);
   tablet: strip-unit($tablet);
-  tabletLandscape: strip-unit($tabletLandscape);
+  tabletLandscape: strip-unit($tablet-landscape);
   desktop: strip-unit($desktop);
-  desktopMedium: strip-unit($desktopMedium);
-  desktopLarge: strip-unit($desktopLarge);
+  desktopMedium: strip-unit($desktop-medium);
+  desktopLarge: strip-unit($desktop-large);
 }

package/styles/_normalize.scss

@@ -5,6 +5,7 @@
 // 2. Prevent adjustments of font size after orientation changes in iOS
 html {
   box-sizing: border-box; // 1
+  /* stylelint-disable-next-line property-no-vendor-prefix */
   -webkit-text-size-adjust: 100%; // 2
 }
 
@@ -152,6 +153,7 @@ button,
 [type='button'],
 [type='reset'],
 [type='submit'] {
+  /* stylelint-disable-next-line property-no-vendor-prefix */
   -webkit-appearance: button;
 }
 
@@ -211,18 +213,21 @@ textarea {
 // 1. Correct the odd appearance in Chrome and Safari.
 // 2. Correct the outline style in Safari.
 [type='search'] {
+  /* stylelint-disable-next-line property-no-vendor-prefix */
   -webkit-appearance: textfield; // 1
   outline-offset: -2px; // 2
 }
 
 // Remove the inner padding in Chrome and Safari on macOS.
 [type='search']::-webkit-search-decoration {
+  /* stylelint-disable-next-line property-no-vendor-prefix */
   -webkit-appearance: none;
 }
 
 // 1. Correct the inability to style clickable types in iOS and Safari.
 // 2. Change font properties to `inherit` in Safari.
 ::-webkit-file-upload-button {
+  /* stylelint-disable-next-line property-no-vendor-prefix */
   -webkit-appearance: button; // 1
   font: inherit; // 2
 }

package/styles/functions/_em.scss

@@ -2,7 +2,7 @@
 @use './strip-unit' as *;
 
 @function em($px, $base: 16) {
-  @if ($px == 0) {
+  @if $px == 0 {
     @return 0;
   }
 

package/styles/functions/_rem.scss

@@ -2,7 +2,7 @@
 @use './strip-unit' as *;
 
 @function rem($px, $base: 16) {
-  @if ($px == 0) {
+  @if $px == 0 {
     @return 0;
   }
 

package/styles/functions/_spacing.scss

@@ -3,7 +3,7 @@
 $spacing-base-unit: 8 !default;
 
 @function spacing($i) {
-  @if ($i == 0) {
+  @if $i == 0 {
     @return 0;
   }
 

package/styles/mixins/_ellipsis.scss

@@ -10,7 +10,7 @@
 ///
 /// @example scss
 ///   .element {
-///     @include ellipsis();
+///     @include ellipsis;
 ///   }
 ///
 ///   // CSS Output

package/styles/mixins/_grid.scss

@@ -1,9 +1,8 @@
+@use 'sass:list';
 @use 'sass:math';
 @use 'sass:map';
 
-//
 // DEFAULT VARIABLES
-//
 
 // Default count & fraction names
 $count-names: one two three four five six seven eight nine ten eleven twelve
@@ -11,9 +10,7 @@ $count-names: one two three four five six seven eight nine ten eleven twelve
 $fraction-names: whole half third quarter fifth sixth seventh eighth ninth tenth
   eleventh twelfth thirteenth fourteenth fifteenth sixteenth !default;
 
-//
 // INITIALIZE GRID
-//
 
 @mixin initialize() {
   .item {
@@ -24,10 +21,8 @@ $fraction-names: whole half third quarter fifth sixth seventh eighth ninth tenth
   }
 }
 
-//
 // GRID UNCOMPRESSED
 // Workaround for non-compressed HTML (avoid if possible)
-//
 
 @mixin uncompressed($spacing: -0.25em) {
   .root.uncompressed {
@@ -39,13 +34,11 @@ $fraction-names: whole half third quarter fifth sixth seventh eighth ninth tenth
   }
 }
 
-//
 // GRID GUTTER
 // Custom namespaced gutter widths
-//
 
 @mixin gutter($namespace, $grid-modifier--gutter) {
-  @if ($namespace != '') {
+  @if $namespace != '' {
     $namespace: '.' + $namespace;
   }
 
@@ -61,10 +54,8 @@ $fraction-names: whole half third quarter fifth sixth seventh eighth ninth tenth
   /*! purgecss end ignore */
 }
 
-//
 // GRID REVERSE
 // Reverses the rendered layout of the `grid__item`s
-//
 
 @mixin reverse($namespace: '') {
   $namespace: _namespace-suffix($namespace, 'reverse');
@@ -83,10 +74,8 @@ $fraction-names: whole half third quarter fifth sixth seventh eighth ninth tenth
   /*! purgecss end ignore */
 }
 
-//
 // GRID WIDTHS
 // Sets up grid width styles
-//
 
 @mixin widths($namespace, $columns) {
   $namespace: _namespace-suffix($namespace);
@@ -94,10 +83,8 @@ $fraction-names: whole half third quarter fifth sixth seventh eighth ninth tenth
   @include _grid($namespace, $columns, 'width');
 }
 
-//
 // GRID FLEXBOX
 // Sets up grid flexbox styles
-//
 
 @mixin flex() {
   .root.flex {
@@ -106,10 +93,8 @@ $fraction-names: whole half third quarter fifth sixth seventh eighth ninth tenth
   }
 }
 
-//
 // GRID VERTICAL ALIGNMENTS
 // Sets up grid vertical-align styles
-//
 
 @mixin valign($aligns) {
   $align-items: (
@@ -136,24 +121,23 @@ $fraction-names: whole half third quarter fifth sixth seventh eighth ninth tenth
   }
 }
 
-//
 // INTERNAL MIXINS
 // These mixins should not be called directly,
 // instead are used as helpers within other mixins
-//
 
+/* stylelint-disable-next-line scss/at-mixin-pattern */
 @mixin _grid($namespace, $columns, $property) {
-  $columns-length: length($columns);
+  $columns-length: list.length($columns);
 
   @for $i from 1 through $columns-length {
-    $column: nth($columns, $i);
-    $grid: nth($fraction-names, $column);
+    $column: list.nth($columns, $i);
+    $grid: list.nth($fraction-names, $column);
     $column-count: if($column == 1, 1, $column - 1);
 
     @for $j from 1 through $column-count {
       $plural: if($j == 1, '', 's');
       $column-width: $j * math.div(100, $column);
-      $column-name: nth($count-names, $j);
+      $column-name: list.nth($count-names, $j);
 
       .item#{$namespace}#{$column-name}-#{$grid}#{$plural} {
         #{$property}: $column-width + 0%;
@@ -162,6 +146,7 @@ $fraction-names: whole half third quarter fifth sixth seventh eighth ninth tenth
   }
 }
 
+/* stylelint-disable-next-line scss/at-function-pattern */
 @function _grid-gutter--item($g) {
   @if unit($g) == '%' {
     $scale: math.div(100, 100 + $g);
@@ -172,8 +157,9 @@ $fraction-names: whole half third quarter fifth sixth seventh eighth ninth tenth
   }
 }
 
+/* stylelint-disable-next-line scss/at-function-pattern */
 @function _namespace-suffix($namespace, $suffix: '') {
-  @if ($namespace != '') {
+  @if $namespace != '' {
     $namespace: $namespace + '-';
   }
 

package/styles/mixins/_mq.scss

@@ -1,3 +1,4 @@
+/* stylelint-disable scss/dollar-variable-pattern */
 @mixin mq($min: false, $max: false, $height: false, $and: false, $media: all) {
   $_direction: if($height, height, width);
   $mq: '#{$media} ';

package/styles/mixins/_triangle.scss

@@ -1,7 +1,8 @@
+@use 'sass:list';
 @use 'sass:math';
 
 @mixin triangle($point: 'up', $size: 1em, $color: '') {
-  @if ($point == 'up') {
+  @if $point == 'up' {
     @include _triangle-borders(
       (
         right: transparent,
@@ -88,13 +89,14 @@
   }
 }
 
+/* stylelint-disable-next-line scss/at-mixin-pattern */
 @mixin _triangle-borders($sides, $size, $color) {
   width: 0;
   height: 0;
 
   @each $side in $sides {
-    $direction: nth($side, 1);
-    $type: nth($side, 2);
+    $direction: list.nth($side, 1);
+    $type: list.nth($side, 2);
 
     @if $type == filled {
       border-#{$direction}: $size solid if($color != '', $color, null);