@zohodesk/dot 1.0.0-temp-65 → 1.0.0-temp-68

package/src/ToastMessage/ToastMessage.js

@@ -1,315 +0,0 @@
-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 = (
-    <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>
-              <Container align={isIconMid ? 'vertical' : ''} alignBox='row'>
-                {type != 'success' && !getLeftContainer ? (
-                  <Box className={`${style.alertico}`}>
-                    <span>{channelIcon}</span>
-                  </Box>
-                ) : getLeftContainer ? (
-                  <Box className={`${style.alertico}`}>
-                    {getLeftContainer()}
-                  </Box>
-                ) : null}
-                <Box flexible>
-                  <Container align='vertical' alignBox='row' isCover={false}>
-                    {type == 'success' ? (
-                      <Box className={style.alertTitleLeft}>{channelIcon}</Box>
-                    ) : null}
-                    <Box
-                      className={style.alertTitle}
-                      flexible
-                      data-title={subject}
-                      id={titleId}
-                    >
-                      {subject}
-                    </Box>
-                  </Container>
-                  {info ? (
-                    <p
-                      className={style.alertMessage}
-                      data-title={info}
-                      id={infoId}
-                    >
-                      {info}
-                    </p>
-                  ) : null}
-                  {getInnerBottomContainer ? (
-                    <div>{getInnerBottomContainer()}</div>
-                  ) : null}
-                </Box>
-                {type == 'information' && needClose ? (
-                  <Box
-                    className={`${a11yStyle.buttonReset} ${style.closeIconPrimary}`}
-                    onClick={onClose}
-                    dataId={`${dataId}_close`}
-                    tagName='button'
-                  >
-                    <Icon isBold name='ZD-close' size='18' />
-                  </Box>
-                ) : null}
-              </Container>
-            </Box>
-            {type != 'information' ? (
-              <Box className={style.alertright}>
-                <Container className={style.alerttab}>
-                  {needClose ? (
-                    <button
-                      className={`${a11yStyle.buttonReset} ${style.closeIcon}`}
-                      onClick={onClose}
-                      data-id={`${dataId}_closeRight`}
-                    >
-                      <Icon name='ZD-close' size='18' />
-                    </button>
-                  ) : null}
-                  {submitText ? (
-                    <Box
-                      className={`${
-                        getSubmitContainer
-                          ? style.sumbitBorder
-                          : cancelText
-                          ? style.notSolo
-                          : style.mainbutton
-                      } ${getSubmitContainer ? '' : style[submitType]} `}
-                      flexible
-                      onClick={onClickSubmit}
-                      dataId={`${dataId}_submitButton`}
-                    >
-                      <Container align='vertical' alignBox='row'>
-                        {getSubmitContainer ? (
-                          <Box flexible>{getSubmitContainer()}</Box>
-                        ) : (
-                          <Box
-                            className={`${a11yStyle.buttonReset} ${style.buttonText}`}
-                            flexible
-                            tagName='button'
-                          >
-                            {submitText}
-                          </Box>
-                        )}
-                      </Container>
-                    </Box>
-                  ) : null}
-                  {cancelText ? (
-                    <Box
-                      className={`${style.cancelButton}`}
-                      flexible
-                      onClick={onClose}
-                      dataId={`${dataId}_cancelButton`}
-                    >
-                      <Container align='vertical' alignBox='row'>
-                        <Box
-                          className={`${a11yStyle.buttonReset} ${style.buttonText}`}
-                          flexible
-                          onClick={onClickCancel}
-                          dataId={`${dataId}_cancelButtonInner`}
-                          tagName='button'
-                        >
-                          {cancelText}
-                        </Box>
-                        {isMore ? (
-                          <Box
-                            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>
-                        ) : null}
-                      </Container>
-                    </Box>
-                  ) : null}
-                </Container>
-              </Box>
-            ) : null}
-          </Container>
-        </Box>
-      ) : null}
-      {isMore ? (
-        <Box
-          className={`${style.message} ${messageState ? '' : style.messageOff}`}
-          tagName='p'
-        >
-          {message}
-        </Box>
-      ) : null}
-
-      {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,
-  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 (__DOCS__) {
-  ToastMessage.docs = {
-    componentGroup: 'Atom'
-  };
-}

package/src/ToastMessage/ToastMessage.module.css

@@ -1,257 +0,0 @@
-.container {
-  border-radius: 5px;
-  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;
-  max-height: 100%;
-}
-
-.closeAnimation {
-  max-height: 0;
-  margin-bottom: 0;
-  transition: all var(--zd_transition3) 0.4s;
-}
-
-.animation {
-  composes: modeForward from '~@zohodesk/components/lib/common/animation.module.css';
-  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 {
-  transform: translateX(0) scale(1);
-  opacity: 1;
-}
-
-.rightanimate {
-  composes: slideRight from '~@zohodesk/components/lib/common/animation.module.css';
-  composes: animation;
-  composes: closeAnimation;
-}
-
-.alertifychild {
-  position: relative;
-}
-
-.alertifybanner {
-  overflow: hidden;
-  border-radius: 5px 0 0 5px;
-}
-
-.alertright {
-  border-left: 1px solid var(--zdt_toastmessage_alert_border);
-  width: var(--zd_size105);
-}
-
-.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 {
-  background-color: var(--zdt_toastmessage_primary_hover_bg);
-  color: var(--zdt_toastmessage_primary_hover_text);
-}
-
-.danger:hover,
-.alerttab:hover .coverfill.danger {
-  background-color: var(--zdt_toastmessage_danger_hover_bg);
-  color: var(--zdt_toastmessage_primary_hover_text);
-}
-
-.success:hover,
-.alerttab:hover .coverfill.success {
-  background-color: var(--zdt_toastmessage_success_hover_bg);
-  color: var(--zdt_toastmessage_primary_hover_text);
-}
-
-.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);
-}
-
-.alertTitleLeft {
-  margin-right: var(--zd_size10);
-}
-
-.alertMessage {
-  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(--zdt_toastmessage_alert_text);
-}
-
-.buttonText {
-  font-size: inherit;
-  text-align: center;
-  line-height: var(--zd_size14);
-  padding: 0 var(--zd_size7);
-  cursor: pointer;
-}
-
-.closeIcon,
-.closeIconPrimary {
-  position: absolute;
-  right: 0;
-  top: 0;
-  z-index: 1;
-  padding: var(--zd_size2);
-  border-bottom-left-radius: 3px;
-  cursor: pointer;
-  color: var(--zdt_toastmessage_closeicon);
-}
-
-.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);
-  background: var(--zdt_toastmessage_dropdown_bg);
-  position: relative;
-  height: 100%;
-  color: var(--zdt_toastmessage_dropdown_text);
-}
-
-.dropdown > i {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
-
-.dropdown:hover i {
-  color: var(--zdt_toastmessage_cancel_hover_text);
-}
-
-.message {
-  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;
-  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);
-  margin:0;
-}
-
-.messageOff {
-  border-width: 0;
-  padding: 0 var(--zd_size20) 0 var(--zd_size76);
-  height: 0;
-  font-size: 0;
-}
-
-.message:hover {
-  background: var(--zdt_toastmessage_dropdown_bg);
-}
-
-.fill {
-  width: var(--zd_size29);
-  height: var(--zd_size29);
-  line-height: var(--zd_size29);
-  text-align: center;
-  composes: rounded from '~@zohodesk/components/lib/common/common.module.css';
-}
-
-.successFill {
-  composes: fill;
-  background: var(--zdt_toastmessage_successfill_bg);
-  color: var(--zdt_toastmessage_primary_hover_text);
-}
-
-.dangerFill {
-  composes: fill;
-  background: var(--zdt_toastmessage_danger_hover_bg);
-  color: var(--zdt_toastmessage_primary_hover_text);
-}
-
-.dangerShadow {
-  text-shadow: 0 4px 22px var(--zdt_toastmessage_danger_text_shadow);
-  margin-top: var(--zd_size5);
-  color: var(--zdt_toastmessage_danger_text);
-}
-
-.successPlain {
-  color: var(--zdt_toastmessage_successplain_text);
-}
-
-.dangerPlain {
-  color: var(--zdt_toastmessage_danger_text);
-}
-
-.primaryPlain {
-  color: var(--zdt_toastmessage_primary_text);
-}

