@zohodesk/components 1.6.8 → 1.6.11

package/es/v1/Button/Button.js

@@ -0,0 +1,201 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import React, { forwardRef, memo, useMemo } from 'react';
+import { withComponentRegistrar } from '@zohodesk/dotkit/es/react/ComponentRegistry';
+import Icon from '@zohodesk/icons/es/Icon';
+import Flex from '@zohodesk/layout/es/Flex/Flex';
+import Typography from "../../Typography/Typography";
+import { isRenderable } from '@zohodesk/utils/es/renderNode';
+import renderNode from '@zohodesk/utils/es/renderNode';
+import propTypes from "./props/propTypes";
+import defaultProps from "./props/defaultProps";
+import { DUMMY_OBJECT } from '@zohodesk/dotkit/es/utils/constants';
+import { ICON_PLACEMENT, LOADER_PLACEMENT, STATUS, TYPOGRAPHY_SIZE_MAP, VARIANT } from "./constants";
+import Loader from "./_shared/Loader/Loader";
+import SuccessTick from "./_shared/SuccessTick/SuccessTick";
+import cssJSLogic from "./css/cssJSLogic";
+
+const getTypographySize = size => TYPOGRAPHY_SIZE_MAP[size] || '13';
+
+const Button = /*#__PURE__*/forwardRef(function Button(props, ref) {
+  const {
+    palette,
+    bgAppearance,
+    borderAppearance,
+    variant,
+    status,
+    loaderPlacement,
+    size,
+    iconName,
+    iconSize,
+    iconPlacement,
+    renderIcon,
+    renderBefore,
+    renderAfter,
+    renderLoader,
+    renderSuccess,
+    children,
+    type,
+    onClick,
+    isDisabled,
+    isReadOnly,
+    isSelected,
+    shape,
+    paletteShade,
+    disabledAppearance,
+    title,
+    customProps,
+    customAttributes,
+    a11yAttributes,
+    customId,
+    testId
+  } = props;
+  const isLoading = status === STATUS.LOADING;
+  const isSuccess = status === STATUS.SUCCESS;
+  const isDisabledState = isDisabled || isLoading;
+  const isInteractionDisabled = isDisabledState || isReadOnly;
+  const overlayActive = (isLoading || isSuccess) && loaderPlacement === LOADER_PLACEMENT.OVERLAY;
+  const {
+    text: contentProps = DUMMY_OBJECT,
+    icon: iconProps = DUMMY_OBJECT
+  } = customProps;
+  const iconTagAttributes = useMemo(() => ({ ...(iconProps.tagAttributes || DUMMY_OBJECT),
+    'data-test-id': testId ? `${testId}_icon` : undefined
+  }), [iconProps.tagAttributes, testId]);
+  const classes = useMemo(() => cssJSLogic({
+    props
+  }), [palette, bgAppearance, borderAppearance, paletteShade, size, variant, status, isDisabled, isReadOnly, isSelected, shape, loaderPlacement, disabledAppearance, props.customClass]);
+  const {
+    loaderOverlayClass,
+    successOverlayClass,
+    contentWrapperClass,
+    textClassName,
+    buttonClassName
+  } = classes;
+  const showIcon = variant !== VARIANT.TEXT && (renderIcon || iconName);
+
+  const _handleClick = event => {
+    if (isInteractionDisabled) {
+      return;
+    }
+
+    onClick(event);
+  };
+
+  const _renderLoader = () => {
+    if (!isLoading) {
+      return null;
+    }
+
+    if (isRenderable(renderLoader)) {
+      return renderNode(renderLoader, {
+        status
+      });
+    }
+
+    const loaderClassName = loaderPlacement === LOADER_PLACEMENT.OVERLAY ? loaderOverlayClass : '';
+    return /*#__PURE__*/React.createElement(Flex, {
+      $ui_displayMode: "flex",
+      $ui_alignItems: "center",
+      $ui_justifyContent: "center",
+      $ui_className: loaderClassName,
+      testId: testId ? `${testId}_loader` : undefined
+    }, /*#__PURE__*/React.createElement(Loader, null));
+  };
+
+  const _renderSuccess = () => {
+    if (!isSuccess) {
+      return null;
+    }
+
+    if (isRenderable(renderSuccess)) {
+      return renderNode(renderSuccess, {
+        status
+      });
+    }
+
+    const successClassName = loaderPlacement === LOADER_PLACEMENT.OVERLAY ? successOverlayClass : '';
+    return /*#__PURE__*/React.createElement(Flex, {
+      $ui_displayMode: "flex",
+      $ui_alignItems: "center",
+      $ui_justifyContent: "center",
+      $ui_className: successClassName,
+      testId: testId ? `${testId}_success` : undefined
+    }, /*#__PURE__*/React.createElement(SuccessTick, null));
+  };
+
+  const _renderIconNode = () => {
+    if (!showIcon) {
+      return null;
+    }
+
+    if (isRenderable(renderIcon)) {
+      return renderNode(renderIcon);
+    }
+
+    return /*#__PURE__*/React.createElement(Icon, _extends({}, iconProps, {
+      name: iconName,
+      size: iconSize,
+      tagAttributes: iconTagAttributes,
+      dataId: testId ? `${testId}_icon` : undefined
+    }));
+  };
+
+  const _renderBeforeNode = () => {
+    if (!isRenderable(renderBefore)) {
+      return null;
+    }
+
+    return renderNode(renderBefore, props);
+  };
+
+  const _renderAfterNode = () => {
+    if (!isRenderable(renderAfter)) {
+      return null;
+    }
+
+    return renderNode(renderAfter, props);
+  };
+
+  const _renderContent = () => {
+    const shouldShowText = variant !== VARIANT.ICON && children !== undefined && children !== null;
+    const showLoaderStart = isLoading && loaderPlacement === LOADER_PLACEMENT.START;
+    const showLoaderAfter = isLoading && loaderPlacement === LOADER_PLACEMENT.END;
+    const showSuccessStart = isSuccess && loaderPlacement === LOADER_PLACEMENT.START;
+    const showSuccessAfter = isSuccess && loaderPlacement === LOADER_PLACEMENT.END;
+    return /*#__PURE__*/React.createElement(Flex, {
+      $ui_displayMode: "flex",
+      $ui_direction: "row",
+      $flag_shrink: true,
+      $ui_alignItems: "center",
+      $ui_justifyContent: "center",
+      $ui_className: contentWrapperClass
+    }, showLoaderStart ? _renderLoader() : null, showSuccessStart ? _renderSuccess() : null, _renderBeforeNode(), iconPlacement === ICON_PLACEMENT.LEFT ? _renderIconNode() : null, shouldShowText ? /*#__PURE__*/React.createElement(Typography, _extends({}, contentProps, {
+      $ui_className: textClassName,
+      $ui_size: getTypographySize(size),
+      $flag_dotted: variant !== VARIANT.ICON
+    }), children) : null, iconPlacement === ICON_PLACEMENT.RIGHT ? _renderIconNode() : null, _renderAfterNode(), showLoaderAfter ? _renderLoader() : null, showSuccessAfter ? _renderSuccess() : null);
+  };
+
+  const containerAttributes = { ...customAttributes,
+    'data-id': customId,
+    'data-test-id': testId,
+    'data-title': title
+  };
+  return /*#__PURE__*/React.createElement("button", _extends({}, containerAttributes, a11yAttributes, {
+    ref: ref,
+    type: type,
+    className: buttonClassName,
+    "aria-busy": isLoading,
+    "aria-disabled": isDisabledState,
+    "aria-readonly": isReadOnly,
+    "aria-pressed": isSelected,
+    onClick: _handleClick
+  }), _renderContent(), overlayActive ? isLoading ? _renderLoader() : _renderSuccess() : null);
+});
+Button.propTypes = propTypes;
+Button.defaultProps = defaultProps;
+Button.displayName = 'Button';
+export default withComponentRegistrar( /*#__PURE__*/memo(Button), {
+  name: 'ZDC_V1_Button'
+});

