@zohodesk/dot 1.0.0-beta.20 → 1.0.0-beta.203

package/src/ToastMessage/ToastMessage.js

@@ -1,103 +1,96 @@
-import React from 'react';
+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';
-import { popNotificationAction } from '../actions';
 
-export default class ToastMessage extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      messageState: this.props.messageState,
-      isClose: this.props.isClose
-    };
-    this._mount = false;
-    this.messageOff = this.messageOff.bind(this);
-    this.closePop = this.closePop.bind(this);
-  }
-
-  componentDidMount() {
-    this._mount = true;
-    let { autoClose, hideTime, id, hidePopNotification } = this.props;
-    if (autoClose) {
-      setTimeout(() => {
-        let { isClose } = this.state;
-        if (!isClose && this._mount) {
-          this.setState({ isClose: true }, () => {
-            setTimeout(() => {
-              hidePopNotification(id);
-            }, 300);
-          });
-        }
-      }, hideTime);
-    }
-  }
+function removeClose(e) {
+  e && e.stopPropagation && e.stopPropagation();
+  e &&
+    e.nativeEvent &&
+    e.nativeEvent.stopImmediatePropagation &&
+    e.nativeEvent.stopImmediatePropagation();
+}
 
-  componentWillUnmount() {
-    this._mount = false;
+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();
   }
 
