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

package/src/ToastMessage/docs/ToastMessage__primary.docs.js

@@ -1,135 +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__primary extends Component {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    return (
-      <div className={style.m50}>
-        <div className={style.w410}>
-          <ToastMessage
-            iconName='ZD-exclamationNew'
-            subject='Screen Notification'
-            info='There is a few changes occurred in this ticket'
-            submitText='Submit'
-            cancelText='Not now'
-            isAnimate={false}
-            iconPalette='dangerPlain'
-          />
-        </div>
-        <div className={style.w410}>
-          <ToastMessage
-            iconName='ZD-exclamationNew'
-            iconPalette='dangerPlain'
-            subject='Screen Notification'
-            info='There is a few changes occurred in this ticket'
-            submitText='Submit'
-            cancelText='Not now'
-            submitType='success'
-            isAnimate={false}
-          />
-        </div>
-        <div className={style.w410}>
-          <ToastMessage
-            iconName='ZD-exclamationNew'
-            subject='Desktop 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,"
-            submitText='Submit'
-            cancelText='Not now'
-            submitType='danger'
-            isIconMid
-            iconPalette='dangerPlain'
-          />
-        </div>
-        <div className={style.w410}>
-          <ToastMessage
-            iconName='ZD-exclamationNew'
-            iconPalette='dangerPlain'
-            subject='Screen Notification'
-            info='There is a few changes occurred in this ticket'
-            submitText='Submit'
-            cancelText='Not now'
-            isMore
-            message='Do not Show this again'
-          />
-        </div>
-        <div className={style.w410}>
-          <ToastMessage
-            iconName='ZD-exclamationNew'
-            iconPalette='dangerPlain'
-            subject='Screen Notification'
-            info='There is a few changes occurred in this ticket'
-            submitText='Submit'
-            cancelText='Not now'
-            submitType='success'
-            isMore
-            message='Do not Show this again'
-          />
-        </div>
-        <div className={style.w410}>
-          <ToastMessage
-            iconName='ZD-exclamationNew'
-            subject='Desktop 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,"
-            submitText='Submit'
-            cancelText='Not now'
-            submitType='danger'
-            isIconMid
-            iconPalette='dangerPlain'
-            isMore
-            messageState
-            message='Do not Show this again'
-          />
-        </div>
-        <div className={style.w410}>
-          <ToastMessage
-            iconName='ZD-exclamationNew'
-            iconPalette='primaryPlain'
-            subject='Mobile 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"
-            submitText='Submit'
-            cancelText='Not now'
-          />
-        </div>
-        <div className={style.w410}>
-          <ToastMessage
-            iconName='ZD-exclamationNew'
-            iconPalette='dangerPlain'
-            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'
-          />
-        </div>
-        <div className={style.w410}>
-          <ToastMessage
-            iconName='ZD-exclamationNew'
-            iconPalette='primaryPlain'
-            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,"
-            submitText='Submit'
-          />
-        </div>
-        <div className={style.w410}>
-          <ToastMessage
-            iconName='ZD-exclamationNew'
-            iconPalette='dangerPlain'
-            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,"
-            submitText='Close'
-            submitType='danger'
-          />
-        </div>
-      </div>
-    );
-  }
-}
-if (__DOCS__) {
-  ToastMessage__primary.docs = {
-    componentGroup: 'Atom',
-    description: ' '
-  };
-}

package/src/ToastMessage/docs/ToastMessage__secondary.docs.js

@@ -1,40 +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__secondary extends Component {
-  render() {
-    return (
-      <div className={style.m50}>
-        <div className={style.w410}>
-          <ToastMessage
-            type='secondary'
-            subject='Screen Notification'
-            info='There is a few changes occurred in this ticket'
-            submitText='View changes'
-            needClose
-            iconSize='35'
-            iconName='ZD-update'
-          />
-        </div>
-
-        <div className={style.w410}>
-          <ToastMessage
-            type='secondary'
-            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='40'
-          />
-        </div>
-      </div>
-    );
-  }
-}
-if (__DOCS__) {
-  ToastMessage__secondary.docs = {
-    componentGroup: 'Atom',
-    description: ' '
-  };
-}

