@zohodesk/dot 1.0.0-temp-60 → 1.0.0-temp-61

package/src/version2/notification/DesktopNotification/DesktopNotification.js

@@ -1,258 +0,0 @@
-import React, { useState } from 'react';
-import PropTypes from 'prop-types';
-import { Container, Box } from '@zohodesk/components/lib/Layout';
-import { useZIndex } from '@zohodesk/components/lib/Provider/ZindexProvider';
-import AutoClose from '../../../actions/AutoClose';
-import Button from '@zohodesk/components/lib/Button/Button';
-import FormAction from '../../../FormAction/FormAction';
-import DesktopNotificationHeader from '../DesktopNotificationHeader/DesktopNotificationHeader';
-
-import style from './DesktopNotification.module.css';
-
-let buttonPaletteObject = {
-  success: {
-    buttonPalette: 'successFilled'
-  },
-  error: {
-    buttonPalette: 'dangerFilled'
-  },
-  danger: {
-    buttonPalette: 'dangerFilled'
-  },
-  warning: {
-    buttonPalette: 'dangerFilled'
-  },
-  info: {
-    buttonPalette: 'primaryFilled'
-  },
-  notification: {
-    buttonPalette: 'primaryFilled'
-  }
-};
-
-export function DesktopNotificationUI(props) {
-  let {
-    type = '',
-    submitText,
-    cancelText,
-    submitType,
-    isMore,
-    message,
-    isAnimate,
-    getBottomContainer,
-    getSubmitContainer,
-    onSubmit,
-    onCancel,
-    dataId,
-    isClose,
-    needAutoZindex,
-    title,
-    subTitle,
-    needIcon,
-    info,
-    secondaryInfo,
-    titleVariant,
-    getSectionContainer,
-    isShrinkView,
-    size,
-    onClose,
-    needClose,
-    customClass = {},
-    i18nKeys = {},
-    customProps
-  } = props;
-  let { closeTitle = 'Close' } = i18nKeys;
-  let { containerClass } = customClass;
-  let { buttonPalette = 'dangerFilled' } = buttonPaletteObject[type] || {};
-  let { ExtraProps={} } = customProps;
-
-  function onClickSubmit(e) {
-    onSubmit && onSubmit();
-  }
-
-  function onClickCancel(e) {
-    onCancel && onCancel();
-  }
-
-  let animateClass = isClose ? style.rightanimate : style.leftanimate;
-  let animateRemoveClass = isClose ? style.rightanimate : style.leftnoanimate;
-
-  let getNextIndex = useZIndex();
-  let Zindex = isAnimate ? getNextIndex() : null;
-
-  let uiVariantOne = title && (info || secondaryInfo);
-  let uiVariantTwo = title && !(info || secondaryInfo) && !getSectionContainer;
-  return (
-    <div
-      className={style.parentElement}
-      style={needAutoZindex && isAnimate ? { zIndex: `${Zindex}` } : {}}
-    >
-      <Container
-        className={`${style.container} ${
-          isAnimate ? animateClass : animateRemoveClass
-        } ${style[`${size}`] ? style[`${size}`] : ''} ${
-          isShrinkView ? style.globalNotify : ''
-        } ${containerClass}`}
-        isCover={false}
-        dataId={dataId}
-        isInline={uiVariantTwo}
-        {...ExtraProps}
-      >
-        <Box>
-          <DesktopNotificationHeader
-            type={type}
-            title={title}
-            variant={titleVariant}
-            needIcon={needIcon}
-            onClose={onClose}
-            closeTitle={closeTitle}
-            dataId={`${dataId}_close`}
-            needClose={needClose}
-          />
-        </Box>
-        <Box>
-          <Container alignBox='column'>
-            {uiVariantOne && (
-              <Box flexible>
-                <div className={`${style.section} ${style.infoText}`}>
-                  {subTitle && (
-                    <div
-                      className={`${style.subTitle} ${
-                        info || secondaryInfo ? style.subTitleMargin : ''
-                      }`}
-                    >
-                      {subTitle}
-                    </div>
-                  )}
-                  {info && <div>{info}</div>}
-                  {secondaryInfo && (
-                    <div className={`${info ? style.secondaryInfo : ''}`}>
-                      {secondaryInfo}
-                    </div>
-                  )}
-                </div>
-              </Box>
-            )}
-            {getSectionContainer && <Box flexible>{getSectionContainer()}</Box>}
-            {submitText || cancelText ? (
-              <Box>
-                <div className={style.footer}>
-                  {isMore ? (
-                    <div className={`${style.message}`} tagName='p'>
-                      {message}
-                    </div>
-                  ) : null}
-                  <FormAction size='small' paddingLeftSize='xmedium'>
-                    {submitText ? (
-                      <div
-                        onClick={onClickSubmit}
-                        data-id={`${dataId}_submitButton`}
-                      >
-                        <Container align='vertical' alignBox='row'>
-                          {getSubmitContainer ? (
-                            <Box flexible>{getSubmitContainer()}</Box>
-                          ) : (
-                            <Box flexible>
-                              <Button
-                                text={submitText}
-                                palette={
-                                  submitType ? submitType : buttonPalette
-                                }
-                              />
-                            </Box>
-                          )}
-                        </Container>
-                      </div>
-                    ) : null}
-                    {cancelText ? (
-                      <div>
-                        <Button
-                          text={cancelText}
-                          palette='secondary'
-                          dataId={`${dataId}_cancelButton`}
-                          onClick={onClickCancel}
-                        />
-                      </div>
-                    ) : null}
-                  </FormAction>
-                </div>
-              </Box>
-            ) : null}
-          </Container>
-        </Box>
-        {getBottomContainer ? <Box>{getBottomContainer()}</Box> : null}
-      </Container>
-    </div>
-  );
-}
-
-export default function DesktopNotification(props) {
-  return <AutoClose {...props} Element={DesktopNotificationUI} />;
-}
-
-DesktopNotification.propTypes = {
-  autoClose: PropTypes.bool,
-  cancelText: PropTypes.string,
-  customClass: PropTypes.object,
-  dataId: PropTypes.string,
-  getBottomContainer: PropTypes.func,
-  getSectionContainer: PropTypes.func,
-  getSubmitContainer: PropTypes.func,
-  hidePopNotification: PropTypes.func,
-
-  hideTime: PropTypes.string,
-  i18nKeys: PropTypes.object,
-  id: PropTypes.string,
-  info: PropTypes.string,
-  isAnimate: PropTypes.bool,
-  isClose: PropTypes.bool,
-  isMore: PropTypes.bool,
-  isShrinkView: PropTypes.bool,
-  message: PropTypes.string,
-  needAutoZindex: PropTypes.bool,
-  needClose: PropTypes.bool,
-  needIcon: PropTypes.bool,
-  onCancel: PropTypes.func,
-  onClose: PropTypes.func,
-  onSubmit: PropTypes.func,
-
-  secondaryInfo: PropTypes.string,
-  size: PropTypes.oneOf(['medium', 'large']),
-  subTitle: PropTypes.string,
-  submitText: PropTypes.string,
-  submitType: PropTypes.oneOf(['primary', 'danger', 'success']),
-  titleVariant: PropTypes.oneOf(['primary', 'secondary']),
-  type: PropTypes.oneOf([
-    'success',
-    'error',
-    'danger',
-    'warning',
-    'info',
-    'notification',
-    'alarm'
-  ]),
-  customProps:PropTypes.shape({
-    ExtraProps: PropTypes.object
-  })
-};
-DesktopNotification.defaultProps = {
-  isMore: false,
-  isAnimate: true,
-  isClose: false,
-  autoClose: false,
-  hideTime: '3000',
-  dataId: 'toastMessage',
-  needAutoZindex: true,
-  needIcon: true,
-  titleVariant: 'primary',
-  isShrinkView: false,
-  needClose: true,
-  customProps: {}
-};
-
-if (__DOCS__) {
-  DesktopNotification.docs = {
-    componentGroup: 'DesktopNotification',
-    folderName: 'Alert'
-  };
-}

