@zohodesk/dot 1.0.0-beta.27 → 1.0.0-beta.271

package/es/IconButton/IconButton.js

@@ -1,87 +1,149 @@
-import _Object$getPrototypeOf from 'babel-runtime/core-js/object/get-prototype-of';
-import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
-import _createClass from 'babel-runtime/helpers/createClass';
-import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
-import _inherits from 'babel-runtime/helpers/inherits';
+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 from 'react';
-import PropTypes from 'prop-types';
-import Icon from '@zohodesk/icons/lib/Icon';
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
+import { Icon } from '@zohodesk/icons';
 import { Container } from '@zohodesk/components/lib/Layout';
-import { CssProvider } from '@zohodesk/components/lib/CssProvider';
+import btnStyle from '@zohodesk/components/lib/semantic/Button/semanticButton.module.css';
+import RippleEffect from '@zohodesk/components/lib/RippleEffect/RippleEffect';
 import style from './IconButton.module.css';
-
-var IconButton = function (_React$Component) {
-  _inherits(IconButton, _React$Component);
-
-  function IconButton() {
-    _classCallCheck(this, IconButton);
-
-    return _possibleConstructorReturn(this, (IconButton.__proto__ || _Object$getPrototypeOf(IconButton)).apply(this, arguments));
+export default class IconButton extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isPressed: false
+    };
+    this.handleToggle = this.handleToggle.bind(this);
+    this.triggerClick = this.triggerClick.bind(this);
+    this.triggerMouseDown = this.triggerMouseDown.bind(this);
+    this.triggerMouseOver = this.triggerMouseOver.bind(this);
+    this.onBlur = this.onBlur.bind(this);
   }
 
-  _createClass(IconButton, [{
-    key: 'render',
-    value: function render() {
-      var _props = this.props,
-          palette = _props.palette,
-          iconSize = _props.iconSize,
-          iconName = _props.iconName,
-          className = _props.className,
-          iconClass = _props.iconClass,
-          dataId = _props.dataId,
-          onClick = _props.onClick,
-          dataTitle = _props.dataTitle,
-          eleRef = _props.eleRef,
-          isActive = _props.isActive,
-          tourId = _props.tourId,
-          isDisabled = _props.isDisabled;
-
-      return React.createElement(
-        Container,
-        {
-          isInline: true,
-          tourId: tourId,
-          align: 'both',
-          isCover: false,
-          className: ' ' + (isDisabled ? CssProvider('isDisabled') : style.enable) + ' ' + style.wrapper + ' ' + (isActive ? style[palette + '_active'] : style[palette]) + ' ' + className,
-          dataId: dataId,
-          onClick: !isDisabled && onClick,
-          'data-title': dataTitle,
-          eleRef: eleRef
-        },
-        React.createElement(Icon, { size: iconSize, name: iconName, iconClass: iconClass })
-      );
+  handleToggle(e) {
+    if (e.key === ' ' || e.key === 'Enter' || e.key === 'Spacebar') {
+      e.preventDefault();
+      this.triggerClick(e);
+      this.triggerMouseDown(e);
     }
-  }]);
+  }
 
-  return IconButton;
-}(React.Component);
+  triggerClick(e) {
+    let {
+      onClick,
+      isDisabled
+    } = this.props;
+    !isDisabled ? (onClick && onClick(e), this.setState({
+      isPressed: true
+    })) : null;
+  }
+
+  triggerMouseOver(e) {
+    let {
+      onMouseOver,
+      isDisabled
+    } = this.props;
+    !isDisabled ? (onMouseOver && onMouseOver(e), this.setState({
+      isPressed: true
+    })) : null;
+  }
 
-export default IconButton;
+  triggerMouseDown(e) {
+    let {
+      onMouseDown,
+      isDisabled
+    } = this.props;
+    !isDisabled ? (onMouseDown && onMouseDown(e), this.setState({
+      isPressed: true
+    })) : null;
+  }
 
+  onBlur(e) {
+    let {
+      isDisabled
+    } = this.props;
+    !isDisabled ? this.setState({
+      isPressed: false
+    }) : null;
+  }
 
