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

package/package.json

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

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