@zohodesk/dot 1.0.0-beta.211 → 1.0.0-beta.214

package/es/Message/Message.module.css

@@ -0,0 +1,103 @@
+.message {
+  position: absolute;
+  top: 0;
+  z-index: 1000;
+  /*Hook for editor alert*/
+  pointer-events: none;
+  text-align: center;
+}[dir=ltr] .message {
+  right: 0;
+  left: 0;
+}[dir=rtl] .message {
+  left: 0;
+  right: 0;
+}
+
+.container {
+  position: relative;
+  display: inline-block;
+  pointer-events: initial;
+  box-shadow: 0 0 19px 1px var(--zdt_message_default_box_shadow);
+  border-radius: 0 0 5px 5px;
+  background: var(--zdt_message_default_bg);
+}
+
+[dir=ltr] .container {
+  padding: var(--zd_size13) var(--zd_size10) var(--zd_size13) var(--zd_size50);
+}
+
+[dir=rtl] .container {
+  padding: var(--zd_size13) var(--zd_size50) var(--zd_size13) var(--zd_size10);
+}
+
+.text {
+  max-width: var(--zd_size480);
+  display: inline-block;
+  word-break: break-word;
+  font-size: var(--zd_font_size14);
+  vertical-align: middle;
+}
+
+[dir=ltr] .text {
+  text-align: left;
+}
+
+[dir=rtl] .text {
+  text-align: right;
+}
+
+.icon {
+  position: absolute;
+  top: 0;
+  width: var(--zd_size40);
+  display: inline-block;
+  height: 100%;
+}
+
+[dir=ltr] .icon {
+  left: 0;
+  border-bottom-left-radius: 5px;
+}
+
+[dir=rtl] .icon {
+  right: 0;
+  border-bottom-right-radius: 5px;
+}
+
+.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);
+  display: inline-block;
+  vertical-align: middle;
+  cursor: pointer;
+}
+
+[dir=ltr] .close {
+  margin-left: var(--zd_size10);
+}
+
+[dir=rtl] .close {
+  margin-right: var(--zd_size10);
+}

package/es/MessageBanner/MessageBanner.js

@@ -0,0 +1,75 @@
+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 /*#__PURE__*/React.createElement(Container, {
+      className: `${style[`type_${type}`]} ${style[`palette_${palette}`]} ${customClass}`,
+      alignBox: "row",
+      isCover: false,
+      dataId: dataId
+    }, /*#__PURE__*/React.createElement(Box, {
+      className: style.content,
+      flexible: true
+    }, /*#__PURE__*/React.createElement(Container, {
+      alignBox: "row",
+      align: "both"
+    }, /*#__PURE__*/React.createElement(Box, {
+      className: style.message,
+      adjust: true,
+      shrink: true,
+      "data-title": message
+    }, message), href && /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Link, {
+      href: href,
+      onClick: onClick,
+      className: style.link,
+      target: "_blank"
+    }, urlText)))), onClose ? /*#__PURE__*/React.createElement(Box, {
+      className: style.close,
+      onClick: onClose
+    }, /*#__PURE__*/React.createElement(Container, {
+      align: "both"
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "ZD-closee",
+      size: "35"
+    }))) : null);
+  }
+
+}
+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 (false) {
+  MessageBanner.docs = {
+    componentGroup: 'Atom'
+  };
+}

package/es/MessageBanner/MessageBanner.module.css

@@ -0,0 +1,46 @@
+.type_secondary {
+  max-width: var(--zd_size468);
+  border-radius: 3px;
+  margin: 0 auto;
+}
+.message {
+  color: var(--zdt_messagebanner_text);
+  composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
+  padding: var(--zd_size10) 0;
+}
+[dir=ltr] .message {
+  margin-left: var(--zd_size10);
+}
+[dir=rtl] .message {
+  margin-right: var(--zd_size10);
+}
+.link {
+  color: var(--zdt_messagebanner_link_text);
+}
+[dir=ltr] .link {
+  margin-left: var(--zd_size5);
+}
+[dir=rtl] .link {
+  margin-right: 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/es/NewStar/NewStar.js

@@ -0,0 +1,75 @@
+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 /*#__PURE__*/React.createElement(Container, {
+      alignBox: alignPosition[position].alignBox,
+      isCover: false,
+      className: `${style.star} ${alignPosition[position].className} ${customClass}`,
+      wrap: alignPosition[position].reverse,
+      align: alignPosition[position].align
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "ZD-snippetStar",
+      iconClass: `${style[palette]} ${style.starOne}`,
+      size: "10"
+    }), /*#__PURE__*/React.createElement(Icon, {
+      name: "ZD-snippetStar",
+      iconClass: `${style[palette]} ${style.starTwo}`,
+      size: "10"
+    }), /*#__PURE__*/React.createElement(Icon, {
+      name: "ZD-snippetStar",
+      iconClass: `${style[palette]} ${style.starThree}`,
+      size: "10"
+    }));
+  }
+
+}
+NewStar.propTypes = {
+  customClass: PropTypes.string,
+  palette: PropTypes.oneOf(['green', 'blue', 'yellow']),
+  position: PropTypes.oneOf(['topRight', 'topLeft', 'bottomRight', 'bottomLeft'])
+};
+NewStar.defaultProps = {
+  customClass: '',
+  position: 'topRight'
+};
+
+if (false) {
+  NewStar.docs = {
+    componentGroup: 'Atom'
+  };
+}