-  messageOff(e) {
-    this.setState({ messageState: !this.state.messageState });
-    e.stopPropagation();
+  function onClickCancel(e) {
+    onCancel && onCancel();
+    onClose && onClose();
   }
 
-  closePop(e) {
-    this.setState({ isClose: true }, () => {
-      let { id, hidePopNotification } = this.props;
-      setTimeout(() => {
-        hidePopNotification(id);
-      }, 300);
-    });
-
-    e.stopPropagation();
+  function changeMessageState(e) {
+    removeClose(e);
+    setMessageState(!messageState);
   }
 
-  render() {
-    let {
-      id,
-      type,
-      subject,
-      info,
-      submitText,
-      cancelText,
-      iconName,
-      iconSize,
-      submitType,
-      isIconMid,
-      needClose,
-      iconPalette,
-      isMore,
-      message,
-      isAnimate,
-      getLeftContainer,
-      getInnerBottomContainer,
-      getBottomContainer,
-      getSubmitContainer,
-      onSubmit,
-      onCancel,
-      dataId
-    } = this.props;
-
-    let animateClass = this.state.isClose
-      ? style.rightanimate
-      : style.leftanimate;
-    let animateRemoveClass = this.state.isClose
-      ? style.rightanimate
-      : style.leftnoanimate;
-    let channelIcon = (
-      <Icon iconClass={style[iconPalette]} name={iconName} size={iconSize} />
-    );
-
-    return (
-      <Container
-        className={`${style.container} ${
-          isAnimate ? animateClass : animateRemoveClass
-        } ${style[`alert${type}`] ? style[`alert${type}`] : ''}`}
-        isCover={false}
-        dataId={dataId}
-      >
+  let animateClass = isClose ? style.rightanimate : style.leftanimate;
+  let animateRemoveClass = isClose ? style.rightanimate : style.leftnoanimate;
+  let channelIcon = (
+    <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 (
+    <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' ? (
         <Box className={style.alertifychild} flexible>
           <Container alignBox='row' className={style.alertifybanner}>
             <Box className={style.alertleft} flexible>
@@ -116,20 +109,34 @@ export default class ToastMessage extends React.Component {
                     {type == 'success' ? (
                       <Box className={style.alertTitleLeft}>{channelIcon}</Box>
                     ) : null}
-                    <Box className={style.alertTitle} flexible>
+                    <Box
+                      className={style.alertTitle}
+                      flexible
+                      data-title={subject}
+                      id={titleId}
+                    >
                       {subject}
                     </Box>
                   </Container>
-                  {info ? <p className={style.alertMessage}>{info}</p> : null}
+                  {info ? (
+                    <p
+                      className={style.alertMessage}
+                      data-title={info}
+                      id={infoId}
+                    >
+                      {info}
+                    </p>
+                  ) : null}
                   {getInnerBottomContainer ? (
                     <div>{getInnerBottomContainer()}</div>
                   ) : null}
                 </Box>
-                {type == 'information' ? (
+                {type == 'information' && needClose ? (
                   <Box
-                    className={style.closeIconPrimary}
-                    onClick={this.closePop}
-                    dataId={dataId + '_close'}
+                    className={`${a11yStyle.buttonReset} ${style.closeIconPrimary}`}
+                    onClick={onClose}
+                    dataId={`${dataId}_close`}
+                    tagName='button'
                   >
                     <Icon isBold name='ZD-close' size='18' />
                   </Box>
@@ -140,13 +147,13 @@ export default class ToastMessage extends React.Component {
               <Box className={style.alertright}>
                 <Container className={style.alerttab}>
                   {needClose ? (
-                    <span
-                      className={style.closeIcon}
-                      onClick={this.closePop}
-                      data-id={dataId + '_closeRight'}
+                    <button
+                      className={`${a11yStyle.buttonReset} ${style.closeIcon}`}
+                      onClick={onClose}
+                      data-id={`${dataId}_closeRight`}
                     >
                       <Icon name='ZD-close' size='18' />
-                    </span>
+                    </button>
                   ) : null}
                   {submitText ? (
                     <Box
@@ -158,17 +165,18 @@ export default class ToastMessage extends React.Component {
                           : style.mainbutton
                       } ${getSubmitContainer ? '' : style[submitType]} `}
                       flexible
-                      onClick={() => {
-                        onSubmit && onSubmit();
-                        popNotificationAction.ob.resolve(id);
-                      }}
-                      dataId={dataId + '_submitButton'}
+                      onClick={onClickSubmit}
+                      dataId={`${dataId}_submitButton`}
                     >
                       <Container align='vertical' alignBox='row'>
                         {getSubmitContainer ? (
                           <Box flexible>{getSubmitContainer()}</Box>
                         ) : (
-                          <Box className={style.buttonText} flexible>
+                          <Box
+                            className={`${a11yStyle.buttonReset} ${style.buttonText}`}
+                            flexible
+                            tagName='button'
+                          >
                             {submitText}
                           </Box>
                         )}
@@ -179,26 +187,27 @@ export default class ToastMessage extends React.Component {
                     <Box
                       className={`${style.cancelButton}`}
                       flexible
-                      onClick={this.closePop}
-                      dataId={dataId + '_cancelButton'}
+                      onClick={onClose}
+                      dataId={`${dataId}_cancelButton`}
                     >
                       <Container align='vertical' alignBox='row'>
                         <Box
-                          className={`${style.buttonText}`}
+                          className={`${a11yStyle.buttonReset} ${style.buttonText}`}
                           flexible
-                          onClick={() => {
-                            onCancel && onCancel();
-                            popNotificationAction.ob.reject(id);
-                          }}
-                          dataId={dataId + '_cancelButtonInner'}
+                          onClick={onClickCancel}
+                          dataId={`${dataId}_cancelButtonInner`}
+                          tagName='button'
                         >
                           {cancelText}
                         </Box>
                         {isMore ? (
                           <Box
-                            className={style.dropdown}
-                            onClick={this.messageOff}
-                            dataId={dataId + '_moreIcon'}
+                            className={`${a11yStyle.buttonReset} ${style.dropdown}`}
+                            onClick={changeMessageState}
+                            dataId={`${dataId}_moreIcon`}
+                            tagName='button'
+                            aria-expanded={messageState ? true : false}
+                            aria-haspopup={true}
                           >
                             <Icon name='ZD-down' size='7' />
                           </Box>
@@ -211,26 +220,29 @@ export default class ToastMessage extends React.Component {
             ) : null}
           </Container>
         </Box>
-        {isMore ? (
-          <Box
-            className={`${style.message} ${
-              this.state.messageState ? '' : style.messageOff
-            }`}
-            tagName='p'
-          >
-            {message}
-          </Box>
-        ) : null}
+      ) : null}
+      {isMore ? (
+        <Box
+          className={`${style.message} ${messageState ? '' : style.messageOff}`}
+          tagName='p'
+        >
+          {message}
+        </Box>
+      ) : null}
 
-        {getBottomContainer ? <Box>{getBottomContainer()}</Box> : null}
-      </Container>
-    );
-  }
+      {getBottomContainer ? <Box>{getBottomContainer()}</Box> : null}
+    </Container>
+  );
+}
+
+export default function ToastMessage(props) {
+  return <AutoClose {...props} Element={ToastMessageUI} />;
 }
 
 ToastMessage.propTypes = {
   autoClose: PropTypes.bool,
   cancelText: PropTypes.string,
+  dataId: PropTypes.string,
   getBottomContainer: PropTypes.func,
   getInnerBottomContainer: PropTypes.func,
   getLeftContainer: PropTypes.func,
@@ -261,8 +273,21 @@ ToastMessage.propTypes = {
   subject: PropTypes.string,
   submitText: PropTypes.string,
   submitType: PropTypes.oneOf(['primary', 'danger', 'success']),
-  type: PropTypes.oneOf(['primary', 'information', 'secondary', 'success']),
-  dataId: PropTypes.string
+  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 = {
@@ -278,12 +303,13 @@ ToastMessage.defaultProps = {
   isClose: false,
   autoClose: false,
   hideTime: '3000',
-  dataId: 'toastMessage'
+  dataId: 'toastMessage',
+  needAutoZindex: true,
+  a11y: {}
 };
 
 if (__DOCS__) {
   ToastMessage.docs = {
-    componentGroup: 'Atom',
-    description: ' '
+    componentGroup: 'Atom'
   };
 }

package/src/ToastMessage/ToastMessage.module.css

@@ -1,8 +1,8 @@
 .container {
   border-radius: 5px;
-  box-shadow: 0 5px 40px 7px var(--zd_shadow_smoke28);
-  background-color: var(--dot_bg_white);
-  transition: all 400ms;
+  box-shadow: 0 5px 40px 7px var(--zdt_toastmessage_default_box_shadow);
+  background-color: var(--zdt_toastmessage_default_bg);
+  transition: all var(--zd_transition4);
   margin-bottom: var(--zd_size7);
   position: relative;
   transform-origin: right center;
@@ -12,15 +12,13 @@
 .closeAnimation {
   max-height: 0;
   margin-bottom: 0;
-  transition: all 0.3s 0.4s;
+  transition: all var(--zd_transition3) 0.4s;
 }
 
 .animation {
   composes: modeForward from '~@zohodesk/components/lib/common/animation.module.css';
-  animation-duration: 0.4s;
-  -webkit-animation-duration: 0.4s;
-  -moz-animation-duration: 0.4s;
-  -ms-animation-duration: 0.4s;
+  animation-duration: var(--zd_transition4);
+  -webkit-animation-duration: var(--zd_transition4);
 }
 
 .leftanimate {
@@ -49,27 +47,26 @@
 }
 
 .alertright {
-  border-left: 1px solid var(--zd_border_smoke29);
+  border-left: 1px solid var(--zdt_toastmessage_alert_border);
   width: var(--zd_size105);
 }
 
 .popbutton {
-  font-size: var(--zd_size10);
-  composes: textCap from '~@zohodesk/components/lib/common/common.module.css';
-  color: var(--zd_text_smoke18);
-  composes: wbreak from '~@zohodesk/components/lib/common/common.module.css';
-  transition: all 0.3s;
+  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_size11);
+  font-size: var(--zd_font_size11);
 }
 
 .sumbitBorder {
-  border-bottom: 1px solid var(--zd_border_smoke30);
+  border-bottom: 1px solid var(--zdt_toastmessage_submit_border);
 }
 
 .notSolo {
@@ -78,15 +75,15 @@
 }
 
 .primary {
-  color: var(--zd_text_primary);
+  color: var(--zdt_toastmessage_primary_text);
 }
 
 .danger {
-  color: var(--zd_text_danger);
+  color: var(--zdt_toastmessage_danger_text);
 }
 
 .success {
-  color: var(--zd_text_olive8);
+  color: var(--zdt_toastmessage_success_text);
 }
 
 .cancelButton {
@@ -94,25 +91,25 @@
 }
 
 .cancelButton:hover {
-  color: var(--dot_text_black);
+  color: var(--zdt_toastmessage_cancel_hover_text);
 }
 
 .primary:hover,
 .alerttab:hover .coverfill.primary {
-  background-color: var(--zd_bg_primary);
-  color: var(--dot_text_white);
+  background-color: var(--zdt_toastmessage_primary_hover_bg);
+  color: var(--zdt_toastmessage_primary_hover_text);
 }
 
 .danger:hover,
 .alerttab:hover .coverfill.danger {
-  background-color: var(--zd_bg_danger);
-  color: var(--dot_text_white);
+  background-color: var(--zdt_toastmessage_danger_hover_bg);
+  color: var(--zdt_toastmessage_primary_hover_text);
 }
 
 .success:hover,
 .alerttab:hover .coverfill.success {
-  background-color: var(--zd_bg_olive8);
-  color: var(--dot_text_white);
+  background-color: var(--zdt_toastmessage_success_hover_bg);
+  color: var(--zdt_toastmessage_primary_hover_text);
 }
 
 .alertleft {
@@ -129,10 +126,9 @@
 }
 
 .alertTitle {
-  composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
-  composes: wbreak from '~@zohodesk/components/lib/common/common.module.css';
-  composes: semibold from '~@zohodesk/components/lib/common/common.module.css';
-  font-size: var(--zd_size14);
+  composes: semibold wbreak dotted from '~@zohodesk/components/lib/common/common.module.css';
+  font-size: var(--zd_font_size14);
+  color: var(--zdt_toastmessage_alerttitle_text);
 }
 
 .alertTitleLeft {
@@ -140,11 +136,11 @@
 }
 
 .alertMessage {
-  font-size: var(--zd_size12);
+  font-size: var(--zd_font_size12);
   composes: wbreak from '~@zohodesk/components/lib/common/common.module.css';
   margin-top: var(--zd_size5);
   line-height: var(--zd_size16);
-  color: var(--zd_text_smoke31);
+  color: var(--zdt_toastmessage_alert_text);
 }
 
 .buttonText {
@@ -152,6 +148,7 @@
   text-align: center;
   line-height: var(--zd_size14);
   padding: 0 var(--zd_size7);
+  cursor: pointer;
 }
 
 .closeIcon,
@@ -163,27 +160,27 @@
   padding: var(--zd_size2);
   border-bottom-left-radius: 3px;
   cursor: pointer;
-  color: var(--zd_text_smoke21);
+  color: var(--zdt_toastmessage_closeicon);
 }
 
 .closeIcon:hover {
-  background-color: var(--zd_bg_primary4);
+  background-color: var(--zdt_toastmessage_closeicon_hover_bg);
 }
 
 .alertright:hover .closeIcon i {
-  color: var(--dot_text_white);
+  color: var(--zdt_toastmessage_primary_hover_text);
 }
 
 .closeIconPrimary:hover i {
-  color: var(--zd_text_dark2);
+  color: var(--zdt_toastmessage_closeicon_hover_text);
 }
 
 .dropdown {
   width: var(--zd_size23);
-  background: var(--zd_bg_alabaster);
+  background: var(--zdt_toastmessage_dropdown_bg);
   position: relative;
   height: 100%;
-  color: var(--zd_text_dark5);
+  color: var(--zdt_toastmessage_dropdown_text);
 }
 
 .dropdown > i {
@@ -194,20 +191,20 @@
 }
 
 .dropdown:hover i {
-  color: var(--dot_text_black);
+  color: var(--zdt_toastmessage_cancel_hover_text);
 }
 
 .message {
-  padding: var(--zd_size10) var(--zd_size20) var(--zd_size10) 4.75rem;
-  border-top: 1px solid var(--zd_border_smoke1);
+  padding: var(--zd_size10) var(--zd_size20) var(--zd_size10) var(--zd_size76);
+  border-top: 1px solid var(--zdt_toastmessage_message_border);
   cursor: pointer;
   position: relative;
-  composes: textCap from '~@zohodesk/components/lib/common/common.module.css';
-  color: var(--zd_text_smoke18);
-  font-size: var(--zd_size11);
-  composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
+  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 0.3s, height 0.3s;
+  transition: padding var(--zd_transition3), height var(--zd_transition3);
+  margin:0;
 }
 
 .messageOff {
@@ -218,7 +215,7 @@
 }
 
 .message:hover {
-  background: var(--zd_bg_alabaster);
+  background: var(--zdt_toastmessage_dropdown_bg);
 }
 
 .fill {
@@ -231,30 +228,30 @@
 
 .successFill {
   composes: fill;
-  background: var(--zd_bg_olive6);
-  color: var(--dot_text_white);
+  background: var(--zdt_toastmessage_successfill_bg);
+  color: var(--zdt_toastmessage_primary_hover_text);
 }
 
 .dangerFill {
   composes: fill;
-  background: var(--zd_bg_danger);
-  color: var(--dot_text_white);
+  background: var(--zdt_toastmessage_danger_hover_bg);
+  color: var(--zdt_toastmessage_primary_hover_text);
 }
 
 .dangerShadow {
-  text-shadow: 0 4px 22px rgb(227, 74, 76);
+  text-shadow: 0 4px 22px var(--zdt_toastmessage_danger_text_shadow);
   margin-top: var(--zd_size5);
-  color: var(--zd_text_danger);
+  color: var(--zdt_toastmessage_danger_text);
 }
 
 .successPlain {
-  color: var(--zd_text_olive6);
+  color: var(--zdt_toastmessage_successplain_text);
 }
 
 .dangerPlain {
-  color: var(--zd_text_danger);
+  color: var(--zdt_toastmessage_danger_text);
 }
 
 .primaryPlain {
-  color: var(--zd_text_primary);
+  color: var(--zdt_toastmessage_primary_text);
 }

package/src/ToastMessage/docs/ToastMessage__information.docs.js

@@ -41,6 +41,8 @@ export default class ToastMessage__information extends Component {
             cancelText='Not now'
             iconSize='12'
             iconPalette='successFill'
+            needClose
+            onPortalClose={()=>{console.log('from close')}}
           />
         </div>
       </div>