@hazelcast/ui 1.3.3-next.2 → 1.3.3-next.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hazelcast/ui",
-  "version": "1.3.3-next.2+40dbaa2",
+  "version": "1.3.3-next.21+7bd4b2d",
   "description": "Hazelcast design system components",
   "author": "",
   "homepage": "https://github.com/hazelcast/frontend-shared#readme",
@@ -71,10 +71,11 @@
     "react-table": "^7.8.0",
     "react-uid": "^2.3.2",
     "react-use": "^17.4.0",
-    "use-deep-compare": "^1.1.0"
+    "use-deep-compare": "^1.1.0",
+    "use-persisted-state": "^0.3.3"
   },
   "devDependencies": {
-    "@hazelcast/test-helpers": "^1.3.2",
+    "@hazelcast/test-helpers": "1.3.3-next.20",
     "@storybook/addon-docs": "^6.5.16",
     "@storybook/addons": "^6.5.16",
     "@storybook/builder-webpack5": "^6.5.16",
@@ -82,31 +83,36 @@
     "@storybook/preset-scss": "^1.0.3",
     "@storybook/react": "^6.5.16",
     "@storybook/theming": "^6.5.16",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.5.0",
+    "@testing-library/react": "^12.1.5",
+    "@testing-library/user-event": "^14.5.2",
     "@types/classnames": "^2.3.1",
     "@types/enzyme": "^3.10.12",
     "@types/jest-axe": "^3.5.3",
     "@types/react": "^17.0.45",
     "@types/react-datepicker": "^4.3.2",
     "@types/react-dom": "^17.0.17",
+    "@types/use-persisted-state": "^0.3.4",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.8.0",
     "babel-loader": "^9.1.2",
-    "doiuse": "^4.4.1",
+    "doiuse": "^6.0.3",
     "enzyme": "^3.11.0",
     "jest-axe": "^8.0.0",
-    "loki": "^0.34.0",
-    "postcss": "^8.4.23",
-    "postcss-cli": "^9.1.0",
-    "postcss-reporter": "^7.0.5",
-    "postcss-scss": "^4.0.6",
+    "loki": "^0.35.1",
+    "postcss": "^8.4.47",
+    "postcss-cli": "^11.0.0",
+    "postcss-reporter": "^7.1.0",
+    "postcss-scss": "^4.0.9",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "storybook-addon-designs": "^6.3.1",
-    "stylelint": "^15.6.0",
-    "stylelint-config-standard": "^33.0.0",
-    "stylelint-config-standard-scss": "^9.0.0",
-    "stylelint-prettier": "^3.0.0",
-    "stylelint-scss": "^4.6.0",
-    "webpack": "^5.81.0",
+    "stylelint": "^16.9.0",
+    "stylelint-config-standard": "^36.0.1",
+    "stylelint-config-standard-scss": "^13.1.0",
+    "stylelint-prettier": "^5.0.2",
+    "stylelint-scss": "^6.7.0",
+    "webpack": "^5.95.0",
     "yup": "^0.32.11"
   },
   "peerDependencies": {
@@ -115,5 +121,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "40dbaa2eb9d0f81f783ca8cccd9cddc8005b0c19"
+  "gitHead": "7bd4b2d5c7ba992f38edc66a640ec901cafd6fdd"
 }

package/styles/constants/_colors.scss

@@ -1,3 +1,5 @@
+@use 'sass:color';
+
 // https://zeroheight.com/11d0e6dac/p/594529--colors
 $colorPrimaryLight: #2d7de4 !default;
 $colorPrimary: #2160c0 !default;
@@ -8,23 +10,27 @@ $colorNeutralLight: #b7c1cb !default;
 $colorNeutral: #dbdbdb !default;
 $colorSuccess: #85da66 !default;
 $colorSuccessLight: #d5f0d1 !default;
-$colorSuccessDark: darken($colorSuccess, 10%) !default;
+$colorSuccessDark: color.adjust($colorSuccess, $lightness: -10%) !default;
 $colorInfo: #76e7e7 !default;
 $colorInfoLight: #d0f4f8 !default;
-$colorInfoDark: darken($colorInfo, 10%) !default;
+$colorInfoDark: color.adjust($colorInfo, $lightness: -10%) !default;
 $colorWarning: #ffec44 !default;
 $colorWarningLight: #f9f6c7 !default;
-$colorWarningDark: darken($colorWarning, 15%) !default;
+$colorWarningDark: color.adjust($colorWarning, $lightness: -15%) !default;
 $colorError: #dc084b !default;
 $colorErrorLight: #efb1c9 !default;
-$colorErrorDark: darken($colorError, 10%) !default;
+$colorErrorDark: color.adjust($colorError, $lightness: -10%) !default;
 $colorText: #061827 !default;
 $colorTextSecondary: #707482 !default;
 $colorTextSubdued: #69707d !default;
+$brandColorText: #10a4b3 !default;
 $colorOverlayBackground: #f0f6ff !default;
 $colorAccessibilityOutline: #74f !default;
 $colorBrand: #00bac6 !default;
 $colorShadow: rgb(53 61 73 / 20%) !default;
 $colorMenuDark: #333 !default;
-$authPrimary: #c6ff3a !default;
+$brandPrimary: #c6ff3a !default;
+$authPrimary: $brandPrimary !default;
 $authSecondary: #0b2b39 !default;
+$brandSecondary: #061727 !default;
+$brandAccent: #122d45 !default;

package/styles/constants/_typography.scss

@@ -44,13 +44,6 @@ $lineHeightBodyTiny: normal !default;
   @return '';
 }
 
-@mixin typographyH1Hero($override: false) {
-  font-weight: $fontWeightHeadingRegular #{override($override)};
-  font-size: $fontSizeH4 #{override($override)};
-  letter-spacing: $letterSpacingH4 #{override($override)};
-  line-height: $lineHeightH4 #{override($override)};
-}
-
 @mixin typographyH1($override: false) {
   font-weight: $fontWeightHeadingRegular #{override($override)};
   font-size: $fontSizeH1 #{override($override)};

package/styles/helpers/_a11y.scss

@@ -36,3 +36,11 @@
   top: 1px;
   left: 1px;
 }
+
+@mixin focusOutlineSimple() {
+  &:focus-within {
+    outline: none;
+
+    @include outlineSimple;
+  }
+}

package/styles/helpers/_text.scss

@@ -3,3 +3,12 @@
   overflow: hidden;
   text-overflow: ellipsis;
 }
+
+@mixin multilineOverflowEllipsis {
+  @supports (-webkit-line-clamp: 2) {
+    white-space: normal;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+  }
+}