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

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

package/src/NewStar/NewStar.module.css

@@ -0,0 +1,73 @@
+.star {
+  position: absolute;
+
+  height: var(--zd_size20);
+  width: var(--zd_size21);
+}
+.topLeft {
+  transform: translate(-45%, -45%);
+  left: 0;
+  top: 0;
+}
+.topRight {
+  transform: translate(45%, -45%);
+  right: 0;
+  top: 0;
+}
+.bottomLeft {
+  transform: translate(-45%, 45%);
+  left: 0;
+  bottom: 0;
+}
+.bottomRight {
+  transform: translate(45%, 45%);
+  right: 0;
+  bottom: 0;
+}
+.stars {
+  animation: twinkle var(--zd_transition4) infinite, star-scale var(--zd_transition10) infinite;
+}
+.green::before {
+  color: var(--zdt_newstar_green_text);
+}
+.yellow::before {
+  color: var(--zdt_newstar_yellow_text);
+}
+.blue::before {
+  color: var(--zdt_newstar_blue_text);
+}
+.starOne {
+  composes: stars;
+}
+.starTwo {
+  composes: stars;
+  animation-delay: 0.5s;
+}
+.starThree {
+  composes: stars;
+  animation-delay: 1s;
+}
+
+@keyframes twinkle {
+  0% {
+    opacity: 0.5;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0.6;
+  }
+}
+
+@keyframes star-scale {
+  0% {
+    transform: perspective(1px) scale(0.7);
+  }
+  50% {
+    transform: perspective(1px) scale(1, 1);
+  }
+  100% {
+    transform: perspective(1px) scale(0.7);
+  }
+}

package/src/NewStar/docs/NewStar__default.docs.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import NewStar from '../NewStar';
+export default class NewStar__default extends React.Component {
+  render() {
+    let style = {
+      width: '50px',
+      height: '50px',
+      margin: '30px',
+      position: 'relative'
+    };
+    return (
+      <div>
+        <div style={style}>
+          <NewStar palette='green' position='topLeft' />
+          <NewStar palette='green' position='topRight' />
+          <NewStar palette='green' position='bottomLeft' />
+          <NewStar palette='green' position='bottomRight' />
+        </div>
+        <div style={style}>
+          <NewStar palette='blue' position='topLeft' />
+          <NewStar palette='blue' position='topRight' />
+          <NewStar palette='blue' position='bottomLeft' />
+          <NewStar palette='blue' position='bottomRight' />
+        </div>
+        <div style={style}>
+          <NewStar palette='yellow' position='topLeft' />
+          <NewStar palette='yellow' position='topRight' />
+          <NewStar palette='yellow' position='bottomLeft' />
+          <NewStar palette='yellow' position='bottomRight' />
+        </div>
+      </div>
+    );
+  }
+}
+if (__DOCS__) {
+  NewStar__default.docs = {
+    componentGroup: 'Atom'
+  };
+}

package/src/PlusIcon/PlusIcon.js

@@ -0,0 +1,64 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import style from './PlusIcon.module.css';
+import AvatarIcon from '../avatar/AvatarIcon/AvatarIcon';
+
+export default class PlusIcon extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    let {
+      dataId,
+      iconName,
+      iconClass,
+      iconSize,
+      size,
+      onClick,
+      title,
+      customClass
+    } = this.props;
+    return (
+      <span
+        className={style.container}
+        onClick={onClick}
+        data-id={dataId}
+        data-title={title}
+      >
+        <AvatarIcon
+          name={iconName}
+          iconClass={`${iconClass} ${style.icon}`}
+          iconSize={iconSize}
+          size={size}
+          className={`${customClass} ${style.plusIcon}`}
+        />
+      </span>
+    );
+  }
+}
+PlusIcon.defaultProps = {
+  size: 'xmedium',
+  iconName: 'ZD-plus',
+  iconSize: '16',
+  dataId: 'addreqNowbutton',
+  iconClass: '',
+  customClass: ''
+};
+PlusIcon.propTypes = {
+  dataId: PropTypes.string,
+  iconClass: PropTypes.string,
+  iconName: PropTypes.string,
+  iconSize: PropTypes.string,
+  onClick: PropTypes.func,
+  size: PropTypes.string,
+  title: PropTypes.string,
+  customClass: PropTypes.string
+};
+
+if (__DOCS__) {
+  PlusIcon.docs = {
+    componentGroup: 'Common',
+    folderName: 'Ticket DetailView'
+  };
+}