@axinom/mosaic-ui 0.32.0-rc.11 → 0.32.0-rc.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axinom/mosaic-ui",
-  "version": "0.32.0-rc.11",
+  "version": "0.32.0-rc.13",
   "description": "UI components for building Axinom Mosaic applications",
   "author": "Axinom",
   "license": "PROPRIETARY",
@@ -102,5 +102,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "095178757a7c929d25376adb504388b86c747871"
+  "gitHead": "b3a214238f1d54e9f537981372ab779e7fdc7d62"
 }

package/src/components/Accordion/AccordionItem/AccordionItem.spec.tsx

@@ -105,4 +105,15 @@ describe('AccordionItem', () => {
 
     expect(containerStyles).toEqual({ maxHeight: 100 });
   });
+
+  it('creates a class based off of the className prop', () => {
+    const mockClassName = 'test-class';
+    const wrapper = shallow(
+      <AccordionItem header={<b>Item 1</b>} className={mockClassName} />,
+    );
+
+    const item = wrapper.find('.test-class');
+
+    expect(item.hasClass(mockClassName)).toBe(true);
+  });
 });

package/src/components/Accordion/AccordionItem/AccordionItem.tsx

@@ -18,6 +18,9 @@ export interface AccordionItemProps {
 
   /** Sticky state of the current row. When used within the Accordion component, this prop will be overridden with the value from stickyRows. */
   sticky?: boolean;
+
+  /** CSS Class name for additional styles */
+  className?: string;
 }
 
 /**
@@ -34,6 +37,7 @@ export const AccordionItem: React.FC<AccordionItemProps> = ({
   isExpanded = false,
   allowLeftSpacing = true,
   sticky = false,
+  className,
 }) => {
   const [scrollHeight, setScrollHeight] = useState<number>(0);
   const elementRef = useRef<HTMLDivElement>(null);
@@ -45,7 +49,7 @@ export const AccordionItem: React.FC<AccordionItemProps> = ({
   }, [scrollHeight, children]);
 
   return (
-    <div data-test-id="accordion-item">
+    <div data-test-id="accordion-item" className={className}>
       <div
         data-test-id="accordion-item-row"
         className={clsx(

package/src/components/Explorer/Explorer.model.ts

@@ -36,6 +36,11 @@ export interface ExplorerBulkAction<T extends Data>
    * Whether the Explorer should reload the data once the bulk action is completed
    */
   reloadData?: boolean;
+  /**
+   * Whether or not to show toast notification once the bulk action is started
+   * (shown by default)
+   */
+  showStartedNotification?: boolean;
 }
 
 export type PageIdentifier = string | number | undefined;

package/src/components/Explorer/Explorer.spec.tsx