package/es/v1/Button/README.md

@@ -0,0 +1,110 @@
+# Button
+
+A composable button component with palette-based theming, loading/success status states, and flexible icon/content slots.
+
+## Import
+
+```jsx
+import Button from '@zohodesk/components/es/v1/Button/Button';
+```
+
+## Usage
+
+### Default
+
+```jsx
+<Button customId="saveBtn" testId="saveBtn">
+  Save changes
+</Button>
+```
+
+### With Palette Variants
+
+```jsx
+<Button palette="primary">Save</Button>
+<Button palette="danger">Delete</Button>
+<Button palette="success">Confirm</Button>
+```
+
+### With Icon
+
+```jsx
+<Button variant="icon" iconName="ZD-plus" iconSize={20} />
+
+<Button variant="iconWithText" iconName="ZD-plus" iconPlacement="left">
+  Add Item
+</Button>
+```
+
+### Loading State
+
+```jsx
+<Button status="loading" loaderPlacement="overlay">
+  Saving...
+</Button>
+
+<Button status="loading" loaderPlacement="start">
+  Loading
+</Button>
+```
+
+### Disabled / Read Only
+
+```jsx
+<Button isDisabled>Disabled</Button>
+<Button isReadOnly>Read Only</Button>
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `customId` | `string` | — | `data-id` attribute for automation |
+| `testId` | `string` | — | `data-test-id` attribute for testing |
+| `palette` | `oneOf: default, primary, secondary, danger, success` | `default` | Color palette |
+| `bgAppearance` | `oneOf: filled, onHover, none` | `filled` | Background behavior |
+| `borderAppearance` | `oneOf: default, onHover, none` | `default` | Border behavior |
+| `variant` | `oneOf: text, icon, iconWithText` | `text` | Display variant |
+| `size` | `oneOf: small, medium, large, full` | `medium` | Size variant |
+| `status` | `oneOf: default, loading, success` | `default` | Status state |
+| `loaderPlacement` | `oneOf: start, end, overlay` | `overlay` | Where loader appears |
+| `iconName` | `string` | — | Icon name from `@zohodesk/icons` |
+| `iconSize` | `number` | `16` | Icon size in pixels |
+| `iconPlacement` | `oneOf: left, right` | `left` | Icon position relative to text |
+| `paletteShade` | `oneOf: default, lighter` | `default` | Shade variant |
+| `disabledAppearance` | `oneOf: none, dull, strike` | `dull` | Disabled visual style |
+| `renderIcon` | `node \| func` | — | Custom icon render slot |
+| `renderBefore` | `node \| func` | — | Slot before main content |
+| `renderAfter` | `node \| func` | — | Slot after main content |
+| `renderLoader` | `node \| func` | — | Custom loader render slot |
+| `renderSuccess` | `node \| func` | — | Custom success render slot |
+| `children` | `node` | — | Button text content |
+| `type` | `oneOf: button, submit, reset` | `button` | HTML button type |
+| `onClick` | `func` | — | Click event handler |
+| `isDisabled` | `bool` | `false` | Disables the button |
+| `isReadOnly` | `bool` | `false` | Read-only state |
+| `isSelected` | `bool` | `false` | Selected/pressed state |
+| `isRounded` | `bool` | `false` | Rounded border radius |
+| `title` | `string` | — | Title/tooltip text |
+
+## Customization
+
+### Parts
+
+| Part | Element | Description |
+|---|---|---|
+| `wrapper` | `<button>` root | The outermost button element |
+| `text` | Typography | The text label |
+
+### CSS Custom Properties
+
+The `.varClass` block in `Button.module.css` defines local custom properties that size variants override:
+
+| Property | Default | Description |
+|---|---|---|
+| `--local-Button-radius` | `4px` | Border radius |
+| `--local-Button-gap` | `8px` | Content gap |
+| `--local-Button-padding-block` | `6px` | Block padding |
+| `--local-Button-padding-inline` | `15px` | Inline padding |
+| `--local-Button-min-width` | `90px` | Minimum width |
+| `--local-Button-spinner-size` | `16px` | Spinner/tick size |

package/es/v1/Button/__tests__/Button.spec.js

@@ -0,0 +1,272 @@
+import React from 'react';
+import { cleanup, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import Button from "../Button";
+import '@testing-library/jest-dom';
+afterEach(() => {
+  cleanup();
+});
+describe('Button - Component', () => {
+  test('Should render with the basic set of default props', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Button, null));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should render with children', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Button, null, "Click Me"));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  const palette = ['default', 'primary', 'secondary', 'danger', 'success'];
+  test.each(palette)('Should render palette of buttons - %s', palette => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Button, {
+      palette: palette
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  const bgAppearance = ['default', 'onHover', 'none'];
+  test.each(bgAppearance)('Should render bgAppearance of buttons - %s', bg => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Button, {
+      bgAppearance: bg
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  const borderAppearance = ['default', 'onHover', 'none'];
+  test.each(borderAppearance)('Should render borderAppearance of buttons - %s', border => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Button, {
+      borderAppearance: border
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  const variant = ['text', 'icon', 'iconWithText'];
+  test.each(variant)('Should render variant of buttons - %s', variant => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Button, {
+      variant: variant
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  const size = ['small', 'medium', 'large', 'full'];
+  test.each(size)('Should render Sizes of buttons - %s', size => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Button, {
+      size: size
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  const status = ['default', 'loading', 'success'];
+  test.each(status)('Should render Status of buttons - %s', status => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Button, {
+      status: status
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  const loaderPlacement = ['start', 'end', 'overlay'];
+  test.each(loaderPlacement)('Should render loaderPlacement of buttons - %s', loaderPlacement => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Button, {
+      status: "loading",
+      loaderPlacement: loaderPlacement
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should render with iconName and iconSize ', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Button, {
+      variant: "icon",
+      iconName: "ZD-plus",
+      iconSize: 20
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should render with iconPlacement ', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Button, {
+      variant: "iconWithText",
+      iconName: "ZD-plus",
+      iconPlacement: "right"
+    }, "Button"));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should render with renderIcon', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Button, {
+      variant: "icon",
+      renderIcon: () => /*#__PURE__*/React.createElement("span", null, "CustomIcon")
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should render with renderBefore and renderAfter', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Button, {
+      renderBefore: () => /*#__PURE__*/React.createElement("span", null, "Before"),
+      renderAfter: () => /*#__PURE__*/React.createElement("span", null, "After")
+    }, "Button"));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should render with renderLoader', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Button, {
+      status: "loading",
+      renderLoader: () => /*#__PURE__*/React.createElement("span", null, "Loading...")
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should render with renderSuccess', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Button, {
+      status: "success",
+      renderSuccess: () => /*#__PURE__*/React.createElement("span", null, "Success!")
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  const type = ['button', 'submit', 'reset'];
+  test.each(type)('Should render type of buttons - %s', type => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Button, {
+      type: type
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should trigger onClick function', () => {
+    const onClick = jest.fn();
+    const {
+      getByRole
+    } = render( /*#__PURE__*/React.createElement(Button, {
+      onClick: onClick
+    }));
+    userEvent.click(getByRole('button'));
+    expect(onClick).toHaveBeenCalled();
+  });
+  test('Should be disabled when isDisabled prop is true', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Button, {
+      isDisabled: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should render with readOnly style when isReadOnly prop is true', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Button, {
+      isReadOnly: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should render with selected style when isSelected prop is true', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Button, {
+      isSelected: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  const shape = ['pill', 'rectangle', 'roundedRectangle'];
+  test.each(shape)('Should render shape of buttons - %s', shape => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Button, {
+      shape: shape
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  const paletteShade = ['default', 'lighter'];
+  test.each(paletteShade)('Should render paletteShade of buttons - %s', shade => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Button, {
+      paletteShade: shade
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  const disabledAppearance = ['none', 'dull', 'strike'];
+  test.each(disabledAppearance)('Should render disabledAppearance of buttons - %s', style => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Button, {
+      isDisabled: true,
+      disabledAppearance: style
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should render with title attribute', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Button, {
+      title: "Button test title"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should apply customClass to wrapper and text', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Button, {
+      customClass: {
+        wrapper: 'customButtonClass',
+        text: 'customTextClass'
+      }
+    }, "Button"));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should apply customProps to wrapper, text and icon', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Button, {
+      variant: "iconWithText",
+      iconName: "check",
+      customProps: {
+        wrapper: {
+          'data-wrapper': 'wrapperProps'
+        },
+        text: {
+          'data-text': 'textProps'
+        },
+        icon: {
+          'data-icon': 'iconProps'
+        }
+      }
+    }, "Button"));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should render with customId and testId', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Button, {
+      customId: "customIdValue",
+      testId: "testIdValue"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should apply a11yAttributes to the button', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Button, {
+      a11yAttributes: {
+        'aria-label': 'Smart Button',
+        'aria-describedby': 'button-description'
+      }
+    }, "Button"));
+    expect(asFragment()).toMatchSnapshot();
+  });
+});