@zohodesk/dot 1.0.0-beta.21 → 1.0.0-beta.212

package/src/ToastMessage/ToastMessage.js

@@ -1,289 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Icon from '@zohodesk/icons/lib/Icon';
-import { Container, Box } from '@zohodesk/components/lib/Layout';
-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);
-    }
-  }
-
-  componentWillUnmount() {
-    this._mount = false;
-  }
-
-  messageOff(e) {
-    this.setState({ messageState: !this.state.messageState });
-    e.stopPropagation();
-  }
-
-  closePop(e) {
-    this.setState({ isClose: true }, () => {
-      let { id, hidePopNotification } = this.props;
-      setTimeout(() => {
-        hidePopNotification(id);
-      }, 300);
-    });
-
-    e.stopPropagation();
-  }
-
-  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}
-      >
-        <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>
-                      {subject}
-                    </Box>
-                  </Container>
-                  {info ? <p className={style.alertMessage}>{info}</p> : null}
-                  {getInnerBottomContainer ? (
-                    <div>{getInnerBottomContainer()}</div>
-                  ) : null}
-                </Box>
-                {type == 'information' ? (
-                  <Box
-                    className={style.closeIconPrimary}
-                    onClick={this.closePop}
-                    dataId={dataId + '_close'}
-                  >
-                    <Icon isBold name='ZD-close' size='18' />
-                  </Box>
-                ) : null}
-              </Container>
-            </Box>
-            {type != 'information' ? (
-              <Box className={style.alertright}>
-                <Container className={style.alerttab}>
-                  {needClose ? (
-                    <span
-                      className={style.closeIcon}
-                      onClick={this.closePop}
-                      data-id={dataId + '_closeRight'}
-                    >
-                      <Icon name='ZD-close' size='18' />
-                    </span>
-                  ) : null}
-                  {submitText ? (
-                    <Box
-                      className={`${
-                        getSubmitContainer
-                          ? style.sumbitBorder
-                          : cancelText
-                          ? style.notSolo
-                          : style.mainbutton
-                      } ${getSubmitContainer ? '' : style[submitType]} `}
-                      flexible
-                      onClick={() => {
-                        onSubmit && onSubmit();
-                        popNotificationAction.ob.resolve(id);
-                      }}
-                      dataId={dataId + '_submitButton'}
-                    >
-                      <Container align='vertical' alignBox='row'>
-                        {getSubmitContainer ? (
-                          <Box flexible>{getSubmitContainer()}</Box>
-                        ) : (
-                          <Box className={style.buttonText} flexible>
-                            {submitText}
-                          </Box>
-                        )}
-                      </Container>
-                    </Box>
-                  ) : null}
-                  {cancelText ? (
-                    <Box
-                      className={`${style.cancelButton}`}
-                      flexible
-                      onClick={this.closePop}
-                      dataId={dataId + '_cancelButton'}
-                    >
-                      <Container align='vertical' alignBox='row'>
-                        <Box
-                          className={`${style.buttonText}`}
-                          flexible
-                          onClick={() => {
-                            onCancel && onCancel();
-                            popNotificationAction.ob.reject(id);
-                          }}
-                          dataId={dataId + '_cancelButtonInner'}
-                        >
-                          {cancelText}
-                        </Box>
-                        {isMore ? (
-                          <Box
-                            className={style.dropdown}
-                            onClick={this.messageOff}
-                            dataId={dataId + '_moreIcon'}
-                          >
-                            <Icon name='ZD-down' size='7' />
-                          </Box>
-                        ) : null}
-                      </Container>
-                    </Box>
-                  ) : null}
-                </Container>
-              </Box>
-            ) : null}
-          </Container>
-        </Box>
-        {isMore ? (
-          <Box
-            className={`${style.message} ${
-              this.state.messageState ? '' : style.messageOff
-            }`}
-            tagName='p'
-          >
-            {message}
-          </Box>
-        ) : null}
-
-        {getBottomContainer ? <Box>{getBottomContainer()}</Box> : null}
-      </Container>
-    );
-  }
-}
-
-ToastMessage.propTypes = {
-  autoClose: PropTypes.bool,
-  cancelText: 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']),
-  dataId: 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'
-};
-
-if (__DOCS__) {
-  ToastMessage.docs = {
-    componentGroup: 'Atom',
-    description: ' '
-  };
-}

package/src/ToastMessage/ToastMessage.module.css