package/src/ToastMessage/docs/ToastMessage__success.docs.js

@@ -1,68 +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__success extends Component {
-  render() {
-    return (
-      <div className={style.m50}>
-        <div className={style.w410}>
-          <ToastMessage
-            type='success'
-            subject='Screen Notification'
-            info='There is a few changes occurred in this ticket'
-            submitText='details'
-            iconSize='12'
-            iconName='ZD-ticknew'
-            iconPalette='successFill'
-          />
-        </div>
-
-        <div className={style.w410}>
-          <ToastMessage
-            type='success'
-            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='16'
-            iconPalette='dangerFill'
-          />
-        </div>
-
-        <div className={style.w410}>
-          <ToastMessage
-            type='success'
-            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,"
-            submitText='details'
-            cancelText='Not now'
-            iconSize='12'
-            iconPalette='successFill'
-          />
-        </div>
-
-        <div className={style.w410}>
-          <ToastMessage
-            type='success'
-            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,"
-            submitText='details'
-            cancelText='Not now'
-            iconSize='12'
-            iconPalette='successFill'
-            submitType='danger'
-          />
-        </div>
-      </div>
-    );
-  }
-}
-if (__DOCS__) {
-  ToastMessage__success.docs = {
-    componentGroup: 'Atom',
-    description: ' '
-  };
-}

package/src/actions/index.js

@@ -1,22 +0,0 @@
-export const popNotificationAction = (() => {
-  let ob = { resolve: () => {}, reject: () => {} };
-  function showNotification(data) {
-    return dispatch => {
-      dispatch(showPopNotification(data));
-      return new Promise((res, rej) => {
-        ob.resolve = notifiId => {
-          dispatch(hidePopNotification(notifiId));
-          res();
-        };
-        ob.reject = notifiId => {
-          dispatch(hidePopNotification(notifiId));
-          rej();
-        };
-      });
-    };
-  }
-  return {
-    ob,
-    showNotification
-  };
-})();

package/src/alert/AlertHeader/AlertHeader.js

@@ -1,115 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import Title from '../../lookup/header/Title/Title';
-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';
-
-export default class AlertHeader extends Component {
-  render() {
-    let {
-      title,
-      palette,
-      needIcon,
-      iconType,
-      onClose,
-      iconName,
-      iconSize,
-      closeTitle,
-      children,
-      breakChildren,
-      dataId
-    } = this.props;
-    let iconObj = {
-      delete: 'ZD-socialDelete',
-      alert: 'ZD-exclamationThincircle',
-      remoteAssist: 'ZD-taskDemo',
-      splitTicket: 'ZD-splitNew',
-      update: 'ZD-update',
-      addEndUser: 'ZD-newuser'
-    };
-    return (
-      <Container
-        align='vertical'
-        alignBox='row'
-        className={`${style.container} ${style[palette]}`}
-        isCover={false}
-        wrap='wrap'
-      >
-        {needIcon ? (
-          <div className={style.iconContainer}>
-            <Icon
-              size={iconSize}
-              name={iconObj[iconType] ? iconObj[iconType] : iconName}
-              iconClass={`${style.iconStyle} ${
-                iconObj[iconType] ? style[`icon_${iconType}`] : ''
-              } ${style[`text_${palette}`]}`}
-            />
-          </div>
-        ) : null}
-        <Box flexible>
-          <Container
-            alignBox='row'
-            align='center'
-            wrap={breakChildren ? 'wrap' : null}
-          >
-            <Box className={style.title} shrink>
-              <Title text={title} palette={palette} />
-            </Box>
-            {children ? (
-              <Box adjust flexible>
-                {children}
-              </Box>
-            ) : null}
-          </Container>
-        </Box>
-        {onClose ? (
-          <Box>
-            <Close
-              onClose={onClose}
-              title={closeTitle}
-              dataId={`${dataId}_close`}
-            />
-          </Box>
-        ) : null}
-      </Container>
-    );
-  }
-}
-
-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,
-  iconName: PropTypes.string,
-  iconSize: PropTypes.sting,
-  closeTitle: PropTypes.string,
-  children: PropTypes.node,
-  breakChildren: PropTypes.bool,
-  dataId: PropTypes.string
-};
-
-AlertHeader.defaultProps = {
-  palette: 'danger',
-  needIcon: true,
-  iconType: 'alert',
-  breakChildren: false,
-  dataId: 'alertHeader'
-};
-
-if (__DOCS__) {
-  AlertHeader.docs = {
-    componentGroup: 'AlertHeader',
-    folderName: 'Alert'
-  };
-}

