@ukic/web-components 2.10.0 → 2.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ukic/web-components",
-  "version": "2.10.0",
+  "version": "2.12.0",
   "description": "A web component UI library compiled with StencilJS",
   "author": "mi6",
   "bugs": {
@@ -35,16 +35,21 @@
     "test-a11y": "jest",
     "create-component": "stencil generate",
     "storybook": "npm-run-all --parallel build:watch start-storybook",
-    "start-storybook": "start-storybook -p 6006 -s dist --no-manager-cache",
-    "build-storybook": "rimraf /storybook-static && build-storybook",
+    "start-storybook": "storybook dev -p 6006 -s dist",
+    "build-storybook": "rimraf /storybook-static && storybook build",
     "prettier": "prettier --config ../../.prettierrc.json --ignore-path ../../.prettierignore src --check",
     "prettier:fix": "prettier --config ../../.prettierrc.json --ignore-path ../../.prettierignore src --write",
     "lint": "remark src && echo '*** Linting CSS ***' && stylelint --config ../../.stylelintrc.json src/**/*.css && echo '*** Linting standard files ***' && eslint --config ../../.eslintrc.js src",
     "lint:fix": "echo '*** Linting CSS ***' && stylelint --config ../../.stylelintrc.json src/**/*.css --fix && echo '*** Linting standard files ***' && eslint --config ../../.eslintrc.js src --fix",
-    "test-visual": "loki --requireReference --reactUri file:./storybook-static --chromeTolerance=1",
-    "test-visual:ci": "loki --requireReference --reactUri file:./storybook-static --chromeFlags=\"--no-sandbox --headless --hide-scrollbars --disable-gpu\" --chromeTolerance=1",
-    "test-visual:update": "npm run build-storybook && loki update --reactUri file:./storybook-static",
-    "audit": "echo 'Audit for: @ukic/web-components' && audit-ci -m --config ../../audit-ci.json"
+    "start": "npx http-server storybook-static -s",
+    "kill": "kill-port 8080 --graceful",
+    "loki-tests": "loki --requireReference --port 8080 --chromeTolerance=1 --chromeRetries=1 --chromeConcurrency=1 && npm run kill",
+    "loki-tests:ci": "loki --requireReference --port 8080 --chromeFlags=\"--no-sandbox --headless --hide-scrollbars --disable-gpu\" --chromeTolerance=1 --chromeRetries=1 --chromeConcurrency=1 && npm run kill",
+    "loki-tests:update": "loki update --port 8080 --chromeTolerance=1 --chromeRetries=1 --chromeConcurrency=1 && npm run kill",
+    "test-visual": "npm-run-all --parallel start loki-tests",
+    "test-visual:ci": "npm-run-all --parallel start loki-tests:ci",
+    "test-visual:update": "npm run build-storybook && npm-run-all --parallel start loki-tests:update",
+    "audit": "echo 'Audit for: @ukic/web-components' & audit-ci -m --config ../../audit-ci.json"
   },
   "dependencies": {
     "@popperjs/core": "^2.11.2",
@@ -60,14 +65,14 @@
     "@open-wc/testing-helpers": "^2.0.2",
     "@stencil/postcss": "^2.1.0",
     "@stencil/react-output-target": "^0.5.3",
-    "@storybook/addon-a11y": "^6.4.8",
-    "@storybook/addon-actions": "^6.4.3",
-    "@storybook/addon-essentials": "^6.4.3",
-    "@storybook/addon-links": "^6.4.3",
+    "@storybook/addon-a11y": "^7.6.7",
+    "@storybook/addon-actions": "^7.6.7",
+    "@storybook/addon-essentials": "^7.6.7",
+    "@storybook/addon-links": "^7.6.7",
+    "@storybook/addon-mdx-gfm": "^7.6.7",
     "@storybook/addon-postcss": "^2.0.0",
-    "@storybook/builder-webpack5": "^6.5.14",
-    "@storybook/manager-webpack5": "^6.5.14",
-    "@storybook/web-components": "^6.4.3",
+    "@storybook/web-components": "^7.6.7",
+    "@storybook/web-components-webpack5": "^7.6.7",
     "@types/autoprefixer": "^10.2.0",
     "@types/jest": "^26.0.24",
     "@types/jest-axe": "^3.5.3",
@@ -76,16 +81,18 @@
     "jest": "^26.6.3",
     "jest-axe": "^5.0.1",
     "jest-cli": "^26.6.3",
+    "kill-port-process": "^3.2.1",
     "lit": "^2.0.2",
-    "loki": "^0.31.1",
+    "loki": "^0.33.1",
     "npm-run-all": "^4.1.5",
     "puppeteer": "^13.1.3",
     "react": "^17.0.0",
     "react-dom": "^17.0.0",
     "stencil-inline-svg": "^1.1.0",
+    "storybook": "^7.6.7",
     "ts-jest": "^26.5.6",
     "webpack": "^5.76.0"
   },
   "license": "MIT",
