@zohodesk/dot 1.0.0-beta.22 → 1.0.0-beta.223

package/es/alert/AlertHeader/AlertHeader.js

@@ -1,8 +1,3 @@
-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 Title from '../../lookup/header/Title/Title';
@@ -10,119 +5,85 @@ import { Container, Box } from '@zohodesk/components/lib/Layout';
 import Icon from '@zohodesk/icons/lib/Icon';
 import Close from '../../lookup/header/Close/Close';
 import style from './AlertHeader.module.css';
-
-var AlertHeader = function (_Component) {
-  _inherits(AlertHeader, _Component);
-
-  function AlertHeader() {
-    _classCallCheck(this, AlertHeader);
-
-    return _possibleConstructorReturn(this, (AlertHeader.__proto__ || _Object$getPrototypeOf(AlertHeader)).apply(this, arguments));
+export default class AlertHeader extends Component {
+  render() {
+    let {
+      title,
+      palette,
+      needIcon,
+      iconType,
+      onClose,
+      iconName,
+      iconSize,
+      closeTitle,
+      children,
+      breakChildren,
+      dataId,
+      iconClass
+    } = this.props;
+    let iconObj = {
+      delete: 'ZD-socialDelete',
+      alert: 'ZD-exclamationThincircle',
+      remoteAssist: 'ZD-taskDemo',
+      splitTicket: 'ZD-splitNew',
+      update: 'ZD-update'
+    };
+    return /*#__PURE__*/React.createElement(Container, {
+      align: "vertical",
+      alignBox: "row",
+      className: `${style.container} ${style[palette]}`,
+      isCover: false,
+      wrap: "wrap"
+    }, needIcon ? /*#__PURE__*/React.createElement("div", {
+      className: style.iconContainer
+    }, /*#__PURE__*/React.createElement(Icon, {
+      size: iconSize,
+      name: iconName ? iconName : iconObj[iconType] ? iconObj[iconType] : iconName,
+      iconClass: `${style.iconStyle} ${iconObj[iconType] && !iconSize ? style[`icon_${iconType}`] : ''} ${style[`text_${palette}`]} ${iconClass}`
+    })) : null, /*#__PURE__*/React.createElement(Box, {
+      flexible: true
+    }, /*#__PURE__*/React.createElement(Container, {
+      alignBox: "row",
+      align: "vertical",
+      wrap: breakChildren ? 'wrap' : null
+    }, /*#__PURE__*/React.createElement(Box, {
+      className: style.title,
+      shrink: true
+    }, /*#__PURE__*/React.createElement(Title, {
+      text: title,
+      palette: palette
+    })), children ? /*#__PURE__*/React.createElement(Box, {
+      adjust: true,
+      flexible: true
+    }, children) : null)), onClose ? /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Close, {
+      onClose: onClose,
+      title: closeTitle,
+      dataId: `${dataId}_close`
+    })) : null);
   }
 
-  _createClass(AlertHeader, [{
-    key: 'render',
-    value: function render() {
-      var _props = this.props,
-          title = _props.title,
-          palette = _props.palette,
-          needIcon = _props.needIcon,
-          iconType = _props.iconType,
-          onClose = _props.onClose,
-          iconName = _props.iconName,
-          iconSize = _props.iconSize,
-          closeTitle = _props.closeTitle,
-          children = _props.children,
-          breakChildren = _props.breakChildren,
-          dataId = _props.dataId;
-
-      var iconObj = {
-        delete: 'ZD-socialDelete',
-        alert: 'ZD-exclamationThincircle',
-        remoteAssist: 'ZD-taskDemo',
-        splitTicket: 'ZD-splitNew',
-        update: 'ZD-update',
-        addEndUser: 'ZD-newuser'
-      };
-      return React.createElement(
-        Container,
-        {
-          align: 'vertical',
-          alignBox: 'row',
-          className: style.container + ' ' + style[palette],
-          isCover: false,
-          wrap: 'wrap'
-        },
-        needIcon ? React.createElement(
-          'div',
-          { className: style.iconContainer },
-          React.createElement(Icon, {
-            size: iconSize,
-            name: iconObj[iconType] ? iconObj[iconType] : iconName,
-            iconClass: style.iconStyle + ' ' + (iconObj[iconType] ? style['icon_' + iconType] : '') + ' ' + style['text_' + palette]
-          })
-        ) : null,
-        React.createElement(
-          Box,
-          { flexible: true },
-          React.createElement(
-            Container,
-            {
-              alignBox: 'row',
-              align: 'center',
-              wrap: breakChildren ? 'wrap' : null
-            },
-            React.createElement(
-              Box,
-              { className: style.title, shrink: true },
-              React.createElement(Title, { text: title, palette: palette })
-            ),
-            children ? React.createElement(
-              Box,
-              { adjust: true, flexible: true },
-              children
-            ) : null
-          )
-        ),
-        onClose ? React.createElement(
-          Box,
-          null,
-          React.createElement(Close, {
-            onClose: onClose,
-            title: closeTitle,
-            dataId: dataId + '_close'
-          })
-        ) : null
-      );
-    }
-  }]);
-
-  return AlertHeader;
-}(Component);
-
-export default AlertHeader;
-
-
+}
 AlertHeader.propTypes = {
-  iconType: PropTypes.oneOf(['delete', 'alert', 'remoteAssist', 'splitTicket', 'update', 'addEndUser']),
-  needIcon: PropTypes.bool,
-  palette: PropTypes.oneOf(['default', 'primary', 'danger']),
-  title: PropTypes.string,
-  onClose: PropTypes.func,
+  breakChildren: PropTypes.bool,
+  children: PropTypes.node,
+  closeTitle: PropTypes.string,
+  dataId: PropTypes.string,
+  iconClass: PropTypes.string,
   iconName: PropTypes.string,
   iconSize: PropTypes.sting,
-  closeTitle: PropTypes.string,
-  children: PropTypes.node,
-  breakChildren: PropTypes.bool,
-  dataId: PropTypes.string
+  iconType: PropTypes.oneOf(['delete', 'alert', 'remoteAssist', 'splitTicket', 'update']),
+  needIcon: PropTypes.bool,
+  onClose: PropTypes.func,
+  palette: PropTypes.oneOf(['default', 'primary', 'danger']),
+  title: PropTypes.string
 };
