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

package/src/components/Buttons/TextButton/TextButton.spec.tsx

@@ -1,135 +1,246 @@
 import { mount, shallow } from 'enzyme';
 import React from 'react';
+import { Link, BrowserRouter as Router } from 'react-router-dom';
 import { ButtonContext } from '../Button.model';
 import { TextButton } from './TextButton';
 
-describe('Button', () => {
-  it('renders the component without crashing', () => {
-    const wrapper = shallow(<TextButton />);
+describe('TextButton', () => {
+  describe('TextContextButton', () => {
+    it('renders the component without crashing', () => {
+      const wrapper = shallow(<TextButton />);
 
-    expect(wrapper).toBeTruthy();
-  });
+      expect(wrapper).toBeTruthy();
+    });
 
-  it('raises the onButtonClicked event', () => {
-    const spy = jest.fn();
-    const wrapper = shallow(<TextButton onButtonClicked={spy} />);
+    it('raises the onButtonClicked event', () => {
+      const spy = jest.fn();
+      const wrapper = mount(<TextButton onButtonClicked={spy} />);
 
-    wrapper.simulate('click');
+      wrapper.simulate('click');
 
-    expect(spy).toHaveBeenCalledTimes(1);
-  });
+      expect(spy).toHaveBeenCalledTimes(1);
+    });
 
-  it('creates a class based off of the className prop', () => {
-    const mockClassName = 'test-class';
-    const wrapper = shallow(<TextButton className={mockClassName} />);
+    it('creates a class based off of the className prop', () => {
+      const mockClassName = 'test-class';
+      const wrapper = mount(<TextButton className={mockClassName} />);
 
-    const button = wrapper.find('button');
+      const button = wrapper.find('button');
 
-    expect(button.hasClass(mockClassName)).toBe(true);
-  });
+      expect(button.hasClass(mockClassName)).toBe(true);
+    });
 
-  it(`button 'type' must be 'button' by default`, () => {
-    const wrapper = shallow(<TextButton />);
+    it(`button 'type' must be 'button' by default`, () => {
+      const wrapper = mount(<TextButton />);
 
-    const buttonType = wrapper.find('button').prop('type');
+      const buttonType = wrapper.find('button').prop('type');
 
-    expect(buttonType).toBe('button');
-  });
+      expect(buttonType).toBe('button');
+    });
 
-  it('accepts type html attribute and width/height styles', () => {
-    const mockType = 'submit';
-    const mockHeight = '75px';
-    const mockWidth = '80px';
+    it('accepts type html attribute and width/height styles', () => {
+      const mockType = 'submit';
+      const mockHeight = '75px';
+      const mockWidth = '80px';
 
-    const wrapper = shallow(<TextButton />);
+      const wrapper = mount(<TextButton />);
 
-    let buttonType = wrapper.find('button').prop('type');
-    let buttonStyles = wrapper
-      .find('button')
-      .prop('style') as React.CSSProperties;
+      let buttonType = wrapper.find('button').prop('type');
+      let buttonStyles = wrapper
+        .find('button')
+        .prop('style') as React.CSSProperties;
 
-    expect(buttonType).toBe('button');
-    expect(buttonStyles.height).toBeUndefined();
-    expect(buttonStyles.width).toBeUndefined();
+      expect(buttonType).toBe('button');
+      expect(buttonStyles.height).toBeUndefined();
+      expect(buttonStyles.width).toBeUndefined();
 
-    wrapper.setProps({ type: mockType, height: mockHeight, width: mockWidth });
-    wrapper.update();
+      wrapper.setProps({
+        type: mockType,
+        height: mockHeight,
+        width: mockWidth,
+      });
+      wrapper.update();
 
-    buttonType = wrapper.find('button').prop('type');
-    buttonStyles = wrapper.find('button').prop('style') as React.CSSProperties;
+      buttonType = wrapper.find('button').prop('type');
+      buttonStyles = wrapper
+        .find('button')
+        .prop('style') as React.CSSProperties;
 
-    expect(buttonType).toBe(mockType);
-    expect(buttonStyles.height).toBe(mockHeight);
-    expect(buttonStyles.width).toBe(mockWidth);
-  });
+      expect(buttonType).toBe(mockType);
+      expect(buttonStyles.height).toBe(mockHeight);
+      expect(buttonStyles.width).toBe(mockWidth);
+    });
 
-  it('allows the button to be enabled by default', () => {
-    const spy = jest.fn();
-    const wrapper = mount(<TextButton onButtonClicked={spy} />);
+    it('allows the button to be enabled by default', () => {
+      const spy = jest.fn();
+      const wrapper = mount(<TextButton onButtonClicked={spy} />);
 
-    const button = wrapper.find('button');
+      const button = wrapper.find('button');
 
-    wrapper.simulate('click');
+      wrapper.simulate('click');
 
-    expect(button.prop('disabled')).toBe(false);
-    expect(spy).toHaveBeenCalledTimes(1);
-  });
+      expect(button.prop('disabled')).toBe(false);
+      expect(spy).toHaveBeenCalledTimes(1);
+    });
 
-  it('allows button to be disabled', () => {
-    const spy = jest.fn();
-    const wrapper = mount(<TextButton disabled={true} onButtonClicked={spy} />);
+    it('allows button to be disabled', () => {
+      const spy = jest.fn();
+      const wrapper = mount(
+        <TextButton disabled={true} onButtonClicked={spy} />,
+      );
 
-    const button = wrapper.find('button');
+      const button = wrapper.find('button');
 
-    wrapper.simulate('click');
+      wrapper.simulate('click');
 
-    expect(button.prop('disabled')).toBe(true);
-    expect(spy).not.toHaveBeenCalled();
-  });
+      expect(button.prop('disabled')).toBe(true);
+      expect(spy).not.toHaveBeenCalled();
+    });
 
-  it('default should have a context class', () => {
-    const wrapper = shallow(<TextButton />);
+    it('default should have a context class', () => {
+      const wrapper = mount(<TextButton />);
 
-    const button = wrapper.find('button');
+      const button = wrapper.find('button');
 
-    expect(button.hasClass('context')).toBe(true);
-  });
+      expect(button.hasClass('context')).toBe(true);
+    });
 
-  it('context button type should have a context class', () => {
-    const wrapper = shallow(
-      <TextButton buttonContext={ButtonContext.Context} />,
-    );
+    it('context button type should have a context class', () => {
+      const wrapper = mount(
+        <TextButton buttonContext={ButtonContext.Context} />,
+      );
 
-    const button = wrapper.find('button');
+      const button = wrapper.find('button');
 
-    expect(button.hasClass('context')).toBe(true);
-  });
+      expect(button.hasClass('context')).toBe(true);
+    });
 
-  it('active button type should have a active class', () => {
-    const wrapper = shallow(
-      <TextButton buttonContext={ButtonContext.Active} />,
-    );
+    it('active button type should have a active class', () => {
+      const wrapper = mount(
+        <TextButton buttonContext={ButtonContext.Active} />,
+      );
 
-    const button = wrapper.find('button');
+      const button = wrapper.find('button');
 
-    expect(button.hasClass('active')).toBe(true);
-  });
+      expect(button.hasClass('active')).toBe(true);
+    });
 
-  it(`renders value from 'text' prop`, () => {
-    const mockText = 'mock-text';
+    it(`renders value from 'text' prop`, () => {
+      const mockText = 'mock-text';
 
-    const wrapper = shallow(<TextButton text={mockText} />);
+      const wrapper = mount(<TextButton text={mockText} />);
 
-    const button = wrapper.find('button');
+      const button = wrapper.find('button');
 
-    expect(button.text()).toBe(mockText);
-  });
+      expect(button.text()).toBe(mockText);
+    });
+
+    it(`defaults to an empty string is 'text' prop is not set`, () => {
+      const wrapper = mount(<TextButton />);
 
-  it(`defaults to an empty string is 'text' prop is not set`, () => {
-    const wrapper = shallow(<TextButton />);
+      const button = wrapper.find('button');
 
-    const button = wrapper.find('button');
+      expect(button.text()).toBe('');
+    });
+  });
 
-    expect(button.text()).toBe('');
+  describe('TextNavigationButton', () => {
+    it('renders the component without crashing', () => {
+      const wrapper = shallow(<TextButton path={'/'} />);
+      expect(wrapper).toBeTruthy();
+    });
+
+    it('renders as a navigation button when path prop is defined', () => {
+      const mockPath = '/home';
+      const wrapper = mount(
+        <Router>
+          <TextButton path={mockPath} />
+        </Router>,
+      );
+      const link = wrapper.find(Link);
+      expect(link).toHaveLength(1);
+      expect(link.prop('to')).toBe(mockPath);
+    });
+
+    it('does not open link in new tab by default', () => {
+      const mockPath = '/home';
+      const wrapper = mount(
+        <Router>
+          <TextButton path={mockPath} />
+        </Router>,
+      );
+      const link = wrapper.find(Link);
+      expect(link.prop('target')).toBeUndefined();
+    });
+
+    it('opens link in new tab when openInNewTab prop set to true', () => {
+      const mockPath = '/home';
+      const wrapper = mount(
+        <Router>
+          <TextButton path={mockPath} openInNewTab={true} />
+        </Router>,
+      );
+      const link = wrapper.find(Link);
+      expect(link.prop('target')).toBe('_blank');
+    });
+
+    it('creates a class based on the className prop', () => {
+      const mockClassName = 'test-class';
+      const wrapper = mount(
+        <Router>
+          <TextButton path={'/test'} className={mockClassName} />,
+        </Router>,
+      );
+      const link = wrapper.find(Link);
+      expect(link.hasClass(mockClassName)).toBe(true);
+    });
+
+    it('accepts width and height styles', () => {
+      const mockHeight = '75px';
+      const mockWidth = '80px';
+      const wrapper = mount(
+        <Router>
+          <TextButton path={'/test'} width={mockWidth} height={mockHeight} />
+        </Router>,
+      );
+      const linkStyles = wrapper
+        .find('Link')
+        .prop('style') as React.CSSProperties;
+
+      expect(linkStyles.height).toBe(mockHeight);
+      expect(linkStyles.width).toBe(mockWidth);
+    });
+
+    it('allows the link to be enabled by default', () => {
+      const wrapper = mount(
+        <Router>
+          <TextButton path={'/test'} />
+        </Router>,
+      );
+
+      const link = wrapper.find('Link');
+
+      expect(link.hasClass('disabled')).toBe(false);
+    });
+
+    it('allows the button to be disabled', () => {
+      const wrapper = mount(
+        <Router>
+          <TextButton path={'/test'} disabled={true} />
+        </Router>,
+      );
+      const link = wrapper.find('Link');
+      expect(link.hasClass('disabled')).toBe(true);
+    });
+
+    it('adds `navigation` class for link buttons', () => {
+      const wrapper = mount(
+        <Router>
+          <TextButton path={'/test'} />
+        </Router>,
+      );
+      const link = wrapper.find(Link);
+      expect(link.hasClass('navigation')).toBe(true);
+    });
   });
 });

package/src/components/Buttons/TextButton/TextButton.stories.tsx

@@ -1,4 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+import { MemoryRouter } from 'react-router';
 import { enumToObj } from '../../../helpers/storybook';
 import { ButtonContext } from '../Button.model';
 import { TextButton } from './TextButton';
@@ -21,7 +23,25 @@ const meta: Meta<typeof TextButton> = {
     onBlur: {
       control: false,
     },
+    width: {
+      control: {
+        type: 'number',
+      },
+    },
+    height: {
+      control: {
+        type: 'number',
+      },
+    },
   },
+  decorators: [
+    // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+    (Story) => (
+      <MemoryRouter>
+        <Story />
+      </MemoryRouter>
+    ),
+  ],
 };
 
 export default meta;

package/src/components/Buttons/TextButton/TextButton.tsx

@@ -1,24 +1,49 @@
 import clsx from 'clsx';
 import React from 'react';
+import { Link } from 'react-router-dom';
 import { noop } from '../../../helpers/utils';
-import { BaseButtonOptions, ButtonContext } from '../Button.model';
+import { ButtonContext } from '../Button.model';
+import {
+  TextButtonProps,
+  TextContextButtonProps,
+  TextNavigationButtonProps,
+} from './TextButton.model';
 import classes from './TextButton.scss';
 
-export interface TextButtonProps extends BaseButtonOptions {
-  /** Button's height (default: '30px') */
-  height?: string | number;
-  /** Button's width (default: undefined) */
-  width?: string | number;
-  /** Button text */
-  text?: string;
-}
-
 /**
  * Button which can render a text string.
  * @example
+ *   // Rendered as button
  *   <TextButton type="button" text="Click me!" />
+ *
+ *   // Rendered as link
+ *   <TextButton path="/home" text="Click me!" />
  */
 export const TextButton: React.FC<TextButtonProps> = ({
+  className,
+  dataTestId = undefined,
+  disabled = false,
+  height,
+  path,
+  text = '',
+  width,
+  openInNewTab,
+  ...rest
+}) => {
+  const commonProps = { className, dataTestId, height, text, width, disabled };
+
+  return path ? (
+    <TextNavigationButton
+      {...commonProps}
+      path={path}
+      openInNewTab={openInNewTab}
+    />
+  ) : (
+    <TextContextButton {...commonProps} {...rest} />
+  );
+};
+
+const TextContextButton: React.FC<TextContextButtonProps> = ({
   type = 'button',
   height,
   width,
@@ -28,28 +53,23 @@ export const TextButton: React.FC<TextButtonProps> = ({
   className,
   dataTestId = undefined,
   onButtonClicked = noop,
-}: TextButtonProps) => {
-  const customStyles = {
-    height: height,
-    width: width,
-  } as React.CSSProperties;
-
+}) => {
   return (
     <button
       className={clsx(
         classes.container,
-        { [classes.navigation]: buttonContext === ButtonContext.Navigation },
         {
           [classes.context]: buttonContext === ButtonContext.Context,
-        },
-        {
           [classes.active]: buttonContext === ButtonContext.Active,
         },
         'text-button-container',
         className,
       )}
       type={type}
-      style={customStyles}
+      style={{
+        height,
+        width,
+      }}
       onClick={onButtonClicked}
       disabled={disabled}
       data-test-id={dataTestId ?? 'text-button'}
@@ -58,3 +78,37 @@ export const TextButton: React.FC<TextButtonProps> = ({
     </button>
   );
 };
+
+const TextNavigationButton: React.FC<TextNavigationButtonProps> = ({
+  height,
+  width,
+  disabled = false,
+  text = '',
+  className,
+  dataTestId = undefined,
+  path,
+  openInNewTab = false,
+}) => {
+  return (
+    <Link
+      to={path}
+      className={clsx(
+        classes.container,
+        classes.navigation,
+        {
+          [classes.disabled]: disabled,
+        },
+        'text-button-container',
+        className,
+      )}
+      style={{
+        height,
+        width,
+      }}
+      data-test-id={dataTestId ?? 'text-button'}
+      target={openInNewTab ? '_blank' : undefined}
+    >
+      {text}
+    </Link>
+  );
+};

package/src/components/Buttons/TextButton/index.ts

@@ -0,0 +1,2 @@
+export { TextButton } from './TextButton';
+export { TextButtonProps } from './TextButton.model';

package/src/components/Buttons/index.ts

@@ -1,7 +1,4 @@
+export * from './Button';
 export { ButtonContext } from './Button.model';
-export { Button, ButtonProps } from './Button/Button';
-export {
-  CompositeButton,
-  CompositeButtonProps,
-} from './CompositeButton/CompositeButton';
-export { TextButton, TextButtonProps } from './TextButton/TextButton';
+export * from './CompositeButton';
+export * from './TextButton';

package/src/components/Explorer/Explorer.model.ts

@@ -2,7 +2,7 @@ import { Data } from '../../types/data';
 import { FilterValues } from '../Filters';
 import { SortData } from '../List';
 import { ErrorType } from '../models';
-import { PageHeaderActionProps } from '../PageHeader/PageHeaderAction/PageHeaderAction';
+import { PageHeaderJsActionProps } from '../PageHeader/PageHeaderAction/PageHeaderAction.model';
 
 /**
  * Item selection can have two modes:
@@ -24,7 +24,7 @@ interface SelectAllSelection<T extends Data> {
 }
 
 export interface ExplorerBulkAction<T extends Data>
-  extends Omit<PageHeaderActionProps, 'onClick'> {
+  extends Omit<PageHeaderJsActionProps, 'onClick'> {
   /**
    * Callback to emit when a user clicks on the component
    * @param arg ItemSelection details of the bulk action

package/src/components/Explorer/Explorer.tsx

@@ -1,8 +1,8 @@
 import clsx from 'clsx';
 import { LocationDescriptor } from 'history';
 import {
-  default as React,
   ForwardedRef,
+  default as React,
   useCallback,
   useEffect,
   useState,
@@ -22,9 +22,11 @@ import {
   ListSelectMode,
   SortData,
 } from '../List';
-import { ErrorType } from '../models';
 import { PageHeader, PageHeaderActionProps } from '../PageHeader';
+import { isPageHeaderNavigationAction } from '../PageHeader/PageHeaderAction/PageHeaderAction';
+import { PageHeaderJsActionProps } from '../PageHeader/PageHeaderAction/PageHeaderAction.model';
 import { getState, storeState } from '../Utils/State/GlobalState';
+import { ErrorType } from '../models';
 import {
   ExplorerBulkAction,
   ExplorerDataProvider,
@@ -141,6 +143,7 @@ export interface ExplorerProps<T extends Data> {
    * The expanded state is supplied as an argument
    */
   onBulkActionsToggled?: (expanded: boolean) => void;
+
   /** Provide inline actions which are available through '...' context menu */
   inlineMenuActions?: (data: T) => ActionData[];
 }
@@ -339,23 +342,25 @@ export const Explorer = React.forwardRef(function Explorer<T extends Data>(
 
   const pageHeaderActionsHandler = (): PageHeaderActionProps[] => {
     return (actions ?? []).map((action) => {
-      return {
-        ...action,
-        onClick: async () => {
-          try {
-            const result = await action.onClick();
-            if (result) {
-              setStationMessage(errMsg(result));
-            }
-          } catch (error) {
-            setStationMessage(errMsg(error, errAction));
-          }
-        },
-      };
+      return isPageHeaderNavigationAction(action)
+        ? action
+        : {
+            ...action,
+            onClick: async () => {
+              try {
+                const result = await action.onClick();
+                if (result) {
+                  setStationMessage(errMsg(result));
+                }
+              } catch (error) {
+                setStationMessage(errMsg(error, errAction));
+              }
+            },
+          };
     });
   };
 
-  const bulkActionsHandler = (): PageHeaderActionProps[] => {
+  const bulkActionsHandler = (): PageHeaderJsActionProps[] => {
     return (bulkActions ?? []).map((action) => {
       return {
         ...action,

package/src/components/Explorer/NavigationExplorer/NavigationExplorer.tsx

@@ -1,3 +1,4 @@
+import { LocationDescriptor } from 'history';
 import React, { ForwardedRef } from 'react';
 import { Data } from '../../../types/data';
 import { IconName } from '../../Icons';
@@ -10,10 +11,19 @@ export interface NavigationExplorerProps<T extends Data>
     ExplorerProps<T>,
     'selectionMode' | 'onBulkActionsToggled' | 'onItemClicked'
   > {
-  /** Raised when the create action button is clicked */
-  onCreateAction?: () => void;
+  /**
+   * - If a `LocationDescriptor` is provided, it will be treated as a path to the station to
+   * navigate to, and a link will be generated.
+   * - If a `function` is provided, it will be called when the create action is
+   * clicked, and a button will be generated.
+   */
+  onCreateAction?: (() => void) | LocationDescriptor;
 
-  /** Url to navigate to when the row of data is clicked. Navigation will not occur if bulk actions is open. */
+  /**
+   * Function that calculates the URL to navigate to when a row of data is clicked.
+   *  - The function should take the item data as input and return the URL string.
+   *  - Navigation will not occur if bulk actions are open.
+   */
   calculateNavigateUrl?: (item: T) => string;
 }
 
@@ -29,30 +39,41 @@ export interface NavigationExplorerProps<T extends Data>
  *  calculateNavigateUrl={(rowData => `/details/${rowData.id}`)}
  * />
  */
-
 export const NavigationExplorer = React.forwardRef(function NavigationExplorer<
   T extends Data,
 >(
-  props: NavigationExplorerProps<T>,
+  {
+    onCreateAction,
+    calculateNavigateUrl,
+    actions = [],
+    ...rest
+  }: NavigationExplorerProps<T>,
   ref: ForwardedRef<ExplorerDataProviderConnection<T>>,
 ): JSX.Element {
-  const { onCreateAction, calculateNavigateUrl, actions = [], ...rest } = props;
-
   return (
     <Explorer<T>
-      ref={ref}
       {...rest}
+      ref={ref}
       actions={[
-        ...(onCreateAction
+        ...actions,
+        ...(onCreateAction && typeof onCreateAction !== 'function'
+          ? [
+              {
+                label: 'New',
+                icon: IconName.Plus,
+                path: onCreateAction,
+              },
+            ]
+          : []),
+        ...(onCreateAction && typeof onCreateAction === 'function'
           ? [
-              ...actions,
               {
                 label: 'New',
                 icon: IconName.Plus,
                 onClick: onCreateAction,
               },
             ]
-          : [...actions]),
+          : []),
       ]}
       selectionMode={ListSelectMode.None}
       generateItemLink={calculateNavigateUrl}