package/es/NewStar/NewStar.module.css

@@ -0,0 +1,110 @@
+.star {
+  position: absolute;
+
+  height: var(--zd_size20);
+  width: var(--zd_size21);
+}
+.topLeft {
+  top: 0;
+}
+[dir=ltr] .topLeft {
+  transform: translate(-45%, -45%);
+  left: 0;
+}
+[dir=rtl] .topLeft {
+  transform: translate(45%, -45%);
+  right: 0;
+}
+.topRight {
+  top: 0;
+}
+[dir=ltr] .topRight {
+  transform: translate(45%, -45%);
+  right: 0;
+}
+[dir=rtl] .topRight {
+  transform: translate(-45%, -45%);
+  left: 0;
+}
+.bottomLeft {
+  bottom: 0;
+}
+[dir=ltr] .bottomLeft {
+  transform: translate(-45%, 45%);
+  left: 0;
+}
+[dir=rtl] .bottomLeft {
+  transform: translate(45%, 45%);
+  right: 0;
+}
+.bottomRight {
+  bottom: 0;
+}
+[dir=ltr] .bottomRight {
+  transform: translate(45%, 45%);
+  right: 0;
+}
+[dir=rtl] .bottomRight {
+  transform: translate(-45%, 45%);
+  left: 0;
+}
+[dir=ltr] .stars {
+  animation: twinkle var(--zd_transition4) infinite, star-scale var(--zd_transition10) infinite;
+}
+[dir=rtl] .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;
+}
+[dir=ltr] .starTwo {
+  animation-delay: 0.5s;
+}
+[dir=rtl] .starTwo {
+  animation-delay: 0.5s;
+}
+.starThree {
+  composes: stars;
+}
+[dir=ltr] .starThree {
+  animation-delay: 1s;
+}
+[dir=rtl] .starThree {
+  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/es/PlusIcon/PlusIcon.js

@@ -0,0 +1,60 @@
+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 /*#__PURE__*/React.createElement("span", {
+      className: style.container,
+      onClick: onClick,
+      "data-id": dataId,
+      "data-title": title
+    }, /*#__PURE__*/React.createElement(AvatarIcon, {
+      name: iconName,
+      iconClass: `${iconClass} ${style.icon}`,
+      iconSize: iconSize,
+      size: size,
+      className: `${customClass} ${style.plusIcon}`
+    }));
+  }
+
+}
+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 (false) {
+  PlusIcon.docs = {
+    componentGroup: 'Common',
+    folderName: 'Ticket DetailView'
+  };
+}

package/es/PlusIcon/PlusIcon.module.css

@@ -0,0 +1,16 @@
+.container {
+  composes: dinblk from '~@zohodesk/components/lib/common/common.module.css';
+  border-radius: 50%;
+  box-shadow: 0 2px 3px 0 var(--zdt_plusicon_box_shadow);
+  cursor: pointer;
+  background-color: var(--zdt_plusicon_bg);
+}
+.plusIcon {
+  border: 1px solid var(--zdt_plusicon_border);
+}
+.icon {
+  color: var(--zdt_plusicon_text);
+}
+.plusIcon:hover {
+  border-color: var(--zdt_plusicon_hover_border);
+}

package/es/Provider/Config.js

@@ -0,0 +1,12 @@
+let config = {
+  freezeLayer: {
+    enable: () => {},
+    disable: () => {}
+  }
+};
+export function getDotLibraryConfig(key) {
+  return config[key];
+}
+export function setDotLibraryConfig(configObj) {
+  config = Object.assign({}, config, configObj);
+}