@axinom/mosaic-ui 0.32.0-rc.1 → 0.32.0-rc.10

package/src/components/FormElements/CustomTags/CustomTags.spec.tsx

@@ -47,18 +47,24 @@ describe('CustomTags', () => {
 
   it('should render one plus button', () => {
     const wrapper = mount(<CustomTags name="test-name" />);
-
-    expect(
-      wrapper.find({ className: 'plusButton', type: 'button' }),
-    ).toHaveLength(1);
+    const plusButton = wrapper
+      .find({
+        className: 'plusButton',
+        type: 'button',
+      })
+      .first();
+
+    expect(plusButton).toHaveLength(1);
   });
 
   it('should disable plus button if there is no value in input field', () => {
     const wrapper = mount(<CustomTags name="test-name" />);
-    const plusButton = wrapper.find({
-      className: 'plusButton',
-      type: 'button',
-    });
+    const plusButton = wrapper
+      .find({
+        className: 'plusButton',
+        type: 'button',
+      })
+      .first();
     expect(plusButton.prop('disabled')).toBeTruthy();
   });
 
@@ -149,10 +155,12 @@ describe('CustomTags', () => {
     input.simulate('change');
     wrapper.update();
 
-    const plusButton = wrapper.find({
-      className: 'plusButton',
-      type: 'button',
-    });
+    const plusButton = wrapper
+      .find({
+        className: 'plusButton',
+        type: 'button',
+      })
+      .first();
     plusButton.simulate('click');
 
     tags = getTagsFromDOM(wrapper);
@@ -1108,10 +1116,12 @@ describe('CustomTags', () => {
     input.simulate('change');
     wrapper.update();
 
-    const plusButton = wrapper.find({
-      className: 'plusButton',
-      type: 'button',
-    });
+    const plusButton = wrapper
+      .find({
+        className: 'plusButton',
+        type: 'button',
+      })
+      .first();
     plusButton.simulate('click');
 
     tags = getTagsFromDOM(wrapper);

package/src/components/FormElements/ToggleButton/ToggleButton.tsx

@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import React, { useEffect, useState } from 'react';
 import { noop } from '../../../helpers/utils';
-import { BaseButtonOptions } from '../../Buttons/Button.model';
+import { CommonJsButtonOptions } from '../../Buttons/Button.model';
 import {
   ConfirmationConfig,
   ConfirmationMode,
@@ -12,7 +12,7 @@ import { FormElementContainer } from '../FormElementContainer';
 import classes from './ToggleButton.scss';
 
 export interface ToggleButtonProps
-  extends Omit<BaseButtonOptions, 'buttonContext' | 'onButtonClicked'>,
+  extends Omit<CommonJsButtonOptions, 'buttonContext' | 'onButtonClicked'>,
     BaseFormControl {
   /** Current value. Can be used to control state (default: false) */
   value?: boolean;

package/src/components/List/List.spec.tsx

@@ -92,6 +92,29 @@ describe('List', () => {
     expect(props.columnSizes).toBe('1fr 1fr 1fr');
   });
 
+  it.each([
+    { value: true, visible: true },
+    { value: () => true, visible: true },
+    { value: () => false, visible: false },
+  ])(
+    'does add an extra column if there is an action button',
+    ({ value, visible }) => {
+      const wrapper = mount(
+        <List
+          columns={mockListColumns}
+          data={mockListData}
+          showActionButton={value}
+        />,
+      );
+
+      const rows = wrapper.find(ListRow);
+      const props = rows.first().props();
+
+      expect(props.columnSizes).toBe('1fr 1fr 1fr 50px');
+      expect(props.showActionButton).toBe(visible);
+    },
+  );
+
   it.each`
     data                                                                   | count
     ${[{ row: 'one' }, { row: 'two' }, { row: 'three' }]}                  | ${3}

package/src/components/List/List.stories.tsx

@@ -124,6 +124,14 @@ const meta: Meta<StoryListType> = {
       description: `<b>[Storybook only]</b> The number of rows to display.
       The story will generate the requests amount of items and assign it to the <code>data</code> prop.`,
     },
+    showActionButton: {
+      ...groups.showActionButton,
+      description: `Whether to show the action button in the header row.`,
+      options: [true, false, 'random'],
+      mapping: {
+        random: (): boolean => (Math.random() > 0.5 ? true : false),
+      },
+    },
   },
   args: {
     columns: defaultColumns,

package/src/components/List/List.tsx

@@ -73,7 +73,7 @@ export interface ListProps<T extends Data> {
    * Defines whether an action button will be rendered (default: true)
    * Will not render if selectMode is not 'None'
    */
-  showActionButton?: boolean;
+  showActionButton?: boolean | ((data: T) => boolean);
   /** Defines when the loading of the next page is triggered. The number represents the number of row left, before a load is triggered. (default: 10) */
   loadingTriggerOffset?: number;
   /** Defines how the list data should be sorted */
@@ -245,7 +245,7 @@ export const List = <T extends Data>({
 
   const columnSizes = getColumnsSizeDefinition(
     columns,
-    showActionButton,
+    Boolean(showActionButton),
     selectionMode,
     !!inlineMenuActions,
   );
@@ -345,7 +345,8 @@ export const List = <T extends Data>({
           verticalTextAlign={verticalTextAlign}
           selectionMode={selectionMode}
           showActionButton={
-            showActionButton && selectionMode === ListSelectMode.None
+            selectionMode === ListSelectMode.None &&
+            getActionButtonVisibility(item.data, showActionButton)
           }
           showCheckMark={selectionMode === ListSelectMode.Single}
           showItemCheckbox={selectionMode === ListSelectMode.Multi}
@@ -383,3 +384,14 @@ export const List = <T extends Data>({
     </div>
   );
 };
+
+function getActionButtonVisibility<T>(
+  data: T,
+  showActionButton: boolean | ((item: T) => boolean),
+): boolean {
+  if (typeof showActionButton === 'boolean') {
+    return showActionButton;
+  }
+
+  return showActionButton(data);
+}

package/src/components/List/ListRow/ListRow.tsx

@@ -271,19 +271,24 @@ export const ListRow = <T extends Data>({
               />
             )}
 
-            {showActionButton && (
-              <Button
-                icon={IconName.ChevronRight}
-                height={actionSize}
-                width={actionSize}
-                onButtonClicked={() => {
-                  if (typeof onItemClicked !== 'function') {
-                    history.push(onItemClicked);
-                  }
-                }}
-                dataTestId="list-entry-action"
-              />
-            )}
+            {showActionButton &&
+              (typeof onItemClicked !== 'function' ? (
+                <Button
+                  icon={IconName.ChevronRight}
+                  height={actionSize}
+                  width={actionSize}
+                  path={onItemClicked}
+                  dataTestId="list-entry-action"
+                />
+              ) : (
+                <Button
+                  icon={IconName.ChevronRight}
+                  height={actionSize}
+                  width={actionSize}
+                  onButtonClicked={onItemClicked as () => void}
+                  dataTestId="list-entry-action"
+                />
+              ))}
           </div>
         )}
 

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

@@ -0,0 +1,23 @@
+import { PageHeaderActionProps } from './PageHeaderAction/PageHeaderAction.model';
+
+export interface PageHeaderProps {
+  /** Title shown in page header */
+  title?: string;
+  /** Subtitle shown in page header */
+  subtitle?: string;
+  /** Array of actions to be rendered. (default: []) */
+  actions?: PageHeaderActionProps[];
+  /** Array of Bulk Actions to be rendered. If populated, Bulk Actions will become available. (default: []) */
+  bulkActions?: PageHeaderActionProps[];
+  /** Whether or bulk actions are shown by default. (default: false) */
+  openBulkActionsOnStart?: boolean;
+  /** Whether or not bulk actions are disabled (default: false)*/
+  bulkActionsDisabled?: boolean;
+  /**
+   * Callback to emit when Bulk Actions is toggled
+   * The expanded state is supplied as an argument
+   */
+  onBulkActionsToggled?: (expanded: boolean) => void;
+  /** CSS Class name for additional styles */
+  className?: string;
+}

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

@@ -5,7 +5,8 @@ import { PageHeader } from './PageHeader';
 import {
   PageHeaderActionProps,
   PageHeaderActionType,
-} from './PageHeaderAction/PageHeaderAction';
+} from './PageHeaderAction';
+import {} from './PageHeaderAction/PageHeaderAction';
 
 const headerActions: PageHeaderActionProps[] = [
   {

package/src/components/PageHeader/PageHeader.tsx

@@ -2,35 +2,11 @@ import clsx from 'clsx';
 import React, { useEffect, useState } from 'react';
 import { noop } from '../../helpers/utils';
 import { useWindowSize } from '../../hooks/useWindowSize/useWindowSize';
+import { PageHeaderProps } from './PageHeader.model';
 import classes from './PageHeader.scss';
-import {
-  PageHeaderAction,
-  PageHeaderActionProps,
-} from './PageHeaderAction/PageHeaderAction';
+import { PageHeaderAction } from './PageHeaderAction/PageHeaderAction';
 import { PageHeaderBulkActions } from './PageHeaderBulkActions/PageHeaderBulkActions';
 
-export interface PageHeaderProps {
-  /** Title shown in page header */
-  title?: string;
-  /** Subtitle shown in page header */
-  subtitle?: string;
-  /** Array of actions to be rendered. (default: []) */
-  actions?: PageHeaderActionProps[];
-  /** Array of Bulk Actions to be rendered. If populated, Bulk Actions will become available. (default: []) */
-  bulkActions?: PageHeaderActionProps[];
-  /** Whether or bulk actions are shown by default. (default: false) */
-  openBulkActionsOnStart?: boolean;
-  /** Whether or not bulk actions are disabled (default: false)*/
-  bulkActionsDisabled?: boolean;
-  /**
-   * Callback to emit when Bulk Actions is toggled
-   * The expanded state is supplied as an argument
-   */
-  onBulkActionsToggled?: (expanded: boolean) => void;
-  /** CSS Class name for additional styles */
-  className?: string;
-}
-
 /**
  * Primary header for stations. Accepts a title, subtitle, actions, and bulk actions.
  * @example

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

@@ -0,0 +1,60 @@
+import { Not } from '../../../types';
+import { IconName } from '../../Icons';
+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 =
+  | PageHeaderJsActionProps
+  | PageHeaderNavigationActionProps;
+
+export interface PageHeaderJsActionProps
+  extends BaseActionOptions,
+    HandledAction,
+    ConfirmAction,
+    Not<LinkAction> {
+  /**
+   * 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;
+}
+
+export interface PageHeaderNavigationActionProps
+  extends BaseActionOptions,
+    LinkAction,
+    Not<ConfirmAction>,
+    Not<HandledAction> {}
+
+interface HandledAction {
+  /**
+   * Callback to emit when a user clicks on the component
+   */
+  onClick: DefaultHandler;
+}
+
+interface BaseActionOptions {
+  /** The label of the action. */
+  label: string;
+  /** Optional built in icon. This prop also accepts an img src. */
+  icon?: IconName | string;
+  /** Optional image alt attribute. */
+  imgAlt?: string;
+  /** Whether the action is disabled. If set to true, disallows interactions. (default: undefined) */
+  disabled?: boolean;
+  /** Optional class */
+  className?: string;
+}