@@ -270,7 +270,7 @@ describe('Explorer', () => {
       const header = wrapper.find(PageHeader);
 
       await act(async () => {
-        header.prop('bulkActions')?.[0].onClick();
+        header.prop('bulkActions')?.[0].onClick?.();
 
         await wrapper.update();
       });
@@ -280,7 +280,7 @@ describe('Explorer', () => {
     });
 
     it('Calls "showNotification" when bulk action is clicked', async () => {
-      const [provider, spy] = getDataProvider();
+      const [provider] = getDataProvider();
 
       const label = 'Something';
       const wrapper = await actWithReturn(async () => {
@@ -303,7 +303,7 @@ describe('Explorer', () => {
 
       const header = wrapper.find(PageHeader);
       await act(async () => {
-        header.prop('bulkActions')?.[0].onClick();
+        header.prop('bulkActions')?.[0].onClick?.();
         await wrapper.update();
       });
 
@@ -313,6 +313,38 @@ describe('Explorer', () => {
       });
     });
 
+    it('Does not call "showNotification" when `showStartedNotification=false` and bulk action is clicked', async () => {
+      const [provider] = getDataProvider();
+
+      const label = 'Something';
+      const wrapper = await actWithReturn(async () => {
+        const wrapper = mount(
+          <Explorer
+            columns={mockListColumns}
+            dataProvider={provider}
+            stationKey="mock-key"
+            bulkActions={[
+              {
+                label,
+                onClick: jest.fn(),
+                reloadData: true,
+                showStartedNotification: false,
+              },
+            ]}
+          />,
+        );
+        return wrapper;
+      });
+
+      const header = wrapper.find(PageHeader);
+      await act(async () => {
+        header.prop('bulkActions')?.[0].onClick?.();
+        await wrapper.update();
+      });
+
+      expect(showNotificationSpy).toHaveBeenCalledTimes(0);
+    });
+
     it.todo(`raises page header bulk action with 'SELECT_ALL'`);
 
     it.todo(`raises page header bulk action with 'SINGLE_ITEMS'`);
@@ -1672,7 +1704,7 @@ describe('Explorer', () => {
       const menu = wrapper.find(InlineMenu);
 
       await act(async () => {
-        await menu.prop('actions')?.[0].onActionSelected();
+        await menu.prop('actions')?.[0].onActionSelected?.();
         await wrapper.update();
       });
 
@@ -1728,7 +1760,7 @@ describe('Explorer', () => {
       const menu = wrapper.find(InlineMenu);
 
       await act(async () => {
-        await menu.prop('actions')?.[0].onActionSelected();
+        await menu.prop('actions')?.[0].onActionSelected?.();
         await wrapper.update();
       });
 

package/src/components/Explorer/Explorer.tsx

@@ -365,9 +365,11 @@ export const Explorer = React.forwardRef(function Explorer<T extends Data>(
       return {
         ...action,
         onClick: async () => {
-          showNotification({
-            title: `Bulk Action '${action.label}' Started`,
-          });
+          if (action.showStartedNotification !== false) {
+            showNotification({
+              title: `Bulk Action '${action.label}' Started`,
+            });
+          }
 
           try {
             const result = await action.onClick(getBulkActionSelection());

package/src/components/Explorer/SelectionExplorer/SelectionExplorer.spec.tsx

@@ -2,7 +2,9 @@ import { mount, shallow } from 'enzyme';
 import React from 'react';
 import { act } from 'react-dom/test-utils';
 import { actWithReturn } from '../../../helpers/testing';
+import * as app from '../../../initialize';
 import { Column } from '../../List';
+import { PageHeader } from '../../PageHeader';
 import { PageHeaderBulkActions } from '../../PageHeader/PageHeaderBulkActions/PageHeaderBulkActions';
 import { Explorer } from '../Explorer';
 import { ExplorerDataProvider } from '../Explorer.model';
@@ -103,6 +105,34 @@ describe('SelectionExplorer', () => {
     expect(bulkActions.exists()).toBe(false);
   });
 
+  it('Does not call "showNotification" when "Apply Selection" is clicked', async () => {
+    const [provider] = getDataProvider();
+    const showNotificationSpy: jest.SpyInstance = jest.spyOn(
+      app,
+      'showNotification',
+    );
+
+    const wrapper = await actWithReturn(async () => {
+      const wrapper = mount(
+        <SelectionExplorer
+          columns={mockListColumns}
+          dataProvider={provider}
+          stationKey="mock-key"
+          allowBulkSelect={true}
+        />,
+      );
+      return wrapper;
+    });
+
+    const header = wrapper.find(PageHeader);
+    await act(async () => {
+      header.prop('bulkActions')?.[0].onClick?.();
+      await wrapper.update();
+    });
+
+    expect(showNotificationSpy).toHaveBeenCalledTimes(0);
+  });
+
   it('sends onSelection callback when the selection of a single item is triggered', async () => {
     const [provider] = getDataProvider();
     const spy = jest.fn();

package/src/components/Explorer/SelectionExplorer/SelectionExplorer.tsx

@@ -68,6 +68,7 @@ export const SelectionExplorer = React.forwardRef(function SelectionExplorer<
                 onClick: ((arg: ItemSelection<T>) => {
                   onSelection(arg);
                 }) as ExplorerBulkAction<T>['onClick'],
+                showStartedNotification: false,
               },
             ]
           : []),

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