package/src/ToastMessage/docs/ToastMessage__custom.docs.js

@@ -1,97 +0,0 @@
-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 (
-      <div>
-        <Avatar
-          name='BK'
-          shape='square'
-          size='medium'
-          src='https://hjemly.dk/wp-content/uploads/2016/05/facebook-default-no-profile-pic.jpg'
-        />
-      </div>
-    );
-  }
-
-  getSubmitContainer() {
-    return (
-      <div style={{ textAlign: 'center' }}>
-        <Switch checked id='test2' name='category' />
-      </div>
-    );
-  }
-
-  getFooterContainer() {
-    return <p>Custome Footer</p>;
-  }
-
-  getBottomContainer() {
-    return <div>text</div>;
-  }
-
-  render() {
-    return (
-      <div className={style.m50}>
-        <div className={style.w410}>
-          <ToastMessage
-            cancelText='Not now'
-            getLeftContainer={this.getLeftPanel}
-            info='There is a few changes occurred in this ticket'
-            isAnimate={false}
-            isIconMid
-            subject='Screen Notification'
-            submitText='Submit'
-            getInnerBottomContainer={this.getFooterContainer}
-            getBottomContainer={this.getBottomContainer}
-          />
-        </div>
-
-        <div className={style.w410}>
-          <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
-          />
-        </div>
-
-        <div className={style.w410}>
-          <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
-          />
-        </div>
-      </div>
-    );
-  }
-}
-if (__DOCS__) {
-  ToastMessage__custom.docs = {
-    componentGroup: 'Atom',
-    description: ' '
-  };
-}