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

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

@@ -1,137 +1,325 @@
 import { mount, shallow } from 'enzyme';
 import React from 'react';
+import { BrowserRouter as Router } from 'react-router-dom';
+import { IconName } from '../../Icons';
 import { ButtonContext } from '../Button.model';
 import { CompositeButton } from './CompositeButton';
 
-describe('Button', () => {
-  it('renders the component without crashing', () => {
-    const wrapper = shallow(<CompositeButton />);
+describe('CompositeButton', () => {
+  describe('Composite context button', () => {
+    it('renders the component without crashing', () => {
+      const wrapper = shallow(<CompositeButton />);
 
-    expect(wrapper).toBeTruthy();
-  });
+      expect(wrapper).toBeTruthy();
+    });
 
-  it('raises the onButtonClicked event', () => {
-    const spy = jest.fn();
-    const wrapper = shallow(<CompositeButton onButtonClicked={spy} />);
+    it('raises the onButtonClicked event', () => {
+      const spy = jest.fn();
+      const wrapper = mount(<CompositeButton 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(<CompositeButton className={mockClassName} />);
+    it('creates a class based off of the className prop', () => {
+      const mockClassName = 'test-class';
+      const wrapper = mount(<CompositeButton 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(<CompositeButton />);
+    it(`button 'type' must be 'button' by default`, () => {
+      const wrapper = mount(<CompositeButton />);
 
-    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(<CompositeButton />);
+      const wrapper = mount(<CompositeButton />);
 
-    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(<CompositeButton onButtonClicked={spy} />);
+    it('allows the button to be enabled by default', () => {
+      const spy = jest.fn();
+      const wrapper = mount(<CompositeButton 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(
-      <CompositeButton disabled={true} onButtonClicked={spy} />,
-    );
+    it('allows button to be disabled', () => {
+      const spy = jest.fn();
+      const wrapper = mount(
+        <CompositeButton 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(<CompositeButton />);
+    it('default should have a context class', () => {
+      const wrapper = mount(<CompositeButton />);
 
-    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(
-      <CompositeButton buttonContext={ButtonContext.Context} />,
-    );
+    it('context button type should have a context class', () => {
+      const wrapper = mount(
+        <CompositeButton 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(
-      <CompositeButton buttonContext={ButtonContext.Active} />,
-    );
+    it('active button type should have a active class', () => {
+      const wrapper = mount(
+        <CompositeButton 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(<CompositeButton text={mockText} />);
+      const wrapper = mount(<CompositeButton 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(<CompositeButton />);
 
-  it(`defaults to an empty string is 'text' prop is not set`, () => {
-    const wrapper = shallow(<CompositeButton />);
+      const button = wrapper.find('button');
 
-    const button = wrapper.find('button');
+      expect(button.text()).toBe('');
+    });
+  });
 
-    expect(button.text()).toBe('');
+  describe('Composite navigation button', () => {
+    it('renders the component without crashing', () => {
+      const wrapper = shallow(<CompositeButton path="/example" />);
+
+      expect(wrapper).toBeTruthy();
+    });
+
+    it('renders a Link component with the provided path', () => {
+      const mockPath = '/example';
+      const wrapper = mount(
+        <Router>
+          <CompositeButton path={mockPath} />
+        </Router>,
+      );
+
+      const link = wrapper.find('Link');
+
+      expect(link.prop('to')).toBe(mockPath);
+    });
+
+    it('applies the provided className to the component', () => {
+      const mockClassName = 'test-class';
+      const wrapper = mount(
+        <Router>
+          <CompositeButton className={mockClassName} path="/example" />
+        </Router>,
+      );
+
+      const link = wrapper.find('Link');
+
+      expect(link.hasClass(mockClassName)).toBe(true);
+    });
+
+    it('applies the disabled class when disabled prop is true', () => {
+      const wrapper = mount(
+        <Router>
+          <CompositeButton disabled={true} path="/example" />,
+        </Router>,
+      );
+
+      const link = wrapper.find('Link');
+
+      expect(link.hasClass('disabled')).toBe(true);
+    });
+
+    it('does not apply the disabled class when disabled prop is false', () => {
+      const wrapper = mount(
+        <Router>
+          <CompositeButton disabled={false} path="/example" />
+        </Router>,
+      );
+
+      const link = wrapper.find('Link');
+
+      expect(link.hasClass('disabled')).toBe(false);
+    });
+
+    it('sets the height and width styles based on the provided props', () => {
+      const mockHeight = '50px';
+      const mockWidth = '100px';
+      const wrapper = mount(
+        <Router>
+          <CompositeButton
+            height={mockHeight}
+            width={mockWidth}
+            path="/example"
+          />
+          ,
+        </Router>,
+      );
+
+      const link = wrapper.find('Link');
+
+      expect(link.prop('style')?.height).toBe(mockHeight);
+      expect(link.prop('style')?.width).toBe(mockWidth);
+    });
+
+    it('sets the direction style to "rtl" when iconPosition is "left"', () => {
+      const wrapper = mount(
+        <Router>
+          <CompositeButton iconPosition="left" path="/example" />
+        </Router>,
+      );
+
+      const link = wrapper.find('Link');
+
+      expect(link.prop('style')).toEqual({
+        direction: 'rtl',
+      });
+    });
+
+    it('sets the direction style to "ltr" when iconPosition is "right"', () => {
+      const wrapper = mount(
+        <Router>
+          <CompositeButton iconPosition="right" path="/example" />
+        </Router>,
+      );
+
+      const link = wrapper.find('Link');
+
+      expect(link.prop('style')).toEqual({
+        direction: 'ltr',
+      });
+    });
+
+    it('renders the text inside a div', () => {
+      const mockText = 'Example Button';
+      const wrapper = mount(
+        <Router>
+          <CompositeButton text={mockText} path="/example" />
+        </Router>,
+      );
+
+      const textDiv = wrapper.find('div').at(0);
+
+      expect(textDiv.text()).toBe(mockText);
+    });
+
+    it('renders the icon inside a div when icon prop is provided', () => {
+      const mockIcon = IconName.Calendar;
+      const wrapper = mount(
+        <Router>
+          <CompositeButton icon={mockIcon} path="/example" />
+        </Router>,
+      );
+
+      const iconDiv = wrapper.find('div').at(1);
+
+      expect(iconDiv.find('Icons').prop('icon')).toBe(mockIcon);
+    });
+
+    it('renders the Icons component with the correct default icon', () => {
+      const wrapper = mount(
+        <Router>
+          <CompositeButton path="/example" />
+        </Router>,
+      );
+      const iconDiv = wrapper.find('div').at(1);
+
+      expect(iconDiv.find('Icons').prop('icon')).toBe(IconName.ChevronRight);
+    });
+
+    it('renders `External` icon by default when none provided and `openInNewTab: true`', () => {
+      const wrapper = mount(
+        <Router>
+          <CompositeButton path="/example" openInNewTab={true} />
+        </Router>,
+      );
+      const iconDiv = wrapper.find('div').at(1);
+
+      expect(iconDiv.find('Icons').prop('icon')).toBe(IconName.External);
+    });
+
+    it('renders the default data-test-id when dataTestId prop is not provided', () => {
+      const wrapper = mount(
+        <Router>
+          <CompositeButton path="/example" />
+        </Router>,
+      );
+
+      const link = wrapper.find('Link');
+
+      expect(link.prop('data-test-id')).toBe('text-button');
+    });
+
+    it('renders the provided data-test-id when dataTestId prop is provided', () => {
+      const mockDataTestId = 'test-id';
+      const wrapper = mount(
+        <Router>
+          <CompositeButton dataTestId={mockDataTestId} path="/example" />
+        </Router>,
+      );
+      const link = wrapper.find('Link');
+
+      expect(link.prop('data-test-id')).toBe(mockDataTestId);
+    });
   });
 });

package/src/components/Buttons/CompositeButton/CompositeButton.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 CompositeButton> = {
     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/CompositeButton/CompositeButton.tsx

@@ -1,64 +1,89 @@
 import clsx from 'clsx';
 import React from 'react';
+import { Link } from 'react-router-dom';
 import { noop } from '../../../helpers/utils';
 import { IconName, Icons } from '../../Icons';
-import { BaseButtonOptions, ButtonContext } from '../Button.model';
+import { ButtonContext } from '../Button.model';
+import {
+  CompositeButtonProps,
+  CompositeJsButtonProps,
+  CompositeNavigationButtonProps,
+} from './CompositeButton.model';
 import classes from './CompositeButton.scss';
 
-// TODO: Refactor buttons. Use a composition model.
-export interface CompositeButtonProps extends BaseButtonOptions {
-  /** Button's height (default: '30px') */
-  height?: string | number;
-  /** Button's width (default: undefined) */
-  width?: string | number;
-  /** Button text */
-  text?: string;
-  /** Optional icon */
-  icon?: IconName;
-  /** Optional Icon Position */
-  iconPosition?: 'left' | 'right';
-}
-
 /**
  * Button which can render an text together with an icon.
  * @example
+ *   // Rendered as button
  *   <CompositeButton type="button" text="Click me!" />
+ *
+ *   // Rendered as link
+ *   <CompositeButton path="/home" text="Click me!" />
  */
 export const CompositeButton: React.FC<CompositeButtonProps> = ({
-  type = 'button',
+  className,
+  dataTestId,
+  disabled,
   height,
+  icon,
+  iconPosition,
+  path,
+  text = '',
   width,
+  openInNewTab,
+  ...rest
+}) => {
+  const commonProps = {
+    className,
+    dataTestId,
+    disabled,
+    height,
+    icon,
+    iconPosition,
+    text,
+    width,
+  };
+  return path ? (
+    <CompositeNavigationButton
+      {...commonProps}
+      path={path}
+      openInNewTab={openInNewTab}
+    />
+  ) : (
+    <CompositeContextButton {...commonProps} {...rest} />
+  );
+};
+
+const CompositeContextButton: React.FC<CompositeJsButtonProps> = ({
   buttonContext = ButtonContext.Context,
+  className,
+  dataTestId = undefined,
   disabled = false,
-  text = '',
+  height,
   icon,
   iconPosition,
-  className,
-  dataTestId = undefined,
+  text = '',
+  type = 'button',
+  width,
   onButtonClicked = noop,
-}: CompositeButtonProps) => {
-  const customStyles = {
-    height: height,
-    width: width,
-    direction: iconPosition === 'left' ? 'rtl' : 'ltr',
-  } as React.CSSProperties;
-
+}) => {
   return (
     <button
       className={clsx(
         classes.container,
-        { [classes.navigation]: buttonContext === ButtonContext.Navigation },
         {
           [classes.context]: buttonContext === ButtonContext.Context,
-        },
-        {
           [classes.active]: buttonContext === ButtonContext.Active,
         },
         'composite-button-container',
         className,
       )}
       type={type}
-      style={customStyles}
+      style={{
+        height,
+        width,
+        direction: iconPosition === 'left' ? 'rtl' : 'ltr',
+      }}
       onClick={onButtonClicked}
       disabled={disabled}
       data-test-id={dataTestId ?? 'text-button'}
@@ -70,3 +95,42 @@ export const CompositeButton: React.FC<CompositeButtonProps> = ({
     </button>
   );
 };
+
+const CompositeNavigationButton: React.FC<CompositeNavigationButtonProps> = ({
+  className,
+  dataTestId = undefined,
+  disabled = false,
+  height,
+  icon,
+  iconPosition,
+  path,
+  text = '',
+  width,
+  openInNewTab,
+}) => {
+  const defaultIcon = openInNewTab ? IconName.External : IconName.ChevronRight;
+
+  return (
+    <Link
+      to={path}
+      className={clsx(
+        classes.container,
+        classes.navigation,
+        { [classes.disabled]: disabled },
+        'composite-button-container',
+        className,
+      )}
+      style={{
+        height,
+        width,
+        direction: iconPosition === 'left' ? 'rtl' : 'ltr',
+      }}
+      data-test-id={dataTestId ?? 'text-button'}
+    >
+      <div>{text}</div>
+      <div className={classes.icon}>
+        <Icons icon={icon ? icon : defaultIcon} />
+      </div>
+    </Link>
+  );
+};

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

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

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

@@ -0,0 +1,27 @@
+import {
+  CommonJsButtonOptions,
+  CommonNavigationButtonOptions,
+  TextButtonOptions,
+} from '../Button.model';
+
+export type TextButtonProps =
+  | (TextNavigationButtonProps | TextContextButtonProps) & {
+      /** Optional button's height (default: 30px) */
+      height?: string | number;
+      /** Optional button's width (default: undefined) */
+      width?: string | number;
+    };
+
+/**
+ * Button options for text buttons with navigation
+ */
+export interface TextNavigationButtonProps
+  extends CommonNavigationButtonOptions,
+    TextButtonOptions {}
+
+/**
+ * Button options for text buttons with JS handlers
+ */
+export interface TextContextButtonProps
+  extends CommonJsButtonOptions,
+    TextButtonOptions {}

package/src/components/Buttons/TextButton/TextButton.scss

@@ -21,6 +21,7 @@
   &.navigation {
     color: white;
     background-color: $light-blue;
+    width: fit-content;
 
     &:hover {
       background-color: lighten($light-blue, 10%);
@@ -31,8 +32,9 @@
       color: $light-blue;
     }
 
-    &:disabled {
+    &.disabled {
       background-color: $gray;
+      pointer-events: none;
       color: rgba(white, 0.5);
     }
   }