@commercetools-frontend/experimental-components 1.0.0 → 2.0.0

package/dist/styles.css

@@ -13,27 +13,57 @@
   flex-grow: 1;
 }
 
-.search-input-module__input-container___mJnyZ {
+:where(html[data-theme='default']) .search-input-module__input-container___mJnyZ {
   height: var(--spacing-xl);
 }
+:where(html[data-theme='test']) .search-input-module__input-container___mJnyZ {
+  height: auto;
+}
+
+:where(html[data-theme='default']) .search-input-module__input-container___mJnyZ {
+  border-color: var(--color-neutral-60);
+}
+:where(html[data-theme='test']) .search-input-module__input-container___mJnyZ {
+  border-color: var(--border-color-for-input);
+}
 
 .search-input-module__input-container___mJnyZ > input {
   padding-right: calc(var(--spacing-xl) * 2);
-  border-color: var(--color-neutral-60);
 }
 
 .search-input-module__input-container-disabled___23jR8 > input {
   border-color: var(--color-neutral);
 }
 
-.search-input-module__input-container-hoverable___1xjqn > input:hover {
+:where(html[data-theme='default']) .search-input-module__input-container-hoverable___1xjqn > input:hover {
   border-color: var(--color-primary);
 }
+:where(html[data-theme='test']) .search-input-module__input-container-hoverable___1xjqn > input:hover {
+  border: var(--border-width-for-input) solid var(--border-color-for-input);
+  background-color: var(--background-color-for-input-when-hovered);
+}
+:where(html[data-theme='test']) .search-input-module__input-container-hoverable___1xjqn > input:focus {
+  box-shadow: var(--shadow-for-input-when-focused, inset 0 0 0 1px var(--color-primary));
+  border-color: var(--border-color-for-input-when-focused);
+}
+
+:where(html[data-theme='default']) .search-input-module__input-container-granular___33Pm- {
+  right: 6px;
+}
+:where(html[data-theme='test']) .search-input-module__input-container-granular___33Pm- {
+  right: 3px;
+}
 
 .search-input-module__input-container-granular___33Pm- {
   border-color: var(--color-primary);
   position: relative;
-  right: 6px;
+}
+
+:where(html[data-theme='default']) .search-input-module__search-icon-container___cbHQY {
+  top: 5px;
+}
+:where(html[data-theme='test']) .search-input-module__search-icon-container___cbHQY {
+  top: 8px;
 }
 
 .search-input-module__search-icon-container___cbHQY {
@@ -41,7 +71,6 @@
   border-color: transparent;
   position: absolute;
   right: 9px;
-  top: 5px;
 }
 
 .search-input-module__clear-icon-container___3RQvu {
@@ -73,77 +102,6 @@
   flex-shrink: 1;
   margin-left: var(--spacing-s);
 }
-/*  imported from modal-content-layout.module.css  */
-
-:root {
-  /* save toolbar */
-  --height-save-toolbar: 57px;
-
-  /* additional spacing at the bottom of view that has a save-toolbar */
-  --spacing-bottom-with-save-toolbar: calc(
-    var(--height-save-toolbar) + var(--spacing-m)
-  );
-}
-
-/* Modal */
-
-.modal-content-layout-module__container___m-8MJ {
-  padding: var(--spacing-m) var(--spacing-m) 0;
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-}
-
-.modal-content-layout-module__header___3s8J- {
-  position: relative;
-  border-bottom: 2px var(--color-neutral) solid;
-  padding-bottom: var(--spacing-m);
-  margin: 0;
-}
-
-.modal-content-layout-module__subtitle___W3B06 {
-  font-size: 1rem;
-  color: var(--color-solid);
-  margin-top: var(--spacing-s);
-  flex-grow: 1;
-}
-
-.modal-content-layout-module__content___UpG03 {
-  flex: 1;
-  overflow-y: auto;
-  padding: var(--spacing-m) 0;
-}
-
-/*
- * manually set the margin bottom of the last child in the container. We need
- * to do this in order to add some more space to the bottom of the scroll
- * container. Just using a padding-bottom in the .content-container does not
- * work in firefox unfortunately. It is a reported bug in FF that is not fixed.
- */
-.modal-content-layout-module__content___UpG03 > :last-child {
-  margin-bottom: var(--spacing-bottom-with-save-toolbar);
-}
-
-.modal-content-layout-module__footer___TCdQU {
-  padding: var(--spacing-m) 0;
-}
-
-.modal-content-layout-module__button-close___2ThEn {
-  float: right;
-  margin-top: calc(var(--spacing-xs) * -1);
-}
-
-.modal-content-layout-module__subheader___61dMZ {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.modal-content-layout-module__controls___2AEk5 {
-  position: absolute;
-  right: 0;
-  bottom: var(--spacing-s);
-}
 /*  imported from required-indicator.module.css  */
 
 .required-indicator-module__colored____YUFm {
@@ -181,11 +139,6 @@
 .validated-input-module__container___3L2KB {
   display: inline;
 }
-/*  imported from autocomplete.module.css  */
-
-.autocomplete-module__container___sBqGo {
-  position: relative;
-}
 /*  imported from label-range.module.css  */
 
 .label-range-module__label___3Tb0p {
@@ -539,12 +492,27 @@
   border-radius: var(--border-radius-6);
 }
 
+:where(html[data-theme='test']) .file-input-module__button___2KypN {
+  border: var(--border-for-button-as-secondary);
+  box-shadow: none;
+  border-radius: var(--border-radius-4);
+  height: var(--height-for-button-as-big);
+  font-size: 14px;
+  font-weight: 500;
+}
+
 .file-input-module__button___2KypN:hover,
 .file-input-module__button___2KypN:focus {
   cursor: pointer;
   box-shadow: var(--shadow-8);
 }
 
+:where(html[data-theme='test']) .file-input-module__button___2KypN:hover,
+:where(html[data-theme='test']) .file-input-module__button___2KypN:focus {
+  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);
@@ -554,15 +522,7 @@
   visibility: hidden;
   width: 1px;
   height: 1px;
-}
-/*  imported from dropdown-indicator.module.css  */
-
-.dropdown-indicator-module__dropdownIndicator___3bkJT {
-  display: flex;
-  align-items: center;
-  margin-left: var(--spacing-s);
-}
-/*  imported from centered-loading-spinner.module.css  */
+}/*  imported from centered-loading-spinner.module.css  */
 
 .centered-loading-spinner-module__loading-container___3_9-h {
   height: 100%;
@@ -625,313 +585,30 @@ html[data-theme='default'] {
 .custom-money-input-module__container___1fdO2 {
   width: 100%;
 }
-/*  imported from tooltip.module.css  */
-
-/* STRUCTURE */
-
-.tooltip-module__container___2R5k4 {
-  box-sizing: content-box;
-  max-height: 150px;
-  opacity: 1;
-  visibility: visible;
-  position: absolute;
-  margin-left: auto;
-  margin-right: auto;
-  cursor: default;
-  pointer-events: none;
-  z-index: 99;
-}
-
-.tooltip-module__box___1V72T {
-  position: relative;
-}
-
-.tooltip-module__body___1hJvc {
-  padding: 6px;
-  border-radius: 5px;
-  min-width: 100px;
-  background-color: var(--color-surface);
-  box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.12), 0 3px 3px 0 rgba(0, 0, 0, 0.24);
-  vertical-align: middle;
-  font-size: 0.857rem;
-}
-
-.tooltip-module__tooltip-body___2_NJI {
-  background: red;
-}
-
-/* STATES */
-
-.tooltip-module__container___2R5k4.tooltip-module__hide___21LcK {
-  opacity: 0.01;
-  visibility: hidden;
-}
-
-/* ARROW */
-
-.tooltip-module__arrow-top-border___3_L66 {
-  border-top: solid 6px transparent;
-}
-
-.tooltip-module__arrow-top-right-border___2yFxP {
-  border-top: solid 6px transparent;
-}
-
-.tooltip-module__arrow-bottom-border___2Grv6 {
-  border-bottom: solid 6px transparent;
-  transform: translateY(-6px);
-}
-
-.tooltip-module__arrow-left-border___27YP5 {
-  border-left: solid 6px transparent;
-}
-
-.tooltip-module__arrow-right-border___3TsGO {
-  border-right: solid 6px transparent;
-}
-
-/* ARROW POSITIONING */
-.tooltip-module__arrow-top___1TMUA,
-.tooltip-module__arrow-top-border___3_L66,
-.tooltip-module__arrow-shadow-top___3vxpn,
-.tooltip-module__arrow-bottom___1BM7o,
-.tooltip-module__arrow-bottom-border___2Grv6 {
-  box-sizing: border-box;
-  height: 6px;
-  width: 12px;
-  margin-left: 30px;
-  margin-right: auto;
-  border-left: solid 6px transparent;
-  border-right: solid 6px transparent;
-  position: absolute;
-}
-
-.tooltip-module__arrow-top-right___2P3cx,
-.tooltip-module__arrow-top-right-border___2yFxP,
-.tooltip-module__arrow-shadow-top-right___1Yj5N {
-  box-sizing: border-box;
-  height: 6px;
-  width: 12px;
-  right: 30px;
-  border-left: solid 6px transparent;
-  border-right: solid 6px transparent;
-  position: absolute;
-}
-
-.tooltip-module__arrow-left____OVQd,
-.tooltip-module__arrow-left-border___27YP5 {
-  width: 0;
-  height: 0;
-  border-style: solid;
-  border-width: 6px 0 6px 6px;
-  border-color: transparent transparent transparent var(--color-info);
-  position: absolute;
-  right: -5px;
-  top: calc(50% - 6px);
-}
-
-.tooltip-module__arrow-right___3WQ2_,
-.tooltip-module__arrow-right-border___3TsGO {
-  width: 0;
-  height: 0;
-  border-style: solid;
-  border-width: 6px 6px 6px 0;
-  border-color: transparent var(--color-info) transparent transparent;
-  position: absolute;
-  left: -6px;
-  top: calc(50% - 6px);
-}
-
-.tooltip-module__arrow-top___1TMUA {
-  border-top: solid 6px var(--color-info);
-  transform: translateY(-1.5px);
-}
-
-.tooltip-module__arrow-top-right___2P3cx {
-  border-top: solid 6px var(--color-info);
-  transform: translateY(-1.5px);
-}
-
-.tooltip-module__arrow-bottom___1BM7o {
-  border-bottom: solid 6px var(--color-primary);
-  transform: translateY(-6px);
-}
-
-.tooltip-module__arrow-left____OVQd {
-  border-left: solid 6px var(--color-info);
-  transform: translateX(-2px);
-}
-
-.tooltip-module__arrow-right___3WQ2_ {
-  border-right: solid 6px var(--color-info);
-  transform: translateX(2px);
-}
-
-/* ARROW SHADOW */
-
-.tooltip-module__arrow-shadow-top___3vxpn {
-  border-top: solid 6px rgba(176, 176, 176, 0.25);
-  transform: translate(2px, 2px);
-}
-
-.tooltip-module__arrow-shadow-top-right___1Yj5N {
-  border-top: solid 6px rgba(176, 176, 176, 0.25);
-  transform: translate(2px, 2px);
-}
-
-/* TOOLTIP TYPES */
-
-/* WARNING */
-
-.tooltip-module__container___2R5k4.tooltip-module__warning___1kbUk > .tooltip-module__body___1hJvc {
-  border: solid 1px var(--color-warning);
-  color: var(--color-solid);
-}
-
-.tooltip-module__container___2R5k4.tooltip-module__warning___1kbUk > .tooltip-module__arrow-top-border___3_L66,
-.tooltip-module__container___2R5k4.tooltip-module__warning___1kbUk > .tooltip-module__arrow-top-right-border___2yFxP {
-  border-top-color: var(--color-warning);
-}
-
-.tooltip-module__container___2R5k4.tooltip-module__warning___1kbUk > .tooltip-module__arrow-top___1TMUA,
-.tooltip-module__container___2R5k4.tooltip-module__warning___1kbUk > .tooltip-module__arrow-top-right___2P3cx {
-  border-top-color: var(--color-surface);
-}
-
-.tooltip-module__container___2R5k4.tooltip-module__warning___1kbUk > .tooltip-module__arrow-bottom___1BM7o {
-  border-bottom-color: var(--color-surface);
-}
-
-.tooltip-module__container___2R5k4.tooltip-module__warning___1kbUk > .tooltip-module__arrow-bottom-border___2Grv6 {
-  border-bottom-color: var(--color-warning);
-}
-
-.tooltip-module__container___2R5k4.tooltip-module__warning___1kbUk > .tooltip-module__arrow-left____OVQd {
-  border-left-color: var(--color-surface);
-}
-
-.tooltip-module__container___2R5k4.tooltip-module__warning___1kbUk > .tooltip-module__arrow-left-border___27YP5 {
-  border-left-color: var(--color-warning);
-}
-
-.tooltip-module__container___2R5k4.tooltip-module__warning___1kbUk > .tooltip-module__arrow-right___3WQ2_ {
-  border-right-color: var(--color-surface);
-}
-
-.tooltip-module__container___2R5k4.tooltip-module__warning___1kbUk > .tooltip-module__arrow-right-border___3TsGO {
-  border-right-color: var(--color-warning);
-}
-
-/* INFO */
-
-.tooltip-module__container___2R5k4.tooltip-module__info___1uBMc {
-  max-height: auto;
-  min-width: 100px;
-  white-space: nowrap;
-}
-
-.tooltip-module__container___2R5k4.tooltip-module__info___1uBMc > .tooltip-module__body___1hJvc {
-  background-color: var(--color-surface);
-  border: solid 1px var(--color-primary);
-  color: var(--color-accent);
-  padding: 12px;
-  min-width: 100px;
-}
-
-.tooltip-module__container___2R5k4.tooltip-module__info___1uBMc > .tooltip-module__arrow-left____OVQd {
-  border-left-color: var(--color-surface);
-}
-
-.tooltip-module__container___2R5k4.tooltip-module__info___1uBMc > .tooltip-module__arrow-left-border___27YP5 {
-  border-left-color: var(--color-primary);
-}
-
-.tooltip-module__container___2R5k4.tooltip-module__info___1uBMc > .tooltip-module__arrow-right___3WQ2_ {
-  border-right-color: var(--color-surface);
-}
-
-.tooltip-module__container___2R5k4.tooltip-module__info___1uBMc > .tooltip-module__arrow-right-border___3TsGO {
-  border-right-color: var(--color-primary);
-}
-
-.tooltip-module__container___2R5k4.tooltip-module__info___1uBMc > .tooltip-module__arrow-top___1TMUA,
-.tooltip-module__container___2R5k4.tooltip-module__info___1uBMc > .tooltip-module__arrow-top-right___2P3cx {
-  border-top-color: var(--color-surface);
-}
-
-.tooltip-module__container___2R5k4.tooltip-module__info___1uBMc > .tooltip-module__arrow-top-border___3_L66,
-.tooltip-module__container___2R5k4.tooltip-module__info___1uBMc > .tooltip-module__arrow-top-right-border___2yFxP {
-  border-top-color: var(--color-primary);
-}
-
-/* ERROR */
-
-.tooltip-module__container___2R5k4.tooltip-module__error___-Akny > .tooltip-module__body___1hJvc {
-  background-color: var(--color-warning-95);
-  border: solid 1px var(--color-error);
-  color: var(--color-solid);
-}
-
-.tooltip-module__container___2R5k4.tooltip-module__error___-Akny > .tooltip-module__arrow-top-border___3_L66,
-.tooltip-module__container___2R5k4.tooltip-module__error___-Akny > .tooltip-module__arrow-top-right-border___2yFxP {
-  border-top-color: var(--color-error);
-}
-
-.tooltip-module__container___2R5k4.tooltip-module__error___-Akny > .tooltip-module__arrow-top___1TMUA,
-.tooltip-module__container___2R5k4.tooltip-module__error___-Akny > .tooltip-module__arrow-top-right___2P3cx {
-  border-top-color: var(--color-warning-95);
-}
-
-.tooltip-module__container___2R5k4.tooltip-module__error___-Akny > .tooltip-module__arrow-bottom___1BM7o {
-  border-bottom-color: var(--color-warning-95);
-}
-
-.tooltip-module__container___2R5k4.tooltip-module__error___-Akny > .tooltip-module__arrow-bottom-border___2Grv6 {
-  border-bottom-color: var(--color-error);
-}
-
-/* POSITIONS */
-
-.tooltip-module__container-top___2MQTV {
-  transform: translateY(-100%) translateY(-3px);
-}
-
-.tooltip-module__container-top-right___iR0io {
-  transform: translate(0, calc(-100% - 10px));
-  right: 0;
-}
-
-.tooltip-module__container-bottom___1wDKk {
-  top: calc(100% + 10px);
-}
-
-.tooltip-module__container-left___YePF0 {
-  transform: translateX(-100%) translateX(-10px) translateY(-6px);
-}
-/*  imported from button-close.module.css  */
-
-.button-close-module__button-close-container___1uz2S {
-  cursor: pointer;
-}
 /*  imported from set-buttons.module.css  */
 
 .set-buttons-module__topAlign___3AZwc {
   padding-top: var(--spacing-xs);
 }
 
-.set-buttons-module__gap___38Qr0 {
+
+:where(html[data-theme='default']) .set-buttons-module__gap___38Qr0 {
   padding: 12px;
 }
-/*  imported from platform-limits-customers-status.module.css  */
 
-.platform-limits-customers-status-module__status___3rXYM {
-  min-width: max-content;
+:where(html[data-theme='test']) .set-buttons-module__gap___38Qr0 {
+  padding: 20px;
 }
 /*  imported from platform-limits-customers-combined.module.css  */
 
 .platform-limits-customers-combined-module__combined___OszDd {
   margin-bottom: var(--spacing-s);
 }
+/*  imported from platform-limits-customers-status.module.css  */
+
+.platform-limits-customers-status-module__status___3rXYM {
+  min-width: max-content;
+}
 /*  imported from platform-limits-customer-groups-status.module.css  */
 
 .platform-limits-customer-groups-status-module__status___6099G {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commercetools-frontend/experimental-components",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -15,18 +15,18 @@
   "dependencies": {
     "@babel/runtime": "^7.19.0",
     "@babel/runtime-corejs3": "^7.19.0",
-    "@commercetools-frontend/actions-global": "21.23.4",
-    "@commercetools-frontend/application-components": "21.23.4",
-    "@commercetools-frontend/application-shell": "21.23.4",
-    "@commercetools-frontend/application-shell-connectors": "21.23.4",
-    "@commercetools-frontend/constants": "21.23.4",
-    "@commercetools-frontend/l10n": "21.23.4",
-    "@commercetools-frontend/sdk": "21.23.4",
-    "@commercetools-frontend/sentry": "21.23.4",
-    "@commercetools-frontend/ui-kit": "15.11.1",
-    "@commercetools-uikit/design-system": "15.11.1",
-    "@commercetools-uikit/select-utils": "15.11.1",
-    "@commercetools-uikit/utils": "15.11.1",
+    "@commercetools-frontend/actions-global": "21.23.7",
+    "@commercetools-frontend/application-components": "21.23.7",
+    "@commercetools-frontend/application-shell": "21.23.7",
+    "@commercetools-frontend/application-shell-connectors": "21.23.7",
+    "@commercetools-frontend/constants": "21.23.7",
+    "@commercetools-frontend/l10n": "21.23.7",
+    "@commercetools-frontend/sdk": "21.23.7",
+    "@commercetools-frontend/sentry": "21.23.7",
+    "@commercetools-frontend/ui-kit": "15.12.0",
+    "@commercetools-uikit/design-system": "15.12.0",
+    "@commercetools-uikit/select-utils": "15.12.0",
+    "@commercetools-uikit/utils": "15.12.0",
     "@emotion/react": "11.10.5",
     "classnames": "2.3.2",
     "cleave.js": "1.5.10",
@@ -72,12 +72,12 @@
     "uuid": "8.3.2"
   },
   "devDependencies": {
-    "@apollo/client": "3.7.5",
+    "@apollo/client": "3.7.7",
     "@commercetools-local/test-data": "workspace:*",
     "@commercetools-local/test-utils": "workspace:*",
-    "@commercetools-test-data/channel": "4.4.0",
-    "@commercetools-test-data/commons": "4.4.0",
-    "@commercetools-test-data/core": "4.4.0",
+    "@commercetools-test-data/channel": "4.9.0",
+    "@commercetools-test-data/commons": "4.9.0",
+    "@commercetools-test-data/core": "4.9.0",
     "@testing-library/react": "12.1.5",
     "@testing-library/react-hooks": "8.0.1",
     "enzyme": "3.11.0",