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

package/dist/initialize.d.ts

@@ -1,5 +1,10 @@
-import { ShowNotification } from './types/ui-config';
+import { AddIndicator, CustomEventEmitter, RemoveIndicator, ShowNotification } from './types/ui-config';
 export declare let showNotification: ShowNotification | (() => void);
+export declare let addIndicator: AddIndicator | (() => void);
+export declare let removeIndicator: RemoveIndicator | (() => void);
+export declare let on: CustomEventEmitter['on'] | (() => void);
+export declare let showSaveIndicator: () => void;
+export declare let hideSaveIndicator: () => void;
 /**
  * Passes the PiralApi methods to the UI library.
  * @param app {UiConfig} object containing PiralApi methods for use in UI library.
@@ -7,5 +12,10 @@ export declare let showNotification: ShowNotification | (() => void);
 export declare function initializeUi(app: UiConfig): void;
 export interface UiConfig {
     showNotification: ShowNotification;
+    addIndicator: AddIndicator;
+    removeIndicator: RemoveIndicator;
+    on: CustomEventEmitter['on'];
+    showSaveIndicator: () => void;
+    hideSaveIndicator: () => void;
 }
 //# sourceMappingURL=initialize.d.ts.map

package/dist/initialize.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"initialize.d.ts","sourceRoot":"","sources":["../src/initialize.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAErD,eAAO,IAAI,gBAAgB,EAAE,gBAAgB,GAAG,CAAC,MAAM,IAAI,CAC7B,CAAC;AAE/B;;;GAGG;AACH,wBAAgB,YAAY,CAAC,GAAG,EAAE,QAAQ,GAAG,IAAI,CAEhD;AAED,MAAM,WAAW,QAAQ;IACvB,gBAAgB,EAAE,gBAAgB,CAAC;CACpC"}
+{"version":3,"file":"initialize.d.ts","sourceRoot":"","sources":["../src/initialize.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,YAAY,EACZ,kBAAkB,EAClB,eAAe,EACf,gBAAgB,EACjB,MAAM,mBAAmB,CAAC;AAE3B,eAAO,IAAI,gBAAgB,EAAE,gBAAgB,GAAG,CAAC,MAAM,IAAI,CAC7B,CAAC;AAE/B,eAAO,IAAI,YAAY,EAAE,YAAY,GAAG,CAAC,MAAM,IAAI,CAA4B,CAAC;AAEhF,eAAO,IAAI,eAAe,EAAE,eAAe,GAAG,CAAC,MAAM,IAAI,CAC5B,CAAC;AAE9B,eAAO,IAAI,EAAE,EAAE,kBAAkB,CAAC,IAAI,CAAC,GAAG,CAAC,MAAM,IAAI,CAAkB,CAAC;AAExE,eAAO,IAAI,iBAAiB,EAAE,MAAM,IAAoC,CAAC;AAEzE,eAAO,IAAI,iBAAiB,EAAE,MAAM,IAAoC,CAAC;AAEzE;;;GAGG;AACH,wBAAgB,YAAY,CAAC,GAAG,EAAE,QAAQ,GAAG,IAAI,CAShD;AAED,MAAM,WAAW,QAAQ;IACvB,gBAAgB,EAAE,gBAAgB,CAAC;IACnC,YAAY,EAAE,YAAY,CAAC;IAC3B,eAAe,EAAE,eAAe,CAAC;IACjC,EAAE,EAAE,kBAAkB,CAAC,IAAI,CAAC,CAAC;IAC7B,iBAAiB,EAAE,MAAM,IAAI,CAAC;IAC9B,iBAAiB,EAAE,MAAM,IAAI,CAAC;CAC/B"}

package/dist/types/ui-config.d.ts

@@ -17,4 +17,11 @@ export interface NotificationOptions {
 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;
+}
 //# sourceMappingURL=ui-config.d.ts.map

package/dist/types/ui-config.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ui-config.d.ts","sourceRoot":"","sources":["../../src/types/ui-config.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE7C,MAAM,MAAM,gBAAgB,GAAG,CAAC,YAAY,EAAE,YAAY,KAAK,cAAc,CAAC;AAE9E,MAAM,MAAM,kBAAkB,GAAG,CAC/B,EAAE,EAAE,cAAc,EAClB,YAAY,EAAE,YAAY,KACvB,IAAI,CAAC;AAEV,MAAM,MAAM,mBAAmB,GAAG,CAAC,EAAE,EAAE,cAAc,KAAK,IAAI,CAAC;AAE/D,MAAM,WAAW,YAAY;IAC3B,2CAA2C;IAC3C,KAAK,EAAE,MAAM,CAAC;IACd,wCAAwC;IACxC,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,8CAA8C;IAC9C,OAAO,CAAC,EAAE,mBAAmB,CAAC;CAC/B;AAED,MAAM,WAAW,mBAAmB;IAClC,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;CAC5B;AAED,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,MAAM,CAAC;AAE7C,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,CAAC;AAE9D,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC"}
+{"version":3,"file":"ui-config.d.ts","sourceRoot":"","sources":["../../src/types/ui-config.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE7C,MAAM,MAAM,gBAAgB,GAAG,CAAC,YAAY,EAAE,YAAY,KAAK,cAAc,CAAC;AAE9E,MAAM,MAAM,kBAAkB,GAAG,CAC/B,EAAE,EAAE,cAAc,EAClB,YAAY,EAAE,YAAY,KACvB,IAAI,CAAC;AAEV,MAAM,MAAM,mBAAmB,GAAG,CAAC,EAAE,EAAE,cAAc,KAAK,IAAI,CAAC;AAE/D,MAAM,WAAW,YAAY;IAC3B,2CAA2C;IAC3C,KAAK,EAAE,MAAM,CAAC;IACd,wCAAwC;IACxC,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,8CAA8C;IAC9C,OAAO,CAAC,EAAE,mBAAmB,CAAC;CAC/B;AAED,MAAM,WAAW,mBAAmB;IAClC,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;CAC5B;AAED,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,MAAM,CAAC;AAE7C,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,CAAC;AAE9D,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC;AAExE,MAAM,MAAM,WAAW,GAAG,MAAM,CAAC;AAEjC,MAAM,MAAM,YAAY,GAAG,CAAC,OAAO,EAAE,KAAK,CAAC,SAAS,KAAK,WAAW,CAAC;AAErE,MAAM,MAAM,eAAe,GAAG,CAAC,EAAE,EAAE,WAAW,KAAK,IAAI,CAAC;AAExD,MAAM,MAAM,eAAe,GAAG,CAC5B,EAAE,EAAE,WAAW,EACf,OAAO,EAAE,KAAK,CAAC,SAAS,KACrB,IAAI,CAAC;AAEV,MAAM,WAAW,kBAAkB;IACjC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC,GAAG,IAAI,EAAE,OAAO,EAAE,KAAK,IAAI,GAAG,IAAI,CAAC;CACrE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axinom/mosaic-ui",
-  "version": "0.32.0",
+  "version": "0.33.0-rc.0",
   "description": "UI components for building Axinom Mosaic applications",
   "author": "Axinom",
   "license": "PROPRIETARY",
@@ -32,7 +32,7 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
-    "@axinom/mosaic-core": "^0.4.5",
+    "@axinom/mosaic-core": "^0.4.6-rc.0",
     "@faker-js/faker": "^7.4.0",
     "@popperjs/core": "^2.9.2",
     "clsx": "^1.1.0",
@@ -102,5 +102,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b0c12ef914e4ead795480b4fc90b13bc1088bd3f"
+  "gitHead": "32853a01e5b6de8cb3712ea5e1bd75780df8d59d"
 }

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/Actions/Actions.spec.tsx

@@ -1,10 +1,13 @@
 import { mount, shallow } from 'enzyme';
 import React from 'react';
+import { on } from '../../initialize';
 import { IconName } from '../Icons';
 import { Action } from './Action/Action';
 import { Actions } from './Actions';
 import { ActionData } from './Actions.models';
 
+jest.mock('../../initialize');
+
 const spy1 = jest.fn();
 const spy2 = jest.fn();
 const spy3 = jest.fn();
@@ -76,4 +79,20 @@ describe('Actions', () => {
 
     expect(action.prop('action').icon).toBe(iconProp);
   });
+
+  it('disables all actions when busy', () => {
+    (on as jest.Mock).mockImplementationOnce((event, cb) => {
+      cb(true);
+    });
+
+    const wrapper = shallow(<Actions actions={mockActions} />);
+
+    expect(on).toHaveBeenCalledWith('busy', expect.any(Function));
+
+    const actions = wrapper.find(Action);
+
+    actions.forEach((action) => {
+      expect(action.prop('action').isDisabled).toBe(true);
+    });
+  });
 });

package/src/components/Actions/Actions.tsx

@@ -1,5 +1,6 @@
 import clsx from 'clsx';
 import React from 'react';
+import { useBusy } from '../../hooks/useBusy/useBusy';
 import { Action } from './Action/Action';
 import { ActionData, ContextActionData } from './Actions.models';
 import classes from './Actions.scss';
@@ -34,6 +35,8 @@ export const Actions: React.FC<ActionsProps> = ({
     width: width,
   } as React.CSSProperties;
 
+  const { isBusy } = useBusy();
+
   return (
     <div
       className={clsx(classes.container, 'actions-container', className)}
@@ -41,7 +44,11 @@ export const Actions: React.FC<ActionsProps> = ({
       data-test-id="actions"
     >
       {actions.map((action, index) => (
-        <Action key={index} action={action} onActionClick={onActionClick} />
+        <Action
+          key={index}
+          action={{ isDisabled: isBusy, ...action }}
+          onActionClick={onActionClick}
+        />
       ))}
     </div>
   );

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/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/FormStation/FormStation.scss

@@ -122,3 +122,32 @@
     row-gap: 20px;
   }
 }
+
+.indicator {
+  display: grid;
+  grid-template-columns: auto 20px;
+  font-weight: bold;
+  color: var(--form-indicator-color, $form-indicator-color);
+
+  &::after {
+    overflow: hidden;
+    display: inline-block;
+    vertical-align: bottom;
+    -webkit-animation: ellipsis steps(4, end) 900ms infinite;
+    animation: ellipsis steps(4, end) 900ms infinite;
+    content: '\2026'; /* ascii code for the ellipsis character */
+    width: 0px;
+  }
+}
+
+@keyframes ellipsis {
+  to {
+    width: 1.25em;
+  }
+}
+
+@-webkit-keyframes ellipsis {
+  to {
+    width: 1.25em;
+  }
+}