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

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

@@ -1,62 +1,91 @@
 import clsx from 'clsx';
-import React from 'react';
+import React, { ForwardedRef } 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 {
+  ButtonProps,
+  ContextButtonProps,
+  NavigationButtonProps,
+} from './Button.model';
 import classes from './Button.scss';
 
-export interface ButtonProps extends BaseButtonOptions {
-  /** Button's height (default: '50px') */
-  height?: string | number;
-  /** Button's width (default: '50px') */
-  width?: string | number;
-  /** Optional icon */
-  icon?: IconName;
-}
-
 const ButtonElement: React.ForwardRefRenderFunction<
-  HTMLButtonElement,
+  HTMLButtonElement | HTMLAnchorElement,
   ButtonProps
 > = (
+  {
+    className,
+    dataTestId,
+    disabled = false,
+    height,
+    icon,
+    path,
+    width,
+    openInNewTab,
+    ...rest
+  },
+  ref: ForwardedRef<HTMLButtonElement | HTMLAnchorElement>,
+) => {
+  const commonProps = {
+    className,
+    dataTestId,
+    disabled,
+    height,
+    icon,
+    width,
+  };
+
+  return path ? (
+    <NavigationButtonElement
+      {...commonProps}
+      ref={ref as ForwardedRef<HTMLAnchorElement>}
+      path={path}
+      openInNewTab={openInNewTab}
+    />
+  ) : (
+    <ContextButtonElement
+      {...commonProps}
+      {...rest}
+      ref={ref as ForwardedRef<HTMLButtonElement>}
+    />
+  );
+};
+
+const ContextButtonElement = React.forwardRef<
+  HTMLButtonElement,
+  ContextButtonProps
+>(function ContextButtonElement(
   {
     type = 'button',
     height,
     width,
-    buttonContext = ButtonContext.Navigation,
+    buttonContext = ButtonContext.Active,
     disabled = false,
     icon,
     className = '',
-    dataTestId = undefined,
+    dataTestId,
     onButtonClicked = noop,
     onBlur,
-  },
-  ref,
-) => {
-  const customStyles = {
-    height: height,
-    width: width,
-  } as React.CSSProperties;
-
+  }: ContextButtonProps,
+  ref: ForwardedRef<HTMLButtonElement>,
+) {
   return (
     <button
       ref={ref}
       className={clsx(
         classes.container,
-        { [classes.navigation]: buttonContext === ButtonContext.Navigation },
         {
           [classes.context]: buttonContext === ButtonContext.Context,
-        },
-        {
           [classes.icon]: buttonContext === ButtonContext.Icon,
-        },
-        {
           [classes.active]: buttonContext === ButtonContext.Active,
         },
         'button-container',
         className,
       )}
       type={type}
-      style={customStyles}
+      style={{ height, width }}
       onClick={onButtonClicked}
       disabled={disabled}
       onBlur={onBlur}
@@ -65,13 +94,55 @@ const ButtonElement: React.ForwardRefRenderFunction<
       <Icons icon={icon} />
     </button>
   );
-};
+});
+
+const NavigationButtonElement = React.forwardRef<
+  HTMLAnchorElement,
+  NavigationButtonProps
+>(function NavigationButtonElement(
+  {
+    path,
+    height,
+    width,
+    icon,
+    className = '',
+    dataTestId = undefined,
+    disabled = false,
+    openInNewTab = false,
+  }: NavigationButtonProps,
+  ref: ForwardedRef<HTMLAnchorElement>,
+) {
+  const defaultIcon = openInNewTab ? IconName.External : IconName.ChevronRight;
+
+  return (
+    <Link
+      ref={ref}
+      className={clsx(
+        classes.container,
+        classes.navigation,
+        { [classes.disabled]: disabled },
+        'button-container',
+        className,
+      )}
+      to={path}
+      style={{ height, width }}
+      data-test-id={dataTestId ?? 'button'}
+      target={openInNewTab ? '_blank' : undefined}
+    >
+      <Icons icon={icon ? icon : defaultIcon} />
+    </Link>
+  );
+});
 
 /**
  * Button which can render an icon.
  * @example
+ *   // to render a button element
  *   <Button type="button" icon={IconName.X} />
+ *   // to render an anchor element
+ *   <Button path="/home" icon={IconName.X} />
  */
-export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ButtonElement,
-);
+export const Button = React.forwardRef<
+  HTMLButtonElement | HTMLAnchorElement,
+  ButtonProps
+>(ButtonElement);

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

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

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

