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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axinom/mosaic-ui",
-  "version": "0.32.0-rc.5",
+  "version": "0.32.0-rc.6",
   "description": "UI components for building Axinom Mosaic applications",
   "author": "Axinom",
   "license": "PROPRIETARY",
@@ -32,7 +32,7 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
-    "@axinom/mosaic-core": "^0.4.5-rc.5",
+    "@axinom/mosaic-core": "^0.4.5-rc.6",
     "@faker-js/faker": "^7.4.0",
     "@popperjs/core": "^2.9.2",
     "clsx": "^1.1.0",
@@ -102,5 +102,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "5be74428ddc9c609269dbc443f3698d10d32a285"
+  "gitHead": "74d5beb1f52524eeb99240de2b429e0815f37075"
 }

package/src/components/Actions/Action/Action.spec.tsx

@@ -62,6 +62,20 @@ describe('Action', () => {
       expect(container.hasClass('hasIcon')).toBe(true);
     });
 
+    it(`displays a 'External' as default icon when "openInNewTab: true"`, () => {
+      const wrapper = mount(
+        <Router>
+          <Action action={{ label: 'test', path: '/', openInNewTab: true }} />
+        </Router>,
+      );
+
+      const icon = wrapper.find(Icons);
+      const container = wrapper.find('.container').hostNodes();
+
+      expect(icon.prop('icon')).toBe(IconName.External);
+      expect(container.hasClass('hasIcon')).toBe(true);
+    });
+
     it(`disables link when property isDisabled is 'true'`, () => {
       const wrapper = mount(
         <Router>

package/src/components/Actions/Action/Action.tsx

@@ -183,10 +183,12 @@ const NavigationAction: React.FC<{ action: NavigationActionData }> = ({
 }) => {
   const {
     path,
+    openInNewTab = false,
     label,
-    icon = IconName.ChevronRight,
+    icon,
     isDisabled = false,
   } = action;
+  const defaultIcon = openInNewTab ? IconName.External : IconName.ChevronRight;
   return (
     <Link
       to={path}
@@ -200,9 +202,10 @@ const NavigationAction: React.FC<{ action: NavigationActionData }> = ({
         'action-container',
       )}
       data-test-id="action"
+      target={openInNewTab ? '_blank' : undefined}
     >
       <span data-test-id="label">{label}</span>
-      <Icons icon={icon} className={classes.icon} />
+      <Icons icon={icon ? icon : defaultIcon} className={classes.icon} />
     </Link>
   );
 };

package/src/components/Buttons/Button/Button.model.ts

@@ -0,0 +1,30 @@
+import { IconName } from '../../Icons';
+import {
+  ButtonIconOptions,
+  CommonJsButtonOptions,
+  CommonNavigationButtonOptions,
+} from '../Button.model';
+
+export type ButtonProps =
+  | (NavigationButtonProps | ContextButtonProps) & {
+      /** Optional button's height (default: 50px) */
+      width?: string | number;
+      /** Optional button's height (default: 50px) */
+      height?: string | number;
+      /** Optional icon (default: IconName.ChevronRight) */
+      icon?: IconName;
+    };
+
+/**
+ * Button options for icon buttons with navigation
+ */
+export interface NavigationButtonProps
+  extends CommonNavigationButtonOptions,
+    Pick<ButtonIconOptions, 'icon'> {}
+
+/**
+ * Button options for icon buttons with JS handlers
+ */
+export interface ContextButtonProps
+  extends CommonJsButtonOptions,
+    Pick<ButtonIconOptions, 'icon'> {}

package/src/components/Buttons/Button/Button.scss

@@ -24,6 +24,7 @@
 
   &.navigation {
     background-color: $light-blue;
+    box-sizing: border-box;
 
     svg * {
       stroke: white;
@@ -41,8 +42,9 @@
       }
     }
 
-    &:disabled {
+    &.disabled {
       background-color: $gray;
+      pointer-events: none;
 
       svg * {
         opacity: 0.5;

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

@@ -1,130 +1,301 @@
-import { mount, shallow } from 'enzyme';
+import { mount } from 'enzyme';
 import React from 'react';
+import { Link, BrowserRouter as Router } from 'react-router-dom';
 import { IconName, Icons } from '../../Icons';
 import { ButtonContext } from '../Button.model';
 import { Button } from './Button';
 
-describe('Button', () => {
-  it('renders the component without crashing', () => {
-    const wrapper = shallow(<Button />);
+const navigationButtonProps = {
+  path: '/test',
+};
 
-    expect(wrapper).toBeTruthy();
-  });
+describe('Button (with icon)', () => {
+  describe('ContextButtonElement', () => {
+    it('renders the component without crashing', () => {
+      const wrapper = mount(<Button />);
 
-  it('raises the onButtonClicked event', () => {
-    const spy = jest.fn();
-    const wrapper = shallow(<Button onButtonClicked={spy} />);
+      expect(wrapper).toBeTruthy();
+    });
 
-    wrapper.simulate('click');
+    it('raises the onButtonClicked event', () => {
+      const spy = jest.fn();
+      const wrapper = mount(<Button onButtonClicked={spy} />);
 
-    expect(spy).toHaveBeenCalledTimes(1);
-  });
+      wrapper.simulate('click');
 
-  it('creates a class based off of the className prop', () => {
-    const mockClassName = 'test-class';
-    const wrapper = shallow(<Button className={mockClassName} />);
+      expect(spy).toHaveBeenCalledTimes(1);
+    });
 
-    const button = wrapper.find('button');
+    it('creates a class based off of the className prop', () => {
+      const mockClassName = 'test-class';
+      const wrapper = mount(<Button className={mockClassName} />);
 
-    expect(button.hasClass(mockClassName)).toBe(true);
-  });
+      const button = wrapper.find('button');
 
-  it(`button 'type' must be 'button' by default`, () => {
-    const wrapper = shallow(<Button />);
+      expect(button.hasClass(mockClassName)).toBe(true);
+    });
 
-    const buttonType = wrapper.find('button').prop('type');
+    it(`button 'type' must be 'button' by default`, () => {
+      const wrapper = mount(<Button />);
 
-    expect(buttonType).toBe('button');
-  });
+      const buttonType = wrapper.find('button').prop('type');
 
-  it('accepts type html attribute and width/height styles', () => {
-    const mockType = 'submit';
-    const mockHeight = '75px';
-    const mockWidth = '80px';
+      expect(buttonType).toBe('button');
+    });
 
-    const wrapper = shallow(<Button />);
+    it('accepts type html attribute and width/height styles', () => {
+      const mockType = 'submit';
+      const mockHeight = '75px';
+      const mockWidth = '80px';
 
-    let buttonType = wrapper.find('button').prop('type');
-    let buttonStyles = wrapper
-      .find('button')
-      .prop('style') as React.CSSProperties;
+      const wrapper = mount(<Button />);
 
-    expect(buttonType).toBe('button');
-    expect(buttonStyles.height).toBeUndefined();
-    expect(buttonStyles.width).toBeUndefined();
+      let buttonType = wrapper.find('button').prop('type');
+      let buttonStyles = wrapper
+        .find('button')
+        .prop('style') as React.CSSProperties;
 
-    wrapper.setProps({ type: mockType, height: mockHeight, width: mockWidth });
-    wrapper.update();
+      expect(buttonType).toBe('button');
+      expect(buttonStyles.height).toBeUndefined();
+      expect(buttonStyles.width).toBeUndefined();
 
-    buttonType = wrapper.find('button').prop('type');
-    buttonStyles = wrapper.find('button').prop('style') as React.CSSProperties;
+      wrapper.setProps({
+        type: mockType,
+        height: mockHeight,
+        width: mockWidth,
+      });
+      wrapper.update();
 
-    expect(buttonType).toBe(mockType);
-    expect(buttonStyles.height).toBe(mockHeight);
-    expect(buttonStyles.width).toBe(mockWidth);
-  });
+      buttonType = wrapper.find('button').prop('type');
+      buttonStyles = wrapper
+        .find('button')
+        .prop('style') as React.CSSProperties;
 
-  it('allows the button to be enabled by default', () => {
-    const spy = jest.fn();
-    const wrapper = mount(<Button onButtonClicked={spy} />);
+      expect(buttonType).toBe(mockType);
+      expect(buttonStyles.height).toBe(mockHeight);
+      expect(buttonStyles.width).toBe(mockWidth);
+    });
 
-    const button = wrapper.find('button');
+    it('allows the button to be enabled by default', () => {
+      const spy = jest.fn();
+      const wrapper = mount(<Button onButtonClicked={spy} />);
 
-    wrapper.simulate('click');
+      const button = wrapper.find('button');
 
-    expect(button.prop('disabled')).toBe(false);
-    expect(spy).toHaveBeenCalledTimes(1);
-  });
+      wrapper.simulate('click');
 
-  it('allows button to be disabled', () => {
-    const spy = jest.fn();
-    const wrapper = mount(<Button disabled={true} onButtonClicked={spy} />);
+      expect(button.prop('disabled')).toBe(false);
+      expect(spy).toHaveBeenCalledTimes(1);
+    });
 
-    const button = wrapper.find('button');
+    it('allows button to be disabled', () => {
+      const spy = jest.fn();
+      const wrapper = mount(<Button disabled={true} onButtonClicked={spy} />);
 
-    wrapper.simulate('click');
+      const button = wrapper.find('button');
 
-    expect(button.prop('disabled')).toBe(true);
-    expect(spy).not.toHaveBeenCalled();
-  });
+      wrapper.simulate('click');
 
-  it('default should have a navigation class', () => {
-    const wrapper = shallow(<Button />);
+      expect(button.prop('disabled')).toBe(true);
+      expect(spy).not.toHaveBeenCalled();
+    });
 
-    const button = wrapper.find('button');
+    it('default should have a active class', () => {
+      const wrapper = mount(<Button />);
 
-    expect(button.hasClass('navigation')).toBe(true);
-  });
+      const button = wrapper.find('button');
 
-  it('context button type should have a context class', () => {
-    const wrapper = shallow(<Button buttonContext={ButtonContext.Context} />);
+      expect(button.hasClass('active')).toBe(true);
+    });
 
-    const button = wrapper.find('button');
+    it('context button type should have a context class', () => {
+      const wrapper = mount(<Button buttonContext={ButtonContext.Context} />);
 
-    expect(button.hasClass('context')).toBe(true);
-  });
+      const button = wrapper.find('button');
 
-  it('context button type should have a icon class', () => {
-    const wrapper = shallow(<Button buttonContext={ButtonContext.Icon} />);
+      expect(button.hasClass('context')).toBe(true);
+    });
 
-    const button = wrapper.find('button');
+    it('context button type should have a icon class', () => {
+      const wrapper = mount(<Button buttonContext={ButtonContext.Icon} />);
 
-    expect(button.hasClass('icon')).toBe(true);
-  });
+      const button = wrapper.find('button');
 
-  it('active button type should have a active class', () => {
-    const wrapper = shallow(<Button buttonContext={ButtonContext.Active} />);
+      expect(button.hasClass('icon')).toBe(true);
+    });
 
-    const button = wrapper.find('button');
+    it('active button type should have a active class', () => {
+      const wrapper = mount(<Button buttonContext={ButtonContext.Active} />);
 
-    expect(button.hasClass('active')).toBe(true);
-  });
+      const button = wrapper.find('button');
+
+      expect(button.hasClass('active')).toBe(true);
+    });
 
-  it(`renders an icon as it's image from the Icons component`, () => {
-    const wrapper = shallow(<Button icon={IconName.ChevronRight} />);
+    it(`renders an icon as it's image from the Icons component`, () => {
+      const wrapper = mount(<Button icon={IconName.ChevronRight} />);
+
+      const icon = wrapper.find(Icons);
+
+      expect(icon.exists()).toBe(true);
+    });
+  });
 
-    const icon = wrapper.find(Icons);
+  describe('NavigationButtonElement', () => {
+    it('renders the component without crashing', () => {
+      const wrapper = mount(
+        <Router>
+          <Button {...navigationButtonProps} />
+        </Router>,
+      );
+
+      expect(wrapper).toBeTruthy();
+    });
+
+    it('creates a class based on the className prop', () => {
+      const mockClassName = 'test-class';
+      const wrapper = mount(
+        <Router>
+          <Button {...navigationButtonProps} className={mockClassName} />,
+        </Router>,
+      );
+
+      const link = wrapper.find('Link');
+
+      expect(link.hasClass(mockClassName)).toBe(true);
+    });
+
+    it('renders the correct path in the Link component', () => {
+      const mockPath = '/test';
+      const wrapper = mount(
+        <Router>
+          <Button path={mockPath} />
+        </Router>,
+      );
+
+      const link = wrapper.find('Link');
+
+      expect(link.prop('to')).toBe(mockPath);
+    });
+
+    it('accepts width/height styles', () => {
+      const mockHeight = '75px';
+      const mockWidth = '80px';
+
+      const wrapper = mount(
+        <Router>
+          <Button
+            {...navigationButtonProps}
+            height={mockHeight}
+            width={mockWidth}
+          />
+        </Router>,
+      );
+
+      const linkStyles = wrapper
+        .find('Link')
+        .prop('style') as React.CSSProperties;
+
+      expect(linkStyles.height).toBe(mockHeight);
+      expect(linkStyles.width).toBe(mockWidth);
+    });
+
+    it('allows the button to be enabled by default', () => {
+      const wrapper = mount(
+        <Router>
+          <Button {...navigationButtonProps} />
+        </Router>,
+      );
+
+      const link = wrapper.find('Link');
+
+      expect(link.hasClass('disabled')).toBe(false);
+    });
+
+    it('allows button to be disabled', () => {
+      const wrapper = mount(
+        <Router>
+          <Button {...navigationButtonProps} disabled={true} />
+        </Router>,
+      );
+
+      const link = wrapper.find('Link');
+
+      expect(link.hasClass('disabled')).toBe(true);
+    });
+
+    it('renders the correct data-test-id attribute', () => {
+      const mockTestId = 'test-button';
+      const wrapper = mount(
+        <Router>
+          <Button {...navigationButtonProps} dataTestId={mockTestId} />
+        </Router>,
+      );
+
+      const link = wrapper.find('Link');
+
+      expect(link.prop('data-test-id')).toBe(mockTestId);
+    });
+
+    it('renders the Icons component with the correct default icon', () => {
+      const wrapper = mount(
+        <Router>
+          <Button {...navigationButtonProps} />
+        </Router>,
+      );
+
+      const icons = wrapper.find(Icons);
+
+      expect(icons.prop('icon')).toBe(IconName.ChevronRight);
+    });
+
+    it('renders the Icons component with the correct default icon when `openInNewTab` is set to `true`', () => {
+      const wrapper = mount(
+        <Router>
+          <Button {...navigationButtonProps} openInNewTab={true} />
+        </Router>,
+      );
+
+      const icons = wrapper.find(Icons);
+
+      expect(icons.prop('icon')).toBe(IconName.External);
+    });
+
+    it('opens link in new tab when `openInNewTab` is set to `true`', () => {
+      const wrapper = mount(
+        <Router>
+          <Button {...navigationButtonProps} openInNewTab={true} />
+        </Router>,
+      );
+
+      const link = wrapper.find(Link);
+
+      expect(link.prop('target')).toBe('_blank');
+    });
+
+    it('does not open link in new tab by default', () => {
+      const wrapper = mount(
+        <Router>
+          <Button {...navigationButtonProps} />
+        </Router>,
+      );
+
+      const link = wrapper.find(Link);
+
+      expect(link.prop('target')).toBeUndefined();
+    });
+
+    it('renders the Icons component with the correct icon', () => {
+      const mockIcon = IconName.Copy;
+      const wrapper = mount(
+        <Router>
+          <Button {...navigationButtonProps} icon={mockIcon} />
+        </Router>,
+      );
+
+      const icons = wrapper.find(Icons);
 
-    expect(icon.exists()).toBe(true);
+      expect(icons.prop('icon')).toBe(mockIcon);
+    });
   });
 });

package/src/components/Buttons/Button/Button.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 { IconName } from '../../Icons';
 import { ButtonContext } from '../Button.model';
@@ -29,7 +31,25 @@ const meta: Meta<typeof Button> = {
     type: {
       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;