@newhighsco/chipset 6.23.1 → 6.24.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@newhighsco/chipset",
   "description": "Shareable, theme-able component library by New High Score",
-  "version": "6.23.1",
+  "version": "6.24.1",
   "author": "New High Score",
   "license": "ISC",
   "repository": {
@@ -50,11 +50,11 @@
     "@newhighsco/browserslist-config": "2.0.0",
     "@newhighsco/commitlint-config": "1.1.46",
     "@newhighsco/editor-config": "1.2.0",
-    "@newhighsco/eslint-config": "4.2.1",
-    "@newhighsco/postcss-config": "3.5.350",
+    "@newhighsco/eslint-config": "4.2.2",
+    "@newhighsco/postcss-config": "3.5.351",
     "@newhighsco/prettier-config": "2.1.32",
     "@newhighsco/release-config": "1.4.13",
-    "@newhighsco/storybook-preset": "8.1.1",
+    "@newhighsco/storybook-preset": "8.1.2",
     "@newhighsco/stylelint-config": "4.0.18",
     "@newhighsco/svgr-config": "1.0.0",
     "@omlet/cli": "2.0.0",
@@ -63,7 +63,7 @@
     "@testing-library/jest-dom": "6.8.0",
     "@testing-library/react": "16.3.0",
     "babel-loader": "10.0.0",
-    "chromatic": "13.1.5",
+    "chromatic": "13.2.0",
     "concurrently": "9.2.1",
     "eslint": "8.57.1",
     "husky": "9.1.7",
@@ -76,7 +76,7 @@
     "react": "19.1.1",
     "react-dom": "19.1.1",
     "sass-true": "9.0.0",
-    "semantic-release": "24.2.8",
+    "semantic-release": "24.2.9",
     "storybook": "9.1.7",
     "stylelint": "16.24.0",
     "webpack": "5.101.3"
@@ -113,6 +113,16 @@
   "stylelint": {
     "extends": [
       "@newhighsco/stylelint-config"
+    ],
+    "overrides": [
+      {
+        "files": [
+          "**/*.spec.*"
+        ],
+        "rules": {
+          "number-max-precision": null
+        }
+      }
     ]
   }
 }

package/src/components/VisuallyHidden/VisuallyHidden.module.scss

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

package/styles/mixins/{_visually-hidden.scss → _a11y.scss}

@@ -8,3 +8,12 @@
   overflow: hidden !important;
   clip-path: rect(0 0 0 0) !important;
 }
+
+@mixin visually-unhidden {
+  position: static !important;
+  height: auto !important;
+  width: 1px !important;
+  margin: 0 !important;
+  overflow: visible !important;
+  clip-path: none !important;
+}

package/styles/mixins/_grid.scss

@@ -1,6 +1,7 @@
 @use 'sass:list';
 @use 'sass:math';
 @use 'sass:map';
+@use './a11y';
 
 // DEFAULT VARIABLES
 
@@ -47,7 +48,7 @@ $fraction-names: whole half third quarter fifth sixth seventh eighth ninth tenth
     margin-left: -($grid-modifier--gutter);
 
     & > .item {
-      padding-left: _grid-gutter--item($grid-modifier--gutter);
+      padding-left: -grid-gutter($grid-modifier--gutter);
     }
   }
 
@@ -58,7 +59,7 @@ $fraction-names: whole half third quarter fifth sixth seventh eighth ninth tenth
 // Reverses the rendered layout of the `grid__item`s
 
 @mixin reverse($namespace: '') {
-  $namespace: _namespace-suffix($namespace, 'reverse');
+  $namespace: -namespace-suffix($namespace, 'reverse');
 
   /*! purgecss start ignore */
   .root#{$namespace} {
@@ -78,9 +79,9 @@ $fraction-names: whole half third quarter fifth sixth seventh eighth ninth tenth
 // Sets up grid width styles
 
 @mixin widths($namespace, $columns) {
-  $namespace: _namespace-suffix($namespace);
+  $namespace: -namespace-suffix($namespace);
 
-  @include _grid($namespace, $columns, 'width');
+  @include -grid($namespace, $columns, 'width');
 }
 
 // GRID FLEXBOX
@@ -93,6 +94,17 @@ $fraction-names: whole half third quarter fifth sixth seventh eighth ninth tenth
   }
 }
 
+@mixin hidden($namespace: '') {
+  $namespace: -namespace-suffix($namespace, 'hidden');
+
+  /*! purgecss start ignore */
+  .item#{$namespace} {
+    @include a11y.visually-hidden;
+  }
+
+  /*! purgecss end ignore */
+}
+
 // GRID VERTICAL ALIGNMENTS
 // Sets up grid vertical-align styles
 
@@ -104,7 +116,7 @@ $fraction-names: whole half third quarter fifth sixth seventh eighth ninth tenth
   );
 
   @each $align in $aligns {
-    $namespace: _namespace-suffix('valign', $align);
+    $namespace: -namespace-suffix('valign', $align);
 
     /*! purgecss start ignore */
     .root#{$namespace} {
@@ -125,8 +137,7 @@ $fraction-names: whole half third quarter fifth sixth seventh eighth ninth tenth
 // 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) {
+@mixin -grid($namespace, $columns, $property) {
   $columns-length: list.length($columns);
 
   @for $i from 1 through $columns-length {
@@ -146,8 +157,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) {
+@function -grid-gutter($g) {
   @if math.unit($g) == '%' {
     $scale: math.div(100, 100 + $g);
 
@@ -157,8 +167,7 @@ $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: '') {
+@function -namespace-suffix($namespace, $suffix: '') {
   @if $namespace != '' {
     $namespace: $namespace + '-';
   }

package/styles/mixins/_index.scss

@@ -1,3 +1,4 @@
+@forward 'a11y';
 @forward 'clearfix';
 @forward 'ellipsis';
 @forward 'font-smoothing';
@@ -5,5 +6,3 @@
 @forward 'hidpi';
 @forward 'mq';
 @forward 'triangle';
-@forward 'visually-hidden';
-@forward 'visually-unhidden';

package/styles/normalize.stories.jsx

@@ -0,0 +1,17 @@
+import { KitchenSink } from '../src/__mocks__/fixtures'
+
+export default { component: KitchenSink }
+
+export const Source = {
+  parameters: {
+    chromatic: { disable: true },
+    docs: {
+      source: {
+        code: "@use '~@newhighsco/chipset/styles/normalize';",
+        language: 'css'
+      }
+    }
+  }
+}
+
+export const Example = {}

package/styles/mixins/_visually-unhidden.scss

@@ -1,8 +0,0 @@
-@mixin visually-unhidden {
-  position: static !important;
-  height: auto !important;
-  width: 1px !important;
-  margin: 0 !important;
-  overflow: visible !important;
-  clip-path: none !important;
-}