@zohodesk/components 1.0.0-temp-257.1 → 1.0.0-temp-259.2

package/es/Textarea/Textarea.js

@@ -117,11 +117,4 @@ export default class Textarea extends React.Component {
 
 }
 Textarea.defaultProps = defaultProps;
-Textarea.propTypes = propTypes; // if (__DOCS__) {
-//   Textarea.docs = {
-//     componentGroup: 'Form Elements',
-//     folderName: 'Style Guide',
-//     external: true,
-//     description: ' '
-//   };
-// }
+Textarea.propTypes = propTypes;

package/es/Tooltip/Tooltip.js

@@ -521,11 +521,4 @@ export default class Tooltip extends React.Component {
 
 }
 Tooltip.propTypes = propTypes;
-Tooltip.defaultProps = defaultProps; // if (__DOCS__) {
-//   Tooltip.docs = {
-//     componentGroup: 'Atom',
-//     folderName: 'Style Guide',
-//     description: ' ',
-//     external: true
-//   };
-// }
+Tooltip.defaultProps = defaultProps;

package/es/VelocityAnimation/VelocityAnimation/VelocityAnimation.js

@@ -70,8 +70,4 @@ export default class VelocityAnimation extends React.Component {
 }
 VelocityAnimation.defaultProps = defaultProps;
 VelocityAnimation.propTypes = propTypes;
-VelocityAnimation.contextType = LibraryContext; // if (__DOCS__) {
-//   VelocityAnimation.docs = {
-//     componentGroup: 'Animation'
-//   };
-// }
+VelocityAnimation.contextType = LibraryContext;

package/es/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup.js

@@ -137,8 +137,4 @@ VelocityAnimationGroup.defaultProps = { ...defaultProps,
   component: React.Fragment
 };
 VelocityAnimationGroup.propTypes = propTypes;
-VelocityAnimationGroup.contextType = LibraryContext; // if (__DOCS__) {
-//   VelocityAnimationGroup.docs = {
-//     componentGroup: 'Animation'
-//   };
-// }
+VelocityAnimationGroup.contextType = LibraryContext;

package/es/semantic/Button/Button.js

@@ -53,9 +53,4 @@ export default class Button extends React.Component {
 
 }
 Button.defaultProps = defaultProps;
-Button.propTypes = propTypes; // if (__DOCS__) {
-//   Button.docs = {
-//     componentGroup: 'semantic',
-//     folderName: 'DefaultComponents'
-//   };
-// }
+Button.propTypes = propTypes;

package/es/shared/ArrowIcon/__tests__/__snapshots__/ArrowIcon.spec.js.snap

@@ -4,7 +4,7 @@ exports[`ArrowIcon Should be render isActive is true 1`] = `
 <DocumentFragment>
   <div
     aria-hidden="true"
-    class="inlineFlex column alignItems_center justifyContent_center arrowIcon active"
+    class="d-inline-flex d-flex-col d-items-center d-justify-center arrowIcon active"
     data-id="undefined_downIcon"
     data-selector-id="container"
     data-test-id="undefined_downIcon"
@@ -25,7 +25,7 @@ exports[`ArrowIcon Should be render isDisabled is true 1`] = `
 <DocumentFragment>
   <div
     aria-hidden="true"
-    class="inlineFlex column alignItems_center justifyContent_center arrowIcon disabled"
+    class="d-inline-flex d-flex-col d-items-center d-justify-center arrowIcon disabled"
     data-id="undefined_downIcon"
     data-selector-id="container"
     data-test-id="undefined_downIcon"
@@ -46,7 +46,7 @@ exports[`ArrowIcon Should be render isReadOnly is true 1`] = `
 <DocumentFragment>
   <div
     aria-hidden="true"
-    class="inlineFlex column alignItems_center justifyContent_center arrowIcon readonly"
+    class="d-inline-flex d-flex-col d-items-center d-justify-center arrowIcon readonly"
     data-id="undefined_downIcon"
     data-selector-id="container"
     data-test-id="undefined_downIcon"
@@ -67,7 +67,7 @@ exports[`ArrowIcon Should be render isRotated is true 1`] = `
 <DocumentFragment>
   <div
     aria-hidden="true"