-IconButton.propTypes = {
-  palette: PropTypes.oneOf('primary', 'primaryFilled', 'secondary'),
-  iconSize: PropTypes.string,
-  iconName: PropTypes.string,
-  className: PropTypes.string,
-  iconClass: PropTypes.string,
-  dataId: PropTypes.string,
-  onClick: PropTypes.func,
-  dataTitle: PropTypes.string,
-  eleRef: PropTypes.func,
-  isActive: PropTypes.bool,
-  tourId: PropTypes.string,
-  isDisabled: PropTypes.bool
-};
+  render() {
+    let {
+      palette,
+      iconSize,
+      iconName,
+      className,
+      iconClass,
+      dataId,
+      dataSelectorId,
+      eleRef,
+      isActive,
+      tourId,
+      isDisabled,
+      children,
+      hoverType,
+      title,
+      isBold,
+      isNeedEffect,
+      needButtonTag,
+      a11y,
+      dataIsHtml,
+      customProps
+    } = this.props;
+    let {
+      isPressed
+    } = this.state;
+    let {
+      ariaHaspopup,
+      ariaExpanded,
+      ariaLabel,
+      ariaControls,
+      ariaLabelledby
+    } = a11y;
+    return /*#__PURE__*/React.createElement(RippleEffect, {
+      palette: palette,
+      isActive: isActive,
+      hoverType: hoverType,
+      isDisabled: isDisabled,
+      isNeedEffect: isNeedEffect
+    }, /*#__PURE__*/React.createElement(Container, _extends({
+      "aria-label": ariaLabel,
+      "aria-haspopup": ariaHaspopup,
+      "aria-expanded": ariaExpanded,
+      "aria-controls": ariaControls,
+      "aria-labelledby": ariaLabelledby,
+      tagName: needButtonTag ? 'button' : 'div',
+      isInline: true,
+      tourId: tourId,
+      align: "both",
+      isCover: false,
+      className: `${needButtonTag && btnStyle.buttonReset} ${style.wrapper} ${className ? className : ''} ${isActive ? style[`${palette}_active`] : style[palette]}`,
+      dataId: dataId,
+      dataSelectorId: dataSelectorId,
+      onClick: this.triggerClick,
+      "data-title": title,
+      "data-ishtml": dataIsHtml,
+      eleRef: eleRef,
+      onMouseDown: this.triggerMouseDown,
+      onMouseEnter: this.triggerMouseOver,
+      "aria-pressed": isPressed,
+      onKeyDown: this.handleToggle,
+      onFocus: this.triggerMouseOver,
+      onBlur: this.onBlur,
+      disabled: isDisabled
+    }, customProps), iconName ? /*#__PURE__*/React.createElement(Icon, {
+      isBold: isBold,
+      size: iconSize,
+      name: iconName,
+      iconClass: iconClass
+    }) : null, children ? children : null));
+  }
 
-IconButton.defaultProps = {
-  palette: 'secondary',
-  iconSize: '13',
-  className: '',
-  iconClass: '',
-  dataId: 'iconContainer',
-  dataTitle: '',
-  isActive: false,
-  isDisabled: false
-};
+}
+IconButton.propTypes = propTypes;
+IconButton.defaultProps = defaultProps; // if (__DOCS__) {
+//   IconButton.docs = {
+//     componentGroup: 'Atom'
+//   };
+// }

package/es/IconButton/IconButton.module.css

@@ -1,37 +1,22 @@
+.varClass {
+  --iconColor: var(--zdt_iconButton_icon_black);
+}
 .wrapper {
-  height: var(--zd_size28);
-  position: relative;
-  width: var(--zd_size28);
+  height: var(--zd_size28) ;
+  width: var(--zd_size28) ;
+  composes: offSelection from '~@zohodesk/components/lib/common/common.module.css';
+  composes: varClass;
+  color: var(--iconColor);
   cursor: pointer;
-  border-radius: var(--zd_size4);
-}
-.secondary {
-  border: 1px solid var(--dot_border_paleBlue);
-}
-.enable.secondary:hover {
-  border-color: var(--dot_border_slateGrey);
 }
 .primary {
-  color: var(--dot_text_primary);
-  border: 1px solid var(--dot_border_primary);
-}
-.enable.primary:hover {
-  color: var(--dot_text_cobalt);
-  border-color: var(--dot_border_cobalt);
-}
-
-.secondary_active {
-  border: 1px solid var(--dot_border_tropicalBlue);
-  background-color: var(--dot_bg_aliceBlue);
-}
-.primary_active {
-  color: var(--dot_text_white);
-  background-color: var(--dot_bg_primary);
+  --iconColor: var(--zdt_iconButton_icon_primary);
 }