-
 AlertHeader.defaultProps = {
   palette: 'danger',
   needIcon: true,
   iconType: 'alert',
   breakChildren: false,
-  dataId: 'alertHeader'
+  dataId: 'alertHeader',
+  iconClass: ''
 };
 
 if (false) {

package/es/alert/AlertHeader/AlertHeader.module.css

@@ -1,38 +1,20 @@
 .container {
   min-height: var(--zd_size54);
   position: relative;
-}[dir=ltr] .container {
   padding: var(--zd_size12) var(--zd_size45) var(--zd_size12) var(--zd_size26);
-}[dir=rtl] .container {
-  padding: var(--zd_size12) var(--zd_size26) var(--zd_size12) var(--zd_size45);
 }
 
-[dir=ltr] .extraSmall {
+.extraSmall {
   padding: var(--zd_size12) var(--zd_size45) var(--zd_size12) var(--zd_size16);
 }
 
-[dir=rtl] .extraSmall {
-  padding: var(--zd_size12) var(--zd_size16) var(--zd_size12) var(--zd_size45);
-}
-
-[dir=ltr] .iconContainer {
+.iconContainer {
   margin: 0 var(--zd_size10) 0 0;
 }
 
-[dir=rtl] .iconContainer {
-  margin: 0 0 0 var(--zd_size10);
-}
-
 .title {
-  font-size: 0;
-}
-
-[dir=ltr] .title {
   margin: 0 var(--zd_size5) 0 0;
-}
-
-[dir=rtl] .title {
-  margin: 0 0 0 var(--zd_size5);
+  font-size: 0;
 }
 
 .iconStyle {
@@ -40,41 +22,42 @@
 }
 
 /* Palette */
+
 .default {
-  background-color: var(--zd_bg_smoke45);
+  background-color: var(--zdt_alertheader_default_bg);
 }
 
 .primary {
-  background-color: #edfbfe;
+  background-color: var(--zdt_alertheader_primary_bg);
 }
 
 .danger {
-  background-color: var(--zd_bg_danger5);
+  background-color: var(--zdt_alertheader_danger_bg);
 }
 
 /* icon size */
-.icon_delete,
-.icon_alert,
-.icon_remoteAssist {
-  font-size: var(--zd_size20);
+
+.icon_delete, .icon_alert, .icon_remoteAssist {
+  font-size: var(--zd_font_size20);
 }
 
 .icon_splitTicket {
-  font-size: var(--zd_size16);
+  font-size: var(--zd_font_size16);
   font-weight: bold;
 }
 
 .icon_update {
-  font-size: var(--zd_size16);
+  font-size: var(--zd_font_size16);
 }
 
 .text_danger {
-  color: var(--zd_text_danger);
+  color: var(--zdt_alertheader_danger_text);
 }
+
 .text_primary {
-  color: var(--zd_text_primary19);
+  color: var(--zdt_alertheader_primary_text);
 }
 
 .text_default {
-  color: var(--dot_text_black);
-}
+  color: var(--zdt_alertheader_default_text);
+}

package/es/alert/AlertLookup/AlertLookup.js

@@ -1,184 +1,179 @@
-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 || 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); }
+
 /**** Libraries ****/
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-
 /**** Components ****/
+
 import Lookup from '../../lookup/Lookup/Lookup';
 import AlertHeader from '../AlertHeader/AlertHeader';
 import Button from '@zohodesk/components/lib/Button/Button';
 import Section from '../../lookup/Section/Section';
 import FormAction from '../../FormAction/FormAction';
-
 /**** CSS ****/
-import style from './AlertLookup.module.css';
-
-var AlertLookup = function (_Component) {
-  _inherits(AlertLookup, _Component);
 
-  function AlertLookup(props) {
-    _classCallCheck(this, AlertLookup);
-
-    var _this = _possibleConstructorReturn(this, (AlertLookup.__proto__ || _Object$getPrototypeOf(AlertLookup)).call(this, props));
-
-    _this.documentKeydownHandler = _this.documentKeydownHandler.bind(_this);
-    _this.getButtonRef = _this.getButtonRef.bind(_this);
-    return _this;
+import style from './AlertLookup.module.css';
+export default class AlertLookup extends Component {
+  constructor(props) {
+    super(props);
+    this.documentKeydownHandler = this.documentKeydownHandler.bind(this);
+    this.getButtonRef = this.getButtonRef.bind(this);
   }
 
-  _createClass(AlertLookup, [{
-    key: 'componentDidUpdate',
-    value: function componentDidUpdate(prevProps) {
-      var isActive = this.props.isActive;
+  componentDidUpdate(prevProps) {
+    let {
+      isActive
+    } = this.props;
 
-      if (prevProps.isActive !== isActive) {
-        isActive ? document.addEventListener('keydown', this.documentKeydownHandler) : document.removeEventListener('keydown', this.documentKeydownHandler);
-      }
+    if (prevProps.isActive !== isActive) {
+      isActive ? document.addEventListener('keydown', this.documentKeydownHandler) : document.removeEventListener('keydown', this.documentKeydownHandler);
     }
-  }, {
-    key: 'documentKeydownHandler',
-    value: function documentKeydownHandler() {
-      var e = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-      var _props = this.props,
-          onSubmitClick = _props.onSubmitClick,
-          onCancelClick = _props.onCancelClick,
-          isActive = _props.isActive;
+  }
 
-      if (e.keyCode === 27 && isActive) {
-        onCancelClick && onCancelClick(e);
-      } else if (e.keyCode === 13 && isActive) {
-        onSubmitClick && onSubmitClick(e);
-      }
-    }
-  }, {
-    key: 'getButtonRef',
-    value: function getButtonRef(el) {
-      this.okButton = el;
-      var isDefaultFocus = this.props.isDefaultFocus;
+  componentWillUnmount() {
+    document.removeEventListener('keydown', this.documentKeydownHandler);
+  }
 
-      if (isDefaultFocus) {
-        el && el.focus();
-      }
+  documentKeydownHandler() {
+    let e = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    let {
+      onSubmitClick,
+      onCancelClick,
+      isActive,
+      onEsc,
+      onClose
+    } = this.props;
+
+    if (e.keyCode === 27 && isActive) {
+      e && e.preventDefault && e.preventDefault();
+      onEsc == 'close' ? onClose && onClose(e) : onCancelClick && onCancelClick(e);
+    } else if (e.keyCode === 13 && isActive) {
+      e && e.preventDefault && e.preventDefault();
+      onSubmitClick && onSubmitClick(e);
     }
-  }, {
-    key: 'render',
-    value: function render() {
-      var _props2 = this.props,
-          isActive = _props2.isActive,
-          palette = _props2.palette,
-          size = _props2.size,
-          type = _props2.type,
-          title = _props2.title,
-          message = _props2.message,
-          confirmationMessage = _props2.confirmationMessage,
-          submitText = _props2.submitText,
-          cancelText = _props2.cancelText,
-          onSubmitClick = _props2.onSubmitClick,
-          onCancelClick = _props2.onCancelClick,
-          children = _props2.children,
-          forwardRef = _props2.forwardRef,
-          onClose = _props2.onClose,
-          headerChildren = _props2.headerChildren,
-          wrapHeader = _props2.wrapHeader,
-          sectionClassName = _props2.sectionClassName,
-          dataId = _props2.dataId;
+  }
 
+  getButtonRef(el) {
+    this.okButton = el;
+    let {
+      isDefaultFocus
+    } = this.props;
 
-      return React.createElement(
-        Lookup,
-        {
-          isActive: isActive,
-          size: size,
-          dataId: dataId,
-          forwardRef: forwardRef
-        },
-        React.createElement(
-          AlertHeader,
-          {
-            title: title,
-            palette: palette,
-            iconType: type,
-            needIcon: Boolean(type),
-            onClose: onClose,
-            breakChildren: wrapHeader
-          },
-          headerChildren ? headerChildren() : null
-        ),
-        React.createElement(
-          Section,
-          { alignBox: 'row', className: style.section },
-          React.createElement(
-            'div',
-            { className: style.innerSection + ' ' + sectionClassName },
-            children ? children : React.createElement(
-              React.Fragment,
-              null,
-              React.createElement(
-                'div',
-                null,
-                message
-              ),
-              confirmationMessage && React.createElement(
-                'div',
-                { className: style.text },
-                confirmationMessage
-              )
-            )
-          ),
-          React.createElement(
-            FormAction,
-            { size: 'small', paddingLeftSize: 'xsmall' },
-            React.createElement(Button, {
-              text: submitText,
-              dataId: dataId === 'alertPopup' ? 'alertConfirmButton' : dataId + '_confirmButton}',
-              onClick: onSubmitClick,
-              palette: palette === 'primary' ? 'primaryFilled' : 'dangerFilled',
-              getRef: this.getButtonRef
-            }),
-            cancelText && React.createElement(Button, {
-              dataId: dataId === 'alertPopup' ? 'alertCancelButton' : dataId + '_cancelButton}',
-              text: cancelText,
-              onClick: onCancelClick,
-              palette: 'secondary'
-            })
-          )
-        )
-      );
+    if (isDefaultFocus) {
+      el && el.focus();
     }
-  }]);
-
-  return AlertLookup;
-}(Component);
-
-export default AlertLookup;
+  }
 
+  render() {
+    let {
+      isActive,
+      palette,
+      size,
+      type,
+      title,
+      message,
+      confirmationMessage,
+      submitText,
+      cancelText,
+      onSubmitClick,
+      onCancelClick,
+      children,
+      forwardRef,
+      onClose,
+      headerChildren,
+      wrapHeader,
+      sectionClassName,
+      dataId,
+      onLookupClick,
+      customClass,
+      needIcon,
+      iconName,
+      iconClass,
+      iconSize,
+      customProps
+    } = this.props;
+    const {
+      LookupProps = {},
+      AlertHeaderProps = {},
+      PrimaryButtonProps = {},
+      SecondaryButtonProps = {}
+    } = customProps;
+    return /*#__PURE__*/React.createElement(Lookup, _extends({
+      isActive: isActive,
+      size: size,
+      dataId: dataId,
+      forwardRef: forwardRef,
+      onClick: onLookupClick,
+      customClass: customClass
+    }, LookupProps), /*#__PURE__*/React.createElement(AlertHeader, _extends({
+      title: title,
+      palette: palette,
+      iconType: type,
+      needIcon: Boolean(type) || needIcon,
+      onClose: onClose,
+      breakChildren: wrapHeader,
+      iconName: iconName,
+      iconClass: iconClass,
+      iconSize: iconSize
+    }, AlertHeaderProps), headerChildren ? headerChildren() : null), /*#__PURE__*/React.createElement(Section, {
+      alignBox: "row",
+      className: style.section
+    }, /*#__PURE__*/React.createElement("div", {
+      className: `${style.innerSection} ${sectionClassName}`
+    }, children ? children : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", null, message), confirmationMessage && /*#__PURE__*/React.createElement("div", {
+      className: style.text
+    }, confirmationMessage))), submitText || onSubmitClick || cancelText || onCancelClick ? /*#__PURE__*/React.createElement(FormAction, {
+      size: "small",
+      paddingLeftSize: "xsmall"
+    }, /*#__PURE__*/React.createElement(Button, _extends({
+      text: submitText,
+      dataId: dataId === 'alertPopup' ? 'alertConfirmButton' : `${dataId}_confirmButton`,
+      onClick: onSubmitClick,
+      palette: palette === 'primary' ? 'primaryFilled' : 'dangerFilled',
+      getRef: this.getButtonRef
+    }, PrimaryButtonProps)), cancelText && /*#__PURE__*/React.createElement(Button, _extends({
+      dataId: dataId === 'alertPopup' ? 'alertCancelButton' : `${dataId}_cancelButton`,
+      text: cancelText,
+      onClick: onCancelClick,
+      palette: "secondary"
+    }, SecondaryButtonProps))) : null));
+  }
 
+}
 AlertLookup.propTypes = {
   cancelText: PropTypes.string,
   children: PropTypes.node,
-  headerChildren: PropTypes.func,
   confirmationMessage: PropTypes.string,
+  customClass: PropTypes.string,
+  dataId: PropTypes.string,
   forwardRef: PropTypes.object,
+  headerChildren: PropTypes.func,
+  iconClass: PropTypes.string,
+  iconName: PropTypes.string,
+  iconSize: PropTypes.string,
   isActive: PropTypes.bool,
   isDefaultFocus: PropTypes.bool,
   message: PropTypes.node,
+  needIcon: PropTypes.bool,
   onCancelClick: PropTypes.func,
+  onClose: PropTypes.func,
+  onLookupClick: PropTypes.func,
   onSubmitClick: PropTypes.func,
   palette: PropTypes.oneOf(['default', 'primary', 'danger']),
+  sectionClassName: PropTypes.string,
   size: PropTypes.oneOf(['small', 'medium']),
   submitText: PropTypes.string,
   title: PropTypes.string,
-  type: PropTypes.oneOf(['delete', 'alert', 'remoteAssist', 'splitTicket', 'addEndUser']),
-  onClose: PropTypes.func,
+  type: PropTypes.oneOf(['delete', 'alert', 'remoteAssist', 'splitTicket']),
   wrapHeader: PropTypes.bool,
-  sectionClassName: PropTypes.string,
-  dataId: PropTypes.string
+  customProps: PropTypes.shape({
+    LookupProps: PropTypes.object,
+    AlertHeaderProps: PropTypes.object,
+    PrimaryButtonProps: PropTypes.object,
+    SecondaryButtonProps: PropTypes.object
+  }),
+  onEsc: PropTypes.oneOf(['close', 'cancel'])
 };
-
 AlertLookup.defaultProps = {
   isActive: false,
   palette: 'danger',
@@ -186,7 +181,11 @@ AlertLookup.defaultProps = {
   type: 'alert',
   wrapHeader: false,
   sectionClassName: '',
-  dataId: 'alertPopup'
+  dataId: 'alertPopup',
+  customClass: '',
+  isDefaultFocus: true,
+  customProps: {},
+  onEsc: 'cancel'
 };
 
 if (false) {

package/es/alert/AlertLookup/AlertLookup.module.css

@@ -1,23 +1,23 @@
 .section {
   min-height: auto;
 }
+
 .innerSection {
+  padding: var(--zd_size30) var(--zd_size20) var(--zd_size20);
   line-height: var(--zd_size25);
-  color: var(--zd_text_dark4);
-  font-size: var(--zd_size15);
+  color: var(--zdt_alertlookup_innersection_text);
+  font-size: var(--zd_font_size15);
   word-break: break-word;
-  padding: var(--zd_size30) var(--zd_size20) var(--zd_size20);
 }
-[dir=ltr] .buttonGap {
+
+.buttonGap {
   margin: 0 0 0 var(--zd_size12);
 }
-[dir=rtl] .buttonGap {
-  margin: 0 var(--zd_size12) 0 0;
-}
+
 .text {
   margin-top: var(--zd_size20);
 }
 
 .extraSmall .innerSection {
   padding: var(--zd_size30) var(--zd_size16) var(--zd_size46);
-}
+}