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

package/src/components/FormElements/formStoryHelper.tsx

@@ -1,7 +1,18 @@
 import { faker } from '@faker-js/faker';
 import React, { useState } from 'react';
-import { CustomTags, ReadOnlyField, Select, SingleLineText, Tags } from '.';
+import {
+  Checkbox,
+  CustomTags,
+  Divider,
+  FileUploadControl,
+  Radio,
+  ReadOnlyField,
+  Select,
+  SingleLineText,
+  Tags,
+} from '.';
 import { generateItemArray } from '../../helpers/storybook';
+import { TextButton } from '../Buttons';
 import { DynamicListColumn } from '../DynamicDataList/DynamicDataList.model';
 import {
   createInputRenderer,
@@ -10,6 +21,8 @@ import {
 import { formatDateTime } from '../Utils';
 import { BooleanViewField } from './BooleanView/BooleanViewField';
 import { DynamicDataListControl } from './DynamicDataListControl/DynamicDataListControl';
+import { FileUpload } from './FileUploadControl/FileUploadControl';
+import { TextArea } from './TextArea/TextArea';
 
 interface DynamicListStoryData {
   position: number;
@@ -67,13 +80,13 @@ const dataListColumns: DynamicListColumn<DynamicListStoryData>[] = [
 ];
 
 export const SampleForm: React.FC = () => useCreateForm().form;
-
 export const useCreateForm = (): {
   form: JSX.Element;
   title: string;
 } => {
   const [id] = useState(faker.datatype.uuid());
   const [title, setTitle] = useState(`The ${generateTitle()}`);
+  const [title2, setTitle2] = useState(`The ${generateTitle()}`);
   const [genres, setGenres] = useState<string[]>(['Crime', 'Drama']);
   const [ratings, setRatings] = useState<
     string | number | string[] | undefined
@@ -94,104 +107,157 @@ export const useCreateForm = (): {
       country: faker.address.country(),
     })),
   );
+  const [radio, setRadio] = useState(1);
+  const [check, setCheck] = useState<boolean>();
+  const [file, setFile] = useState<FileUpload>();
+
+  const [disabled, setDisabled] = useState<boolean>(false);
 
   return {
     form: (
-      <form
-        style={{
-          display: 'grid',
-          gridAutoRows: 'max-content',
-          gridTemplateColumns: '1fr',
-          rowGap: '20px',
-        }}
-      >
-        <ReadOnlyField label="Id" value={id} />
-        <SingleLineText
-          name="title"
-          label="Title"
-          value={title}
-          onChange={(e) => setTitle(e.currentTarget.value)}
-        />
-        <ReadOnlyField label="Publish State" value="PUBLISHED" />
-        <BooleanViewField
-          label="Status"
-          value={status}
-          trueLabel="Enabled"
-          falseLabel="Disabled"
-        />
-        <Tags
-          name="genres"
-          label="Genre(s)"
-          value={genres}
-          tagsOptions={genresOptions}
-          onChange={(e) =>
-            setGenres(e.currentTarget.value as unknown as string[])
-          }
-        />
-        <Select
-          name="ratings"
-          label="Rating"
-          value={ratings}
-          options={selectOptions}
-          onChange={(e) => setRatings(e.currentTarget.value)}
-        />
-        <SingleLineText
-          name="shortDescription"
-          label="Short Description"
-          value={shortDescription}
-          placeholder="Enter a short description..."
-          onChange={(e) => setShortDescription(e.currentTarget.value)}
-        />
-        <SingleLineText
-          name="longDescription"
-          label="Long Description"
-          value={longDescription}
-          placeholder="Enter a description..."
-          onChange={(e) => setLongDescription(e.currentTarget.value)}
-        />
-        <CustomTags
-          name="cast"
-          value={cast}
-          label="Cast"
-          onChange={(e) =>
-            setCast(e.currentTarget.value as unknown as string[])
-          }
-        />
-        <CustomTags
-          name="directors"
-          value={directors}
-          label="Director(s)"
-          onChange={(e) =>
-            setDirectors(e.currentTarget.value as unknown as string[])
-          }
-        />
-        <Tags
-          name="locales"
-          value={locales}
-          label="Locale(s)"
-          tagsOptions={['en_US', 'pt_PT', 'zh_CN']}
-          onChange={(e) =>
-            setLocales(e.currentTarget.value as unknown as string[])
-          }
-        />
-        <DynamicDataListControl
-          name={'dataList'}
-          label={'Subtitles'}
-          columns={dataListColumns}
-          value={dataList}
-          positionPropertyName={'position'}
-          allowReordering={true}
-          allowRowDragging={true}
-          allowNewData={true}
-          onChange={(e) => setDataList(e as DynamicListStoryData[])}
-        />
-        <ReadOnlyField
-          label="Created At"
-          value={createdTime.toISOString()}
-          transform={formatDateTime}
-        />
-        <ReadOnlyField label="Writer(s)" value={writers} />
-      </form>
+      <>
+        <div style={{ marginBottom: 10 }}>
+          <TextButton
+            onButtonClicked={() => setDisabled(!disabled)}
+            text="Toggle Disabled"
+          />
+        </div>
+        <Divider />
+        <form
+          style={{
+            display: 'grid',
+            gridAutoRows: 'max-content',
+            gridTemplateColumns: '1fr',
+            rowGap: '20px',
+          }}
+        >
+          <ReadOnlyField label="Id" value={id} />
+          <SingleLineText
+            name="title"
+            label="Title"
+            value={title}
+            disabled={disabled}
+            onChange={(e) => setTitle(e.currentTarget.value)}
+          />
+          <ReadOnlyField label="Publish State" value="PUBLISHED" />
+          <BooleanViewField
+            label="Status"
+            value={status}
+            trueLabel="Enabled"
+            falseLabel="Disabled"
+          />
+          <Tags
+            name="genres"
+            label="Genre(s)"
+            value={genres}
+            tagsOptions={genresOptions}
+            onChange={(e) =>
+              setGenres(e.currentTarget.value as unknown as string[])
+            }
+            disabled={disabled}
+          />
+          <Select
+            name="ratings"
+            label="Rating"
+            value={ratings}
+            options={selectOptions}
+            onChange={(e) => setRatings(e.currentTarget.value)}
+            disabled={disabled}
+          />
+          <SingleLineText
+            name="shortDescription"
+            label="Short Description"
+            value={shortDescription}
+            placeholder="Enter a short description..."
+            onChange={(e) => setShortDescription(e.currentTarget.value)}
+            disabled={disabled}
+          />
+          <TextArea
+            name="longDescription"
+            label="Long Description"
+            value={longDescription}
+            placeholder="Enter a description..."
+            onChange={(e) => setLongDescription(e.currentTarget.value)}
+            disabled={disabled}
+          />
+          <CustomTags
+            name="cast"
+            value={cast}
+            label="Cast"
+            onChange={(e) =>
+              setCast(e.currentTarget.value as unknown as string[])
+            }
+            disabled={disabled}
+          />
+          <CustomTags
+            name="directors"
+            value={directors}
+            label="Director(s)"
+            onChange={(e) =>
+              setDirectors(e.currentTarget.value as unknown as string[])
+            }
+            disabled={disabled}
+          />
+          <Tags
+            name="locales"
+            value={locales}
+            label="Locale(s)"
+            tagsOptions={['en_US', 'pt_PT', 'zh_CN']}
+            onChange={(e) =>
+              setLocales(e.currentTarget.value as unknown as string[])
+            }
+            disabled={disabled}
+          />
+          <DynamicDataListControl
+            name={'dataList'}
+            label={'Subtitles'}
+            columns={dataListColumns}
+            value={dataList}
+            positionPropertyName={'position'}
+            allowReordering={true}
+            allowRowDragging={true}
+            allowNewData={true}
+            onChange={(e) => setDataList(e as DynamicListStoryData[])}
+            disabled={disabled}
+          />
+
+          <Radio
+            value={radio}
+            onChange={(e) => setRadio(Number(e.currentTarget.value))}
+            options={[
+              { value: 1, label: 'A' },
+              { value: 2, label: 'B' },
+              { value: 3, label: 'C' },
+            ]}
+            name={'radio'}
+            label={'Category'}
+            disabled={disabled}
+          />
+
+          <Checkbox
+            value={check}
+            onChange={setCheck}
+            name={'check'}
+            label={'Is Premium?'}
+            disabled={disabled}
+          />
+
+          <FileUploadControl
+            name={'file'}
+            value={file}
+            onFileSelected={(file) => setFile(file)}
+            placeholder={'Select a file'}
+            label={'File'}
+            disabled={disabled}
+          />
+          <ReadOnlyField
+            label="Created At"
+            value={createdTime.toISOString()}
+            transform={formatDateTime}
+          />
+          <ReadOnlyField label="Writer(s)" value={writers} />
+        </form>
+      </>
     ),
     title,
   };

package/src/components/FormStation/FormStation.spec.tsx

@@ -5,7 +5,7 @@ import { act } from 'react-dom/test-utils';
 import { MemoryRouter, Route } from 'react-router-dom';
 import * as Yup from 'yup';
 import { noop } from '../../helpers/utils';
-import { hideSaveIndicator, showSaveIndicator } from '../../initialize';
+import { IndicatorType, setSaveIndicator } from '../../initialize';
 import { ActionData, Actions } from '../Actions';
 import { Action } from '../Actions/Action';
 import { MessageBar } from '../MessageBar/MessageBar';
@@ -675,6 +675,11 @@ describe('Details', () => {
           </FormStation>
         </MemoryRouter>,
       );
+      expect(setSaveIndicator).toHaveBeenNthCalledWith(
+        1,
+        IndicatorType.Inactive,
+      ); // 1. inactive 2. dirty
+      expect(setSaveIndicator).toHaveBeenNthCalledWith(2, IndicatorType.Dirty); // 1. inactive 2. dirty
 
       // submit form
       const actionSelected = wrapper
@@ -692,7 +697,7 @@ describe('Details', () => {
 
       wrapper.update();
 
-      expect(showSaveIndicator).toHaveBeenCalledTimes(1);
+      expect(setSaveIndicator).toHaveBeenNthCalledWith(3, IndicatorType.Saving);
 
       // complete form submission
       await act(async () => {
@@ -700,7 +705,12 @@ describe('Details', () => {
       });
       wrapper.update();
 
-      expect(hideSaveIndicator).toHaveBeenCalledTimes(1);
+      expect(setSaveIndicator).toHaveBeenNthCalledWith(
+        4,
+        IndicatorType.Inactive,
+      );
+
+      console.warn((setSaveIndicator as jest.Mock).mock.calls);
     });
   });
 });

