@zohodesk/dot 1.0.0-beta.2 → 1.0.0-beta.202

package/es/ToastMessage/ToastMessage.js

@@ -0,0 +1,257 @@
+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); }
+
+import React, { useState } from 'react';
+import PropTypes from 'prop-types'; //components
+
+import Icon from '@zohodesk/icons/lib/Icon';
+import { Container, Box } from '@zohodesk/components/lib/Layout';
+import { useZIndex } from '@zohodesk/components/lib/Provider/ZindexProvider';
+import { useUniqueId } from '@zohodesk/components/lib/Provider/IdProvider';
+import AutoClose from '../actions/AutoClose';
+import a11yStyle from '@zohodesk/components/lib/semantic/Button/semanticButton.module.css'; //style
+
+import style from './ToastMessage.module.css';
+
+function removeClose(e) {
+  e && e.stopPropagation && e.stopPropagation();
+  e && e.nativeEvent && e.nativeEvent.stopImmediatePropagation && e.nativeEvent.stopImmediatePropagation();
+}
+
+function ToastMessageUI(props) {
+  let [messageState, setMessageState] = useState(props.messageState);
+  let {
+    type,
+    subject,
+    info,
+    submitText,
+    cancelText,
+    iconName,
+    iconSize,
+    submitType,
+    isIconMid,
+    needClose,
+    iconPalette,
+    isMore,
+    message,
+    isAnimate,
+    getLeftContainer,
+    getInnerBottomContainer,
+    getBottomContainer,
+    getSubmitContainer,
+    onSubmit,
+    onCancel,
+    dataId,
+    isClose,
+    onClose,
+    needAutoZindex,
+    a11y
+  } = props;
+
+  function onClickSubmit(e) {
+    onSubmit && onSubmit();
+    onClose && onClose();
+  }
+
+  function onClickCancel(e) {
+    onCancel && onCancel();
+    onClose && onClose();
+  }
+
+  function changeMessageState(e) {
+    removeClose(e);
+    setMessageState(!messageState);
+  }
+
+  let animateClass = isClose ? style.rightanimate : style.leftanimate;
+  let animateRemoveClass = isClose ? style.rightanimate : style.leftnoanimate;
+  let channelIcon = /*#__PURE__*/React.createElement(Icon, {
+    iconClass: style[iconPalette],
+    name: iconName,
+    size: iconSize
+  });
+  let getNextIndex = useZIndex();
+  let Zindex = isAnimate ? getNextIndex() : null,
+      getNextId = useUniqueId(),
+      titleId = getNextId(),
+      infoId = getNextId();
+  let {
+    role = 'alert',
+    ariaLive = 'assertive',
+    ariaAtomic = true,
+    ariaDescribedby = infoId,
+    ariaLabelledby = titleId
+  } = a11y;
+  return /*#__PURE__*/React.createElement(Container, {
+    className: `${style.container} ${isAnimate ? animateClass : animateRemoveClass} ${style[`alert${type}`] ? style[`alert${type}`] : ''}`,
+    isCover: false,
+    dataId: dataId,
+    style: needAutoZindex && isAnimate ? {
+      zIndex: `${Zindex}`
+    } : {},
+    role: role,
+    "aria-live": ariaLive,
+    "aria-atomic": ariaAtomic,
+    "aria-describedby": ariaDescribedby,
+    "aria-labelledby": ariaLabelledby
+  }, type !== 'custom' ? /*#__PURE__*/React.createElement(Box, {
+    className: style.alertifychild,
+    flexible: true
+  }, /*#__PURE__*/React.createElement(Container, {
+    alignBox: "row",
+    className: style.alertifybanner
+  }, /*#__PURE__*/React.createElement(Box, {
+    className: style.alertleft,
+    flexible: true
+  }, /*#__PURE__*/React.createElement(Container, {
+    align: isIconMid ? 'vertical' : '',
+    alignBox: "row"
+  }, type != 'success' && !getLeftContainer ? /*#__PURE__*/React.createElement(Box, {
+    className: `${style.alertico}`
+  }, /*#__PURE__*/React.createElement("span", null, channelIcon)) : getLeftContainer ? /*#__PURE__*/React.createElement(Box, {
+    className: `${style.alertico}`
+  }, getLeftContainer()) : null, /*#__PURE__*/React.createElement(Box, {
+    flexible: true
+  }, /*#__PURE__*/React.createElement(Container, {
+    align: "vertical",
+    alignBox: "row",
+    isCover: false
+  }, type == 'success' ? /*#__PURE__*/React.createElement(Box, {
+    className: style.alertTitleLeft
+  }, channelIcon) : null, /*#__PURE__*/React.createElement(Box, {
+    className: style.alertTitle,
+    flexible: true,
+    "data-title": subject,
+    id: titleId
+  }, subject)), info ? /*#__PURE__*/React.createElement("p", {
+    className: style.alertMessage,
+    "data-title": info,
+    id: infoId
+  }, info) : null, getInnerBottomContainer ? /*#__PURE__*/React.createElement("div", null, getInnerBottomContainer()) : null), type == 'information' && needClose ? /*#__PURE__*/React.createElement(Box, {
+    className: `${a11yStyle.buttonReset} ${style.closeIconPrimary}`,
+    onClick: onClose,
+    dataId: `${dataId}_close`,
+    tagName: "button"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    isBold: true,
+    name: "ZD-close",
+    size: "18"
+  })) : null)), type != 'information' ? /*#__PURE__*/React.createElement(Box, {
+    className: style.alertright
+  }, /*#__PURE__*/React.createElement(Container, {
+    className: style.alerttab
+  }, needClose ? /*#__PURE__*/React.createElement("button", {
+    className: `${a11yStyle.buttonReset} ${style.closeIcon}`,
+    onClick: onClose,
+    "data-id": `${dataId}_closeRight`
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "ZD-close",
+    size: "18"
+  })) : null, submitText ? /*#__PURE__*/React.createElement(Box, {
+    className: `${getSubmitContainer ? style.sumbitBorder : cancelText ? style.notSolo : style.mainbutton} ${getSubmitContainer ? '' : style[submitType]} `,
+    flexible: true,
+    onClick: onClickSubmit,
+    dataId: `${dataId}_submitButton`
+  }, /*#__PURE__*/React.createElement(Container, {
+    align: "vertical",
+    alignBox: "row"
+  }, getSubmitContainer ? /*#__PURE__*/React.createElement(Box, {
+    flexible: true
+  }, getSubmitContainer()) : /*#__PURE__*/React.createElement(Box, {
+    className: `${a11yStyle.buttonReset} ${style.buttonText}`,
+    flexible: true,
+    tagName: "button"
+  }, submitText))) : null, cancelText ? /*#__PURE__*/React.createElement(Box, {
+    className: `${style.cancelButton}`,
+    flexible: true,
+    onClick: onClose,
+    dataId: `${dataId}_cancelButton`
+  }, /*#__PURE__*/React.createElement(Container, {
+    align: "vertical",
+    alignBox: "row"
+  }, /*#__PURE__*/React.createElement(Box, {
+    className: `${a11yStyle.buttonReset} ${style.buttonText}`,
+    flexible: true,
+    onClick: onClickCancel,
+    dataId: `${dataId}_cancelButtonInner`,
+    tagName: "button"
+  }, cancelText), isMore ? /*#__PURE__*/React.createElement(Box, {
+    className: `${a11yStyle.buttonReset} ${style.dropdown}`,
+    onClick: changeMessageState,
+    dataId: `${dataId}_moreIcon`,
+    tagName: "button",
+    "aria-expanded": messageState ? true : false,
+    "aria-haspopup": true
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "ZD-down",
+    size: "7"
+  })) : null)) : null)) : null)) : null, isMore ? /*#__PURE__*/React.createElement(Box, {
+    className: `${style.message} ${messageState ? '' : style.messageOff}`,
+    tagName: "p"
+  }, message) : null, getBottomContainer ? /*#__PURE__*/React.createElement(Box, null, getBottomContainer()) : null);
+}
+
+export default function ToastMessage(props) {
+  return /*#__PURE__*/React.createElement(AutoClose, _extends({}, props, {
+    Element: ToastMessageUI
+  }));
+}
+ToastMessage.propTypes = {
+  autoClose: PropTypes.bool,
+  cancelText: PropTypes.string,
+  dataId: PropTypes.string,
+  getBottomContainer: PropTypes.func,
+  getInnerBottomContainer: PropTypes.func,
+  getLeftContainer: PropTypes.func,
+  getSubmitContainer: PropTypes.func,
+  hidePopNotification: PropTypes.func,
+  hideTime: PropTypes.string,
+  iconName: PropTypes.string,
+  iconPalette: PropTypes.oneOf(['successFill', 'dangerFill', 'dangerShadow', 'successPlain', 'dangerPlain', 'primaryPlain']),
+  iconSize: PropTypes.string,
+  id: PropTypes.string,
+  info: PropTypes.string,
+  isAnimate: PropTypes.bool,
+  isClose: PropTypes.bool,
+  isIconMid: PropTypes.bool,
+  isMore: PropTypes.bool,
+  message: PropTypes.string,
+  messageState: PropTypes.bool,
+  needClose: PropTypes.bool,
+  onCancel: PropTypes.func,
+  onSubmit: PropTypes.func,
+  subject: PropTypes.string,
+  submitText: PropTypes.string,
+  submitType: PropTypes.oneOf(['primary', 'danger', 'success']),
+  type: PropTypes.oneOf(['primary', 'information', 'secondary', 'success', 'custom']),
+  needAutoZindex: PropTypes.bool,
+  a11y: PropTypes.shape({
+    role: PropTypes.string,
+    ariaLive: PropTypes.oneOf(['polite', 'assertive', 'off']),
+    ariaAtomic: PropTypes.bool,
+    ariaDescribedby: PropTypes.string,
+    ariaLabelledby: PropTypes.string
+  })
+};
+ToastMessage.defaultProps = {
+  iconName: 'bell',
+  iconSize: '30',
+  submitType: 'primary',
+  isIconMid: false,
+  needClose: false,
+  type: 'primary',
+  isMore: false,
+  messageState: false,
+  isAnimate: true,
+  isClose: false,
+  autoClose: false,
+  hideTime: '3000',
+  dataId: 'toastMessage',
+  needAutoZindex: true,
+  a11y: {}
+};
+
+if (false) {
+  ToastMessage.docs = {
+    componentGroup: 'Atom'
+  };
+}