-  "gitHead": "d5a95835136923d7ccf2990b32bd5972535aef7d"
+  "gitHead": "4f477b247c85fdd12a6b5e82a907aec27b8b4697"
 }

package/vscode-data.json

@@ -2921,7 +2921,7 @@
         },
         {
           "name": "expanded",
-          "description": "If `true`, the side navigation will load in an expanded state."
+          "description": "If `true`, the side navigation will display in an expanded state."
         },
         {
           "name": "href",
@@ -3551,13 +3551,21 @@
           "description": "The maximum number that can be accepted as a value, when `type` is `number` and `rows` is `1`. (NOTE: Ensure to include visual indication of max value in `helperText` or `label`)"
         },
         {
-          "name": "max-length",
+          "name": "max-characters",
           "description": "The maximum number of characters that can be entered in the field."
         },
+        {
+          "name": "max-length",
+          "description": "The label for maximum number of characters that can be entered in the field."
+        },
         {
           "name": "min",
           "description": "The minimum number that can be accepted as a value, when `type` is `number` and `rows` is `1`. (NOTE: Ensure to include visual indication of min value in `helperText` or `label`)"
         },
+        {
+          "name": "min-characters",
+          "description": "The minimum number of characters that can be entered in the field."
+        },
         {
           "name": "name",
           "description": "The name of the control, which is submitted with the form data."
@@ -3741,6 +3749,96 @@
       },
       "attributes": []
     },
+    {
+      "name": "ic-toggle-button",
+      "description": {
+        "kind": "markdown",
+        "value": ""
+      },
+      "attributes": [
+        {
+          "name": "accessible-label",
+          "description": "The accessible label that will be applied to the toggle button. This is required for the icon variant of toggle buttons."
+        },
+        {
+          "name": "appearance",
+          "description": "The appearance of the toggle button.",
+          "values": [
+            {
+              "name": "dark"
+            },
+            {
+              "name": "default"
+            },
+            {
+              "name": "light"
+            }
+          ]
+        },
+        {
+          "name": "disabled",
+          "description": "If `true`, the toggle button will be in disabled state."
+        },
+        {
+          "name": "full-width",
+          "description": "If `true`, the toggle button will fill the width of the container."
+        },
+        {
+          "name": "icon-placement",
+          "description": "The placement of the icon in relation to the toggle button label.",
+          "values": [
+            {
+              "name": "left"
+            },
+            {
+              "name": "right"
+            },
+            {
+              "name": "top"
+            }
+          ]
+        },
+        {
+          "name": "label",
+          "description": "The label to display in the toggle button. This is required for the default variant of toggle buttons."
+        },
+        {
+          "name": "loading",
+          "description": "If `true`, the toggle button will be in loading state."
+        },
+        {
+          "name": "size",
+          "description": "The size of the toggle button to be displayed.",
+          "values": [
+            {
+              "name": "default"
+            },
+            {
+              "name": "large"
+            },
+            {
+              "name": "small"
+            }
+          ]
+        },
+        {
+          "name": "toggle-checked",
+          "description": "If `true`, the toggle button will be in a checked state."
+        },
+        {
+          "name": "variant",
+          "description": "The variant of the toggle button.",
+          "values": [
+            {
+              "name": "default"
+            },
+            {
+              "name": "icon"
+            }
+          ]
+        }
+      ]
+    },
     {
       "name": "ic-tooltip",
       "description": {