@axinom/mosaic-ui 0.32.0-rc.5 → 0.32.0-rc.6

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.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,11 +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,

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';
@@ -11,12 +12,12 @@ export interface NavigationExplorerProps<T extends Data>
     'selectionMode' | 'onBulkActionsToggled' | 'onItemClicked'
   > {
   /**
-   * - If a `string` is provided, it will be treated as a path to the station to
+   * - 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) | string;
+  onCreateAction?: (() => void) | LocationDescriptor;
 
   /**
    * Function that calculates the URL to navigate to when a row of data is clicked.
@@ -55,7 +56,7 @@ export const NavigationExplorer = React.forwardRef(function NavigationExplorer<
       ref={ref}
       actions={[
         ...actions,
-        ...(onCreateAction && typeof onCreateAction === 'string'
+        ...(onCreateAction && typeof onCreateAction !== 'function'
           ? [
               {
                 label: 'New',

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;