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

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;
+}