package/src/version2/notification/DesktopNotification/DesktopNotification.module.css

@@ -1,90 +0,0 @@
-.parentElement {
-  margin-bottom: var(--zd_size7);
-  position: relative;
-}
-.container {
-  background-color: var(--zdt_desktopnotification_bg);
-  color: var(--zdt_desktopnotification_text);
-  transition: all var(--zd_transition4);
-  position: relative;
-  transform-origin: right center;
-  max-height: 100%;
-  box-shadow: 0 4px 20px var(--zdt_desktopnotification_box_shadow);
-  border-radius: 0 0 var(--zd_size10) var(--zd_size10);
-  pointer-events: auto;
-}
-.globalNotify {
-  max-width: var(--zd_size490);
-  min-width: var(--zd_size394);
-}
-/* Size */
-.medium {
-  width: var(--zd_size452);
-}
-.large {
-  width: var(--zd_size580);
-}
-/* Animation Style */
-.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;
-}
-/* Container Style */
-.message {
-  padding: var(--zd_size10) var(--zd_size20) var(--zd_size10) var(--zd_size76);
-  border-top: 1px solid var(--zd_smoke1);
-  cursor: pointer;
-  position: relative;
-  color: var(--zd_smoke18);
-  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);
-}
-.message:hover {
-  background: var(--zd_alabaster);
-}
-/* Section */
-.section {
-  padding: var(--zd_size15) var(--zd_size30) var(--zd_size30);
-}
-.subTitle {
-  font-size: var(--zd_font_size15);
-  line-height: 1.3;
-  font-family: var(--zd_semibold);
-  composes: ftsmooth wbreak from '~@zohodesk/components/lib/common/common.module.css';
-}
-.subTitleMargin {
-  margin-bottom: var(--zd_size17);
-}
-.infoText {
-  font-size: var(--zd_font_size14);
-  line-height: 1.28;
-  composes: wbreak from '~@zohodesk/components/lib/common/common.module.css';
-}
-.secondaryInfo {
-  margin-top: var(--zd_size20);
-}
-.footer {
-  border-radius: 0 0 var(--zd_size10) var(--zd_size10);
-  overflow: hidden;
-}

