@axinom/mosaic-ui 0.32.0-rc.12 → 0.32.0-rc.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axinom/mosaic-ui",
-  "version": "0.32.0-rc.12",
+  "version": "0.32.0-rc.14",
   "description": "UI components for building Axinom Mosaic applications",
   "author": "Axinom",
   "license": "PROPRIETARY",
@@ -102,5 +102,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "49d29f6c1ca2811784c79c0da36a5377d1389635"
+  "gitHead": "339cc30335b00fb5323a413139f34f770a6c86ce"
 }

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/Filters/Filter/Filter.tsx

@@ -14,6 +14,7 @@ import { formatDate, formatDateTime } from '../../Utils/Transformers/DateTime';
 import { FilterType, FilterTypes, FilterValue } from '../Filters.model';
 import { DateTimeFilter } from '../SelectionTypes/DateTimeFilter/DateTimeFilter';
 import { FreeTextFilter } from '../SelectionTypes/FreeTextFilter/FreeTextFilter';
+import { MultiOptionsFilter } from '../SelectionTypes/MultiOptionFilter/MultiOptionFilter';
 import { NumericTextFilter } from '../SelectionTypes/NumericTextFilter/NumericTextFilter';
 import { OptionsFilter } from '../SelectionTypes/OptionsFilter/OptionsFilter';
 import { SearcheableOptionsFilter } from '../SelectionTypes/SearcheableOptionsFilter/SearcheableOptionsFilter';