package/es/ToastMessage/ToastMessage.module.css

@@ -0,0 +1,328 @@
+.container {
+  transition: all var(--zd_transition4);
+  position: relative;
+  max-height: 100%;
+  border-radius: 5px;
+  box-shadow: 0 5px 40px 7px var(--zdt_toastmessage_default_box_shadow);
+  background-color: var(--zdt_toastmessage_default_bg);
+  margin-bottom: var(--zd_size7);
+}[dir=ltr] .container {
+  transform-origin: right center;
+}[dir=rtl] .container {
+  transform-origin: left center;
+}
+
+.closeAnimation {
+  max-height: 0;
+  transition: all var(--zd_transition3) 0.4s;
+  margin-bottom: 0;
+}
+
+.animation {
+  composes: modeForward from '~@zohodesk/components/lib/common/animation.module.css';
+}
+
+[dir=ltr] .animation {
+  animation-duration: var(--zd_transition4);
+  -webkit-animation-duration: var(--zd_transition4);
+}
+
+[dir=rtl] .animation {
+  animation-duration: var(--zd_transition4);
+  -webkit-animation-duration: var(--zd_transition4);
+}
+
+.leftanimate {
+  composes: slideLeft from '~@zohodesk/components/lib/common/animation.module.css';
+  composes: animation;
+}
+
+.leftnoanimate {
+  opacity: 1;
+  transform: translateX(0) scale(1);
+}
+
+.rightanimate {
+  composes: slideRight from '~@zohodesk/components/lib/common/animation.module.css';
+  composes: animation;
+  composes: closeAnimation;
+}
+
+.alertifychild {
+  position: relative;
+}
+
+.alertifybanner {
+  overflow: hidden;
+}
+
+[dir=ltr] .alertifybanner {
+  border-radius: 5px 0 0 5px;
+}
+
+[dir=rtl] .alertifybanner {
+  border-radius: 0 5px 5px 0;
+}
+
+.alertright {
+  width: var(--zd_size105);
+}
+
+[dir=ltr] .alertright {
+  border-left: 1px solid var(--zdt_toastmessage_alert_border);
+}
+
+[dir=rtl] .alertright {
+  border-right: 1px solid var(--zdt_toastmessage_alert_border);
+}
+
+.popbutton {
+  font-size: var(--zd_font_size10);
+  color: var(--zdt_toastmessage_popbutton_text);
+  composes: wbreak textCap from '~@zohodesk/components/lib/common/common.module.css';
+  transition: all var(--zd_transition3);
+  position: relative;
+  cursor: pointer;
+}
+
+.mainbutton {
+  composes: popbutton;
+  font-size: var(--zd_font_size11);
+}
+
+.sumbitBorder {
+  border-bottom: 1px solid var(--zdt_toastmessage_submit_border);
+}
+
+.notSolo {
+  composes: mainbutton;
+  composes: sumbitBorder;
+}
+
+.primary {
+  color: var(--zdt_toastmessage_primary_text);
+}
+
+.danger {
+  color: var(--zdt_toastmessage_danger_text);
+}
+
+.success {
+  color: var(--zdt_toastmessage_success_text);
+}
+
+.cancelButton {
+  composes: popbutton;
+}
+
+.cancelButton:hover {
+  color: var(--zdt_toastmessage_cancel_hover_text);
+}
+
+.primary:hover,
+.alerttab:hover .coverfill.primary {
+  color: var(--zdt_toastmessage_primary_hover_text);
+}
+
+.primary:hover, .alerttab:hover .coverfill.primary {
+  background-color: var(--zdt_toastmessage_primary_hover_bg);
+}
+
+.danger:hover,
+.alerttab:hover .coverfill.danger {
+  color: var(--zdt_toastmessage_primary_hover_text);
+}
+
+.danger:hover, .alerttab:hover .coverfill.danger {
+  background-color: var(--zdt_toastmessage_danger_hover_bg);
+}
+
+.success:hover,
+.alerttab:hover .coverfill.success {
+  color: var(--zdt_toastmessage_primary_hover_text);
+}
+
+.success:hover, .alerttab:hover .coverfill.success {
+  background-color: var(--zdt_toastmessage_success_hover_bg);
+}
+
+.alertleft {
+  padding: var(--zd_size15) var(--zd_size25);
+}
+.alertico {
+  min-width: var(--zd_size50);
+}
+
+.alertsecondary .alertico {
+  z-index: -1;
+  opacity: 0.1;
+  position: absolute;
+}
+
+.alertTitle {
+  composes: semibold wbreak dotted from '~@zohodesk/components/lib/common/common.module.css';
+  font-size: var(--zd_font_size14);
+  color: var(--zdt_toastmessage_alerttitle_text);
+}
+
+[dir=ltr] .alertTitleLeft {
+  margin-right: var(--zd_size10);
+}
+
+[dir=rtl] .alertTitleLeft {
+  margin-left: var(--zd_size10);
+}
+
+.alertMessage {
+  font-size: var(--zd_font_size12);
+  composes: wbreak from '~@zohodesk/components/lib/common/common.module.css';
+  line-height: var(--zd_size16);
+  color: var(--zdt_toastmessage_alert_text);
+  margin-top: var(--zd_size5);
+}
+
+.buttonText {
+  font-size: inherit;
+  line-height: var(--zd_size14);
+  text-align: center;
+  padding: 0 var(--zd_size7);
+  cursor: pointer;
+}
+
+.closeIcon,
+.closeIconPrimary {
+  position: absolute;
+  top: 0;
+  z-index: 1;
+  color: var(--zdt_toastmessage_closeicon);
+}
+
+.closeIcon, .closeIconPrimary {
+  padding: var(--zd_size2);
+  cursor: pointer;
+}
+
+[dir=ltr] .closeIcon, [dir=ltr] .closeIconPrimary {
+  right: 0;
+  border-bottom-left-radius: 3px;
+}
+
+[dir=rtl] .closeIcon, [dir=rtl] .closeIconPrimary {
+  left: 0;
+  border-bottom-right-radius: 3px;
+}
+
+.closeIcon:hover {
+  background-color: var(--zdt_toastmessage_closeicon_hover_bg);
+}
+
+.alertright:hover .closeIcon i {
+  color: var(--zdt_toastmessage_primary_hover_text);
+}
+
+.closeIconPrimary:hover i {
+  color: var(--zdt_toastmessage_closeicon_hover_text);
+}
+
+.dropdown {
+  width: var(--zd_size23);
+  position: relative;
+  height: 100%;
+  color: var(--zdt_toastmessage_dropdown_text);
+  background: var(--zdt_toastmessage_dropdown_bg);
+}
+
+.dropdown > i {
+  position: absolute;
+  top: 50%;
+}
+
+[dir=ltr] .dropdown > i {
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+[dir=rtl] .dropdown > i {
+  right: 50%;
+  transform: translate(50%, -50%);
+}
+
+.dropdown:hover i {
+  color: var(--zdt_toastmessage_cancel_hover_text);
+}
+
+.message {
+  position: relative;
+  color: var(--zdt_toastmessage_popbutton_text);
+  font-size: var(--zd_font_size11);
+  composes: dotted textCap from '~@zohodesk/components/lib/common/common.module.css';
+  height: var(--zd_size33);
+  transition: padding var(--zd_transition3), height var(--zd_transition3);
+  border-top: 1px solid var(--zdt_toastmessage_message_border);
+  cursor: pointer;
+  margin:0;
+}
+
+[dir=ltr] .message {
+  padding: var(--zd_size10) var(--zd_size20) var(--zd_size10) var(--zd_size76);
+}
+
+[dir=rtl] .message {
+  padding: var(--zd_size10) var(--zd_size76) var(--zd_size10) var(--zd_size20);
+}
+
+.messageOff {
+  height: 0;
+  font-size: 0;
+  border-width: 0;
+}
+
+[dir=ltr] .messageOff {
+  padding: 0 var(--zd_size20) 0 var(--zd_size76);
+}
+
+[dir=rtl] .messageOff {
+  padding: 0 var(--zd_size76) 0 var(--zd_size20);
+}
+
+.message:hover {
+  background: var(--zdt_toastmessage_dropdown_bg);
+}
+
+.fill {
+  width: var(--zd_size29);
+  height: var(--zd_size29);
+  line-height: var(--zd_size29);
+  composes: rounded from '~@zohodesk/components/lib/common/common.module.css';
+  text-align: center;
+}
+
+.successFill {
+  composes: fill;
+  color: var(--zdt_toastmessage_primary_hover_text);
+  background: var(--zdt_toastmessage_successfill_bg);
+}
+
+.dangerFill {
+  composes: fill;
+  color: var(--zdt_toastmessage_primary_hover_text);
+  background: var(--zdt_toastmessage_danger_hover_bg);
+}
+
+.dangerShadow {
+  color: var(--zdt_toastmessage_danger_text);
+  text-shadow: 0 4px 22px var(--zdt_toastmessage_danger_text_shadow);
+  margin-top: var(--zd_size5);
+}
+
+.successPlain {
+  color: var(--zdt_toastmessage_successplain_text);
+}
+
+.dangerPlain {
+  color: var(--zdt_toastmessage_danger_text);
+}
+
+.primaryPlain {
+  color: var(--zdt_toastmessage_primary_text);
+}

package/es/ToastMessage/docs/ToastMessage__custom.docs.js

@@ -0,0 +1,92 @@
+import React, { Component } from 'react';
+import ToastMessage from '../ToastMessage';
+import Avatar from '@zohodesk/components/lib/Avatar/Avatar';
+import Switch from '@zohodesk/components/lib/Switch/Switch';
+import style from '@zohodesk/components/lib/common/docStyle.module.css';
+export default class ToastMessage__custom extends Component {
+  constructor(props) {
+    super(props);
+    this.getLeftPanel = this.getLeftPanel.bind(this);
+    this.getSubmitContainer = this.getSubmitContainer.bind(this);
+    this.getFooterContainer = this.getFooterContainer.bind(this);
+    this.getBottomContainer = this.getBottomContainer.bind(this);
+  }
+
+  getLeftPanel() {
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Avatar, {
+      name: "BK",
+      shape: "square",
+      size: "medium",
+      src: "https://hjemly.dk/wp-content/uploads/2016/05/facebook-default-no-profile-pic.jpg"
+    }));
+  }
+
+  getSubmitContainer() {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        textAlign: 'center'
+      }
+    }, /*#__PURE__*/React.createElement(Switch, {
+      checked: true,
+      id: "test2",
+      name: "category"
+    }));
+  }
+
+  getFooterContainer() {
+    return /*#__PURE__*/React.createElement("p", null, "Custome Footer");
+  }
+
+  getBottomContainer() {
+    return /*#__PURE__*/React.createElement("div", null, "text");
+  }
+
+  render() {
+    return /*#__PURE__*/React.createElement("div", {
+      className: style.m50
+    }, /*#__PURE__*/React.createElement("div", {
+      className: style.w410
+    }, /*#__PURE__*/React.createElement(ToastMessage, {
+      cancelText: "Not now",
+      getLeftContainer: this.getLeftPanel,
+      info: "There is a few changes occurred in this ticket",
+      isAnimate: false,
+      isIconMid: true,
+      subject: "Screen Notification",
+      submitText: "Submit",
+      getInnerBottomContainer: this.getFooterContainer,
+      getBottomContainer: this.getBottomContainer
+    })), /*#__PURE__*/React.createElement("div", {
+      className: style.w410
+    }, /*#__PURE__*/React.createElement(ToastMessage, {
+      cancelText: "Not now",
+      getLeftContainer: this.getLeftPanel,
+      getSubmitContainer: this.getSubmitContainer,
+      info: "There is a few changes occurred in this ticket",
+      isAnimate: false,
+      subject: "Screen Notification",
+      submitText: "Submit",
+      isIconMid: true
+    })), /*#__PURE__*/React.createElement("div", {
+      className: style.w410
+    }, /*#__PURE__*/React.createElement(ToastMessage, {
+      cancelText: "Not now",
+      info: "There is a few changes occurred in this ticket",
+      isAnimate: false,
+      subject: "Screen Notification",
+      submitText: "Submit",
+      getLeftContainer: this.getLeftPanel,
+      getSubmitContainer: this.getSubmitContainer,
+      getInnerBottomContainer: this.getFooterContainer,
+      isIconMid: true
+    })));
+  }
+
+}
+
+if (false) {
+  ToastMessage__custom.docs = {
+    componentGroup: 'Atom',
+    description: ' '
+  };
+}