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

package/src/Link/docs/Link__default.docs.js

@@ -1,91 +0,0 @@
-import React, { Component } from 'react';
-import Link from '../Link';
-
-export default class Link__default extends React.Component {
-  constructor(props) {
-    super(props);
-    this.onCallBack = this.onCallBack.bind(this);
-    this.onConcertURL = this.onConcertURL.bind(this);
-  }
-
-  onCallBack(value) {
-    console.log(value);
-  }
-
-  onConcertURL(name, obj) {
-    console.log(name, obj, 'onConcertURL');
-  }
-
-  render() {
-    let style = { width: '200px', marginBottom: '20px', display: 'block' };
-    return (
-      <div>
-        <span style={style}>
-          <Link
-            href={null}
-            onClick={this.onConcertURL}
-            rel='noopener noreferrer'
-          >
-            Activities
-          </Link>
-        </span>
-        {/*<span style={style}>
-            <Link
-              type='subscribe'
-              align='center'
-              url='https://payments.zoho.com/html/store/index.html#subscription?serviceId=4501&customId=663fdca528bdf9365ce2f40f33c92dfdf35b4163fc71296705f3c7989596ba8f'
-            >
-              submit
-            </Link>
-          </span>
-          <span style={style}>
-            <Link
-              type='subscribe'
-              align='left'
-              url='https://payments.zoho.com/html/store/index.html#subscription?serviceId=4501&customId=663fdca528bdf9365ce2f40f33c92dfdf35b4163fc71296705f3c7989596ba8f'
-            >
-              submit
-            </Link>
-          </span>
-          <span style={style}>
-            <Link
-              type='subscribe'
-              align='right'
-              url='https://payments.zoho.com/html/store/index.html#subscription?serviceId=4501&customId=663fdca528bdf9365ce2f40f33c92dfdf35b4163fc71296705f3c7989596ba8f'
-            >
-              submit
-            </Link>
-          </span>
-          <span style={style}>
-            <Link
-              type='default'
-              align='center'
-              url='https://payments.zoho.com/html/store/index.html#subscription?serviceId=4501&customId=663fdca528bdf9365ce2f40f33c92dfdf35b4163fc71296705f3c7989596ba8f'
-            />
-          </span>
-          <span style={style}>
-            <Link
-              type='default'
-              align='right'
-              url='https://payments.zoho.com/html/store/index.html#subscription?serviceId=4501&customId=663fdca528bdf9365ce2f40f33c92dfdf35b4163fc71296705f3c7989596ba8f'
-            >
-              submit
-            </Link>
-          </span>
-          <span style={style}>
-            <Link
-              linkType='blank'
-              type='default'
-              url='https://payments.zoho.com/html/store/index.html#subscription?serviceId=4501&customId=663fdca528bdf9365ce2f40f33c92dfdf35b4163fc71296705f3c7989596ba8f'
-            >
-              submit
-            </Link>
-          </span>*/}
-      </div>
-    );
-  }
-}
-
-Link__default.docs = {
-  componentGroup: 'Atom'
-};

package/src/Loader/Loader.js

@@ -1,22 +0,0 @@
-import React from 'react';
-import { getZIndex } from '@zohodesk/components/lib/Provider/ZindexProvider';
-import style from './Loader.module.css';
-export default class Loader extends React.Component {
-  constructor(props) {
-    super(props);
-    this.getNextIndex = getZIndex(this);
-  }
-  render() {
-    return (
-      <div className={style.ajaxLoader} style={{ zIndex: `${this.getNextIndex()}` }}>
-        <div className={style.loader} />
-      </div>
-    );
-  }
-}
-
-if (__DOCS__) {
-  Loader.docs = {
-    componentGroup: 'Atom'
-  };
-}

package/src/Loader/Loader.module.css

@@ -1,25 +0,0 @@
-.ajaxLoader {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-}
-.loader {
-  background-image: var(--zdt_loader_gradient_bg);
-  width: 100%;
-  background-size: 200% auto;
-  background-position: 0 100%;
-  animation: loading 3s infinite;
-  animation-fill-mode: forwards;
-  animation-timing-function: linear;
-  height: 3px;
-}
-
-@keyframes loading {
-  0% {
-    background-position: 0 0;
-  }
-  100% {
-    background-position: -200% 0;
-  }
-}

package/src/Loader/docs/Loader__default.docs.js

@@ -1,21 +0,0 @@
-import React from 'react';
-import Loader from '../Loader';
-export default class Loader__default extends React.Component {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    return (
-      <div style={{ background: 'var(--dot_bg_black)', height: '40px' }}>
-        <Loader />
-      </div>
-    );
-  }
-}
-
-if (__DOCS__) {
-  Loader__default.docs = {
-    componentGroup: 'Atom'
-  };
-}