package/src/version2/notification/DesktopNotification/docs/DesktopNotification__default.docs.js

@@ -1,86 +0,0 @@
-import React, { Component } from 'react';
-import DesktopNotification from '../DesktopNotification';
-import style from '@zohodesk/components/lib/common/docStyle.module.css';
-
-export default class DesktopNotification__default extends Component {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    return (
-      <div className={style.m50}>
-        <div style={{ marginBottom: '20px' }}>
-          <DesktopNotification
-            type='success'
-            title='Updated Successfully'
-            info='The Customer Insights(3) extension has been updated successfully'
-            isAnimate={false}
-            size='medium'
-            i18nKeys={{
-              closeTitle: 'Custom Close Title'
-            }}
-          />
-        </div>
-        <div style={{ marginBottom: '20px' }}>
-          <DesktopNotification
-            type='notification'
-            title='Desktop Notification'
-            info='Zoho Desk needs your Permission to enable desktop notification.'
-            submitText='SUBMIT'
-            cancelText='NOT NOW'
-            isAnimate={false}
-            size='medium'
-          />
-        </div>
-        <div style={{ marginBottom: '20px' }}>
-          <DesktopNotification
-            type='danger'
-            title='Authorization Pending'
-            info='Authorize your account for Zoho OAuth service to acivate this extension'
-            submitText='AUTHORIZE'
-            submitType='danger'
-            isAnimate={false}
-            size='medium'
-          />
-        </div>
-        <div style={{ marginBottom: '20px' }}>
-          <DesktopNotification
-            type='info'
-            title='Scheduled Call time'
-            subTitle='You are 13 Head of the scheduled call time.'
-            info='Would you like to proceed this call now?'
-            submitText='Yes'
-            cancelText='Not Now'
-            isAnimate={false}
-            size='medium'
-          />
-        </div>
-        <div style={{ marginBottom: '20px' }}>
-          <DesktopNotification
-            type='success'
-            title='You have started following this Ticket'
-            titleVariant='secondary'
-            isAnimate={false}
-            isShrinkView
-          />
-        </div>
-        <div style={{ marginBottom: '20px' }}>
-          <DesktopNotification
-            type='danger'
-            title='You an integrate with either zoho cliq slack at a time. Please disable the integration with slack and try again.'
-            titleVariant='secondary'
-            isAnimate={false}
-            isShrinkView
-          />
-        </div>
-      </div>
-    );
-  }
-}
-if (__DOCS__) {
-  DesktopNotification__default.docs = {
-    componentGroup: 'DesktopNotification',
-    folderName: 'Alert'
-  };
-}

