@zohodesk/dot 1.0.0-beta.23 → 1.0.0-beta.232

package/es/IconButton/IconButton.js

@@ -0,0 +1,188 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Icon from '@zohodesk/icons/lib/Icon';
+import { Container } from '@zohodesk/components/lib/Layout';
+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';
+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);
+  }
+
+  handleToggle(e) {
+    if (e.key === ' ' || e.key === 'Enter' || e.key === 'Spacebar') {
+      e.preventDefault();
+      this.triggerClick(e);
+      this.triggerMouseDown(e);
+    }
+  }
+
+  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;
+  }
+
+  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;
+  }
+
+  render() {
+    let {
+      palette,
+      iconSize,
+      iconName,
+      className,
+      iconClass,
+      dataId,
+      eleRef,
+      isActive,
+      tourId,
+      isDisabled,
+      children,
+      hoverType,
+      title,
+      isBold,
+      isNeedEffect,
+      needButtonTag,
+      a11y,
+      dataIsHtml
+    } = 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, {
+      "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,
+      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
+    }, iconName ? /*#__PURE__*/React.createElement(Icon, {
+      isBold: isBold,
+      size: iconSize,
+      name: iconName,
+      iconClass: iconClass
+    }) : null, children ? children : null));
+  }
+
+}
+IconButton.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  dataId: 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
+};
+IconButton.defaultProps = {
+  palette: 'default',
+  iconSize: '13',
+  className: '',
+  iconClass: '',
+  dataId: 'iconContainer',
+  isActive: false,
+  isDisabled: false,
+  hoverType: 'default',
+  isBold: false,
+  isNeedEffect: true,
+  needButtonTag: true,
+  a11y: {},
+  dataIsHtml: false
+};
+
+if (false) {
+  IconButton.docs = {
+    componentGroup: 'Atom'
+  };
+}

package/es/IconButton/IconButton.module.css

@@ -0,0 +1,22 @@
+.varClass {
+  --iconColor: var(--zdt_iconButton_icon_black);
+}
+.wrapper {
+  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;
+}
+.primary {
+  --iconColor: var(--zdt_iconButton_icon_primary);
+}
+.primary:hover {
+  --iconColor: var(--zdt_iconButton_icon_primaryHover);
+}
+.primary_active,
+.primaryFilled,
+.primaryFilled_active {
+  --iconColor: var(--zdt_iconButton_icon_primaryActive);
+}

package/es/IconButton/docs/IconButton__default.docs.js