package/src/Message/Message.js

@@ -1,109 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Icon from '@zohodesk/icons/lib/Icon';
-import AutoClose from '../actions/AutoClose';
-import style from './Message.module.css';
-
-
-export default class Message extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = { hideMessage: false };
-  }
-
-  componentWillReceiveProps(nextProps) {
-    let { showMessage, hideMessage } = this.props;
-    if (showMessage !== nextProps.showMessage) {
-      if (nextProps.type != 'alert') {
-        setTimeout(() => {
-          hideMessage();
-        }, 3000);
-      }
-    }
-  }
-
-  componentDidMount() {
-    let { type, hideMessage } = this.props;
-    if (type != 'alert') {
-      setTimeout(() => {
-        hideMessage();
-      }, 3000);
-    }
-  }
-
-  render() {
-    return <MessageUI {...this.props} />;
-  }
-}
-Message.propTypes = {
-  dataId: PropTypes.string,
-  hideMessage: PropTypes.func,
-  message: PropTypes.string,
-  onClick: PropTypes.func,
-  showMessage: PropTypes.bool,
-  type: PropTypes.oneOf(['success', 'alert', 'info']),
-  i18nKeys: PropTypes.shape({
-    closeTitle: PropTypes.string
-  })
-};
-Message.defaultProps = {
-  i18nKeys: {}
-};
-if (__DOCS__) {
-  Message.docs = {
-    componentGroup: 'Atom'
-  };
-}
-
-export function MessageUI(props) {
-  function onClose(e) {
-    let { hideMessage, onClose } = props;
-    hideMessage && hideMessage(e);
-    onClose && onClose(e);
-  }
-  let { type, message, onClick, i18nKeys } = props;
-  let { closeTitle = 'Close' } = i18nKeys;
-  return (
-    <div className={style.message} data-id={`show_${type}_message`}>
-      <div className={style.container}>
-        <div className={style[type]}>
-          <span className={style.tickIcn}>
-            <Icon
-              name={
-                type == 'alert'
-                  ? 'ZD-notifiExclamation'
-                  : type == 'info'
-                  ? 'ZD-info31'
-                  : 'ZD-check'
-              }
-              isBold
-              size='10'
-            />
-          </span>
-        </div>
-
-        <span
-          className={style.text}
-          onClick={onClick}
-          data-id='infoMessage'
-          dangerouslySetInnerHTML={{
-            __html: message
-          }}
-        />
-
-        <span
-          className={style.close}
-          data-title={closeTitle}
-          onClick={onClose}
-          data-id={`close_${type}_message`}
-        >
-          <Icon name='ZD-closee' isBold size='10' />
-        </span>
-      </div>
-    </div>
-  );
-}
-
-export function MessageNew(props) {
-  return <AutoClose {...props} Element={MessageUI} />;
-}

package/src/Message/Message.module.css

@@ -1,70 +0,0 @@
-.message {
-  position: absolute;
-  top: 0;
-  z-index: 1000;
-  /*Hook for editor alert*/
-  right: 0;
-  text-align: center;
-  left: 0;
-  pointer-events: none;
-}
-
-.container {
-  padding: var(--zd_size13) var(--zd_size10) var(--zd_size13) var(--zd_size50);
-  box-shadow: 0 0 19px 1px var(--zdt_message_default_box_shadow);
-  border-radius: 0 0 5px 5px;
-  position: relative;
-  background: var(--zdt_message_default_bg);
-  display: inline-block;
-  pointer-events: initial;
-}
-
-.text {
-  max-width: var(--zd_size480);
-  display: inline-block;
-  word-break: break-word;
-  font-size: var(--zd_font_size14);
-  vertical-align: middle;
-  text-align: left;
-}
-
-.icon {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: var(--zd_size40);
-  display: inline-block;
-  border-bottom-left-radius: 5px;
-  height: 100%;
-}
-
-.success {
-  composes: icon;
-  background: var(--zdt_message_success_bg);
-}
-
-.alert {
-  composes: icon;
-  background: var(--zdt_message_alert_bg);
-}
-
-.info {
-  composes: icon;
-  background: var(--zdt_message_info_bg);
-}
-
-.tickIcn {
-  color: var(--zdt_message_tickicon);
-  font-size: var(--zd_font_size16);
-  position: absolute;
-  composes: middleBoth from '~@zohodesk/components/lib/common/common.module.css';
-}
-
-.close {
-  color: var(--zdt_message_close_text);
-  font-size: var(--zd_font_size16);
-  cursor: pointer;
-  display: inline-block;
-  vertical-align: middle;
-  margin-left: var(--zd_size10);
-}