@@ -78,6 +79,19 @@ export const Filter = <T extends Data>({
         return formatDateTime(String(value));
       case FilterTypes.Options:
         return options.options.find((option) => option.value === value)?.label;
+      case FilterTypes.MultipleOptions: {
+        const selectedVal: string[] = [];
+        String(value)
+          .split(',')
+          .map((item: string) =>
+            selectedVal.push(
+              options?.options.find(
+                (option) => option.value.toString() === item,
+              )?.label ?? '',
+            ),
+          );
+        return selectedVal.join(', ');
+      }
       case FilterTypes.SearcheableOptions:
         return stringValue;
       default:
@@ -122,6 +136,16 @@ export const Filter = <T extends Data>({
           />
         );
 
+      case FilterTypes.MultipleOptions:
+        return (
+          <MultiOptionsFilter
+            value={value as string}
+            options={options.options}
+            onSelect={(value: FilterValue) =>
+              onFilterValueChange(options.property, value?.toString())
+            }
+          />
+        );
       case FilterTypes.SearcheableOptions:
         return (
           <SearcheableOptionsFilter

package/src/components/Filters/Filters.model.ts

@@ -8,6 +8,7 @@ export enum FilterTypes {
   Date,
   DateTime,
   Custom,
+  MultipleOptions,
 }
 
 export interface FilterConfig<T extends Data> {
@@ -36,6 +37,10 @@ export interface OptionsFilter<T extends Data> extends FilterConfig<T> {
   options: Option[];
 }
 
+export interface MultipleOptions<T extends Data> extends FilterConfig<T> {
+  type: FilterTypes.MultipleOptions;
+  options: Option[];
+}
 export interface SearcheableOptionsFilter<T extends Data>
   extends FilterConfig<T> {
   type: FilterTypes.SearcheableOptions;
@@ -87,7 +92,8 @@ export type FilterType<T extends Data> =
   | SearcheableOptionsFilter<T>
   | DateFilter<T>
   | DateTimeFilter<T>
-  | CustomFilter<T>;
+  | CustomFilter<T>
+  | MultipleOptions<T>;
 
 export type FilterValues<T> = {
   [K in keyof T]?: FilterValue;

package/src/components/Filters/Filters.stories.tsx

@@ -43,6 +43,7 @@ interface FilterStoryData {
   datetime: Date;
   id: number;
   holderType: string;
+  roleTypes: string;
 }
 
 const options: Option[] = generateItemArray(10, (index) => ({
@@ -55,6 +56,11 @@ const searcheableOptions: Option[] = generateItemArray(10, (index) => ({
   value: index,
 }));
 
+const multipleOptions: Option[] = generateItemArray(10, (index) => ({
+  label: faker.lorem.words(),
+  value: index,
+}));
+
 const textFilter: FilterType<FilterStoryData> = {
   label: 'Title',
   property: 'title',
@@ -76,6 +82,13 @@ const searcheableOptionFilter: FilterType<FilterStoryData> = {
     searcheableOptions.filter((option) => option.label.includes(searchText)),
 };
 
+const multipleOptionFilter: FilterType<FilterStoryData> = {
+  label: 'Role Types',
+  property: 'roleTypes',
+  type: FilterTypes.MultipleOptions,
+  options: multipleOptions,
+};
+
 const numberFilter: FilterType<FilterStoryData> = {
   label: 'ID',
   property: 'id',
@@ -167,6 +180,12 @@ export const searchableOptionsFilter: StoryObj<typeof Filters> = {
   },
 };
 
+export const multiOptionFilter: StoryObj<typeof Filters> = {
+  args: {
+    options: [multipleOptionFilter],
+  },
+};
+
 export const DateFilter: StoryObj<typeof Filters> = {
   args: {
     options: [dateFilter, dateTimeFilter],
@@ -196,6 +215,7 @@ export const MultipleFilters: StoryObj<typeof Filters> = {
             dateTimeFilter,
             customFilter,
             searcheableOptionFilter,
+            multipleOptionFilter,
           ]}
           defaultValues={filters}
           onFiltersChange={(filters) => {

package/src/components/Filters/SelectionTypes/MultiOptionFilter/MultiOptionFilter.scss

@@ -0,0 +1,40 @@
+@import '../../../../styles/common.scss';
+
+.multiFilterContainer {
+  padding: 0;
+  .Checkbox {
+    padding-left: 20px;
+    padding-right: 20px;
+    grid-template-columns: auto 30px;
+    label {
+      color: var(--multi-option-label-colorr, $multi-option-label-color);
+      font-weight: normal;
+    }
+    input {
+      border-color: var(
+        --multi-option-checbox-border,
+        $multi-option-checbox-border
+      );
+    }
+    &:hover {
+      background-color: var(
+        --filter-background-selected-color,
+        $filter-background-selected-color
+      );
+    }
+    &.selected {
+      background-color: var(
+        --filter-background-selected-color,
+        $filter-background-selected-color
+      );
+    }
+  }
+}
+
+.applyButtonContainer {
+  display: grid;
+
+  .applyButton {
+    height: 50px;
+  }
+}

package/src/components/Filters/SelectionTypes/MultiOptionFilter/MultiOptionFilter.tsx

@@ -0,0 +1,71 @@
+import clsx from 'clsx';
+import React, { useState } from 'react';
+import { ButtonContext } from '../../../Buttons';
+import { TextButton } from '../../../Buttons/TextButton/TextButton';
+import { Checkbox } from '../../../FormElements';
+import { Option } from '../../Filters.model';
+import classes from './MultiOptionFilter.scss';
+
+export interface MultiOptionFilterProps {
+  value?: string;
+
+  /** Array of Options to be displayed */
+  options: Option[];
+
+  /** Callback triggered when a new filter value is selected */
+  onSelect: (text: string[]) => void;
+
+  /** CSS Class name for additional styles */
+  className?: string;
+}
+
+export const MultiOptionsFilter: React.FC<MultiOptionFilterProps> = ({
+  value,
+  options,
+  onSelect,
+}) => {
+  const [selectedOptionList, setSelectedOptionList] = useState<string[]>(
+    value ? value.split(',') : [],
+  );
+
+  return (
+    <div className={clsx(classes.multiFilterContainer)}>
+      {options?.map((option: Option) => (
+        <Checkbox
+          className={clsx(
+            classes.Checkbox,
+            selectedOptionList.includes(option.value.toString()) &&
+              classes.selected,
+          )}
+          key={option.value}
+          name={option.label}
+          value={selectedOptionList.includes(option.value.toString())}
+          label={option.label}
+          onChange={(value) => {
+            if (value) {
+              setSelectedOptionList([
+                ...selectedOptionList,
+                option.value.toString(),
+              ]);
+            } else {
+              setSelectedOptionList(
+                [...selectedOptionList].filter(
+                  (i) => i !== option.value.toString(),
+                ),
+              );
+            }
+          }}
+        />
+      ))}
+      <div className={clsx(classes.applyButtonContainer)}>
+        <TextButton
+          className={clsx(classes.applyButton)}
+          text="Apply"
+          buttonContext={ButtonContext.Active}
+          onButtonClicked={() => onSelect(selectedOptionList)}
+          disabled={selectedOptionList.length === 0}
+        />
+      </div>
+    </div>
+  );
+};

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/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;