-    class="inlineFlex column alignItems_center justifyContent_center arrowIcon rotated"
+    class="d-inline-flex d-flex-col d-items-center d-justify-center arrowIcon rotated"
     data-id="undefined_downIcon"
     data-selector-id="container"
     data-test-id="undefined_downIcon"
@@ -88,7 +88,7 @@ exports[`ArrowIcon Should be render with a11yAttributes 1`] = `
 <DocumentFragment>
   <div
     aria-hidden="true"
-    class="inlineFlex column alignItems_center justifyContent_center arrowIcon"
+    class="d-inline-flex d-flex-col d-items-center d-justify-center arrowIcon"
     data-a11y-focus="true"
     data-id="undefined_downIcon"
     data-selector-id="container"
@@ -110,7 +110,7 @@ exports[`ArrowIcon Should be render with customClass 1`] = `
 <DocumentFragment>
   <div
     aria-hidden="true"
-    class="inlineFlex column alignItems_center justifyContent_center arrowIcon arrowIcon_containerClass"
+    class="d-inline-flex d-flex-col d-items-center d-justify-center arrowIcon arrowIcon_containerClass"
     data-id="undefined_downIcon"
     data-selector-id="container"
     data-test-id="undefined_downIcon"
@@ -131,7 +131,7 @@ exports[`ArrowIcon Should be render with customProps 1`] = `
 <DocumentFragment>
   <div
     aria-hidden="true"
-    class="inlineFlex column alignItems_center justifyContent_center arrowIcon"
+    class="d-inline-flex d-flex-col d-items-center d-justify-center arrowIcon"
     data-id="undefined_downIcon"
     data-selector-id="container"
     data-test-id="hereIsTestId"
@@ -152,7 +152,7 @@ exports[`ArrowIcon Should be render with dataId 1`] = `
 <DocumentFragment>
   <div
     aria-hidden="true"
-    class="inlineFlex column alignItems_center justifyContent_center arrowIcon"
+    class="d-inline-flex d-flex-col d-items-center d-justify-center arrowIcon"
     data-id="ArrowIcon-test-dataId_downIcon"
     data-selector-id="container"
     data-test-id="ArrowIcon-test-dataId_downIcon"
@@ -181,7 +181,7 @@ exports[`ArrowIcon Should be render with tagAttributes 1`] = `
 <DocumentFragment>
   <div
     aria-hidden="true"
-    class="inlineFlex column alignItems_center justifyContent_center arrowIcon"
+    class="d-inline-flex d-flex-col d-items-center d-justify-center arrowIcon"
     data-id="undefined_downIcon"
     data-selector-id="container"
     data-test-id="undefined_downIcon"
@@ -203,7 +203,7 @@ exports[`ArrowIcon rendering the defult props 1`] = `
 <DocumentFragment>
   <div
     aria-hidden="true"
-    class="inlineFlex column alignItems_center justifyContent_center arrowIcon"
+    class="d-inline-flex d-flex-col d-items-center d-justify-center arrowIcon"
     data-id="undefined_downIcon"
     data-selector-id="container"
     data-test-id="undefined_downIcon"

package/es/shared/InputFieldLine/__tests__/__snapshots__/InputFieldLine.spec.js.snap