package/src/Message/docs/Message__default.docs.js

@@ -1,53 +0,0 @@
-import React from 'react';
-import Message from '../Message';
-export default class Message__default extends React.Component {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    let style = { position: 'relative', height: '100px', overflow: 'hidden' };
-    return (
-      <div>
-        <div className={style.m20} style={style}>
-          <Message
-            type='success'
-            message='The status has been successfully updated'
-            showMessage
-            hideMessage={() => { }}
-          />
-        </div>
-        <div className={style.m20} style={style}>
-          <Message
-            type='alert'
-            message='The status has been successfully updated'
-            showMessage
-            hideMessage={() => { }}
-          />
-        </div>
-        <div className={style.m20} style={style}>
-          <Message
-            type='info'
-            message='The status has been successfully updated'
-            showMessage
-            hideMessage={() => { }}
-          />
-        </div>
-        <div className={style.m20} style={style}>
-          <Message
-            type='info'
-            message='The status has been successfully updated <h1>asdf</h1>'
-            showMessage
-            hideMessage={() => { }}
-          />
-        </div>
-      </div>
-    );
-  }
-}
-
-if (__DOCS__) {
-  Message__default.docs = {
-    componentGroup: 'Atom'
-  };
-}

package/src/MessageBanner/MessageBanner.js

@@ -1,83 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Link from '../Link/Link';
-import Icon from '@zohodesk/icons/lib/Icon';
-import { Container, Box } from '@zohodesk/components/lib/Layout';
-import style from './MessageBanner.module.css';
-
-export default class MessageBanner extends React.Component {
-  render() {
-    let {
-      type,
-      message,
-      onClose,
-      href,
-      onClick,
-      urlText,
-      palette,
-      customClass,
-      dataId
-    } = this.props;
-
-    return (
-      <Container
-        className={`${style[`type_${type}`]} ${
-          style[`palette_${palette}`]
-        } ${customClass}`}
-        alignBox='row'
-        isCover={false}
-        dataId={dataId}
-      >
-        <Box className={style.content} flexible>
-          <Container alignBox='row' align='both'>
-            <Box className={style.message} adjust shrink data-title={message}>
-              {message}
-            </Box>
-            {href && (
-              <Box>
-                <Link
-                  href={href}
-                  onClick={onClick}
-                  className={style.link}
-                  target='_blank'
-                >
-                  {urlText}
-                </Link>
-              </Box>
-            )}
-          </Container>
-        </Box>
-        {onClose ? (
-          <Box className={style.close} onClick={onClose}>
-            <Container align='both'>
-              <Icon name='ZD-closee' size='35' />
-            </Container>
-          </Box>
-        ) : null}
-      </Container>
-    );
-  }
-}
-MessageBanner.defaultProps = {
-  type: 'primary',
-  palette: 'default',
-  customClass: '',
-  dataId:'MessageBanner'
-};
-MessageBanner.propTypes = {
-  customClass: PropTypes.string,
-  href: PropTypes.string,
-  message: PropTypes.string,
-  onClick: PropTypes.func,
-  onClose: PropTypes.func,
-  palette: PropTypes.oneOf(['default', 'blue', 'white']),
-  type: PropTypes.oneOf(['primary', 'secondary']),
-  urlText: PropTypes.string,
-  dataId:PropTypes.string
-};
-
-if (__DOCS__) {
-  MessageBanner.docs = {
-    componentGroup: 'Atom'
-  };
-}

package/src/MessageBanner/MessageBanner.module.css

@@ -1,38 +0,0 @@
-.type_primary {
-}
-.type_secondary {
-  max-width: var(--zd_size468);
-  border-radius: 3px;
-  margin: 0 auto;
-}
-.message {
-  padding: var(--zd_size10) 0;
-  color: var(--zdt_messagebanner_text);
-  margin-left: var(--zd_size10);
-  composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
-}
-.link {
-  color: var(--zdt_messagebanner_link_text);
-  margin-left: var(--zd_size5);
-}
-.message,.link{font-size:  var(--zd_font_size14);}
-.close {
-  color: var(--zdt_messagebanner_close_text);
-  cursor: pointer;
-}
-.type_primary .close:hover {
-  background: var(--zdt_messagebanner_close_hover_bg);
-}
-.close:hover {
-  color: var(--zdt_messagebanner_close_hover_text);
-}
-
-.palette_default {
-  background: var(--zdt_messagebanner_default_bg);
-}
-.palette_blue {
-  background: var(--zdt_messagebanner_blue_bg);
-}
-.palette_white {
-  background: var(--zdt_messagebanner_white_text);
-}