-.primaryFilled {
-  color: var(--dot_text_white);
-  background-color: var(--dot_bg_primary);
+.primary:hover {
+  --iconColor: var(--zdt_iconButton_icon_primaryHover);
 }
-.primaryFilled_active, .enable.primaryFilled:hover {
-  background-color: var(--dot_bg_cobalt);
+.primary_active,
+.primaryFilled,
+.primaryFilled_active {
+  --iconColor: var(--zdt_iconButton_icon_primaryActive);
 }

package/es/IconButton/props/defaultProps.js

@@ -0,0 +1,17 @@
+export const defaultProps = {
+  palette: 'default',
+  iconSize: '13',
+  className: '',
+  iconClass: '',
+  dataId: 'iconContainer',
+  isActive: false,
+  isDisabled: false,
+  hoverType: 'default',
+  isBold: false,
+  isNeedEffect: true,
+  needButtonTag: true,
+  a11y: {},
+  dataIsHtml: false,
+  customProps: {},
+  dataSelectorId: 'iconButton'
+};

package/es/IconButton/props/propTypes.js

@@ -0,0 +1,33 @@
+import PropTypes from 'prop-types';
+export const propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  dataId: PropTypes.string,
+  dataSelectorId: PropTypes.string,
+  eleRef: PropTypes.func,
+  hoverType: PropTypes.oneOf(['default', 'border', 'bg']),
+  iconClass: PropTypes.string,
+  iconName: PropTypes.string,
+  iconSize: PropTypes.string,
+  isActive: PropTypes.bool,
+  isBold: PropTypes.bool,
+  isDisabled: PropTypes.bool,
+  isNeedEffect: PropTypes.bool,
+  onClick: PropTypes.func,
+  onMouseDown: PropTypes.func,
+  onMouseOver: PropTypes.func,
+  palette: PropTypes.oneOf(['primary', 'primaryFilled', 'default']),
+  title: PropTypes.string,
+  tourId: PropTypes.string,
+  isNeedEffect: PropTypes.bool,
+  needButtonTag: PropTypes.bool,
+  a11y: PropTypes.shape({
+    ariaHaspopup: PropTypes.bool,
+    ariaExpanded: PropTypes.bool,
+    ariaLabel: PropTypes.string,
+    ariaControls: PropTypes.string,
+    ariaLabelledby: PropTypes.string
+  }),
+  dataIsHtml: PropTypes.bool,
+  customProps: PropTypes.object
+};

package/es/Image/Image.js

@@ -1,66 +1,39 @@
-import _Object$getPrototypeOf from 'babel-runtime/core-js/object/get-prototype-of';
-import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
-import _createClass from 'babel-runtime/helpers/createClass';
-import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
-import _inherits from 'babel-runtime/helpers/inherits';
 import React from 'react';
-import PropTypes from 'prop-types';
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
 import style from './Image.module.css';
-
-var Image = function (_React$Component) {
-  _inherits(Image, _React$Component);
-
-  function Image() {
-    _classCallCheck(this, Image);
-
-    return _possibleConstructorReturn(this, (Image.__proto__ || _Object$getPrototypeOf(Image)).apply(this, arguments));
+export default class Image extends React.Component {
+  render() {
+    let {
+      alt,
+      src,
+      className,
+      isCover,
+      title,
+      onClick,
+      dataId,
+      htmlId,
+      eleRef,
+      original
+    } = this.props;
+    return /*#__PURE__*/React.createElement("img", {
+      src: src,
+      alt: alt,
+      "data-title": title,
+      "data-id": dataId,
+      "data-test-id": dataId,
+      className: ` ${className} ${isCover ? style.imgFullSize : style.imgMaxFullSize} `,
+      onClick: onClick,
+      id: htmlId,
+      ref: eleRef,
+      "data-original": original
+    });
   }
 
-  _createClass(Image, [{
-    key: 'render',
-    value: function render() {
-      var _props = this.props,
-          alt = _props.alt,
-          src = _props.src,
-          className = _props.className,
-          isCover = _props.isCover,
-          title = _props.title,
-          onClick = _props.onClick,
-          dataId = _props.dataId;
-
-      return React.createElement('img', {
-        src: src,
-        alt: alt,
-        'data-title': title,
-        'data-id': dataId,
-        className: ' ' + className + ' ' + (isCover ? style.imgFullSize : style.imgMaxFullSize) + ' ',
-        onClick: onClick
-      });
-    }
-  }]);
-
-  return Image;
-}(React.Component);
-
-export default Image;
-
-
-Image.propTypes = {
-  alt: PropTypes.string.isRequired,
-  className: PropTypes.string,
-  dataId: PropTypes.string,
-  isCover: PropTypes.bool,
-  onClick: PropTypes.func,
-  src: PropTypes.string.isRequired,
-  title: PropTypes.string
-};
-
-Image.defaultProps = {
-  isCover: false,
-  className: ''
-};
-if (false) {
-  Image.docs = {
-    componentGroup: 'Atom'
-  };
-}
+}
+Image.propTypes = propTypes;
+Image.defaultProps = defaultProps; // if (__DOCS__) {
+//   Image.docs = {
+//     componentGroup: 'Atom'
+//   };
+// }

package/es/Image/Image.module.css

@@ -1,11 +1,12 @@
 .imgFullSize{
-    height:100%;
-    width:100%
+    height:100% ;
+    width:100% 
 }
 .imgMaxFullSize{
-    max-height:100%;
-    max-width:100%
+    max-height:100% ;
+    max-width:100% 
 }
 .imgFullSize, .imgMaxFullSize{
+  /*  Variable:Ignore  */
     font-size: 12px
 }

package/es/Image/props/defaultProps.js

@@ -0,0 +1,4 @@
+export const defaultProps = {
+  isCover: false,
+  className: ''
+};

package/es/Image/props/propTypes.js

@@ -0,0 +1,13 @@
+import PropTypes from 'prop-types';
+export const propTypes = {
+  alt: PropTypes.string.isRequired,
+  className: PropTypes.string,
+  dataId: PropTypes.string,
+  eleRef: PropTypes.func,
+  htmlId: PropTypes.string,
+  isCover: PropTypes.bool,
+  onClick: PropTypes.func,
+  original: PropTypes.string,
+  src: PropTypes.string.isRequired,
+  title: PropTypes.string
+};

package/es/ImportantNotes/ImportantNotes.js

@@ -1,83 +1,48 @@
-import _Object$getPrototypeOf from 'babel-runtime/core-js/object/get-prototype-of';
-import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
-import _createClass from 'babel-runtime/helpers/createClass';
-import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
-import _inherits from 'babel-runtime/helpers/inherits';
 import React from 'react';
-import PropTypes from 'prop-types';
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
 import { Container, Box } from '@zohodesk/components/lib/Layout';
-import Icon from '@zohodesk/icons/lib/Icon';
+import { Icon } from '@zohodesk/icons';
 import style from './ImportantNotes.module.css';
-
-var ImportantNotes = function (_React$Component) {
-  _inherits(ImportantNotes, _React$Component);
-
-  function ImportantNotes(props) {
-    _classCallCheck(this, ImportantNotes);
-
-    return _possibleConstructorReturn(this, (ImportantNotes.__proto__ || _Object$getPrototypeOf(ImportantNotes)).call(this, props));
+export default class ImportantNotes extends React.Component {
+  constructor(props) {
+    super(props);
   }
 
-  _createClass(ImportantNotes, [{
-    key: 'render',
-    value: function render() {
-      var _props = this.props,
-          text = _props.text,
-          iconName = _props.iconName,
-          iconSize = _props.iconSize,
-          children = _props.children,
-          iconClass = _props.iconClass,
-          isCover = _props.isCover;
-
-      return React.createElement(
-        Container,
-        { isInline: !isCover, isCover: false, className: style.section },
-        React.createElement(
-          Box,
-          null,
-          React.createElement(
-            Container,
-            { isCover: false, alignBox: 'row', align: 'vertical' },
-            iconName ? React.createElement(
-              Box,
-              { className: style.icon, align: 'start' },
-              React.createElement(Icon, { name: iconName, size: iconSize, iconClass: iconClass })
-            ) : null,
-            text || children ? React.createElement(
-              Box,
-              { flexible: true, className: style.title },
-              text,
-              children ? children : null
-            ) : null
-          )
-        )
-      );
-    }
-  }]);
-
-  return ImportantNotes;
-}(React.Component);
-
-export default ImportantNotes;
-
-ImportantNotes.propTypes = {
-  text: PropTypes.string,
-  iconSize: PropTypes.string,
-  iconName: PropTypes.string,
-  children: PropTypes.node,
-  iconClass: PropTypes.string,
-  isCover: PropTypes.bool
-};
-ImportantNotes.defaultProps = {
-  iconName: 'ZD-helpCentre',
-  iconSize: '14',
-  iconClass: '',
-  isCover: true
-};
+  render() {
+    let {
+      text,
+      iconName,
+      iconSize,
+      children,
+      iconClass,
+      isCover,
+      className
+    } = this.props;
+    return /*#__PURE__*/React.createElement(Container, {
+      isInline: !isCover,
+      isCover: false,
+      alignBox: "row",
+      align: "top",
+      className: `${style.section} ${className || ''}`
+    }, iconName ? /*#__PURE__*/React.createElement(Box, {
+      className: style.icon,
+      align: "start"
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: iconName,
+      size: iconSize,
+      iconClass: iconClass
+    })) : null, text || children ? /*#__PURE__*/React.createElement(Box, {
+      flexible: true,
+      className: style.title
+    }, text, children ? children : null) : null);
+  }
 
-if (false) {
-  ImportantNotes.docs = {
-    componentGroup: 'Common',
-    folderName: 'General'
-  };
-}
+}
+ImportantNotes.propTypes = propTypes;
+ImportantNotes.defaultProps = defaultProps; // if (__DOCS__) {
+//   ImportantNotes.docs = {
+//     componentGroup: 'Common',
+//     folderName: 'General'
+//   };
+// }

package/es/ImportantNotes/ImportantNotes.module.css

@@ -1,18 +1,20 @@
 .section {
-  background: var(--zd_bg_orangetrans);
-  padding: var(--zd_size5) var(--zd_size10);
+  background: var(--zdt_importantnotes_bg);
+  padding: var(--zd_size5) var(--zd_size10) ;
 }
 .title {
-  font-size: var(--zd_size12);
-  color: var(--zd_text_dark15);
+  font-size: var(--zd_font_size13) ;
+  line-height: var(--zd_font_size18);
+  color: var(--zdt_importantnotes_title_text);
 }
 .icon {
-  color: var(--dot_text_black);
-  font-size: 0;
+  color: var(--zdt_importantnotes_icon);
+  font-size: 0 ;
+  margin-top: var(--zd_size1) ;
 }
 [dir=ltr] .icon {
-  margin-right: var(--zd_size5);
+  margin-right: var(--zd_size5) ;
 }
 [dir=rtl] .icon {
-  margin-left: var(--zd_size5);
+  margin-left: var(--zd_size5) ;
 }

package/es/ImportantNotes/props/defaultProps.js

@@ -0,0 +1,6 @@
+export const defaultProps = {
+  iconName: 'ZD-helpCentre',
+  iconSize: '14',
+  iconClass: '',
+  isCover: true
+};

package/es/ImportantNotes/props/propTypes.js

@@ -0,0 +1,10 @@
+import PropTypes from 'prop-types';
+export const propTypes = {
+  children: PropTypes.node,
+  iconClass: PropTypes.string,
+  iconName: PropTypes.string,
+  iconSize: PropTypes.string,
+  isCover: PropTypes.bool,
+  text: PropTypes.string,
+  className: PropTypes.string
+};