@axinom/mosaic-ui 0.32.0 → 0.33.0-rc.0

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

@@ -5,6 +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 { hideSaveIndicator, showSaveIndicator } from '../../initialize';
 import { ActionData, Actions } from '../Actions';
 import { Action } from '../Actions/Action';
 import { MessageBar } from '../MessageBar/MessageBar';
@@ -12,6 +13,8 @@ import { PageHeader, PageHeaderAction } from '../PageHeader';
 import { FormStation, ObjectSchemaDefinition } from './FormStation';
 import { SaveOnNavigate } from './SaveOnNavigate/SaveOnNavigate';
 
+jest.mock('../../initialize');
+
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
 
 const mockActions = (onActionSelected: jest.Mock): ActionData[] => [
@@ -41,6 +44,10 @@ const MakeDirty: React.FC = () => {
 };
 
 describe('Details', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
   it('renders the component without crashing', () => {
     const wrapper = shallow(<FormStation {...defaultProps} />);
 
@@ -102,7 +109,7 @@ describe('Details', () => {
           .find(Action)
           .prop('action').onActionSelected;
         await act(async () => {
-          actionSelected();
+          actionSelected && actionSelected();
         });
 
         expect(spy).toHaveBeenCalledTimes(1);
@@ -148,7 +155,7 @@ describe('Details', () => {
           .find(Action)
           .prop('action').onActionSelected;
         await act(async () => {
-          actionSelected();
+          actionSelected && actionSelected();
         });
 
         expect(spy).not.toHaveBeenCalled();
@@ -176,7 +183,7 @@ describe('Details', () => {
           .find(Action)
           .prop('action').onActionSelected;
         await act(async () => {
-          actionSelected();
+          actionSelected && actionSelected();
         });
 
         expect(spy).not.toHaveBeenCalled();
@@ -201,7 +208,7 @@ describe('Details', () => {
           .find(Action)
           .prop('action').onActionSelected;
         await act(async () => {
-          actionSelected();
+          actionSelected && actionSelected();
         });
 
         expect(saveSpy).not.toHaveBeenCalled();
@@ -421,7 +428,7 @@ describe('Details', () => {
         .find(Action)
         .prop('action').onActionSelected;
       await act(async () => {
-        actionSelected();
+        actionSelected && actionSelected();
       });
 
       wrapper.update();
@@ -473,7 +480,7 @@ describe('Details', () => {
         .find(Action)
         .prop('action').onActionSelected;
       await act(async () => {
-        actionSelected();
+        actionSelected && actionSelected();
       });
 
       wrapper.update();
@@ -534,7 +541,7 @@ describe('Details', () => {
         .find(Action)
         .prop('action').onActionSelected;
       await act(async () => {
-        actionSelected();
+        actionSelected && actionSelected();
       });
 
       // place form into 'submitting' state
@@ -611,7 +618,7 @@ describe('Details', () => {
         .find(Action)
         .prop('action').onActionSelected;
       await act(async () => {
-        actionSelected();
+        actionSelected && actionSelected();
       });
 
       // place form into 'submitting' state
@@ -644,5 +651,56 @@ describe('Details', () => {
       isDisabled = action.prop('action').isDisabled;
       expect(isDisabled).toBe(false);
     });
+
+    it('sets the global busy state when submitting', async () => {
+      jest.useFakeTimers();
+      const spy = jest.fn();
+      const sampleActions = mockActions(spy);
+      const onSubmit = (): Promise<{ id: number }> =>
+        new Promise((resolve) =>
+          setTimeout(() => {
+            resolve({ id: 3 });
+          }, 1000),
+        );
+
+      const wrapper = mount(
+        <MemoryRouter>
+          <FormStation
+            {...defaultProps}
+            actions={sampleActions}
+            saveData={onSubmit}
+            initialData={{ loading: false, data: {} }}
+          >
+            <MakeDirty />
+          </FormStation>
+        </MemoryRouter>,
+      );
+
+      // submit form
+      const actionSelected = wrapper
+        .find(Action)
+        .prop('action').onActionSelected;
+
+      await act(async () => {
+        actionSelected && actionSelected();
+      });
+
+      // place form into 'submitting' state
+      await act(async () => {
+        jest.advanceTimersByTime(500);
+      });
+
+      wrapper.update();
+
+      expect(showSaveIndicator).toHaveBeenCalledTimes(1);
+
+      // complete form submission
+      await act(async () => {
+        jest.runAllTimers();
+      });
+      wrapper.update();
+
+      expect(hideSaveIndicator).toHaveBeenCalledTimes(1);
+    });
   });
 });

package/src/components/FormStation/FormStation.tsx

@@ -16,18 +16,19 @@ import React, {
 } from 'react';
 import { useHistory } from 'react-router-dom';
 import { OptionalObjectSchema } from 'yup/lib/object';
+import { hideSaveIndicator, showSaveIndicator } from '../../initialize';
 import { Data } from '../../types/data';
 import { ErrorTypeToStationError } from '../../utils/ErrorTypeToStationError';
 import { Actions, ActionsProps } from '../Actions';
 import { isNavigationAction } from '../Actions/Action/Action';
 import { IconName } from '../Icons';
 import { MessageBar } from '../MessageBar';
-import { ErrorType, StationError, StationMessage } from '../models';
 import {
   PageHeader,
   PageHeaderActionType,
   PageHeaderProps,
 } from '../PageHeader';
+import { ErrorType, StationError, StationMessage } from '../models';
 import { FormActionData, InitialFormData } from './FormStation.models';
 import classes from './FormStation.scss';
 import { SaveOnNavigate } from './SaveOnNavigate/SaveOnNavigate';
@@ -144,8 +145,10 @@ export const FormStation = <TValues extends Data, TSubmitResponse = unknown>({
       if (isFormSubmitting) {
         return;
       }
+
       try {
         setIsFormSubmitting(true);
+        showSaveIndicator();
         setStationError(undefined);
         if (!initialData.loading && saveData) {
           const response = await saveData(values, initialData, formikHelpers);
@@ -167,6 +170,7 @@ export const FormStation = <TValues extends Data, TSubmitResponse = unknown>({
       } finally {
         formikHelpers.setSubmitting(false);
         setIsFormSubmitting(false);
+        hideSaveIndicator();
       }
     },
     [isFormSubmitting, initialData, saveData, setStationError],

package/src/components/InfoPanel/Paragraph/Paragraph.scss

@@ -11,7 +11,7 @@
     row-gap: 10px;
   }
 
-  margin-bottom: 30px;
+  margin-bottom: 20px;
 
   .title {
     color: var(--infopanel-subtitle-color, $infopanel-subtitle-color);

package/src/components/InfoPanel/Section/Section.scss

@@ -7,12 +7,19 @@
   grid-template-columns: 1fr;
 
   &.hasTitle {
-    grid-template-rows: max-content max-content;
+    grid-template-rows: max-content;
+
+    padding-top: 6px;
+    padding-bottom: 6px;
+
+    &.expanded {
+      grid-template-rows: max-content max-content;
+    }
   }
 
   padding: 30px;
 
-  row-gap: 30px;
+  row-gap: 20px;
 
   .title,
   .main {
@@ -37,4 +44,29 @@
     --infopanel-background-color,
     $infopanel-background-color
   );
+
+  .collapsibleSection {
+    & > div:first-child {
+      background-color: unset;
+
+      div:last-child {
+        margin-left: -18px;
+      }
+
+      svg {
+        margin-left: -34px;
+      }
+    }
+
+    & > div:last-child {
+      border-bottom: unset;
+    }
+
+    & > div > div:last-child {
+      background-color: var(
+        --infopanel-background-color,
+        $infopanel-background-color
+      );
+    }
+  }
 }

package/src/components/InfoPanel/Section/Section.spec.tsx

@@ -1,5 +1,6 @@
 import { shallow } from 'enzyme';
 import React from 'react';
+import { AccordionItem } from '../../Accordion';
 import { Section } from './Section';
 
 describe('Section Tests', () => {
@@ -8,4 +9,120 @@ describe('Section Tests', () => {
 
     expect(wrapper).toBeTruthy();
   });
+
+  it('should not render anything if section has no children', () => {
+    const wrapper = shallow(<Section></Section>);
+
+    const section = wrapper.find('.container');
+
+    expect(section.exists()).toBe(false);
+  });
+
+  it('creates a class based off of the className prop', () => {
+    const mockClassName = 'test-class';
+    const wrapper = shallow(
+      <Section className={mockClassName}>
+        <p>test</p>
+      </Section>,
+    );
+
+    const item = wrapper.find('.test-class');
+
+    expect(item.hasClass(mockClassName)).toBe(true);
+  });
+
+  it('accepts styles', () => {
+    const mockStyles: React.CSSProperties = { backgroundColor: 'blue' };
+    const wrapper = shallow(
+      <Section style={mockStyles}>
+        <p>test</p>
+      </Section>,
+    );
+
+    const section = wrapper.find('.container');
+
+    expect(section.prop('style')).toBe(mockStyles);
+  });
+
+  it(`should not be toggleable if no 'title' is given`, () => {
+    const wrapper = shallow(
+      <Section>
+        <p>test</p>
+      </Section>,
+    );
+
+    const item = wrapper.find(AccordionItem);
+
+    expect(item.exists()).toBe(false);
+  });
+
+  it(`should be toggleable if a 'title' is given`, () => {
+    const wrapper = shallow(
+      <Section title="test">
+        <p>test</p>
+      </Section>,
+    );
+
+    const item = wrapper.find(AccordionItem);
+
+    expect(item.exists()).toBe(true);
+  });
+
+  it('section should be expanded by default', () => {
+    const wrapper = shallow(
+      <Section>
+        <p>test</p>
+      </Section>,
+    );
+
+    const section = wrapper.find('.container');
+
+    expect(section.hasClass('expanded')).toBe(true);
+  });
+
+  it(`section is collasped if 'expandedByDefault' is set to false`, () => {
+    const wrapper = shallow(
+      <Section expandedByDefault={false}>
+        <p>test</p>
+      </Section>,
+    );
+
+    const section = wrapper.find('.container');
+
+    expect(section.hasClass('expanded')).toBe(false);
+  });
+
+  it('section can be toggled when the title is clicked', () => {
+    const wrapper = shallow(
+      <Section title="test">
+        <p>test</p>
+      </Section>,
+    );
+
+    let section = wrapper.find('.container').first();
+    let item = wrapper.find(AccordionItem);
+
+    expect(section.hasClass('expanded')).toBe(true);
+    expect(item.prop('isExpanded')).toBe(true);
+
+    item = wrapper.find(AccordionItem);
+    item.prop('toggleExpanded')!();
+    wrapper.update();
+
+    section = wrapper.find('.container').first();
+    item = wrapper.find(AccordionItem);
+
+    expect(section.hasClass('expanded')).toBe(false);
+    expect(item.prop('isExpanded')).toBe(false);
+
+    item = wrapper.find(AccordionItem);
+    item.prop('toggleExpanded')!();
+    wrapper.update();
+
+    section = wrapper.find('.container').first();
+    item = wrapper.find(AccordionItem);
+
+    expect(section.hasClass('expanded')).toBe(true);
+    expect(item.prop('isExpanded')).toBe(true);
+  });
 });

package/src/components/InfoPanel/Section/Section.tsx

@@ -1,10 +1,11 @@
 import clsx from 'clsx';
-import React from 'react';
+import React, { useState } from 'react';
+import { AccordionItem } from '../../Accordion';
 import { Paragraph } from '../Paragraph/Paragraph';
 import classes from './Section.scss';
 
 export interface SectionProps {
-  /** Section Title */
+  /** Section Title. If set, will allow the section to be expandable/collapsible */
   title?: string;
 
   /** Optional class */
@@ -12,6 +13,9 @@ export interface SectionProps {
 
   /** Optional styles */
   style?: React.CSSProperties;
+
+  /** Whether the section should be expanded or collapsed intially (default: true)*/
+  expandedByDefault?: boolean;
 }
 
 export const Section: React.FC<SectionProps> = ({
@@ -19,7 +23,9 @@ export const Section: React.FC<SectionProps> = ({
   title,
   style,
   children,
+  expandedByDefault = true,
 }) => {
+  const [expanded, setExpanded] = useState<boolean>(expandedByDefault);
   const validChildren: React.ReactNode[] = [];
 
   // Special case for removing paragraph components if they are empty
@@ -42,21 +48,38 @@ export const Section: React.FC<SectionProps> = ({
     <div
       className={clsx(
         classes.container,
-        { [classes.hasTitle]: title },
+        { [classes.hasTitle]: title, [classes.expanded]: expanded },
         'info-panel-section-container',
         className,
       )}
       style={style}
       data-test-id="section"
     >
-      {title && (
-        <div className={classes.title} data-test-id="section-title">
-          {title}
+      {title ? (
+        <AccordionItem
+          header={
+            title ? (
+              <div className={classes.title} data-test-id="section-title">
+                {title}
+              </div>
+            ) : (
+              <div className={classes.title} data-test-id="section-title"></div>
+            )
+          }
+          allowLeftSpacing={false}
+          isExpanded={expanded}
+          toggleExpanded={() => setExpanded((prev) => !prev)}
+          className={classes.collapsibleSection}
+        >
+          <div className={classes.main} data-test-id="section-content">
+            {validChildren}
+          </div>
+        </AccordionItem>
+      ) : (
+        <div className={classes.main} data-test-id="section-content">
+          {validChildren}
         </div>
       )}
-      <div className={classes.main} data-test-id="section-content">
-        {validChildren}
-      </div>
     </div>
   );
 };

package/src/components/LandingPageTiles/TileLarge/TileLarge.scss

@@ -33,8 +33,8 @@
 
   .icon {
     align-self: center;
-    width: 130px;
-    height: 130px;
+    width: 100px;
+    height: 100px;
     svg * {
       stroke: var(
         --landingpage-largetile-stroke-color,
@@ -53,7 +53,7 @@
     text-align: center;
 
     .label {
-      font-size: 30px;
+      font-size: 26px;
       font-weight: regular;
     }
 

package/src/components/LandingPageTiles/TileSmall/TileSmall.scss

@@ -46,8 +46,8 @@
 
   .icon {
     align-self: center;
-    width: 60px;
-    height: 60px;
+    width: 40px;
+    height: 40px;
     svg * {
       stroke: var(
         --landingpage-smalltile-stroke-color,
@@ -59,7 +59,7 @@
   .label {
     text-align: center;
     align-self: center;
-    font-size: 18px;
+    font-size: 15px;
     color: var(--landingpage-smalltile-color, $landingpage-smalltile-color);
   }
 }

package/src/hooks/useBusy/useBusy.spec.tsx

@@ -0,0 +1,34 @@
+import { mount } from 'enzyme';
+import React from 'react';
+import { on } from '../../initialize';
+import { useBusy } from './useBusy';
+
+let callback: (busyState: boolean) => void;
+
+jest.mock('../../initialize', () => ({
+  on: jest.fn().mockImplementationOnce((event, cb) => {
+    callback = cb;
+  }),
+}));
+
+const TestWrapper: React.FC = () => {
+  const { isBusy } = useBusy();
+
+  return <p id="value">{String(isBusy)}</p>;
+};
+
+describe('useBusy', () => {
+  it(`both 'val' and 'debouncedValue' are set to the initial value`, () => {
+    const wrapper = mount(<TestWrapper />);
+    const currentValue = wrapper.find('#value');
+
+    expect(on).toHaveBeenCalled();
+    expect(currentValue.text()).toBe('false');
+
+    callback(true);
+
+    wrapper.update();
+
+    expect(currentValue.text()).toBe('true');
+  });
+});

package/src/hooks/useBusy/useBusy.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { on } from '../../initialize';
+
+export const useBusy = (): {
+  isBusy: boolean;
+} => {
+  const [busy, setBusy] = React.useState(false);
+
+  on('busy', (busyState) => {
+    setBusy(busyState as boolean);
+  });
+
+  return { isBusy: busy };
+};

package/src/initialize.ts

@@ -1,18 +1,46 @@
-import { ShowNotification } from './types/ui-config';
+import {
+  AddIndicator,
+  CustomEventEmitter,
+  RemoveIndicator,
+  ShowNotification,
+} from './types/ui-config';
 
 export let showNotification: ShowNotification | (() => void) =
   polyfill('showNotification');
 
+export let addIndicator: AddIndicator | (() => void) = polyfill('addIndicator');
+
+export let removeIndicator: RemoveIndicator | (() => void) =
+  polyfill('removeIndicator');
+
+export let on: CustomEventEmitter['on'] | (() => void) = polyfill('on');
+
+export let showSaveIndicator: () => void = polyfill('showSaveIndicator');
+
+export let hideSaveIndicator: () => void = polyfill('hideSaveIndicator');
+
 /**
  * Passes the PiralApi methods to the UI library.
  * @param app {UiConfig} object containing PiralApi methods for use in UI library.
  */
 export function initializeUi(app: UiConfig): void {
-  ({ showNotification } = app);
+  ({
+    showNotification,
+    addIndicator,
+    removeIndicator,
+    on,
+    showSaveIndicator,
+    hideSaveIndicator,
+  } = app);
 }
 
 export interface UiConfig {
   showNotification: ShowNotification;
+  addIndicator: AddIndicator;
+  removeIndicator: RemoveIndicator;
+  on: CustomEventEmitter['on'];
+  showSaveIndicator: () => void;
+  hideSaveIndicator: () => void;
 }
 
 function polyfill(methodName: string): () => void {

package/src/styles/variables.scss

@@ -71,6 +71,8 @@ $filter-font-size: 16px;
 $filter-width: 360px;
 $filter-controller-background-color: $light-gray-2;
 $filter-border-color: $blue;
+$multi-option-checbox-border: $blue;
+$multi-option-label-color: $dark-gray;
 
 /* Details vars */
 $details-background-color: #ffffff;
@@ -195,6 +197,7 @@ $date-picker-max-width: $width-small;
 $form-element-min-height: 50px;
 $read-only-text-background-color: $light-gray-2;
 $select-background-color: white;
+$form-indicator-color: $green;
 
 /* Dynamic Data List */
 $dynamic-list-row-bg-color: white;

package/src/types/ui-config.ts

@@ -28,3 +28,18 @@ export type NotificationId = string | number;
 export type NotificationBody = string | ReactNode | Component;
 
 export type NotificationType = 'success' | 'error' | 'info' | 'warning';
+
+export type IndicatorId = number;
+
+export type AddIndicator = (content: React.ReactNode) => IndicatorId;
+
+export type RemoveIndicator = (id: IndicatorId) => void;
+
+export type UpdateIndicator = (
+  id: IndicatorId,
+  content: React.ReactNode,
+) => void;
+
+export interface CustomEventEmitter {
+  on(eventName: string, listener: (...args: unknown[]) => void): void;
+}