package/src/alert/AlertHeader/AlertHeader.module.css

@@ -1,62 +0,0 @@
-.container {
-  min-height: var(--zd_size54);
-  position: relative;
-  padding: var(--zd_size12) var(--zd_size45) var(--zd_size12) var(--zd_size26);
-}
-
-.extraSmall {
-  padding: var(--zd_size12) var(--zd_size45) var(--zd_size12) var(--zd_size16);
-}
-
-.iconContainer {
-  margin: 0 var(--zd_size10) 0 0;
-}
-
-.title {
-  margin: 0 var(--zd_size5) 0 0;
-  font-size: 0;
-}
-
-.iconStyle {
-  display: block;
-}
-
-/* Palette */
-.default {
-  background-color: var(--zd_bg_smoke45);
-}
-
-.primary {
-  background-color: #edfbfe;
-}
-
-.danger {
-  background-color: var(--zd_bg_danger5);
-}
-
-/* icon size */
-.icon_delete,
-.icon_alert,
-.icon_remoteAssist {
-  font-size: var(--zd_size20);
-}
-
-.icon_splitTicket {
-  font-size: var(--zd_size16);
-  font-weight: bold;
-}
-
-.icon_update {
-  font-size: var(--zd_size16);
-}
-
-.text_danger {
-  color: var(--zd_text_danger);
-}
-.text_primary {
-  color: var(--zd_text_primary19);
-}
-
-.text_default {
-  color: var(--dot_text_black);
-}

package/src/alert/AlertHeader/docs/AlertHeader__default.docs.js

@@ -1,72 +0,0 @@
-import React, { Component } from 'react';
-import AlertHeader from '../AlertHeader';
-
-export default class AlertHeader__default extends Component {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    return (
-      <React.Fragment>
-        <AlertHeader
-          title='Delete'
-          palette='danger'
-          iconType='alert'
-          onClose={() => {
-            console.log('On Lookup Close');
-          }}
-          closeTitle='Close Lookup'
-        />
-        <AlertHeader
-          title='Delete'
-          palette='primary'
-          iconType='delete'
-          onClose={() => {
-            console.log('On Lookup Close');
-          }}
-        />
-        <AlertHeader
-          title='Delete'
-          palette='default'
-          iconType='remoteAssist'
-          onClose={() => {
-            console.log('On Lookup Close');
-          }}
-        />
-        <AlertHeader
-          title='Delete'
-          palette='danger'
-          iconType='splitTicket'
-          onClose={() => {
-            console.log('On Lookup Close');
-          }}
-        />
-        <AlertHeader
-          title='Delete'
-          palette='primary'
-          iconType='update'
-          onClose={() => {
-            console.log('On Lookup Close');
-          }}
-        />
-        <AlertHeader
-          title='Delete'
-          onClose={() => {
-            console.log('On Lookup Close');
-          }}
-          palette='default'
-          iconType='addEndUser'
-        >
-          [SecondaryName]
-        </AlertHeader>
-      </React.Fragment>
-    );
-  }
-}
-if (__DOCS__) {
-  AlertHeader__default.docs = {
-    componentGroup: 'AlertHeader',
-    folderName: 'Alert'
-  };
-}

package/src/alert/AlertLookup/AlertLookup.js

