@zohodesk/components 1.6.8 → 1.6.11

package/es/v1/Button/_shared/Loader/Loader.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import style from "./Loader.module.css";
+import propTypes from "./props/propTypes";
+import defaultProps from "./props/defaultProps";
+
+const Loader = props => {
+  const {
+    customClass
+  } = props;
+  const {
+    customWrapperClass = ''
+  } = customClass;
+  return /*#__PURE__*/React.createElement("svg", {
+    className: `${style.spinner} ${customWrapperClass}`,
+    viewBox: "0 0 24 24",
+    role: "img",
+    "aria-hidden": "true"
+  }, /*#__PURE__*/React.createElement("circle", {
+    className: style.spinnerTrack,
+    cx: "12",
+    cy: "12",
+    r: "10"
+  }), /*#__PURE__*/React.createElement("circle", {
+    className: style.spinnerHead,
+    cx: "12",
+    cy: "12",
+    r: "10"
+  }));
+};
+
+Loader.propTypes = propTypes;
+Loader.defaultProps = defaultProps;
+export default Loader;

package/es/v1/Button/_shared/Loader/Loader.module.css

@@ -0,0 +1,42 @@
+.spinner {
+    width: var(--local-loader-size, var(--zd_size16));
+    height: var(--local-loader-size, var(--zd_size16));
+    display: block;
+}
+
+.spinnerTrack {
+    fill: none;
+    stroke: currentColor;
+    opacity: 0.2;
+    stroke-width: 3px;
+}
+
+.spinnerHead {
+    fill: none;
+    stroke: currentColor;
+    stroke-width: 3px;
+    stroke-linecap: round;
+    stroke-dasharray: 60;
+    stroke-dashoffset: 45;
+    transform-origin: 50% 50%;
+}
+
+[dir=ltr] .spinnerHead {
+    animation:  spin-ltr 0.9s linear infinite;
+}
+
+[dir=rtl] .spinnerHead {
+    animation:  spin-rtl 0.9s linear infinite;
+}
+
+@keyframes spin-ltr {
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+@keyframes spin-rtl {
+    to {
+        transform: rotate(-360deg);
+    }
+}

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

@@ -0,0 +1,21 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import Loader from "../Loader";
+describe('Loader', () => {
+  test('renders default snapshot', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Loader, null));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders with customClass', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Loader, {
+      customClass: {
+        customWrapperClass: 'my-custom-class'
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/es/v1/Button/_shared/Loader/__tests__/__snapshots__/Loader.spec.js.snap

@@ -0,0 +1,49 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Loader renders default snapshot 1`] = `
+<DocumentFragment>
+  <svg
+    aria-hidden="true"
+    class="spinner "
+    role="img"
+    viewBox="0 0 24 24"
+  >
+    <circle
+      class="spinnerTrack"
+      cx="12"
+      cy="12"
+      r="10"
+    />
+    <circle
+      class="spinnerHead"
+      cx="12"
+      cy="12"
+      r="10"
+    />
+  </svg>
+</DocumentFragment>
+`;
+
+exports[`Loader renders with customClass 1`] = `
+<DocumentFragment>
+  <svg
+    aria-hidden="true"
+    class="spinner my-custom-class"
+    role="img"
+    viewBox="0 0 24 24"
+  >
+    <circle
+      class="spinnerTrack"
+      cx="12"
+      cy="12"
+      r="10"
+    />
+    <circle
+      class="spinnerHead"
+      cx="12"
+      cy="12"
+      r="10"
+    />
+  </svg>
+</DocumentFragment>
+`;

package/es/v1/Button/_shared/Loader/props/defaultProps.js

@@ -0,0 +1,4 @@
+const defaultProps = {
+  customClass: {}
+};
+export default defaultProps;

package/es/v1/Button/_shared/Loader/props/propTypes.js

@@ -0,0 +1,7 @@
+import PropTypes from 'prop-types';
+const propTypes = {
+  customClass: PropTypes.shape({
+    customWrapperClass: PropTypes.string
+  })
+};
+export default propTypes;

package/es/v1/Button/_shared/SuccessTick/SuccessTick.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import style from "./SuccessTick.module.css";
+import propTypes from "./props/propTypes";
+import defaultProps from "./props/defaultProps";
+
+const SuccessTick = props => {
+  const {
+    customClass
+  } = props;
+  const {
+    customWrapperClass = ''
+  } = customClass;
+  return /*#__PURE__*/React.createElement("svg", {
+    className: `${style.tick} ${customWrapperClass}`,
+    viewBox: "0 0 24 24",
+    role: "img",
+    "aria-hidden": "true"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M4 12l5 5L20 6"
+  }));
+};
+
+SuccessTick.propTypes = propTypes;
+SuccessTick.defaultProps = defaultProps;
+export default SuccessTick;

package/es/v1/Button/_shared/SuccessTick/SuccessTick.module.css

@@ -0,0 +1,21 @@
+.tick {
+    width: var(--local-tick-size, var(--zd_size16));
+    height: var(--local-tick-size, var(--zd_size16));
+    stroke: currentColor;
+    stroke-width: 2.5px;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    fill: none;
+    stroke-dasharray: 24;
+    stroke-dashoffset: 24;
+}[dir=ltr] .tick {
+    animation: drawTick 0.3s ease-out forwards;
+}[dir=rtl] .tick {
+    animation: drawTick 0.3s ease-out forwards;
+}
+
+@keyframes drawTick {
+    to {
+        stroke-dashoffset: 0;
+    }
+}

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

@@ -0,0 +1,21 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import SuccessTick from "../SuccessTick";
+describe('SuccessTick', () => {
+  test('renders default snapshot', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(SuccessTick, null));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders with customClass', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(SuccessTick, {
+      customClass: {
+        customWrapperClass: 'my-custom-class'
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/es/v1/Button/_shared/SuccessTick/__tests__/__snapshots__/SuccessTick.spec.js.snap

@@ -0,0 +1,31 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SuccessTick renders default snapshot 1`] = `
+<DocumentFragment>
+  <svg
+    aria-hidden="true"
+    class="tick "
+    role="img"
+    viewBox="0 0 24 24"
+  >
+    <path
+      d="M4 12l5 5L20 6"
+    />
+  </svg>
+</DocumentFragment>
+`;
+
+exports[`SuccessTick renders with customClass 1`] = `
+<DocumentFragment>
+  <svg
+    aria-hidden="true"
+    class="tick my-custom-class"
+    role="img"
+    viewBox="0 0 24 24"
+  >
+    <path
+      d="M4 12l5 5L20 6"
+    />
+  </svg>
+</DocumentFragment>
+`;

package/es/v1/Button/_shared/SuccessTick/props/defaultProps.js

@@ -0,0 +1,4 @@
+const defaultProps = {
+  customClass: {}
+};
+export default defaultProps;

package/es/v1/Button/_shared/SuccessTick/props/propTypes.js

@@ -0,0 +1,7 @@
+import PropTypes from 'prop-types';
+const propTypes = {
+  customClass: PropTypes.shape({
+    customWrapperClass: PropTypes.string
+  })
+};
+export default propTypes;

package/es/v1/Button/constants/index.js

@@ -0,0 +1,82 @@
+export const PALETTE = {
+  DEFAULT: 'default',
+  PRIMARY: 'primary',
+  SECONDARY: 'secondary',
+  DANGER: 'danger',
+  SUCCESS: 'success'
+};
+export const BG_APPEARANCE = {
+  DEFAULT: 'default',
+  ON_HOVER: 'onHover',
+  NONE: 'none'
+};
+export const BORDER_APPEARANCE = {
+  DEFAULT: 'default',
+  ON_HOVER: 'onHover',
+  NONE: 'none'
+};
+export const VARIANT = {
+  TEXT: 'text',
+  ICON: 'icon',
+  ICON_WITH_TEXT: 'iconWithText'
+};
+export const SIZE = {
+  SMALL: 'small',
+  MEDIUM: 'medium',
+  LARGE: 'large',
+  FULL: 'full'
+};
+export const STATUS = {
+  DEFAULT: 'default',
+  LOADING: 'loading',
+  SUCCESS: 'success'
+};
+export const LOADER_PLACEMENT = {
+  START: 'start',
+  END: 'end',
+  OVERLAY: 'overlay'
+};
+export const ICON_PLACEMENT = {
+  LEFT: 'left',
+  RIGHT: 'right'
+};
+export const PALETTE_SHADE = {
+  DEFAULT: 'default',
+  LIGHTER: 'lighter'
+};
+export const SHAPE = {
+  PILL: 'pill',
+  RECTANGLE: 'rectangle',
+  ROUNDED_RECTANGLE: 'roundedRectangle'
+};
+export const DISABLED_APPEARANCE = {
+  NONE: 'none',
+  DULL: 'dull',
+  STRIKE: 'strike'
+};
+export const BUTTON_TYPE = {
+  BUTTON: 'button',
+  SUBMIT: 'submit',
+  RESET: 'reset'
+};
+export const TYPOGRAPHY_SIZE_MAP = {
+  [SIZE.SMALL]: '10',
+  [SIZE.MEDIUM]: '13',
+  [SIZE.LARGE]: '14',
+  [SIZE.FULL]: '14'
+};
+/** Default values referenced by both defaultProps and cssJSLogic */
+
+export const DEFAULT_PALETTE = PALETTE.DEFAULT;
+export const DEFAULT_BG_APPEARANCE = BG_APPEARANCE.DEFAULT;
+export const DEFAULT_BORDER_APPEARANCE = BORDER_APPEARANCE.DEFAULT;
+export const DEFAULT_VARIANT = VARIANT.TEXT;
+export const DEFAULT_SIZE = SIZE.MEDIUM;
+export const DEFAULT_STATUS = STATUS.DEFAULT;
+export const DEFAULT_LOADER_PLACEMENT = LOADER_PLACEMENT.OVERLAY;
+export const DEFAULT_ICON_PLACEMENT = ICON_PLACEMENT.LEFT;
+export const DEFAULT_ICON_SIZE = 16;
+export const DEFAULT_PALETTE_SHADE = PALETTE_SHADE.DEFAULT;
+export const DEFAULT_SHAPE = SHAPE.ROUNDED_RECTANGLE;
+export const DEFAULT_DISABLED_APPEARANCE = DISABLED_APPEARANCE.DULL;
+export const DEFAULT_BUTTON_TYPE = BUTTON_TYPE.BUTTON;

package/es/v1/Button/css/Button_v1.module.css

@@ -0,0 +1,119 @@
+.varClass {
+    --local-button-border-style: solid;
+    --local-button-border-width: 1px;
+    --local-button-radius: 4px;
+    --local-button-gap: var(--zd_size8);
+    --local-button-padding-block: var(--zd_size6);
+    --local-button-padding-inline: var(--zd_size15);
+    --local-button-font-size: var(--zd_font_size13);
+    --local-loader-size: 16px;
+    --local-tick-size: 16px;
+    --local-button-height: auto;
+    --local-button-width: auto;
+    --local-button-overlay-opacity: 0.48;
+    --local-button-transition-duration: var(--zd_transition3);
+}
+
+.button {
+    composes: varClass;
+    composes: posrel pointer from '../../../common/common.module.css';
+    padding-block: var(--local-button-padding-block);
+    padding-inline: var(--local-button-padding-inline);
+    font-size: var(--local-button-font-size);
+    height: var(--local-button-height);
+    width: var(--local-button-width);
+    border-radius: var(--local-button-radius);
+    border-style: var(--local-button-border-style);
+    border-width: var(--local-button-border-width);
+    transition-duration: var(--local-button-transition-duration);
+    transition-timing-function: ease;
+    background-image: none;
+}
+
+.disabledPointer {
+    cursor: not-allowed;
+}
+
+.disabledOpac {
+    opacity: var(--local-button-overlay-opacity);
+}
+
+.loading {
+    cursor: progress;
+}
+
+.sizeSmall {
+    --local-button-padding-block: var(--zd_size4);
+    --local-button-padding-inline: var(--zd_size7);
+    --local-loader-size: 14px;
+    --local-tick-size: 14px;
+}
+
+.sizeMedium {
+    --local-button-padding-block: var(--zd_size6);
+    --local-button-padding-inline: var(--zd_size15);
+    --local-loader-size: 16px;
+    --local-tick-size: 16px;
+}
+
+.sizeLarge {
+    --local-button-padding-block: var(--zd_size9);
+    --local-button-padding-inline: var(--zd_size14);
+    --local-loader-size: 18px;
+    --local-tick-size: 18px;
+}
+
+.sizeFull {
+    --local-button-height: 100%;
+    --local-button-width: 100%;
+}
+
+.shapeRoundedRectangle {
+    --local-button-radius: 4px;
+}
+
+.shapePill {
+    --local-button-radius: 50px;
+}
+
+.shapeRectangle {
+    --local-button-radius: 0;
+}
+
+.loaderOverlay {
+    inset: 0 ;
+    composes: posab from '../../../common/common.module.css';
+}
+
+.contentWrapper {
+    gap: var(--local-button-gap);
+}
+
+
+.overlayHidden {
+    composes: contentWrapper;
+    visibility: hidden;
+    opacity: 0;
+}
+
+.strike::after {
+    content: '';
+    position: absolute;
+    inset: 0 ;
+    pointer-events: none;
+    border-radius: var(--local-button-radius);
+}
+
+[dir=ltr] .strike::after {
+    background-image: repeating-linear-gradient(120deg, currentColor 0 1px, var(--dot_mirror) 1px 8px);
+}
+
+[dir=rtl] .strike::after {
+    background-image: repeating-linear-gradient(-120deg, currentColor 0 1px, var(--dot_mirror) 1px 8px);
+}
+
+.successOverlay {
+    inset: 0 ;
+    composes: posab from '../../../common/common.module.css';
+}
+

package/es/v1/Button/css/cssJSLogic.js

@@ -0,0 +1,96 @@
+import style from "./Button_v1.module.css";
+import compileClassNames from '@zohodesk/utils/es/compileClassNames';
+import buttonResetStyle from "../../../semantic/Button/semanticButton.module.css";
+import getPaletteClasses from "../../helpers/colorHelpers/colorHelper";
+import { DUMMY_OBJECT } from '@zohodesk/dotkit/es/utils/constants';
+import { DISABLED_APPEARANCE, LOADER_PLACEMENT, SHAPE, SIZE, STATUS } from "../constants";
+
+const capitalize = function () {
+  let value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+  return value.charAt(0).toUpperCase() + value.slice(1);
+};
+
+export default function cssJSLogic(_ref) {
+  let {
+    props
+  } = _ref;
+  const {
+    palette,
+    bgAppearance,
+    borderAppearance,
+    paletteShade,
+    size,
+    status,
+    isDisabled,
+    isReadOnly,
+    isSelected,
+    shape,
+    loaderPlacement,
+    disabledAppearance,
+    customClass = DUMMY_OBJECT
+  } = props;
+  const {
+    wrapper: wrapperClass = '',
+    text: textClassCustom = ''
+  } = customClass;
+  const isLoading = status === STATUS.LOADING;
+  const isSuccess = status === STATUS.SUCCESS;
+  const isInteractive = !isDisabled && !isReadOnly;
+  const overlayActive = (isLoading || isSuccess) && loaderPlacement === LOADER_PLACEMENT.OVERLAY;
+  const {
+    bg,
+    hoverBg,
+    focusBg,
+    activeBg,
+    text,
+    hoverText,
+    focusText,
+    activeText,
+    border,
+    hoverBorder,
+    focusBorder,
+    activeBorder
+  } = getPaletteClasses({
+    palette,
+    bgAppearance,
+    borderAppearance,
+    paletteShade,
+    isSelected
+  });
+  const sizeClass = size ? style[`size${capitalize(size)}`] : '';
+  const shapeClass = shape ? style[`shape${capitalize(shape)}`] : '';
+  const shouldStrike = disabledAppearance === DISABLED_APPEARANCE.STRIKE && isDisabled;
+  const buttonClassName = compileClassNames({
+    [buttonResetStyle.buttonReset]: true,
+    [style.button]: true,
+    [bg]: !!bg,
+    [hoverBg]: !!hoverBg && isInteractive,
+    [focusBg]: !!focusBg && isInteractive,
+    [activeBg]: !!activeBg && isInteractive,
+    [text]: !!text,
+    [hoverText]: !!hoverText && isInteractive,
+    [focusText]: !!focusText && isInteractive,
+    [activeText]: !!activeText && isInteractive,
+    [border]: !!border,
+    [hoverBorder]: !!hoverBorder && isInteractive,
+    [focusBorder]: !!focusBorder && isInteractive,
+    [activeBorder]: !!activeBorder && isInteractive,
+    [sizeClass]: !!sizeClass,
+    [shapeClass]: !!shapeClass,
+    [style.disabledOpac]: isReadOnly || isDisabled && disabledAppearance === DISABLED_APPEARANCE.DULL,
+    [style.disabledPointer]: isReadOnly || isDisabled,
+    [style.loading]: isLoading,
+    [style.strike]: shouldStrike,
+    [wrapperClass]: !!wrapperClass
+  });
+  const textClassName = compileClassNames({
+    [textClassCustom]: !!textClassCustom
+  });
+  return {
+    buttonClassName,
+    textClassName,
+    contentWrapperClass: overlayActive ? style.overlayHidden : style.contentWrapper,
+    loaderOverlayClass: style.loaderOverlay,
+    successOverlayClass: style.successOverlay
+  };
+}

package/es/v1/Button/index.js

@@ -0,0 +1,2 @@
+export { default } from "./Button";
+export { default as Button } from "./Button";

package/es/v1/Button/props/defaultProps.js

@@ -0,0 +1,26 @@
+import { DUMMY_FUNCTION, DUMMY_OBJECT } from '@zohodesk/dotkit/es/utils/constants';
+import { DEFAULT_PALETTE, DEFAULT_BG_APPEARANCE, DEFAULT_BORDER_APPEARANCE, DEFAULT_VARIANT, DEFAULT_SIZE, DEFAULT_STATUS, DEFAULT_LOADER_PLACEMENT, DEFAULT_ICON_PLACEMENT, DEFAULT_ICON_SIZE, DEFAULT_PALETTE_SHADE, DEFAULT_SHAPE, DEFAULT_DISABLED_APPEARANCE, DEFAULT_BUTTON_TYPE } from "../constants";
+const defaultProps = {
+  palette: DEFAULT_PALETTE,
+  bgAppearance: DEFAULT_BG_APPEARANCE,
+  borderAppearance: DEFAULT_BORDER_APPEARANCE,
+  variant: DEFAULT_VARIANT,
+  size: DEFAULT_SIZE,
+  status: DEFAULT_STATUS,
+  loaderPlacement: DEFAULT_LOADER_PLACEMENT,
+  iconPlacement: DEFAULT_ICON_PLACEMENT,
+  iconSize: DEFAULT_ICON_SIZE,
+  paletteShade: DEFAULT_PALETTE_SHADE,
+  disabledAppearance: DEFAULT_DISABLED_APPEARANCE,
+  isDisabled: false,
+  isReadOnly: false,
+  isSelected: false,
+  shape: DEFAULT_SHAPE,
+  type: DEFAULT_BUTTON_TYPE,
+  onClick: DUMMY_FUNCTION,
+  customClass: DUMMY_OBJECT,
+  customProps: DUMMY_OBJECT,
+  customAttributes: DUMMY_OBJECT,
+  a11yAttributes: DUMMY_OBJECT
+};
+export default defaultProps;

package/es/v1/Button/props/propTypes.js

@@ -0,0 +1,43 @@
+import PropTypes from 'prop-types';
+import { PALETTE, BG_APPEARANCE, BORDER_APPEARANCE, VARIANT, SIZE, STATUS, LOADER_PLACEMENT, ICON_PLACEMENT, PALETTE_SHADE, SHAPE, DISABLED_APPEARANCE, BUTTON_TYPE } from "../constants";
+const renderSlotType = PropTypes.oneOfType([PropTypes.node, PropTypes.func]);
+const propTypes = {
+  palette: PropTypes.oneOf(Object.values(PALETTE)),
+  bgAppearance: PropTypes.oneOf(Object.values(BG_APPEARANCE)),
+  borderAppearance: PropTypes.oneOf(Object.values(BORDER_APPEARANCE)),
+  variant: PropTypes.oneOf(Object.values(VARIANT)),
+  size: PropTypes.oneOf(Object.values(SIZE)),
+  status: PropTypes.oneOf(Object.values(STATUS)),
+  loaderPlacement: PropTypes.oneOf(Object.values(LOADER_PLACEMENT)),
+  iconName: PropTypes.string,
+  iconSize: PropTypes.number,
+  iconPlacement: PropTypes.oneOf(Object.values(ICON_PLACEMENT)),
+  paletteShade: PropTypes.oneOf(Object.values(PALETTE_SHADE)),
+  disabledAppearance: PropTypes.oneOf(Object.values(DISABLED_APPEARANCE)),
+  renderIcon: renderSlotType,
+  renderBefore: renderSlotType,
+  renderAfter: renderSlotType,
+  renderLoader: renderSlotType,
+  renderSuccess: renderSlotType,
+  children: PropTypes.node,
+  type: PropTypes.oneOf(Object.values(BUTTON_TYPE)),
+  onClick: PropTypes.func,
+  isDisabled: PropTypes.bool,
+  isReadOnly: PropTypes.bool,
+  isSelected: PropTypes.bool,
+  shape: PropTypes.oneOf(Object.values(SHAPE)),
+  title: PropTypes.string,
+  customClass: PropTypes.shape({
+    wrapper: PropTypes.string,
+    text: PropTypes.string
+  }),
+  customProps: PropTypes.shape({
+    text: PropTypes.object,
+    icon: PropTypes.object
+  }),
+  customAttributes: PropTypes.object,
+  a11yAttributes: PropTypes.object,
+  customId: PropTypes.string,
+  testId: PropTypes.string
+};
+export default propTypes;