package/src/version2/notification/DesktopNotificationHeader/DesktopNotificationHeader.js

@@ -1,92 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { Container, Box } from '@zohodesk/components/lib/Layout';
-import AlertClose from '../../AlertClose/AlertClose';
-import AlertIcons from '../../alertIcons/AlertIcons';
-
-import style from './DesktopNotificationHeader.module.css';
-
-export default class DesktopNotificationHeader extends Component {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    let { 
-      onClose, 
-      closeTitle, 
-      dataId, 
-      variant, 
-      type = '',
-      needIcon, 
-      title,
-      needClose
-    } = this.props;
-    return (
-      <Container
-        align='vertical'
-        alignBox='row'
-        className={`${style.container} ${style[variant]} ${style[type]}`}
-        isCover={false}
-        wrap='wrap'
-      >
-        {needIcon ? (
-          <div className={style.iconContainer}>
-            <AlertIcons type={type} />
-          </div>
-        ) : null}
-        <Box flexible>
-          <Container
-            alignBox='row'
-            align='center'
-          >
-            {
-              variant === 'primary' ? (
-                <Box className={style.title} shrink>
-                  {title}
-                </Box>
-              ) : (
-                <Box className={`${style.infoText}`}>
-                  {title}
-                </Box>
-              )
-            }
-          </Container>
-        </Box>
-        {needClose ? (
-          <Box className={style.close}>
-            <AlertClose
-              onClose={onClose}
-              dataTitle={closeTitle}
-              dataId={dataId}
-              type='light'
-            />
-          </Box>
-        ) : null}
-      </Container>
-    );
-  }
-}
-
-DesktopNotificationHeader.propTypes = {
-  closeTitle: PropTypes.string,
-  dataId: PropTypes.string,
-  needClose: PropTypes.bool,
-  needIcon: PropTypes.bool,
-  onClose: PropTypes.func,
-  title: PropTypes.string,
-  type: PropTypes.oneOf(['success', 'error', 'danger', 'warning', 'info', 'notification', 'alarm']),
-  variant: PropTypes.oneOf(['primary', 'secondary']) 
-};
-DesktopNotificationHeader.defaultProps = {
-  needIcon: true,
-  variant: 'primary',
-  needClose: true
-};
-if (__DOCS__) {
-  DesktopNotificationHeader.docs = {
-    componentGroup: 'DesktopNotificationHeader',
-    folderName: 'Alert'
-  };
-}
-

package/src/version2/notification/DesktopNotificationHeader/DesktopNotificationHeader.module.css