package/src/components/FormStation/FormStation.tsx

@@ -16,7 +16,7 @@ import React, {
 } from 'react';
 import { useHistory } from 'react-router-dom';
 import { OptionalObjectSchema } from 'yup/lib/object';
-import { hideSaveIndicator, showSaveIndicator } from '../../initialize';
+import { IndicatorType, setSaveIndicator } from '../../initialize';
 import { Data } from '../../types/data';
 import { ErrorTypeToStationError } from '../../utils/ErrorTypeToStationError';
 import { Actions, ActionsProps } from '../Actions';
@@ -155,7 +155,7 @@ export const FormStation = <TValues extends Data, TSubmitResponse = unknown>({
 
       try {
         setIsFormSubmitting(true);
-        showSaveIndicator();
+        setSaveIndicator(IndicatorType.Saving);
         setStationError(undefined);
         if (!initialData.loading && saveData) {
           const response = await saveData(values, initialData, formikHelpers);
@@ -171,13 +171,14 @@ export const FormStation = <TValues extends Data, TSubmitResponse = unknown>({
           ),
         );
 
+        setSaveIndicator(IndicatorType.Dirty);
+
         // We still throw the error, to make sure that navigation or action execution
         // will not continue after a failed save.
         throw error;
       } finally {
         formikHelpers.setSubmitting(false);
         setIsFormSubmitting(false);
-        hideSaveIndicator();
       }
     },
     [isFormSubmitting, initialData, saveData, setStationError],
@@ -445,6 +446,15 @@ const FormStationHeader: React.FC<
 > = ({ titleProperty, defaultTitle, subtitle, cancelNavigationUrl }) => {
   const { dirty, resetForm, values } = useFormikContext<FormikValues>();
 
+  useEffect(() => {
+    // Set the save indicator to dirty depending on the form state
+    if (dirty) {
+      setSaveIndicator(IndicatorType.Dirty);
+    } else {
+      setSaveIndicator(IndicatorType.Inactive);
+    }
+  }, [dirty]);
+
   const history = useHistory();
 
   const title =

package/src/components/InfoPanel/InfoImage/InfoImage.scss

@@ -9,10 +9,15 @@
 
   place-items: center;
 
+  .image,
   .inlineMenu {
-    position: absolute;
-    bottom: 0;
-    right: 0;
+    grid-row: 1;
+    grid-column: 1;
+    align-self: end;
+  }
+
+  .inlineMenu {
+    justify-self: end;
   }
 
   img {

package/src/components/InfoPanel/InfoImage/InfoImage.tsx

@@ -36,6 +36,7 @@ export const InfoImage: React.FC<InfoImageProps> = ({
       data-test-id="info-image"
     >
       <ImageLoader
+        imageClassName={classes.image}
         imgSrc={imgSrc}
         height={420}
         width={419} /*1px border*/

package/src/components/List/List.tsx

@@ -320,7 +320,9 @@ export const List = <T extends Data>({
         horizontalTextAlign={horizontalTextAlign}
         verticalTextAlign={verticalTextAlign}
         showItemCheckbox={
-          enableSelectAll && selectionMode === ListSelectMode.Multi
+          enableSelectAll &&
+          selectionMode === ListSelectMode.Multi &&
+          listItems.length > 0
         }
         isCheckboxDisabled={listItems.length === 0}
         onCheckboxToggled={headerCheckboxHandler}

package/src/components/List/ListCheckBox/ListCheckBox.scss

@@ -9,8 +9,13 @@
 
   .disabled {
     background-color: var(
-      --page-header-action-context-background-color,
-      $page-header-action-context-background-color
-    ) !important;
+      --actions-disabled-bg-color,
+      $actions-disabled-bg-color
+    );
+
+    // background-color: var(
+    //   --page-header-action-context-background-color,
+    //   $page-header-action-context-background-color
+    // ) !important;
   }
 }

package/src/components/List/ListRow/ListRow.scss

@@ -30,10 +30,6 @@
     }
   }
 
-  &.disabled {
-    cursor: not-allowed;
-  }
-
   .cell {
     white-space: nowrap;
     text-overflow: ellipsis;

package/src/components/Loaders/ImageLoader/ImageLoader.scss

@@ -1,29 +1,35 @@
 @import '../../../styles/common.scss';
 
 .container {
-  @include boxSizing;
-
-  width: 50px;
-  height: 50px;
   display: grid;
-  grid-template-columns: 1fr;
-  grid-template-rows: 1fr;
-  place-items: center;
-}
+  grid: 1fr / 1fr;
 
-.fallback {
-  background-color: var(--fallback-image-bg-color, $fallback-image-bg-color);
-}
+  .loader {
+    @include boxSizing;
 
-.fallBackImage {
-  height: 50px;
-  width: 50px;
-  align-self: center;
-}
+    width: 50px;
+    height: 50px;
+    display: grid;
+    grid: 1fr / 1fr;
+    place-items: center;
+  }
+
+  .imageContainer {
+    display: grid;
+    grid: 1fr / 1fr;
+    place-items: center;
+
+    .fallback {
+      background-color: var(
+        --fallback-image-bg-color,
+        $fallback-image-bg-color
+      );
+    }
 
-.imageContainer {
-  position: relative;
-  display: flex;
-  height: 100%;
-  width: fit-content;
+    .fallBackImage {
+      height: 50px;
+      width: 50px;
+      align-self: center;
+    }
+  }
 }

package/src/components/Loaders/ImageLoader/ImageLoader.spec.tsx

@@ -99,7 +99,7 @@ describe('ImageLoader', () => {
 
     const loader = wrapper.find(ContentLoader);
     const imgDisplay = wrapper.find('img').prop('style')?.display;
-    const fallbackContainer = wrapper.find('.container');
+    const fallbackContainer = wrapper.find('.container').at(1);
 
     expect(loader.exists()).toBe(false);
     expect(imgDisplay).toBe('none');
@@ -116,7 +116,7 @@ describe('ImageLoader', () => {
 
     const loader = wrapper.find(ContentLoader);
     const images = wrapper.find('img');
-    const fallbackContainer = wrapper.find('.container');
+    const fallbackContainer = wrapper.find('.container').at(1);
 
     expect(loader.exists()).toBe(false);
     expect(images.at(0).prop('style')?.display).toBe('none'); // hidden failed image
@@ -198,12 +198,10 @@ describe('ImageLoader', () => {
   it(`loader dimensions defaults to '50px' by '50px'`, () => {
     const wrapper = shallow(<ImageLoader imgSrc="" />);
 
-    const container = wrapper
-      .find('.container')
-      .prop('style') as React.CSSProperties;
+    const loader = wrapper.find('.loader').prop('style') as React.CSSProperties;
 
-    expect(container.height).toBe('50px');
-    expect(container.width).toBe('50px');
+    expect(loader.height).toBe('50px');
+    expect(loader.width).toBe('50px');
   });
 
   it('sets the height and width of the loader', () => {
@@ -213,11 +211,9 @@ describe('ImageLoader', () => {
       <ImageLoader imgSrc="" height={mockHeight} width={mockWidth} />,
     );
 
-    const container = wrapper
-      .find('.container')
-      .prop('style') as React.CSSProperties;
+    const loader = wrapper.find('.loader').prop('style') as React.CSSProperties;
 
-    expect(container.height).toBe(`${mockHeight}px`);
-    expect(container.width).toBe(`${mockWidth}px`);
+    expect(loader.height).toBe(`${mockHeight}px`);
+    expect(loader.width).toBe(`${mockWidth}px`);
   });
 });

package/src/components/Loaders/ImageLoader/ImageLoader.tsx

@@ -40,6 +40,9 @@ export interface ImageLoaderProps {
   onImageClick?: (
     event: React.MouseEvent<HTMLImageElement, MouseEvent>,
   ) => void;
+
+  /** CSS Class name for additional img element styles */
+  imageClassName?: string;
 }
 
 /**
@@ -65,6 +68,7 @@ export const ImageLoader: React.FC<ImageLoaderProps> = ({
   onError = noop,
   onImageClick = noop,
   children,
+  imageClassName = '',
 }) => {
   const actualViewBox = viewBox || `0 0 ${width} ${height}`;
 
@@ -106,9 +110,9 @@ export const ImageLoader: React.FC<ImageLoaderProps> = ({
   }, [imgSrc, onError]);
 
   return (
-    <>
+    <div className={classes.container}>
       {isLoading && (
-        <div className={classes.container} style={customStyles}>
+        <div className={classes.loader} style={customStyles}>
           <ContentLoader
             speed={speed}
             backgroundColor={backgroundColor}
@@ -135,6 +139,7 @@ export const ImageLoader: React.FC<ImageLoaderProps> = ({
             onError={onErrorHandler}
             onClick={onImageClick}
             data-test-id="image-loader-img"
+            className={imageClassName}
           />
           {fallBack &&
             (!fallbackSrc ? (
@@ -153,6 +158,6 @@ export const ImageLoader: React.FC<ImageLoaderProps> = ({
           {!isLoading && !fallBack && children}
         </div>
       )}
-    </>
+    </div>
   );
 };

package/src/components/PageHeader/PageHeaderAction/PageHeaderAction.model.ts

@@ -5,14 +5,6 @@ import { ConfirmAction, DefaultHandler, LinkAction } from '../../models';
 export enum PageHeaderActionType {
   Active,
   Context,
-  /**
-   * @deprecated This value is no longer necessary for navigation type actions in the
-   * `PageHeaderAction` component, and will be removed in the future.
-   * To create a navigation link, use the `path` property instead of the `onClick` handler,
-   * which will automatically generate an anchor element.
-   * @note This deprecation only affects the `Navigation` enum value in the PageHeaderActionType
-   */
-  Navigation,
 }
 
 export type PageHeaderActionProps =
@@ -27,8 +19,6 @@ export interface PageHeaderJsActionProps
   /**
    * Whether the action is an 'Active' or 'Context' type.
    * Changes the background color to the corresponding action type. (default: 'Context')
-   * Type `Navigation` is deprecated and will be removed in the future
-   * define instead of `onClick` handler `path` property to render element with anchor tag
    */
   actionType?: PageHeaderActionType;
 }

package/src/components/PageHeader/PageHeaderAction/PageHeaderAction.scss

@@ -145,7 +145,6 @@
       --actions-disabled-bg-color,
       $actions-disabled-bg-color
     );
-    cursor: not-allowed;
 
     .pageHeaderActionsIcons {
       polygon,

package/src/components/PageHeader/PageHeaderAction/PageHeaderAction.stories.tsx

@@ -25,6 +25,11 @@ const meta: Meta<typeof PageHeaderAction> = {
       },
       options: iconOptions,
     },
+    path: {
+      control: {
+        type: 'text',
+      },
+    },
   },
   decorators: [
     // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types

package/src/components/index.ts

@@ -19,8 +19,8 @@ export * from './List';
 export * from './Loaders';
 export * from './MessageBar';
 export * from './Modal';
-export * from './models';
 export * from './NavigationAwareStation';
 export * from './PageHeader';
 export * from './ProgressBar';
 export * from './Utils';
+export * from './models';