@@ -0,0 +1,219 @@
+import React, { Component } from 'react';
+import IconButton from '../IconButton';
+export default class IconButton__default extends Component {
+  render() {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      style: {
+        margin: '10px'
+      }
+    }, /*#__PURE__*/React.createElement("h3", {
+      style: {
+        margin: '30px'
+      }
+    }, "isBold"), /*#__PURE__*/React.createElement("span", {
+      style: {
+        margin: '30px'
+      }
+    }, /*#__PURE__*/React.createElement(IconButton, {
+      iconSize: "12",
+      iconName: "ZD-commentNew",
+      palette: "primary",
+      isBold: true
+    })), /*#__PURE__*/React.createElement("span", {
+      style: {
+        margin: '30px'
+      }
+    }, /*#__PURE__*/React.createElement(IconButton, {
+      isBold: true,
+      iconSize: "12",
+      iconName: "ZD-more",
+      palette: "secondary"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: {
+        margin: '30px'
+      }
+    }, /*#__PURE__*/React.createElement(IconButton, {
+      iconSize: "12",
+      iconName: "ZD-commentNew",
+      palette: "primaryFilled",
+      isBold: true
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        margin: '10px'
+      }
+    }, /*#__PURE__*/React.createElement("h3", {
+      style: {
+        margin: '30px'
+      }
+    }, "Palette"), /*#__PURE__*/React.createElement("span", {
+      style: {
+        margin: '30px'
+      }
+    }, /*#__PURE__*/React.createElement(IconButton, {
+      iconSize: "12",
+      iconName: "ZD-commentNew",
+      palette: "primary",
+      onClick: () => {
+        console.log('click');
+      },
+      onMouseDown: () => {
+        console.log('Down');
+      },
+      onMouseOver: () => {
+        console.log('over');
+      }
+    })), /*#__PURE__*/React.createElement("span", {
+      style: {
+        margin: '30px'
+      }
+    }, /*#__PURE__*/React.createElement(IconButton, {
+      iconSize: "12",
+      iconName: "ZD-more"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: {
+        margin: '30px'
+      }
+    }, /*#__PURE__*/React.createElement(IconButton, {
+      iconSize: "12",
+      iconName: "ZD-commentNew",
+      palette: "primaryFilled"
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        margin: '10px'
+      }
+    }, /*#__PURE__*/React.createElement("h3", {
+      style: {
+        margin: '30px'
+      }
+    }, "isActive"), /*#__PURE__*/React.createElement("span", {
+      style: {
+        margin: '30px'
+      }
+    }, /*#__PURE__*/React.createElement(IconButton, {
+      iconSize: "12",
+      iconName: "ZD-commentNew",
+      palette: "primary",
+      isActive: true
+    })), /*#__PURE__*/React.createElement("span", {
+      style: {
+        margin: '30px'
+      }
+    }, /*#__PURE__*/React.createElement(IconButton, {
+      iconSize: "12",
+      iconName: "ZD-more",
+      isActive: true
+    })), /*#__PURE__*/React.createElement("span", {
+      style: {
+        margin: '30px'
+      }
+    }, /*#__PURE__*/React.createElement(IconButton, {
+      iconSize: "12",
+      iconName: "ZD-commentNew",
+      palette: "primaryFilled",
+      isActive: true
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        margin: '10px'
+      }
+    }, /*#__PURE__*/React.createElement("h3", {
+      style: {
+        margin: '30px'
+      }
+    }, "Border On Hover"), /*#__PURE__*/React.createElement("span", {
+      style: {
+        margin: '30px'
+      }
+    }, /*#__PURE__*/React.createElement(IconButton, {
+      iconSize: "12",
+      iconName: "ZD-commentNew",
+      palette: "primary",
+      hoverType: "border"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: {
+        margin: '30px'
+      }
+    }, /*#__PURE__*/React.createElement(IconButton, {
+      iconSize: "12",
+      iconName: "ZD-more",
+      hoverType: "border"
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        margin: '10px'
+      }
+    }, /*#__PURE__*/React.createElement("h3", {
+      style: {
+        margin: '30px'
+      }
+    }, "isDisabled"), /*#__PURE__*/React.createElement("span", {
+      style: {
+        margin: '30px'
+      }
+    }, /*#__PURE__*/React.createElement(IconButton, {
+      iconSize: "12",
+      iconName: "ZD-commentNew",
+      palette: "primary",
+      isDisabled: true
+    })), /*#__PURE__*/React.createElement("span", {
+      style: {
+        margin: '30px'
+      }
+    }, /*#__PURE__*/React.createElement(IconButton, {
+      iconSize: "12",
+      iconName: "ZD-more",
+      isDisabled: true
+    })), /*#__PURE__*/React.createElement("span", {
+      style: {
+        margin: '30px'
+      }
+    }, /*#__PURE__*/React.createElement(IconButton, {
+      iconSize: "12",
+      iconName: "ZD-commentNew",
+      palette: "primaryFilled",
+      isDisabled: true
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        margin: '10px'
+      }
+    }, /*#__PURE__*/React.createElement("h3", {
+      style: {
+        margin: '30px'
+      }
+    }, "Tooltip"), /*#__PURE__*/React.createElement("span", {
+      style: {
+        margin: '30px'
+      }
+    }, /*#__PURE__*/React.createElement(IconButton, {
+      iconSize: "12",
+      iconName: "ZD-commentNew",
+      palette: "primary",
+      isDisabled: true,
+      title: "primary"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: {
+        margin: '30px'
+      }
+    }, /*#__PURE__*/React.createElement(IconButton, {
+      iconSize: "12",
+      iconName: "ZD-more",
+      isDisabled: true,
+      title: "default"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: {
+        margin: '30px'
+      }
+    }, /*#__PURE__*/React.createElement(IconButton, {
+      iconSize: "12",
+      iconName: "ZD-commentNew",
+      palette: "primaryFilled",
+      isDisabled: true,
+      title: "primaryFilled"
+    }))));
+  }
+
+}
+
+if (false) {
+  IconButton__default.docs = {
+    componentGroup: 'Atom'
+  };
+}

package/es/Image/Image.js

@@ -1,64 +1,51 @@
-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 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,
+      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,
+  eleRef: PropTypes.func,
+  htmlId: PropTypes.string,
   isCover: PropTypes.bool,
   onClick: PropTypes.func,
+  original: PropTypes.string,
   src: PropTypes.string.isRequired,
   title: PropTypes.string
 };
-
 Image.defaultProps = {
   isCover: false,
   className: ''
 };
+
 if (false) {
   Image.docs = {
     componentGroup: 'Atom'

package/es/Image/docs/Image__default.docs.js

@@ -1,37 +1,19 @@
-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, { Component } from 'react';
 import PropTypes from 'prop-types';
 import Image from '../Image';
-
-var Image__default = function (_Component) {
-  _inherits(Image__default, _Component);
-
-  function Image__default() {
-    _classCallCheck(this, Image__default);
-
-    return _possibleConstructorReturn(this, (Image__default.__proto__ || _Object$getPrototypeOf(Image__default)).apply(this, arguments));
+export default class Image__default extends Component {
+  render() {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        height: '120px',
+        width: '120px'
+      }
+    }, /*#__PURE__*/React.createElement(Image, {
+      src: "https://hjemly.dk/wp-content/uploads/2016/05/facebook-default-no-profile-pic.jpg"
+    }));
   }
 
-  _createClass(Image__default, [{
-    key: 'render',
-    value: function render() {
-      return React.createElement(
-        'div',
-        { style: { height: '120px', width: '120px' } },
-        React.createElement(Image, { src: 'https://hjemly.dk/wp-content/uploads/2016/05/facebook-default-no-profile-pic.jpg' })
-      );
-    }
-  }]);
-
-  return Image__default;
-}(Component);
-
-export default Image__default;
-
+}
 
 if (false) {
   Image__default.docs = {

package/es/ImportantNotes/ImportantNotes.js

@@ -0,0 +1,62 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Container, Box } from '@zohodesk/components/lib/Layout';
+import Icon from '@zohodesk/icons/lib/Icon';
+import style from './ImportantNotes.module.css';
+export default class ImportantNotes extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  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);
+  }
+
+}
+ImportantNotes.propTypes = {
+  children: PropTypes.node,
+  iconClass: PropTypes.string,
+  iconName: PropTypes.string,
+  iconSize: PropTypes.string,
+  isCover: PropTypes.bool,
+  text: PropTypes.string,
+  className: PropTypes.string
+};
+ImportantNotes.defaultProps = {
+  iconName: 'ZD-helpCentre',
+  iconSize: '14',
+  iconClass: '',
+  isCover: true
+};
+
+if (false) {
+  ImportantNotes.docs = {
+    componentGroup: 'Common',
+    folderName: 'General'
+  };
+}

package/es/ImportantNotes/ImportantNotes.module.css

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

package/es/ImportantNotes/docs/ImportantNotes__default.docs.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import ImportantNotes from '../ImportantNotes';
+export default class ImportantNotes__default extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return /*#__PURE__*/React.createElement(ImportantNotes, {
+      text: "Forwarded threads are always marked as private regardless of this setting.Forwarded threads are always marked as private regardless of this setting.Forwarded threads are always marked as private regardless of this setting.Forwarded threads are always marked as private regardless of this setting.Forwarded threads are always marked as private regardless of this setting."
+    }, "Children");
+  }
+
+}
+
+if (false) {
+  ImportantNotes__default.docs = {
+    componentGroup: 'Common',
+    folderName: 'General'
+  };
+}