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

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

@@ -0,0 +1,91 @@
+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

@@ -0,0 +1,22 @@
+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

@@ -0,0 +1,25 @@
+.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

@@ -0,0 +1,21 @@
+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

@@ -0,0 +1,109 @@
+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

@@ -0,0 +1,70 @@
+.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

@@ -0,0 +1,53 @@
+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

@@ -0,0 +1,83 @@
+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

@@ -0,0 +1,38 @@
+.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

@@ -0,0 +1,87 @@
+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

@@ -0,0 +1,83 @@
+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'
+  };
+}