@@ -1,260 +0,0 @@
-.container {
-  border-radius: 5px;
-  box-shadow: 0 5px 40px 7px var(--zd_shadow_smoke28);
-  background-color: var(--dot_bg_white);
-  transition: all 400ms;
-  margin-bottom: var(--zd_size7);
-  position: relative;
-  transform-origin: right center;
-  max-height: 100%;
-}
-
-.closeAnimation {
-  max-height: 0;
-  margin-bottom: 0;
-  transition: all 0.3s 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;
-}
-
-.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(--zd_border_smoke29);
-  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;
-  position: relative;
-  cursor: pointer;
-}
-
-.mainbutton {
-  composes: popbutton;
-  font-size: var(--zd_size11);
-}
-
-.sumbitBorder {
-  border-bottom: 1px solid var(--zd_border_smoke30);
-}
-
-.notSolo {
-  composes: mainbutton;
-  composes: sumbitBorder;
-}
-
-.primary {
-  color: var(--zd_text_primary);
-}
-
-.danger {
-  color: var(--zd_text_danger);
-}
-
-.success {
-  color: var(--zd_text_olive8);
-}
-
-.cancelButton {
-  composes: popbutton;
-}
-
-.cancelButton:hover {
-  color: var(--dot_text_black);
-}
-
-.primary:hover,
-.alerttab:hover .coverfill.primary {
-  background-color: var(--zd_bg_primary);
-  color: var(--dot_text_white);
-}
-
-.danger:hover,
-.alerttab:hover .coverfill.danger {
-  background-color: var(--zd_bg_danger);
-  color: var(--dot_text_white);
-}
-
-.success:hover,
-.alerttab:hover .coverfill.success {
-  background-color: var(--zd_bg_olive8);
-  color: var(--dot_text_white);
-}
-
-.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: 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);
-}
-
-.alertTitleLeft {
-  margin-right: var(--zd_size10);
-}
-
-.alertMessage {
-  font-size: var(--zd_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);
-}
-
-.buttonText {
-  font-size: inherit;
-  text-align: center;
-  line-height: var(--zd_size14);
-  padding: 0 var(--zd_size7);
-}
-
-.closeIcon,
-.closeIconPrimary {
-  position: absolute;
-  right: 0;
-  top: 0;
-  z-index: 1;
-  padding: var(--zd_size2);
-  border-bottom-left-radius: 3px;
-  cursor: pointer;
-  color: var(--zd_text_smoke21);
-}
-
-.closeIcon:hover {
-  background-color: var(--zd_bg_primary4);
-}
-
-.alertright:hover .closeIcon i {
-  color: var(--dot_text_white);
-}
-
-.closeIconPrimary:hover i {
-  color: var(--zd_text_dark2);
-}
-
-.dropdown {
-  width: var(--zd_size23);
-  background: var(--zd_bg_alabaster);
-  position: relative;
-  height: 100%;
-  color: var(--zd_text_dark5);
-}
-
-.dropdown > i {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
-
-.dropdown:hover i {
-  color: var(--dot_text_black);
-}
-
-.message {
-  padding: var(--zd_size10) var(--zd_size20) var(--zd_size10) 4.75rem;
-  border-top: 1px solid var(--zd_border_smoke1);
-  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';
-  height: var(--zd_size33);
-  transition: padding 0.3s, height 0.3s;
-}
-
-.messageOff {
-  border-width: 0;
-  padding: 0 var(--zd_size20) 0 var(--zd_size76);
-  height: 0;
-  font-size: 0;
-}
-
-.message:hover {
-  background: var(--zd_bg_alabaster);
-}
-
-.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(--zd_bg_olive6);
-  color: var(--dot_text_white);
-}
-
-.dangerFill {
-  composes: fill;
-  background: var(--zd_bg_danger);
-  color: var(--dot_text_white);
-}
-
-.dangerShadow {
-  text-shadow: 0 4px 22px rgb(227, 74, 76);
-  margin-top: var(--zd_size5);
-  color: var(--zd_text_danger);
-}
-
-.successPlain {
-  color: var(--zd_text_olive6);
-}
-
-.dangerPlain {
-  color: var(--zd_text_danger);
-}
-
-.primaryPlain {
-  color: var(--zd_text_primary);
-}

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: ' '
-  };
-}

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

@@ -1,55 +0,0 @@
-import React, { Component } from 'react';
-import ToastMessage from '../ToastMessage';
-import style from '@zohodesk/components/lib/common/docStyle.module.css';
-
-export default class ToastMessage__information extends Component {
-  render() {
-    return (
-      <div className={style.m50}>
-        <div className={style.w410}>
-          <ToastMessage
-            type='information'
-            subject='Screen Notification'
-            info='There is a few changes occurred in this ticket'
-            submitText='View changes'
-            needClose
-            iconSize='17'
-            iconName='ZD-ticknew'
-            isIconMid
-            iconPalette='successPlain'
-          />
-        </div>
-
-        <div className={style.w410}>
-          <ToastMessage
-            type='information'
-            iconName='ZD-exclamationNew'
-            subject='Log Notification'
-            info="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,"
-            cancelText='Not now'
-            iconSize='30'
-            iconPalette='dangerShadow'
-          />
-        </div>
-
-        <div className={style.w410}>
-          <ToastMessage
-            type='information'
-            iconName='ZD-ticknew'
-            subject='Log Notification'
-            info="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,"
-            cancelText='Not now'
-            iconSize='12'
-            iconPalette='successFill'
-          />
-        </div>
-      </div>
-    );
-  }
-}
-if (__DOCS__) {
-  ToastMessage__information.docs = {
-    componentGroup: 'Atom',
-    description: ' '
-  };
-}