@@ -1,100 +0,0 @@
-.varClass {
-  --commonalert_border_color: var(--zdt_commonalert_default_border);
-}
-.container {
-    composes: varClass;
-    min-height: var(--zd_size54);
-    position: relative;
-    background-color: var(--alert_lookup_bg_color);
-    border-style: solid;
-    border-color: var(--commonalert_border_color);
-    border-width: 2px 0 0 0;
-    color: var(--zdt_desktopnotification_text);
-  }
-  
-  .title {
-    margin: 0 var(--zd_size5) 0 var(--zd_size10);
-    font-size: var(--zd_font_size18);
-    line-height: 1.2;
-    font-family: var(--zd_bold);
-    composes: ftsmooth wbreak from '~@zohodesk/components/lib/common/common.module.css';
-  }
-
-  .infoText {
-    font-size: var(--zd_font_size14);
-    max-width: 100%;
-    composes: wbreak from '~@zohodesk/components/lib/common/common.module.css';
-  }
-
-  /* Palette */
-
-  .success {
-    --commonalert_border_color: var(--zdt_commonalert_success_border);
-  }
-  
-  .info,.notification,.alarm {
-    --commonalert_border_color: var(--zdt_commonalert_info_border);
-  }
-  
-  .danger {
-    --commonalert_border_color: var(--zdt_commonalert_danger_border);
-  }
-  
-  .error {
-    --commonalert_border_color: var(--zdt_commonalert_error_border);
-  }
-  
-  .warning {
-    --commonalert_border_color: var(--zdt_commonalert_warning_border);
-  }
-
-
-/* Primary Header */
-.primary {
-    padding: var(--zd_size15) var(--zd_size45) 0 var(--zd_size20);
-}
-
-.primary .iconContainer {
-  height: var(--zd_size51);
-  width: var(--zd_size51);
-}
-
-.primary .infoText {
-    line-height: 1.28;
-  }
-  
-  .primary .close {
-    position: absolute;
-    top: var(--zd_size12);
-    right: var(--zd_size12);
-  }
-
-  /* Secondary Header */
-  .secondary {
-    padding: var(--zd_size18) var(--zd_size70) var(--zd_size19) var(--zd_size75);
-    border-radius: 0 0 var(--zd_size10) var(--zd_size10);
-    composes: wbreak from '~@zohodesk/components/lib/common/common.module.css';
-  }
-
-  .secondary .infoText {
-    line-height: 1.42;
-  }
-
-  .secondary .iconContainer {
-    height: var(--zd_size44);
-    width: var(--zd_size44);
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: var(--zd_size18);
-    margin: auto 0;
-  }
-
-  .secondary .close {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    right: var(--zd_size12);
-    margin: auto 0 auto var(--zd_size25);
-    height: var(--zd_size25);
-  }

package/src/version2/notification/DesktopNotificationHeader/docs/DesktopNotificationHeader__default.docs.js

@@ -1,51 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import DesktopNotificationHeader from '../DesktopNotificationHeader';
-import style from '@zohodesk/components/lib/common/docStyle.module.css';
-
-export default class DesktopNotificationHeader__default extends Component {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    return (
-      <div className={style.m50}>
-        <div style={{ width: '452px', marginBottom: '20px' }}>
-          <DesktopNotificationHeader
-            type='success'
-            title='Updated Successfully'
-          />
-        </div>
-        <div style={{ width: '452px', marginBottom: '20px' }}>
-          <DesktopNotificationHeader
-            type='notification'
-            title='Desktop Notification'
-          />
-        </div>
-        <div style={{ width: '452px', marginBottom: '20px' }}>
-          <DesktopNotificationHeader
-            type='danger'
-            title='Authorization Pending'
-          />
-        </div>
-        <div style={{ width: '452px', marginBottom: '20px' }}>
-          <DesktopNotificationHeader
-            type='success'
-            title='You have started following this Ticket'
-            variant='secondary'
-          />
-        </div>
-      </div>
-    );
-  }
-}
-
-DesktopNotificationHeader__default.propTypes = {};
-if (__DOCS__) {
-  DesktopNotificationHeader__default.docs = {
-    componentGroup: 'DesktopNotificationHeader',
-    folderName: 'Alert'
-  };
-}
-