@linzjs/lui 17.16.3-1 → 17.17.0

package/dist/scss/Components/LuiFormElements/LuiCheckboxInput/LuiCheckboxInput.scss

@@ -3,6 +3,8 @@
 @use '../../../Foundation/Variables/FontVars' as fonts;
 @use '../../../Foundation/Variables/FormVars' as forms;
 @use '../../../Foundation/Variables/MiscVars' as misc;
+@use "../../../Foundation/Utilities" as *;
+
 // Usage:
 // <label class="Checkbox" for="male">
 //   <input class="Checkbox-input" type="checkbox" id="male">
@@ -101,6 +103,11 @@ $border-size: 2px;
     fill: rgba(colors.$snow, 1); // tick in checkbox now visible when checked
   }
 }
+// set the focus-visible styling of
+// for keyboard accessibility
+.LuiCheckboxInput-input:focus-visible + span .LuiCheckboxInput-labelCheck {
+  @include focusStyle;
+}
 
 // ============
 // STATES

package/dist/scss/Components/LuiFormElements/LuiRadioInput/LuiRadioInput.scss

@@ -69,7 +69,12 @@
       background-color: colors.$disabled-color-dark;
     }
   }
-}
+  // If the label has an input inside it that has a focus-visible, then show outline
+  // for keyboard accessibility
+  &:has(input:focus-visible):before {
+    @include focusStyle;
+  }
+} 
 
 .LuiRadioInput--hasError {
   .LuiRadioInput-label:before {

package/dist/scss/Foundation/Utilities/Focus.scss

@@ -0,0 +1,6 @@
+@use '../Variables/ColorVars.scss' as *;
+
+
+@mixin focusStyle {
+    outline: 3px solid $sea;
+}

package/dist/scss/Foundation/Utilities/_index.scss

@@ -7,6 +7,7 @@
 @forward 'Ease';
 @forward "FitMedia";
 @forward 'FluidType';
+@forward 'Focus';
 @forward 'Hover';
 @forward 'LuiStandardHeaderBackground';
 @forward "Placeholder";

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "17.16.3-1",
+  "version": "17.17.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -33,11 +33,9 @@
     "prettier:fix-changed": "pretty-quick",
     "clear-cache": "jest --clearCache",
     "watch-storybook": "start-storybook --port=6006 --static-dir ./src/assets",
-    "generate-svgs": "echo 'CHECK THAT YOUR SVG HAS A VIEW BOX, otherwise it will not work'; node ./svg-generator",
-    "install-react-17": "npm i react@^17 react-dom@^17 && npm i @testing-library/react@^12 @types/react@^17 framer-motion@^4.1"
+    "generate-svgs": "echo 'CHECK THAT YOUR SVG HAS A VIEW BOX, otherwise it will not work'; node ./svg-generator"
   },
   "peerDependencies": {
-    "framer-motion": ">=4.1",
     "react": ">=16",
     "react-dom": ">=16"
   },
@@ -49,12 +47,13 @@
   "name": "@linzjs/lui",
   "module": "dist/lui.esm.js",
   "jest": {
-    "preset": "ts-jest",
-    "testEnvironment": "jsdom",
     "moduleNameMapper": {
       "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/src/__mocks__/fileMock.js",
       "\\.(css|less|scss)$": "<rootDir>/src/__mocks__/styleMock.js"
     },
+    "transform": {
+      "^.+\\.tsx?$": "esbuild-jest"
+    },
     "setupFilesAfterEnv": [
       "./setupTests.ts"
     ],
@@ -75,7 +74,6 @@
   "devDependencies": {
     "@geometricpanda/storybook-addon-badges": "^0.2.1",
     "@linzjs/style": "^3.9.0",
-    "@mdx-js/react": "^2.1.3",
     "@react-types/shared": "^3.14.0",
     "@rollup/plugin-commonjs": "^21.0.2",
     "@rollup/plugin-json": "^4.1.0",
@@ -84,47 +82,46 @@
     "@semantic-release/git": "^9.0.0",
     "@size-limit/preset-small-lib": "^7.0.8",
     "@storybook/addon-a11y": "^6.5.0",
-    "@storybook/addon-docs": "^6.5.12",
+    "@storybook/addon-docs": "^6.5.0",
     "@storybook/addon-essentials": "^6.5.0",
     "@storybook/addon-info": "^5.3.21",
     "@storybook/addon-links": "^6.5.0",
     "@storybook/addon-storysource": "6.4.19",
     "@storybook/addons": "^6.5.0",
-    "@storybook/mdx2-csf": "^0.0.3",
     "@storybook/preset-scss": "^1.0.3",
-    "@storybook/react": "^6.5.12",
+    "@storybook/react": "^6.5.0",
     "@storybook/theming": "^6.5.0",
     "@testing-library/jest-dom": "^5.8.0",
-    "@testing-library/react": "^13.0.0",
-    "@testing-library/user-event": "^14.0.0",
+    "@testing-library/react": "^10.0.4",
+    "@testing-library/user-event": "^10.4.0",
     "@types/camelcase": "^5.2.0",
-    "@types/jest": "^27.4.1",
+    "@types/jest": "^25.2.3",
     "@types/jest-axe": "^3.5.0",
-    "@types/react": "^18.0.21",
+    "@types/react": "^16.9.55",
     "@types/react-dom": "^16.9.9",
     "@types/react-helmet": "^6.1.2",
-    "@types/react-modal": "^3.13.1",
+    "@types/react-modal": "^3.10.5",
     "@types/sass": "^1.16.0",
     "@types/uuid": "^8.3.1",
     "@types/yup": "0.29.13",
     "chromatic": "^4.0.3",
     "conventional-changelog-conventionalcommits": "^4.6.1",
     "css-loader": "^3.6.0",
+    "esbuild": "^0.15.5",
+    "esbuild-jest": "^0.5.0",
     "eslint-config-prettier": "8.3.0",
     "eslint-config-react-app": "^7.0.0",
     "eslint-plugin-prettier": "4.0.0",
     "fetch-mock": "^9.11.0",
-    "framer-motion": "^7.5.2",
     "html-loader": "^1.1.0",
     "husky": "^4.3.0",
-    "jest": "^27.5.1",
     "jest-axe": "^3.5.0",
     "jest-canvas-mock": "2.3.1",
     "msw": "^0.22.2",
     "npm-run-all": "^4.1.5",
     "pretty-quick": "^3.1.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "react-helmet": "^6.1.0",
     "react-is": "^17.0.1",
     "rollup": "^2.56.3",
@@ -141,7 +138,6 @@
     "stylelint-config-standard": "^25.0.0",
     "stylelint-scss": "^4.1.0",
     "stylelint-suitcss": "^5.0.0",
-    "ts-jest": "^27.1.3",
     "typescript": "^4.7.4",
     "whatwg-fetch": "^3.4.1",
     "yup": "^0.29.0"
@@ -152,13 +148,15 @@
     "@react-aria/listbox": "^3.6.0",
     "@react-aria/utils": "^3.13.2",
     "@react-stately/list": "^3.5.2",
-    "@szhsin/react-menu": "^3.1.2",
+    "@szhsin/react-menu": "^2.3.3",
     "camelcase": "^6.0.0",
     "clsx": "^1.1.0",
     "container-query-polyfill": "0.1.2",
+    "formik": "^2.1.4",
+    "framer-motion": "4.1.17",
     "lottie-web": "^5.9.1",
     "react-loading-skeleton": "^3.1.0",
-    "react-modal": "^3.15.1",
+    "react-modal": "^3.11.2",
     "react-query": "2.26.3",
     "react-select": "^5.1.0",
     "resolve-url-loader": "^5.0.0",