@commercetools-frontend/experimental-components 5.1.0 → 5.2.0

package/dist/styles.css

@@ -1,242 +1,3 @@
-/*  imported from button.module.css  */
-
-/* Generic button */
-
-.button-module__button___1OzVf {
-  background: var(--color-neutral);
-  border: none;
-  border-radius: 6px;
-  color: var(--color-solid);
-  cursor: pointer;
-  display: inline-block;
-  font-family: 'Open Sans', sans-serif;
-  font-size: 1rem;
-  padding: 7px 15px;
-  transition: background-color var(--transition-linear-80ms);
-  vertical-align: middle;
-  min-height: 32px;
-}
-
-/* Specific types of buttons */
-
-.button-module__cancel___1-jYL {
-  background: var(--color-surface);
-  border: 1px solid var(--color-neutral);
-}
-
-.button-module__confirm___-W92x {
-  background: var(--color-primary);
-  color: var(--color-surface);
-}
-
-.button-module__save___1-KXp {
-  color: var(--color-surface) !important;
-}
-
-.button-module__add___1fbPS {
-  background: var(--color-surface);
-  border: 1px solid var(--color-neutral);
-  color: var(--color-solid);
-  padding: 5.5px 15px 5.5px 10px;
-}
-
-.button-module__add-url___1e6xE {
-}
-
-.button-module__icon-add___2X7fc {
-  color: var(--color-neutral-60);
-  float: left;
-  font-size: 1rem;
-  margin: 3px 10px 0 0;
-}
-
-.button-module__icon-chain___1pvWT {
-  color: var(--color-neutral-60);
-  float: left;
-  font-size: 1.4rem;
-  margin: 0 10px 0 0;
-}
-
-.button-module__add___1fbPS:hover .button-module__icon-add___2X7fc,
-.button-module__add-url___1e6xE:hover .button-module__icon-chain___1pvWT {
-  color: var(--color-surface);
-}
-
-/* Base of switch buttons */
-
-.button-module__switch___2bt5z {
-  background: var(--color-surface);
-  border: 1px var(--color-neutral) solid;
-  color: var(--color-solid);
-  font-weight: 100;
-  position: relative;
-}
-
-.button-module__switch___2bt5z .button-module__icon___wuw4Z {
-  color: var(--color-neutral-60);
-}
-
-.button-module__switch___2bt5z:disabled {
-  color: var(--color-neutral-60);
-  border-color: var(--color-neutral);
-}
-
-.button-module__switch___2bt5z:hover {
-  color: var(--color-surface);
-  border-color: var(--color-info);
-  background: var(--color-info);
-}
-
-.button-module__switch___2bt5z:hover .button-module__icon___wuw4Z {
-  color: var(--color-surface);
-}
-
-.button-module__switch--active___1s4ZM {
-}
-
-.button-module__switch___2bt5z:disabled {
-  background: transparent;
-  color: var(--color-neutral-60);
-}
-
-.button-module__switch___2bt5z:disabled .button-module__icon___wuw4Z {
-  color: var(--color-neutral-60);
-}
-
-.button-module__switch___2bt5z:disabled,
-.button-module__switch--active___1s4ZM:disabled {
-  opacity: 1; /* exception for disabled switch button */
-  user-select: none;
-  cursor: default;
-}
-
-.button-module__switch--active___1s4ZM:disabled .button-module__icon___wuw4Z,
-.button-module__switch--active___1s4ZM .button-module__icon___wuw4Z {
-  color: var(--color-info);
-}
-
-.button-module__switch--active___1s4ZM:disabled {
-  color: var(--color-info);
-  border-color: var(--color-info);
-}
-
-/* Switch type squared */
-
-.button-module__switch-squared___QnrOG {
-  padding: 4.5px 15px 4.5px 40px;
-}
-
-.button-module__switch-squared--active___2ZbEC {
-}
-
-/* Switch type rounded */
-
-/* When the button has no text but icon */
-
-.button-module__switch-rounded___1CBs_ {
-  padding: 0;
-  border-width: 1px;
-  width: 36px;
-  height: 36px;
-  border-radius: 36px;
-}
-
-.button-module__switch-rounded--active___2Ckga {
-}
-
-.button-module__switch-rounded___1CBs_ .button-module__switch-label___2FAdy {
-  display: none;
-}
-
-/* States */
-
-.button-module__cancel___1-jYL:hover {
-  border-color: var(--color-primary);
-  color: var(--color-primary);
-}
-
-.button-module__confirm___-W92x:hover {
-  background: var(--color-primary-25);
-}
-
-.button-module__add___1fbPS:hover {
-  background: var(--color-primary);
-  border-color: var(--color-primary);
-  color: var(--color-surface);
-}
-
-/* Variations */
-
-.button-module__disabled___2Azpu {
-  pointer-events: none;
-  opacity: 0.5;
-}
-
-.button-module__full___264Zw {
-  width: 100%;
-}
-
-.button-module__alt___Z6PWx {
-  color: var(--color-surface);
-  border-radius: 20px;
-  border: 2px var(--color-surface) solid;
-  padding-left: 30px;
-  padding-right: 30px;
-}
-
-.button-module__confirm-alt___2Zcqz {
-  border-color: transparent;
-}
-
-.button-module__cancel-alt___u5EAw {
-  background: none;
-}
-
-.button-module__save-alt___6iHMF {
-  border-color: transparent;
-}
-
-/* Add Button */
-
-.button-module__add-button___1f093 {
-  min-height: 32px;
-}
-/* imported from file-input.module.css  */
-
-/** Button */
-
-.file-input-module__button___2KypN {
-  display: inline-flex;
-  background-color: var(--color-surface);
-  border: var(--border-for-button-as-secondary);
-  box-shadow: none;
-  border-radius: var(--border-radius-4);
-  color: var(--color-solid);
-  height: var(--height-for-button-as-big);
-  font-size: var(--font-size-20);
-  font-weight: var(--font-weight-500);
-  align-items: center;
-  transition: background-color var(--transition-linear-80ms);
-  padding: 0 var(--spacing-m);
-}
-
-.file-input-module__button___2KypN:hover,
-.file-input-module__button___2KypN:focus {
-  cursor: pointer;
-  background-color: var(--background-color-for-button-when-hovered);
-  box-shadow: none;
-}
-
-.file-input-module__button___2KypN:active {
-  box-shadow: var(--shadow-9);
-  background-color: var(--color-surface);
-}
-
-.file-input-module__input___3MP4D {
-  visibility: hidden;
-  width: 1px;
-  height: 1px;
-}
 /*  imported from search-input.module.css  */
 
 .search-input-module__block___1uM-y {
@@ -364,6 +125,12 @@
 .validated-input-module__container___3L2KB {
   display: inline;
 }
+/*  imported from label-range.module.css  */
+
+.label-range-module__label___3Tb0p {
+  font-size: 0.9rem;
+  font-weight: bold;
+}
 /*  imported from multi-value-search-input.module.css  */
 
 .multi-value-search-input-module__container___2u64d {
@@ -494,11 +261,244 @@
   border-bottom-left-radius: 0;
   margin-left: 0;
 }
-/*  imported from label-range.module.css  */
+/*  imported from button.module.css  */
 
-.label-range-module__label___3Tb0p {
-  font-size: 0.9rem;
-  font-weight: bold;
+/* Generic button */
+
+.button-module__button___1OzVf {
+  background: var(--color-neutral);
+  border: none;
+  border-radius: 6px;
+  color: var(--color-solid);
+  cursor: pointer;
+  display: inline-block;
+  font-family: 'Open Sans', sans-serif;
+  font-size: 1rem;
+  padding: 7px 15px;
+  transition: background-color var(--transition-linear-80ms);
+  vertical-align: middle;
+  min-height: 32px;
+}
+
+/* Specific types of buttons */
+
+.button-module__cancel___1-jYL {
+  background: var(--color-surface);
+  border: 1px solid var(--color-neutral);
+}
+
+.button-module__confirm___-W92x {
+  background: var(--color-primary);
+  color: var(--color-surface);
+}
+
+.button-module__save___1-KXp {
+  color: var(--color-surface) !important;
+}
+
+.button-module__add___1fbPS {
+  background: var(--color-surface);
+  border: 1px solid var(--color-neutral);
+  color: var(--color-solid);
+  padding: 5.5px 15px 5.5px 10px;
+}
+
+.button-module__add-url___1e6xE {
+}
+
+.button-module__icon-add___2X7fc {
+  color: var(--color-neutral-60);
+  float: left;
+  font-size: 1rem;
+  margin: 3px 10px 0 0;
+}
+
+.button-module__icon-chain___1pvWT {
+  color: var(--color-neutral-60);
+  float: left;
+  font-size: 1.4rem;
+  margin: 0 10px 0 0;
+}
+
+.button-module__add___1fbPS:hover .button-module__icon-add___2X7fc,
+.button-module__add-url___1e6xE:hover .button-module__icon-chain___1pvWT {
+  color: var(--color-surface);
+}
+
+/* Base of switch buttons */
+
+.button-module__switch___2bt5z {
+  background: var(--color-surface);
+  border: 1px var(--color-neutral) solid;
+  color: var(--color-solid);
+  font-weight: 100;
+  position: relative;
+}
+
+.button-module__switch___2bt5z .button-module__icon___wuw4Z {
+  color: var(--color-neutral-60);
+}
+
+.button-module__switch___2bt5z:disabled {
+  color: var(--color-neutral-60);
+  border-color: var(--color-neutral);
+}
+
+.button-module__switch___2bt5z:hover {
+  color: var(--color-surface);
+  border-color: var(--color-info);
+  background: var(--color-info);
+}
+
+.button-module__switch___2bt5z:hover .button-module__icon___wuw4Z {
+  color: var(--color-surface);
+}
+
+.button-module__switch--active___1s4ZM {
+}
+
+.button-module__switch___2bt5z:disabled {
+  background: transparent;
+  color: var(--color-neutral-60);
+}
+
+.button-module__switch___2bt5z:disabled .button-module__icon___wuw4Z {
+  color: var(--color-neutral-60);
+}
+
+.button-module__switch___2bt5z:disabled,
+.button-module__switch--active___1s4ZM:disabled {
+  opacity: 1; /* exception for disabled switch button */
+  user-select: none;
+  cursor: default;
+}
+
+.button-module__switch--active___1s4ZM:disabled .button-module__icon___wuw4Z,
+.button-module__switch--active___1s4ZM .button-module__icon___wuw4Z {
+  color: var(--color-info);
+}
+
+.button-module__switch--active___1s4ZM:disabled {
+  color: var(--color-info);
+  border-color: var(--color-info);
+}
+
+/* Switch type squared */
+
+.button-module__switch-squared___QnrOG {
+  padding: 4.5px 15px 4.5px 40px;
+}
+
+.button-module__switch-squared--active___2ZbEC {
+}
+
+/* Switch type rounded */
+
+/* When the button has no text but icon */
+
+.button-module__switch-rounded___1CBs_ {
+  padding: 0;
+  border-width: 1px;
+  width: 36px;
+  height: 36px;
+  border-radius: 36px;
+}
+
+.button-module__switch-rounded--active___2Ckga {
+}
+
+.button-module__switch-rounded___1CBs_ .button-module__switch-label___2FAdy {
+  display: none;
+}
+
+/* States */
+
+.button-module__cancel___1-jYL:hover {
+  border-color: var(--color-primary);
+  color: var(--color-primary);
+}
+
+.button-module__confirm___-W92x:hover {
+  background: var(--color-primary-25);
+}
+
+.button-module__add___1fbPS:hover {
+  background: var(--color-primary);
+  border-color: var(--color-primary);
+  color: var(--color-surface);
+}
+
+/* Variations */
+
+.button-module__disabled___2Azpu {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+.button-module__full___264Zw {
+  width: 100%;
+}
+
+.button-module__alt___Z6PWx {
+  color: var(--color-surface);
+  border-radius: 20px;
+  border: 2px var(--color-surface) solid;
+  padding-left: 30px;
+  padding-right: 30px;
+}
+
+.button-module__confirm-alt___2Zcqz {
+  border-color: transparent;
+}
+
+.button-module__cancel-alt___u5EAw {
+  background: none;
+}
+
+.button-module__save-alt___6iHMF {
+  border-color: transparent;
+}
+
+/* Add Button */
+
+.button-module__add-button___1f093 {
+  min-height: 32px;
+}
+/* imported from file-input.module.css  */
+
+/** Button */
+
+.file-input-module__button___2KypN {
+  display: inline-flex;
+  background-color: var(--color-surface);
+  border: var(--border-for-button-as-secondary);
+  box-shadow: none;
+  border-radius: var(--border-radius-4);
+  color: var(--color-solid);
+  height: var(--height-for-button-as-big);
+  font-size: var(--font-size-20);
+  font-weight: var(--font-weight-500);
+  align-items: center;
+  transition: background-color var(--transition-linear-80ms);
+  padding: 0 var(--spacing-m);
+}
+
+.file-input-module__button___2KypN:hover,
+.file-input-module__button___2KypN:focus {
+  cursor: pointer;
+  background-color: var(--background-color-for-button-when-hovered);
+  box-shadow: none;
+}
+
+.file-input-module__button___2KypN:active {
+  box-shadow: var(--shadow-9);
+  background-color: var(--color-surface);
+}
+
+.file-input-module__input___3MP4D {
+  visibility: hidden;
+  width: 1px;
+  height: 1px;
 }
 /*  imported from centered-loading-spinner.module.css  */
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commercetools-frontend/experimental-components",
-  "version": "5.1.0",
+  "version": "5.2.0",
   "description": "",
   "main": "dist/commercetools-frontend-experimental-components.cjs.js",
   "module": "dist/commercetools-frontend-experimental-components.esm.js",
@@ -13,14 +13,14 @@
     "@babel/core": "^7.21.0",
     "@babel/runtime-corejs3": "^7.21.0",
     "@babel/runtime": "^7.21.0",
-    "@commercetools-frontend/actions-global": "^22.4.0",
-    "@commercetools-frontend/application-components": "^22.4.0",
-    "@commercetools-frontend/application-shell-connectors": "^22.4.0",
-    "@commercetools-frontend/application-shell": "^22.4.0",
-    "@commercetools-frontend/constants": "^22.4.0",
-    "@commercetools-frontend/l10n": "^22.4.0",
-    "@commercetools-frontend/sdk": "^22.4.0",
-    "@commercetools-frontend/sentry": "^22.4.0",
+    "@commercetools-frontend/actions-global": "^22.5.0",
+    "@commercetools-frontend/application-components": "^22.5.0",
+    "@commercetools-frontend/application-shell-connectors": "^22.5.0",
+    "@commercetools-frontend/application-shell": "^22.5.0",
+    "@commercetools-frontend/constants": "^22.5.0",
+    "@commercetools-frontend/l10n": "^22.5.0",
+    "@commercetools-frontend/sdk": "^22.5.0",
+    "@commercetools-frontend/sentry": "^22.5.0",
     "@commercetools-frontend/ui-kit": "^16.5.0",
     "@commercetools-uikit/design-system": "^16.5.0",
     "@commercetools-uikit/select-utils": "^16.5.0",
@@ -50,7 +50,7 @@
   "devDependencies": {
     "@apollo/client": "^3.7.10",
     "@commercetools-test-data/channel": "^5.0.0",
-    "@commercetools-test-data/commons": "^4.11.1",
+    "@commercetools-test-data/commons": "^5.0.0",
     "@commercetools-test-data/core": "^4.11.1",
     "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/react": "^12.1.5",
@@ -68,8 +68,8 @@
     "redux": "^4.2.1",
     "typescript": "^5.1.3",
     "xhr-mock": "^2.5.1",
-    "@commercetools-local/test-data": "1.1.1",
-    "@commercetools-local/test-utils": "1.1.1"
+    "@commercetools-local/test-data": "1.1.2",
+    "@commercetools-local/test-utils": "1.1.2"
   },
   "peerDependencies": {
     "@apollo/client": "3.x",