@@ -1,174 +0,0 @@
-/**** 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';
-
-export default class AlertLookup extends Component {
-  constructor(props) {
-    super(props);
-    this.documentKeydownHandler = this.documentKeydownHandler.bind(this);
-    this.getButtonRef = this.getButtonRef.bind(this);
-  }
-
-  componentDidUpdate(prevProps) {
-    let { isActive } = this.props;
-    if (prevProps.isActive !== isActive) {
-      isActive
-        ? document.addEventListener('keydown', this.documentKeydownHandler)
-        : document.removeEventListener('keydown', this.documentKeydownHandler);
-    }
-  }
-
-  documentKeydownHandler(e = {}) {
-    let { onSubmitClick, onCancelClick, isActive } = this.props;
-    if (e.keyCode === 27 && isActive) {
-      onCancelClick && onCancelClick(e);
-    } else if (e.keyCode === 13 && isActive) {
-      onSubmitClick && onSubmitClick(e);
-    }
-  }
-
-  getButtonRef(el) {
-    this.okButton = el;
-    let { isDefaultFocus } = this.props;
-    if (isDefaultFocus) {
-      el && el.focus();
-    }
-  }
-
-  render() {
-    let {
-      isActive,
-      palette,
-      size,
-      type,
-      title,
-      message,
-      confirmationMessage,
-      submitText,
-      cancelText,
-      onSubmitClick,
-      onCancelClick,
-      children,
-      forwardRef,
-      onClose,
-      headerChildren,
-      wrapHeader,
-      sectionClassName,
-      dataId
-    } = this.props;
-
-    return (
-      <Lookup
-        isActive={isActive}
-        size={size}
-        dataId={dataId}
-        forwardRef={forwardRef}
-      >
-        <AlertHeader
-          title={title}
-          palette={palette}
-          iconType={type}
-          needIcon={Boolean(type)}
-          onClose={onClose}
-          breakChildren={wrapHeader}
-        >
-          {headerChildren ? headerChildren() : null}
-        </AlertHeader>
-        <Section alignBox='row' className={style.section}>
-          <div className={`${style.innerSection} ${sectionClassName}`}>
-            {children ? (
-              children
-            ) : (
-              <React.Fragment>
-                <div>{message}</div>
-                {confirmationMessage && (
-                  <div className={style.text}>{confirmationMessage}</div>
-                )}
-              </React.Fragment>
-            )}
-          </div>
-          <FormAction size='small' paddingLeftSize='xsmall'>
-            <Button
-              text={submitText}
-              dataId={
-                dataId === 'alertPopup'
-                  ? 'alertConfirmButton'
-                  : `${dataId}_confirmButton}`
-              }
-              onClick={onSubmitClick}
-              palette={palette === 'primary' ? 'primaryFilled' : 'dangerFilled'}
-              getRef={this.getButtonRef}
-            />
-            {cancelText && (
-              <Button
-                dataId={
-                  dataId === 'alertPopup'
-                    ? 'alertCancelButton'
-                    : `${dataId}_cancelButton}`
-                }
-                text={cancelText}
-                onClick={onCancelClick}
-                palette='secondary'
-              />
-            )}
-          </FormAction>
-        </Section>
-      </Lookup>
-    );
-  }
-}
-
-AlertLookup.propTypes = {
-  cancelText: PropTypes.string,
-  children: PropTypes.node,
-  headerChildren: PropTypes.func,
-  confirmationMessage: PropTypes.string,
-  forwardRef: PropTypes.object,
-  isActive: PropTypes.bool,
-  isDefaultFocus: PropTypes.bool,
-  message: PropTypes.node,
-  onCancelClick: PropTypes.func,
-  onSubmitClick: PropTypes.func,
-  palette: PropTypes.oneOf(['default', 'primary', 'danger']),
-  size: PropTypes.oneOf(['small', 'medium']),
-  submitText: PropTypes.string,
-  title: PropTypes.string,
-  type: PropTypes.oneOf([
-    'delete',
-    'alert',
-    'remoteAssist',
-    'splitTicket',
-    'addEndUser'
-  ]),
-  onClose: PropTypes.func,
-  wrapHeader: PropTypes.bool,
-  sectionClassName: PropTypes.string,
-  dataId: PropTypes.string
-};
-
-AlertLookup.defaultProps = {
-  isActive: false,
-  palette: 'danger',
-  size: 'small',
-  type: 'alert',
-  wrapHeader: false,
-  sectionClassName: '',
-  dataId: 'alertPopup'
-};
-
-if (__DOCS__) {
-  AlertLookup.docs = {
-    componentGroup: 'AlertLookup',
-    folderName: 'Alert'
-  };
-}