@@ -3,7 +3,7 @@
 exports[`InputFieldLine Should be render hasEffect is false 1`] = `
 <DocumentFragment>
   <div
-    class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder"
+    class="d-flex d-flex-row varClass customContainer border_bottom effect borderColor_default hasBorder"
     data-selector-id="container"
     data-title=""
   />
@@ -13,7 +13,7 @@ exports[`InputFieldLine Should be render hasEffect is false 1`] = `
 exports[`InputFieldLine Should be render hasPadding is true 1`] = `
 <DocumentFragment>
   <div
-    class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder"
+    class="d-flex d-flex-row varClass customContainer border_bottom effect borderColor_default hasBorder"
     data-selector-id="container"
     data-title=""
   />
@@ -23,7 +23,7 @@ exports[`InputFieldLine Should be render hasPadding is true 1`] = `
 exports[`InputFieldLine Should be render isActive is true 1`] = `
 <DocumentFragment>
   <div
-    class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder active"
+    class="d-flex d-flex-row varClass customContainer border_bottom effect borderColor_default hasBorder active"
     data-selector-id="container"
     data-title=""
   />
@@ -33,7 +33,7 @@ exports[`InputFieldLine Should be render isActive is true 1`] = `
 exports[`InputFieldLine Should be render isDisabled is true 1`] = `
 <DocumentFragment>
   <div
-    class="flex row varClass customContainer border_bottom disabled borderColor_default hasBorder"
+    class="d-flex d-flex-row varClass customContainer border_bottom disabled borderColor_default hasBorder"
     data-selector-id="container"
     data-title=""
   />
@@ -43,7 +43,7 @@ exports[`InputFieldLine Should be render isDisabled is true 1`] = `
 exports[`InputFieldLine Should be render isReadOnly is true 1`] = `
 <DocumentFragment>
   <div
-    class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder"
+    class="d-flex d-flex-row varClass customContainer border_bottom effect borderColor_default hasBorder"
     data-selector-id="container"
     data-title=""
   />
@@ -53,7 +53,7 @@ exports[`InputFieldLine Should be render isReadOnly is true 1`] = `
 exports[`InputFieldLine Should be render with title 1`] = `
 <DocumentFragment>
   <div
-    class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder"
+    class="d-flex d-flex-row varClass customContainer border_bottom effect borderColor_default hasBorder"
     data-selector-id="container"
     data-title="InputFieldLine Test Title"
   />
@@ -63,7 +63,7 @@ exports[`InputFieldLine Should be render with title 1`] = `
 exports[`InputFieldLine Should render border - all 1`] = `
 <DocumentFragment>
   <div
-    class="flex row varClass customContainer border_all effect borderColor_default hasBorder"
+    class="d-flex d-flex-row varClass customContainer border_all effect borderColor_default hasBorder"
     data-selector-id="container"
     data-title=""
   />
@@ -73,7 +73,7 @@ exports[`InputFieldLine Should render border - all 1`] = `
 exports[`InputFieldLine Should render border - bottom 1`] = `
 <DocumentFragment>
   <div
-    class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder"
+    class="d-flex d-flex-row varClass customContainer border_bottom effect borderColor_default hasBorder"
     data-selector-id="container"
     data-title=""
   />
@@ -83,7 +83,7 @@ exports[`InputFieldLine Should render border - bottom 1`] = `
 exports[`InputFieldLine Should render border - none 1`] = `
 <DocumentFragment>
   <div
-    class="flex row varClass customContainer effect"
+    class="d-flex d-flex-row varClass customContainer effect"
     data-selector-id="container"
     data-title=""
   />
@@ -93,7 +93,7 @@ exports[`InputFieldLine Should render border - none 1`] = `
 exports[`InputFieldLine Should render borderColor - dark 1`] = `
 <DocumentFragment>
   <div
-    class="flex row varClass customContainer border_bottom effect borderColor_dark hasBorder"
+    class="d-flex d-flex-row varClass customContainer border_bottom effect borderColor_dark hasBorder"
     data-selector-id="container"
     data-title=""
   />
@@ -103,7 +103,7 @@ exports[`InputFieldLine Should render borderColor - dark 1`] = `
 exports[`InputFieldLine Should render borderColor - default 1`] = `
 <DocumentFragment>
   <div
-    class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder"
+    class="d-flex d-flex-row varClass customContainer border_bottom effect borderColor_default hasBorder"
     data-selector-id="container"
     data-title=""
   />
@@ -113,7 +113,7 @@ exports[`InputFieldLine Should render borderColor - default 1`] = `
 exports[`InputFieldLine Should render borderColor - error 1`] = `
 <DocumentFragment>
   <div
-    class="flex row varClass customContainer border_bottom effect borderColor_error hasBorder"
+    class="d-flex d-flex-row varClass customContainer border_bottom effect borderColor_error hasBorder"
     data-selector-id="container"
     data-title=""
   />
@@ -123,7 +123,7 @@ exports[`InputFieldLine Should render borderColor - error 1`] = `
 exports[`InputFieldLine Should render borderColor - transparent 1`] = `
 <DocumentFragment>
   <div
-    class="flex row varClass customContainer border_bottom effect borderColor_transparent hasBorder"
+    class="d-flex d-flex-row varClass customContainer border_bottom effect borderColor_transparent hasBorder"
     data-selector-id="container"
     data-title=""
   />
@@ -133,7 +133,7 @@ exports[`InputFieldLine Should render borderColor - transparent 1`] = `
 exports[`InputFieldLine Should render customClass 1`] = `
 <DocumentFragment>
   <div
-    class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder inputFieldLine-custom-class"
+    class="d-flex d-flex-row varClass customContainer border_bottom effect borderColor_default hasBorder inputFieldLine-custom-class"
     data-selector-id="container"
     data-title=""
   />
@@ -143,7 +143,7 @@ exports[`InputFieldLine Should render customClass 1`] = `
 exports[`InputFieldLine Should render customProps 1`] = `
 <DocumentFragment>
   <div
-    class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder"
+    class="d-flex d-flex-row varClass customContainer border_bottom effect borderColor_default hasBorder"
     data-selector-id="container"
     data-test="inputFieldLine-test"
     data-title=""
@@ -154,7 +154,7 @@ exports[`InputFieldLine Should render customProps 1`] = `
 exports[`InputFieldLine Should render dataId 1`] = `
 <DocumentFragment>
   <div
-    class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder"
+    class="d-flex d-flex-row varClass customContainer border_bottom effect borderColor_default hasBorder"
     data-id="inputFieldLine-test-id"
     data-selector-id="container"
     data-test-id="inputFieldLine-test-id"
@@ -166,7 +166,7 @@ exports[`InputFieldLine Should render dataId 1`] = `
 exports[`InputFieldLine Should render size  - medium 1`] = `
 <DocumentFragment>
   <div
-    class="flex row scroll_vertical varClass customContainer medium padding_medium border_bottom effect borderColor_default hasBorder"
+    class="d-flex d-flex-row d-overflow-y-auto d-overflow-x-hidden varClass customContainer medium padding_medium border_bottom effect borderColor_default hasBorder"
     data-selector-id="container"
     data-title=""
   />
@@ -176,7 +176,7 @@ exports[`InputFieldLine Should render size  - medium 1`] = `
 exports[`InputFieldLine Should render size  - xmedium 1`] = `
 <DocumentFragment>
   <div
-    class="flex row scroll_vertical varClass customContainer xmedium padding_xmedium border_bottom effect borderColor_default hasBorder"
+    class="d-flex d-flex-row d-overflow-y-auto d-overflow-x-hidden varClass customContainer xmedium padding_xmedium border_bottom effect borderColor_default hasBorder"
     data-selector-id="container"
     data-title=""
   />
@@ -186,7 +186,7 @@ exports[`InputFieldLine Should render size  - xmedium 1`] = `
 exports[`InputFieldLine rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder"
+    class="d-flex d-flex-row varClass customContainer border_bottom effect borderColor_default hasBorder"
     data-selector-id="container"
     data-title=""
   />

package/es/v1/Button/Button.js

@@ -11,7 +11,7 @@ import renderNode from '@zohodesk/utils/es/renderNode';
 import { DUMMY_OBJECT } from '@zohodesk/dotkit/es/utils/constants';
 import { ICON_PLACEMENT, LOADER_PLACEMENT, STATUS, TYPOGRAPHY_SIZE_MAP, VARIANT } from "./constants";
 import Typography from "../../Typography/Typography";
-import Loader from "../shared/Loader/Loader";
+import Spinner from "../shared/Spinner/Spinner";
 import SuccessTick from "../shared/SuccessTick/SuccessTick";
 import cssJSLogic from "./css/cssJSLogic";
 import propTypes from "./props/propTypes";
@@ -39,7 +39,6 @@ export const ButtonPresentational = /*#__PURE__*/forwardRef(function ButtonPrese
     renderSuccess,
     children,
     type,
-    isReadOnly,
     isSelected,
     title,
     customProps,
@@ -93,7 +92,7 @@ export const ButtonPresentational = /*#__PURE__*/forwardRef(function ButtonPrese
       testId: testId ? `${testId}_loader` : undefined
     }, hasCustomLoader ? undefined : loaderAttributes), hasCustomLoader ? renderNode(renderLoader, {
       status: STATUS.LOADING
-    }) : /*#__PURE__*/React.createElement(Loader, {
+    }) : /*#__PURE__*/React.createElement(Spinner, {
       customClass: loaderClassName
     }));
   };
@@ -161,7 +160,6 @@ export const ButtonPresentational = /*#__PURE__*/forwardRef(function ButtonPrese
   return /*#__PURE__*/React.createElement("button", _extends({}, containerAttributes, {
     "aria-busy": isLoading,
     disabled: isDisabledState,
-    "aria-readonly": isReadOnly,
     "aria-pressed": isSelected
   }, a11yAttributes, {
     ref: ref,
@@ -174,8 +172,9 @@ ButtonPresentational.displayName = 'ButtonPresentational';
 const Button = /*#__PURE__*/forwardRef(function Button(props, ref) {
   const {
     palette,
-    bgAppearance,
-    borderAppearance,
+    appearance,
+    hoverAppearance,
+    selectedAppearance,
     variant,
     status,
     loaderPlacement,
@@ -192,10 +191,8 @@ const Button = /*#__PURE__*/forwardRef(function Button(props, ref) {
     type,
     onClick,
     isDisabled,
-    isReadOnly,
     isSelected,
     shape,
-    paletteShade,
     disabledAppearance,
     title,
     customProps,
@@ -208,14 +205,13 @@ const Button = /*#__PURE__*/forwardRef(function Button(props, ref) {
   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 classNames = useMemo(() => cssJSLogic({
     props
-  }), [palette, bgAppearance, borderAppearance, paletteShade, size, variant, status, isDisabled, isReadOnly, isSelected, shape, loaderPlacement, disabledAppearance, props.customClass]);
+  }), [palette, appearance, hoverAppearance, selectedAppearance, size, variant, status, isDisabled, isSelected, shape, loaderPlacement, disabledAppearance, props.customClass]);
 
   const handleClick = event => {
-    if (isInteractionDisabled) return;
+    if (isDisabledState) return;
     onClick(event);
   };
 
@@ -238,7 +234,6 @@ const Button = /*#__PURE__*/forwardRef(function Button(props, ref) {
     renderSuccess,
     children,
     type,
-    isReadOnly,
     isSelected,
     title,
     customProps,

package/es/v1/Button/README.md

@@ -62,8 +62,9 @@ import Button from '@zohodesk/components/es/v1/Button/Button';
 | `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 |
+| `appearance` | `array of: border, text, bg` | `['bg', 'border']` | Which treatments are colored at rest |
+| `hoverAppearance` | `array of: border, text, bg` | `['bg', 'border']` | Which treatments are colored on hover/focus/active |
+| `selectedAppearance` | `array of: border, text, bg` | `['bg', 'border']` | Which treatments are colored when `isSelected` |
 | `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 |

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

@@ -28,21 +28,29 @@ describe('Button - Component', () => {
     }));
     expect(asFragment()).toMatchSnapshot();
   });
-  const bgAppearance = ['default', 'onHover', 'none'];
-  test.each(bgAppearance)('Should render bgAppearance of buttons - %s', bg => {
+  const appearanceCombos = [['bg'], ['border'], ['text'], ['bg', 'border'], []];
+  test.each(appearanceCombos.map(combo => [combo]))('Should render appearance of buttons - %s', appearance => {
     const {
       asFragment
     } = render( /*#__PURE__*/React.createElement(Button, {
-      bgAppearance: bg
+      appearance: appearance
     }));
     expect(asFragment()).toMatchSnapshot();
   });
-  const borderAppearance = ['default', 'onHover', 'none'];
-  test.each(borderAppearance)('Should render borderAppearance of buttons - %s', border => {
+  test.each(appearanceCombos.map(combo => [combo]))('Should render hoverAppearance of buttons - %s', appearance => {
     const {
       asFragment
     } = render( /*#__PURE__*/React.createElement(Button, {
-      borderAppearance: border
+      hoverAppearance: appearance
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(appearanceCombos.map(combo => [combo]))('Should render selectedAppearance of buttons - %s', appearance => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Button, {
+      isSelected: true,
+      selectedAppearance: appearance
     }));
     expect(asFragment()).toMatchSnapshot();
   });