package/src/MessageBanner/docs/MessageBanner__default.docs.js

@@ -1,87 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import MessageBanner from '../MessageBanner';
-
-export default class MessageBanner__default extends React.Component {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    let { message } = this.props;
-    return (
-      <div>
-        <div>
-          <p>Type</p>
-          <br />
-          <div style={{ background: '#ddd', padding: 'var(--zd_size16)' }}>
-            <MessageBanner
-              message={'Type: Primary'}
-              type='primary'
-              urlText='refresh'
-              href={'#'}
-              onClick={() => {
-                console.log('clicked');
-              }}
-            />
-          </div>
-          <div style={{ background: '#ddd', padding: 'var(--zd_size16)' }}>
-            <MessageBanner
-              message={'Type: Secondary'}
-              type='secondary'
-              urlText='refresh'
-              href={'#'}
-              onClick={() => {
-                console.log('clicked');
-              }}
-            />
-          </div>
-          <div>
-            <p>Palette</p>
-            <br />
-            <div style={{ background: '#ddd', padding: 'var(--zd_size16)' }}>
-              <MessageBanner
-                message={'Palette: default'}
-                type='primary'
-                urlText='refresh'
-                href={'#'}
-                onClick={() => {
-                  console.log('clicked');
-                }}
-                palette='default'
-              />
-            </div>
-            <div style={{ background: '#ddd', padding: 'var(--zd_size16)' }}>
-              <MessageBanner
-                message={'Palette: blue'}
-                urlText='refresh'
-                href={'#'}
-                onClick={() => {
-                  console.log('clicked');
-                }}
-                palette='blue'
-              />
-            </div>
-            <div style={{ background: '#ddd', padding: 'var(--zd_size16)' }}>
-              <MessageBanner
-                message={'Palette: white'}
-                urlText='refresh'
-                href={'#'}
-                onClick={() => {
-                  console.log('clicked');
-                }}
-                palette='white'
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    );
-  }
-}
-
-if (__DOCS__) {
-  MessageBanner__default.docs = {
-    componentGroup: 'Atom'
-  };
-}

package/src/NewStar/NewStar.js

@@ -1,83 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Icon from '@zohodesk/icons/lib/Icon';
-import { Container } from '@zohodesk/components/lib/Layout';
-import style from './NewStar.module.css';
-export default class NewStar extends React.Component {
-  render() {
-    let { palette, customClass, position } = this.props;
-
-    let alignPosition = {
-      topRight: {
-        className: style.topRight,
-        align: 'right',
-        alignBox: 'row',
-        reverse: 'wrap'
-      },
-      topLeft: {
-        className: style.topLeft,
-        align: 'left',
-        alignBox: 'row',
-        reverse: 'wrap'
-      },
-      bottomLeft: {
-        className: style.bottomLeft,
-        align: 'left',
-        alignBox: 'column-reverse',
-        reverse: 'wrap'
-      },
-      bottomRight: {
-        className: style.bottomRight,
-        align: 'right',
-        alignBox: 'column',
-        reverse: 'wrap-reverse'
-      }
-    };
-
-    return (
-      <Container
-        alignBox={alignPosition[position].alignBox}
-        isCover={false}
-        className={`${style.star} ${alignPosition[position].className} ${customClass}`}
-        wrap={alignPosition[position].reverse}
-        align={alignPosition[position].align}
-      >
-        <Icon
-          name='ZD-snippetStar'
-          iconClass={`${style[palette]} ${style.starOne}`}
-          size='10'
-        />
-        <Icon
-          name='ZD-snippetStar'
-          iconClass={`${style[palette]} ${style.starTwo}`}
-          size='10'
-        />
-        <Icon
-          name='ZD-snippetStar'
-          iconClass={`${style[palette]} ${style.starThree}`}
-          size='10'
-        />
-      </Container>
-    );
-  }
-}
-NewStar.propTypes = {
-  customClass: PropTypes.string,
-  palette: PropTypes.oneOf(['green', 'blue', 'yellow']),
-  position: PropTypes.oneOf([
-    'topRight',
-    'topLeft',
-    'bottomRight',
-    'bottomLeft'
-  ])
-};
-NewStar.defaultProps = {
-  customClass: '',
-  position: 'topRight'
-};
-
-if (__DOCS__) {
-  NewStar.docs = {
-    componentGroup: 'Atom'
-  };
-}