@axinom/mosaic-ui 0.34.0-rc.20 → 0.34.0-rc.22

package/dist/initialize.d.ts

@@ -1,5 +1,5 @@
 import { AddIndicator, CustomEventEmitter, RemoveIndicator, ShowNotification } from './types/ui-config';
-export declare enum IndicatorType {
+export declare enum SaveIndicatorType {
     Saving = "saving",
     Inactive = "inactive",
     Dirty = "dirty"
@@ -8,7 +8,7 @@ export declare let showNotification: ShowNotification | (() => void);
 export declare let addIndicator: AddIndicator | (() => void);
 export declare let removeIndicator: RemoveIndicator | (() => void);
 export declare let on: CustomEventEmitter['on'] | (() => void);
-export declare let setSaveIndicator: (type: IndicatorType) => void;
+export declare let setSaveIndicator: (type: SaveIndicatorType) => void;
 /**
  * Passes the PiralApi methods to the UI library.
  * @param app {UiConfig} object containing PiralApi methods for use in UI library.
@@ -19,6 +19,6 @@ export interface UiConfig {
     addIndicator: AddIndicator;
     removeIndicator: RemoveIndicator;
     on: CustomEventEmitter['on'];
-    setSaveIndicator: (type: IndicatorType) => void;
+    setSaveIndicator: (type: SaveIndicatorType) => void;
 }
 //# sourceMappingURL=initialize.d.ts.map

package/dist/initialize.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"initialize.d.ts","sourceRoot":"","sources":["../src/initialize.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,YAAY,EACZ,kBAAkB,EAClB,eAAe,EACf,gBAAgB,EACjB,MAAM,mBAAmB,CAAC;AAE3B,oBAAY,aAAa;IACvB,MAAM,WAAW;IACjB,QAAQ,aAAa;IACrB,KAAK,UAAU;CAChB;AAED,eAAO,IAAI,gBAAgB,EAAE,gBAAgB,GAAG,CAAC,MAAM,IAAI,CAC7B,CAAC;AAE/B,eAAO,IAAI,YAAY,EAAE,YAAY,GAAG,CAAC,MAAM,IAAI,CAA4B,CAAC;AAEhF,eAAO,IAAI,eAAe,EAAE,eAAe,GAAG,CAAC,MAAM,IAAI,CAC5B,CAAC;AAE9B,eAAO,IAAI,EAAE,EAAE,kBAAkB,CAAC,IAAI,CAAC,GAAG,CAAC,MAAM,IAAI,CAAkB,CAAC;AAExE,eAAO,IAAI,gBAAgB,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,IACvB,CAAC;AAEhC;;;GAGG;AACH,wBAAgB,YAAY,CAAC,GAAG,EAAE,QAAQ,GAAG,IAAI,CAQhD;AAED,MAAM,WAAW,QAAQ;IACvB,gBAAgB,EAAE,gBAAgB,CAAC;IACnC,YAAY,EAAE,YAAY,CAAC;IAC3B,eAAe,EAAE,eAAe,CAAC;IACjC,EAAE,EAAE,kBAAkB,CAAC,IAAI,CAAC,CAAC;IAC7B,gBAAgB,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,IAAI,CAAC;CACjD"}
+{"version":3,"file":"initialize.d.ts","sourceRoot":"","sources":["../src/initialize.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,YAAY,EACZ,kBAAkB,EAClB,eAAe,EACf,gBAAgB,EACjB,MAAM,mBAAmB,CAAC;AAE3B,oBAAY,iBAAiB;IAC3B,MAAM,WAAW;IACjB,QAAQ,aAAa;IACrB,KAAK,UAAU;CAChB;AAED,eAAO,IAAI,gBAAgB,EAAE,gBAAgB,GAAG,CAAC,MAAM,IAAI,CAC7B,CAAC;AAE/B,eAAO,IAAI,YAAY,EAAE,YAAY,GAAG,CAAC,MAAM,IAAI,CAA4B,CAAC;AAEhF,eAAO,IAAI,eAAe,EAAE,eAAe,GAAG,CAAC,MAAM,IAAI,CAC5B,CAAC;AAE9B,eAAO,IAAI,EAAE,EAAE,kBAAkB,CAAC,IAAI,CAAC,GAAG,CAAC,MAAM,IAAI,CAAkB,CAAC;AAExE,eAAO,IAAI,gBAAgB,EAAE,CAAC,IAAI,EAAE,iBAAiB,KAAK,IAC5B,CAAC;AAE/B;;;GAGG;AACH,wBAAgB,YAAY,CAAC,GAAG,EAAE,QAAQ,GAAG,IAAI,CAQhD;AAED,MAAM,WAAW,QAAQ;IACvB,gBAAgB,EAAE,gBAAgB,CAAC;IACnC,YAAY,EAAE,YAAY,CAAC;IAC3B,eAAe,EAAE,eAAe,CAAC;IACjC,EAAE,EAAE,kBAAkB,CAAC,IAAI,CAAC,CAAC;IAC7B,gBAAgB,EAAE,CAAC,IAAI,EAAE,iBAAiB,KAAK,IAAI,CAAC;CACrD"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axinom/mosaic-ui",
-  "version": "0.34.0-rc.20",
+  "version": "0.34.0-rc.22",
   "description": "UI components for building Axinom Mosaic applications",
   "author": "Axinom",
   "license": "PROPRIETARY",
@@ -32,7 +32,7 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
-    "@axinom/mosaic-core": "^0.4.7-rc.20",
+    "@axinom/mosaic-core": "^0.4.7-rc.22",
     "@faker-js/faker": "^7.4.0",
     "@popperjs/core": "^2.9.2",
     "clsx": "^1.1.0",
@@ -102,5 +102,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b30d7766270cea62f599dccb914e69d185403755"
+  "gitHead": "7528c5c18d3ae99249a3eca2edf18b0143c5ef0f"
 }

package/src/components/FormElements/CustomTags/CustomTags.scss

@@ -127,7 +127,10 @@
           stroke: white;
         }
 
-        background-color: $blue;
+        background-color: var(
+          --tag-plus-button-bg-color,
+          $tag-plus-button-bg-color
+        );
         position: absolute;
         right: 1px;
         top: 1px;
@@ -146,8 +149,16 @@
 
         &:enabled {
           &:hover {
-            border: 1px solid $blue;
-            box-shadow: 0 0 0 2px $blue;
+            border: 1px solid
+              var(
+                --tag-plus-button-hover-stroke-color,
+                $tag-plus-button-hover-stroke-color
+              );
+            box-shadow: 0 0 0 2px
+              var(
+                --tag-plus-button-hover-stroke-color,
+                $tag-plus-button-hover-stroke-color
+              );
 
             &.hasError {
               border: 1px solid
@@ -164,7 +175,7 @@
 
 .customTagEnter {
   opacity: 0;
-  background-color: rgba($blue, 0.25) !important;
+  background-color: var(--tag-enter-color, $tag-enter-color) !important;
 }
 
 .customTagEnterActive {

package/src/components/FormElements/Tags/Tags.scss

@@ -119,7 +119,7 @@
 
 .tagEnter {
   opacity: 0;
-  background-color: rgba($blue, 0.25) !important;
+  background-color: var(--tag-enter-color, $tag-enter-color) !important;
 }
 
 .tagEnterActive {

package/src/components/FormElements/ToggleButton/ToggleButton.scss

@@ -18,7 +18,8 @@
 
     &:hover:enabled {
       transition: box-shadow 0.15s ease-in-out 0s;
-      box-shadow: 0 0 0 2px $blue;
+      box-shadow: 0 0 0 2px
+        var(--toggle-button-stroke-color, $toggle-button-stroke-color);
     }
 
     div {
@@ -44,25 +45,35 @@
         }
       }
       &.off {
-        border-top: 1px solid $blue;
-        border-bottom: 1px solid $blue;
-        border-left: 1px solid $blue;
+        border-top: 1px solid
+          var(--toggle-button-stroke-color, $toggle-button-stroke-color);
+        border-bottom: 1px solid
+          var(--toggle-button-stroke-color, $toggle-button-stroke-color);
+        border-left: 1px solid
+          var(--toggle-button-stroke-color, $toggle-button-stroke-color);
       }
       &.on {
-        border: 1px solid $blue;
+        border: 1px solid
+          var(--toggle-button-stroke-color, $toggle-button-stroke-color);
       }
     }
 
     div.active.off {
       svg {
         .svgText {
-          fill: $blue;
+          fill: var(
+            --toggle-button-off-text-color,
+            $toggle-button-off-text-color
+          );
         }
       }
     }
 
     div.active.on {
-      background-color: $blue !important;
+      background-color: var(
+        --toggle-button-on-bg-color,
+        $toggle-button-on-bg-color
+      ) !important;
     }
 
     &:disabled {

package/src/components/FormStation/FormStation.spec.tsx

@@ -5,7 +5,7 @@ import { act } from 'react-dom/test-utils';
 import { MemoryRouter, Route } from 'react-router-dom';
 import * as Yup from 'yup';
 import { noop } from '../../helpers/utils';
-import { IndicatorType, setSaveIndicator } from '../../initialize';
+import { SaveIndicatorType, setSaveIndicator } from '../../initialize';
 import { ActionData, Actions } from '../Actions';
 import { Action } from '../Actions/Action';
 import { MessageBar } from '../MessageBar/MessageBar';
@@ -677,9 +677,12 @@ describe('Details', () => {
       );
       expect(setSaveIndicator).toHaveBeenNthCalledWith(
         1,
-        IndicatorType.Inactive,
-      ); // 1. inactive 2. dirty
-      expect(setSaveIndicator).toHaveBeenNthCalledWith(3, IndicatorType.Dirty); // 1. inactive 2. dirty
+        SaveIndicatorType.Inactive,
+      ); // 1. inactive
+      expect(setSaveIndicator).toHaveBeenNthCalledWith(
+        3,
+        SaveIndicatorType.Dirty,
+      ); // 3. dirty
 
       // submit form
       const actionSelected = wrapper
@@ -697,7 +700,10 @@ describe('Details', () => {
 
       wrapper.update();
 
-      expect(setSaveIndicator).toHaveBeenNthCalledWith(4, IndicatorType.Saving);
+      expect(setSaveIndicator).toHaveBeenNthCalledWith(
+        4,
+        SaveIndicatorType.Saving,
+      );
 
       // complete form submission
       await act(async () => {
@@ -707,7 +713,7 @@ describe('Details', () => {
 
       expect(setSaveIndicator).toHaveBeenNthCalledWith(
         5,
-        IndicatorType.Inactive,
+        SaveIndicatorType.Inactive,
       );
 
       console.warn((setSaveIndicator as jest.Mock).mock.calls);

package/src/components/FormStation/FormStation.tsx

@@ -16,7 +16,7 @@ import React, {
 } from 'react';
 import { useHistory } from 'react-router-dom';
 import { OptionalObjectSchema } from 'yup/lib/object';
-import { IndicatorType, setSaveIndicator } from '../../initialize';
+import { SaveIndicatorType, setSaveIndicator } from '../../initialize';
 import { Data } from '../../types/data';
 import { ErrorTypeToStationError } from '../../utils/ErrorTypeToStationError';
 import { Actions, ActionsProps } from '../Actions';
@@ -155,7 +155,7 @@ export const FormStation = <TValues extends Data, TSubmitResponse = unknown>({
 
       try {
         setIsFormSubmitting(true);
-        setSaveIndicator(IndicatorType.Saving);
+        setSaveIndicator(SaveIndicatorType.Saving);
         setStationError(undefined);
         if (!initialData.loading && saveData) {
           const response = await saveData(values, initialData, formikHelpers);
@@ -171,7 +171,7 @@ export const FormStation = <TValues extends Data, TSubmitResponse = unknown>({
           ),
         );
 
-        setSaveIndicator(IndicatorType.Dirty);
+        setSaveIndicator(SaveIndicatorType.Dirty);
 
         // We still throw the error, to make sure that navigation or action execution
         // will not continue after a failed save.
@@ -449,15 +449,15 @@ const FormStationHeader: React.FC<
   useEffect(() => {
     // Set the save indicator to dirty depending on the form state
     if (dirty) {
-      setSaveIndicator(IndicatorType.Dirty);
+      setSaveIndicator(SaveIndicatorType.Dirty);
     } else {
-      setSaveIndicator(IndicatorType.Inactive);
+      setSaveIndicator(SaveIndicatorType.Inactive);
     }
     return () => {
       // The form is not always considered "not dirty" after the save
       // so this code will make sure that the indicator is set to inactive
       // when the station is left.
-      setSaveIndicator(IndicatorType.Inactive);
+      setSaveIndicator(SaveIndicatorType.Inactive);
     };
   }, [dirty]);
 

package/src/components/InlineMenu/InlineMenu.scss

@@ -85,10 +85,16 @@ $pop-up-arrow-extrusion: -7px;
 .buttonDefault {
   background-color: transparent !important;
   svg * {
-    stroke: $blue !important;
+    stroke: var(
+      --inline-menu-button-stroke-color,
+      $inline-menu-button-stroke-color
+    ) !important;
   }
   &:hover {
-    background-color: $blue !important;
+    background-color: var(
+      --inline-menu-button-hover-bg-color,
+      $inline-menu-button-hover-bg-color
+    ) !important;
     svg * {
       stroke: white !important;
     }
@@ -98,10 +104,16 @@ $pop-up-arrow-extrusion: -7px;
 .buttonDefaultOpacity {
   background-color: rgba(white, 0.7) !important;
   svg * {
-    stroke: $blue !important;
+    stroke: var(
+      --inline-menu-button-stroke-color,
+      $inline-menu-button-stroke-color
+    ) !important;
   }
   &:hover {
-    background-color: $blue !important;
+    background-color: var(
+      --inline-menu-button-hover-bg-color,
+      $inline-menu-button-hover-bg-color
+    ) !important;
     svg * {
       stroke: white !important;
     }
@@ -109,7 +121,10 @@ $pop-up-arrow-extrusion: -7px;
 }
 
 .buttonSelected {
-  background-color: $blue !important;
+  background-color: var(
+    --inline-menu-button-selected-bg-color,
+    $inline-menu-button-selected-bg-color
+  ) !important;
   svg * {
     stroke: white !important;
   }

package/src/initialize.ts

@@ -5,7 +5,7 @@ import {
   ShowNotification,
 } from './types/ui-config';
 
-export enum IndicatorType {
+export enum SaveIndicatorType {
   Saving = 'saving',
   Inactive = 'inactive',
   Dirty = 'dirty',
@@ -21,8 +21,8 @@ export let removeIndicator: RemoveIndicator | (() => void) =
 
 export let on: CustomEventEmitter['on'] | (() => void) = polyfill('on');
 
-export let setSaveIndicator: (type: IndicatorType) => void =
-  polyfill('showSaveIndicator');
+export let setSaveIndicator: (type: SaveIndicatorType) => void =
+  polyfill('setSaveIndicator');
 
 /**
  * Passes the PiralApi methods to the UI library.
@@ -43,7 +43,7 @@ export interface UiConfig {
   addIndicator: AddIndicator;
   removeIndicator: RemoveIndicator;
   on: CustomEventEmitter['on'];
-  setSaveIndicator: (type: IndicatorType) => void;
+  setSaveIndicator: (type: SaveIndicatorType) => void;
 }
 
 function polyfill(methodName: string): () => void {

package/src/styles/variables.scss

@@ -183,6 +183,9 @@ $tag-border-color-2: $blue;
 $tag-icon-color: $blue;
 $tag-font-color: $dark-gray;
 $tag-background-color: $light-gray-2;
+$tag-enter-color: rgba($blue, 0.25);
+$tag-plus-button-bg-color: $blue;
+$tag-plus-button-hover-stroke-color: $blue;
 $form-error-color: $red;
 $select-arrow-color: $blue;
 $select-disabled-arrow-color: $gray;
@@ -201,6 +204,14 @@ $select-background-color: white;
 $form-indicator-color: $green;
 $radio-hover-stroke-color: $blue;
 $radio-checked-fill-color: $blue;
+$toggle-button-stroke-color: $blue;
+$toggle-button-off-text-color: $blue;
+$toggle-button-on-bg-color: $blue;
+
+/* Inline Menu */
+$inline-menu-button-stroke-color: $blue;
+$inline-menu-button-hover-bg-color: $blue;
+$inline-menu-button-selected-bg-color: $blue;
 
 /* Date Time Picker*/
 $calendar-tile-active: $blue;