@@ -1,5 +1,15 @@
+import { Not } from '../../types';
+import { IconName } from '../Icons';
+import { LinkAction } from '../models';
+
 /** Button's context type. This type defines the button's colors and border. */
 export enum ButtonContext {
+  /**
+   * @deprecated not used anymore and will be removed in future versions.
+   * Define `path` property instead of `onButtonClicked`,
+   * `onBlur` properties for navigation type buttons.
+   * This will render link instead of button.
+   */
   Navigation,
   Context,
   Active,
@@ -7,21 +17,86 @@ export enum ButtonContext {
   None,
 }
 
-/** Base options for all button components */
-export interface BaseButtonOptions {
+/**
+ * Button options for buttons with JS handlers
+ * (renders as a button)
+ */
+export interface CommonJsButtonOptions
+  extends CommonButtonOptions,
+    ButtonSizeOptions,
+    JsButtonOptions,
+    Not<LinkAction> {
+  /**
+   * Buttons type (default: 'Active').
+   * Affects buttons color and border.
+   * Button context type `Navigation` is deprecated and will
+   * be removed in future versions.
+   * For navigation type of buttons define `path` instead
+   * of `onButtonClicked`, `onBlur` and `type` properties
+   * to render link instead of button.
+   */
+  buttonContext?: ButtonContext;
   /** HTML button type attribute (default: 'button') */
   type?: 'button' | 'submit' | 'reset';
-  /** Button type (default: 'Navigation') */
-  buttonContext?: ButtonContext;
+}
+
+/**
+ * Button options for buttons with navigation
+ * (renders as a link)
+ */
+export interface CommonNavigationButtonOptions
+  extends CommonButtonOptions,
+    ButtonSizeOptions,
+    LinkAction,
+    Not<JsButtonOptions> {}
+
+/**
+ * Button text options
+ */
+export interface TextButtonOptions {
+  /** Button text */
+  text?: string;
+}
+
+/**
+ * Button icon options
+ */
+export interface ButtonIconOptions {
+  /** Optional icon */
+  icon?: IconName;
+  /** Optional Icon Position */
+  iconPosition?: 'left' | 'right';
+}
+
+/**
+ * Button event handler options for JS buttons
+ */
+interface JsButtonOptions {
+  /** Event to raise when the button is clicked */
+  onButtonClicked?: (
+    event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+  ) => void;
+  onBlur?: React.FocusEventHandler<HTMLButtonElement>;
+}
+
+/**
+ * Button size options
+ */
+interface ButtonSizeOptions {
+  /** Button's height */
+  height?: string | number;
+  /** Button's width */
+  width?: string | number;
+}
+
+/**
+ * Common properties for all buttons
+ */
+interface CommonButtonOptions {
   /** Whether the button is disabled. If set to true, disallows interactions. (default: undefined) */
   disabled?: boolean;
   /** Optional class */
   className?: string;
   /** Optional data-test-id */
   dataTestId?: string;
-  /** Event to raise when the button is clicked */
-  onButtonClicked?: (
-    event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
-  ) => void;
-  onBlur?: React.FocusEventHandler<HTMLButtonElement>;
 }

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

@@ -0,0 +1,32 @@
+import {
+  ButtonIconOptions,
+  CommonJsButtonOptions,
+  CommonNavigationButtonOptions,
+  TextButtonOptions,
+} from '../Button.model';
+
+export type CompositeButtonProps =
+  | (CompositeNavigationButtonProps | CompositeJsButtonProps) & {
+      /** Optional button's height (default: 50px) */
+      width?: string | number;
+      /** Optional button's height (default: undefined) */
+      height?: string | number;
+    };
+
+/**
+ * Button options for composite buttons (text + icon)
+ * with navigation
+ */
+export interface CompositeNavigationButtonProps
+  extends CommonNavigationButtonOptions,
+    ButtonIconOptions,
+    TextButtonOptions {}
+
+/**
+ * Button options for composite buttons (text + icon)
+ * with JS handlers
+ */
+export interface CompositeJsButtonProps
+  extends CommonJsButtonOptions,
+    ButtonIconOptions,
+    TextButtonOptions {}

package/src/components/Buttons/CompositeButton/CompositeButton.scss

@@ -7,6 +7,7 @@
 
   display: grid;
   grid-auto-flow: column;
+  grid-gap: 10px;
   place-items: center;
   width: max-content;
 
@@ -32,6 +33,9 @@
   &.navigation {
     color: white;
     background-color: $light-blue;
+    width: fit-content;
+    text-decoration: none;
+    box-sizing: border-box;
 
     svg * {
       stroke: white;
@@ -50,8 +54,9 @@
       }
     }
 
-    &:disabled {
+    &.disabled {
       background-color: $gray;
+      pointer-events: none;
       color: rgba(white, 0.5);
 
       svg * {