@axinom/mosaic-ui 0.34.0-rc.9 → 0.34.0

package/src/components/FormElements/SingleLineText/SingleLineText.spec.tsx

@@ -24,18 +24,20 @@ describe('SingleLineText', () => {
     const spy = jest.fn();
     const mockValue = 'test-value';
     const mockValueUpdated = 'updated-test-value';
-    const wrapper = shallow(
+    const wrapper = mount(
       <SingleLineText name={'test-name'} value={mockValue} onChange={spy} />,
     );
 
     const input = wrapper.find('input');
 
-    expect(input.prop('value')).toEqual(mockValue);
+    expect(input.getDOMNode<HTMLInputElement>().value).toEqual(mockValue);
 
     input.simulate('change', { target: { value: mockValueUpdated } });
 
     expect(spy).toHaveBeenCalledTimes(1);
-    expect(spy).toHaveBeenCalledWith({ target: { value: mockValueUpdated } });
+    expect(spy).toHaveBeenCalledWith(
+      expect.objectContaining({ target: { value: mockValueUpdated } }),
+    );
   });
 
   it('uses optional props when passed in', () => {
@@ -48,7 +50,6 @@ describe('SingleLineText', () => {
       name: 'test-name',
       placeholder: 'test-placeholder',
       type: 'number',
-      value: '',
     } as Record<string, unknown>;
 
     const wrapper = shallow(

package/src/components/FormElements/SingleLineText/SingleLineText.tsx

@@ -57,6 +57,12 @@ export const SingleLineText: React.FC<SingleLineTextProps> = ({
   const DUMMY_PWD = '0000000000';
   const isPasswordField = type === 'password' ? true : false;
 
+  useEffect(() => {
+    if (innerRef.current) {
+      innerRef.current.value = String(value || '');
+    }
+  }, [innerRef, value]);
+
   useEffect(() => {
     if (isPasswordField && isSet) {
       executeIfRefAvailable(innerRef, (input) => {
@@ -99,7 +105,6 @@ export const SingleLineText: React.FC<SingleLineTextProps> = ({
         name={name}
         type={type}
         ref={innerRef}
-        value={value ?? ''}
         defaultValue={defaultValue}
         disabled={disabled}
         placeholder={disabled ? undefined : placeholder}

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/components/LandingPageTiles/TileLarge/TileLarge.scss

@@ -4,12 +4,13 @@
   height: 100%;
   display: grid;
   grid-template-columns: 1fr;
-  grid-template-rows: 2fr 1fr;
+  grid-template-rows: 130px 1fr;
   grid-column: span 4;
   grid-row: span 2;
   place-items: center;
 
   text-decoration: none;
+  overflow: hidden;
 
   color: var(--landingpage-largetile-color, $landingpage-largetile-color);
   background-color: var(
@@ -41,25 +42,29 @@
         $landingpage-largetile-stroke-color
       );
     }
+
+    > * {
+      width: 100%;
+      height: 100%;
+    }
   }
 
   .titlesSection {
     display: grid;
-    grid-template-columns: 1fr;
-    grid-template-rows: 1fr 1fr;
+    padding: 0 15px 15px 15px;
     place-items: center;
     align-self: stretch;
 
     text-align: center;
 
     .label {
-      font-size: 26px;
-      font-weight: regular;
+      font-size: 23px;
+      overflow: hidden;
     }
 
     .subtitle {
       font-size: 16px;
-      margin-bottom: 30px;
+      align-self: end;
     }
   }
 }

package/src/components/List/ListRow/ListRow.scss

@@ -50,8 +50,11 @@
     margin-left: auto;
   }
 
-  .link {
+  .content {
     display: contents;
+  }
+
+  .link {
     color: inherit;
     text-decoration: none;
   }

package/src/components/List/ListRow/ListRow.spec.tsx

@@ -229,7 +229,7 @@ describe('ListRow', () => {
   it('calls the "onItemClicked" event with data', () => {
     const spy = jest.fn();
     const wrapper = shallow(<ListRow {...mockProps} onItemClicked={spy} />);
-    wrapper.simulate('click');
+    wrapper.find('.content').simulate('click');
     expect(spy).toHaveBeenCalledTimes(1);
     expect(spy).toHaveBeenCalledWith(mockExplorerData);
   });
@@ -258,9 +258,14 @@ describe('ListRow', () => {
   });
 
   it('raises checkBoxHandler', () => {
-    const spy = jest.fn();
+    const spy = jest.fn().mockImplementation(() => null);
     const wrapper = mount(
-      <ListRow {...mockProps} onItemSelected={spy} showItemCheckbox={true} />,
+      <ListRow
+        {...mockProps}
+        onItemSelected={spy}
+        showItemCheckbox={true}
+        selectionMode={ListSelectMode.Multi}
+      />,
     );
 
     const chk = wrapper.find(ListCheckBox);
@@ -366,7 +371,7 @@ describe('ListRow', () => {
         />,
       );
 
-      const row = wrapper.find('.columnsRoot');
+      const row = wrapper.find('.content');
 
       row.simulate('click');
 
@@ -388,7 +393,7 @@ describe('ListRow', () => {
         />,
       );
 
-      const row = wrapper.find('.columnsRoot');
+      const row = wrapper.find('.content');
 
       row.simulate('click');
 
@@ -411,7 +416,7 @@ describe('ListRow', () => {
         />,
       );
 
-      const row = wrapper.find('.columnsRoot');
+      const row = wrapper.find('.content');
 
       row.simulate('click');
 

package/src/components/List/ListRow/ListRow.tsx

@@ -230,32 +230,37 @@ export const ListRow = <T extends Data>({
         [classes.disabled]: isRowDisabled,
       })}
       style={customRootStyles}
-      onClick={() => {
-        onItemClickedHandler(data);
-      }}
       ref={isTrigger ? elementRef : null}
       data-test-id="list-entry"
     >
       {/* Items */}
       {isLinkable ? (
-        <Link to={onItemClicked as string} className={classes.link}>
+        <Link
+          to={onItemClicked as string}
+          className={clsx(classes.content, classes.link)}
+        >
           {generateCells}
         </Link>
       ) : (
-        <>{generateCells}</>
+        <div
+          className={classes.content}
+          onClick={() => onItemClickedHandler(data)}
+        >
+          {generateCells}
+        </div>
       )}
-      {(inlineMenuActions || showActionButton) &&
-        selectionMode === ListSelectMode.None && (
-          <div className={classes.actions}>
-            {inlineActionMenuData && inlineActionMenuData.length > 0 && (
-              <InlineMenu
-                actions={inlineActionMenuData}
-                showArrow={false}
-                placement="bottom-end"
-                onButtonClicked={(e) => e.stopPropagation()}
-              />
-            )}
-
+      <div className={classes.actions}>
+        {inlineMenuActions &&
+          inlineActionMenuData &&
+          inlineActionMenuData.length > 0 && (
+            <InlineMenu
+              actions={inlineActionMenuData}
+              showArrow={false}
+              placement="bottom-end"
+            />
+          )}
+        {showActionButton && selectionMode === ListSelectMode.None && (
+          <>
             {showActionButton &&
               (typeof onItemClicked !== 'function' ? (
                 <Button
@@ -273,27 +278,29 @@ export const ListRow = <T extends Data>({
                   dataTestId="list-entry-action"
                 />
               ))}
-          </div>
+          </>
         )}
 
-      {showCheckMark && (
-        <Button
-          icon={IconName.Checkmark}
-          height={actionSize}
-          width={actionSize}
-          dataTestId="list-entry-select-button"
-          className={clsx(classes.selectionCheckMark)}
-        />
-      )}
-      {showItemCheckbox && (
-        <ListCheckBox
-          height={actionSize}
-          width={actionSize}
-          onCheckBoxToggled={onItemSelected}
-          isChecked={itemSelected}
-          isDisabled={isRowDisabled}
-        />
-      )}
+        {showCheckMark && (
+          <Button
+            icon={IconName.Checkmark}
+            height={actionSize}
+            width={actionSize}
+            dataTestId="list-entry-select-button"
+            className={classes.selectionCheckMark}
+            onButtonClicked={() => onItemClickedHandler(data)}
+          />
+        )}
+        {showItemCheckbox && (
+          <ListCheckBox
+            height={actionSize}
+            width={actionSize}
+            onCheckBoxToggled={() => onItemClickedHandler(data)}
+            isChecked={itemSelected}
+            isDisabled={isRowDisabled}
+          />
+        )}
+      </div>
     </div>
   );
 

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;