@zohodesk/dot 1.0.0-test.239 → 1.1.0

package/es/NewStar/NewStar.module.css

@@ -1,110 +1,183 @@
-.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);
-  }
-}
+.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 ;
+}
+
+.stars {
+  position: absolute;
+}
+
+[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;
+}
+
+.topLeft .starOne{top:0 }
+
+[dir=ltr] .topLeft .starOne{
+  left:0 }
+
+[dir=rtl] .topLeft .starOne{right:0 }
+.topLeft .starTwo{top:0 
+  /*  Variable:Ignore  */}
+[dir=ltr] .topLeft .starTwo{
+  left:var(--zd_size10) }
+[dir=rtl] .topLeft .starTwo{right:var(--zd_size10) }
+.topLeft .starThree{
+  /*  Variable:Ignore  */top:10px}
+[dir=ltr] .topLeft .starThree{
+  left:0 }
+[dir=rtl] .topLeft .starThree{right:0 }
+
+.topRight .starOne{top:0 }
+
+[dir=ltr] .topRight .starOne{
+  right:0 }
+
+[dir=rtl] .topRight .starOne{left:0 }
+.topRight .starTwo{top:0 
+  /*  Variable:Ignore  */}
+[dir=ltr] .topRight .starTwo{
+  right:var(--zd_size10) }
+[dir=rtl] .topRight .starTwo{left:var(--zd_size10) }
+.topRight .starThree{
+  /*  Variable:Ignore  */top:10px}
+[dir=ltr] .topRight .starThree{
+  right:0 }
+[dir=rtl] .topRight .starThree{left:0 }
+
+.bottomLeft .starOne{bottom:0 }
+
+[dir=ltr] .bottomLeft .starOne{
+  left:0 }
+
+[dir=rtl] .bottomLeft .starOne{right:0 }
+.bottomLeft .starTwo{bottom:0 
+  /*  Variable:Ignore  */}
+[dir=ltr] .bottomLeft .starTwo{
+  left:var(--zd_size10) }
+[dir=rtl] .bottomLeft .starTwo{right:var(--zd_size10) }
+.bottomLeft .starThree{
+  /*  Variable:Ignore  */bottom:10px}
+[dir=ltr] .bottomLeft .starThree{
+  left:0 }
+[dir=rtl] .bottomLeft .starThree{right:0 }
+
+.bottomRight .starOne{bottom:0 }
+
+[dir=ltr] .bottomRight .starOne{
+  right:0 }
+
+[dir=rtl] .bottomRight .starOne{left:0 }
+.bottomRight .starTwo{bottom:0 
+  /*  Variable:Ignore  */}
+[dir=ltr] .bottomRight .starTwo{
+  right:var(--zd_size10) }
+[dir=rtl] .bottomRight .starTwo{left:var(--zd_size10) }
+.bottomRight .starThree{
+  /*  Variable:Ignore  */bottom:10px}
+[dir=ltr] .bottomRight .starThree{
+  right:0 }
+[dir=rtl] .bottomRight .starThree{left:0 }
+
+@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

@@ -7,6 +7,7 @@ export default class PlusIcon extends React.Component {
   constructor(props) {
     super(props);
   }
+
   render() {
     let {
       dataId,
@@ -22,6 +23,7 @@ export default class PlusIcon extends React.Component {
       className: style.container,
       onClick: onClick,
       "data-id": dataId,
+      "data-test-id": dataId,
       "data-title": title
     }, /*#__PURE__*/React.createElement(AvatarIcon, {
       name: iconName,
@@ -31,12 +33,12 @@ export default class PlusIcon extends React.Component {
       className: `${customClass} ${style.plusIcon}`
     }));
   }
+
 }
 PlusIcon.defaultProps = defaultProps;
-PlusIcon.propTypes = propTypes;
-if (false) {
-  PlusIcon.docs = {
-    componentGroup: 'Common',
-    folderName: 'Ticket DetailView'
-  };
-}
+PlusIcon.propTypes = propTypes; // if (__DOCS__) {
+//   PlusIcon.docs = {
+//     componentGroup: 'Common',
+//     folderName: 'Ticket DetailView'
+//   };
+// }

package/es/PlusIcon/PlusIcon.module.css

@@ -1,16 +1,19 @@
-.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);
-}
+.container {
+  composes: dinblk from '~@zohodesk/components/lib/common/common.module.css';
+  border-radius: 50%;
+  box-shadow: var(--zd_bs_plusicon_container);
+  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

@@ -2,6 +2,13 @@ let config = {
   freezeLayer: {
     enable: () => {},
     disable: () => {}
+  },
+  draggerBoundary: document.body,
+  boundaryLimit: {
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0
   }
 };
 export function getDotLibraryConfig(key) {

package/es/Separator/Separator.js

@@ -0,0 +1,60 @@
+import React from 'react';
+import { Container, Box } from '@zohodesk/components/lib/Layout';
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
+import style from './Separator.module.css';
+export default class Separator extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    const {
+      children,
+      type,
+      customSeparatorType,
+      palette,
+      wrap,
+      shrink,
+      aligndirection,
+      customClass
+    } = this.props;
+    const {
+      customWrapper,
+      customSeparator,
+      customChildren
+    } = customClass;
+    const data = children.filter(el => el !== null && el !== undefined && el !== false);
+    return /*#__PURE__*/React.createElement(Container, {
+      alignBox: aligndirection,
+      align: aligndirection === 'row' ? 'vertical' : '',
+      wrap: wrap,
+      isCover: false,
+      className: `${style.varClass} ${customWrapper}`
+    }, data.map((child, i) => {
+      if (child) {
+        if (data.length - 1 == i || aligndirection == 'column') {
+          return child && /*#__PURE__*/React.createElement(Box, {
+            shrink: shrink,
+            key: i,
+            className: customChildren
+          }, child);
+        }
+
+        return child && /*#__PURE__*/React.createElement(React.Fragment, {
+          key: i
+        }, /*#__PURE__*/React.createElement(Box, {
+          shrink: shrink,
+          key: i,
+          className: customChildren
+        }, child), /*#__PURE__*/React.createElement(Box, {
+          className: `${style.separator} ${style[palette]} ${customSeparatorType ? '' : style[type]} ${customSeparator} `,
+          key: i
+        }, customSeparatorType ? customSeparatorType : type == 'slash' ? '/' : type == 'arrow' ? '>' : type == 'comma' ? ',' : '\u2022'));
+      }
+    }));
+  }
+
+}
+Separator.defaultProps = defaultProps;
+Separator.propTypes = propTypes;

package/es/Separator/Separator.module.css

@@ -0,0 +1,34 @@
+.varClass {
+  --separator_fontSize: var(--zd_font_size15);
+}
+.separator {
+  font-size: var(--separator_fontSize);
+  margin: 0 var(--zd_size5) ;
+}
+.dot {
+  --separator_fontSize: var(--zd_font_size8);
+}
+.slash {
+  --separator_fontSize: var(--zd_font_size10);
+  /* line-height: var(--zd_size10); */
+}
+.arrow {
+  --separator_fontSize: var(--zd_font_size8);
+  /* line-height: var(--zd_size7); */
+}
+.comma {
+  --separator_fontSize: var(--zd_font_size15);
+  /* line-height: var(--zd_size13); */
+}
+.none {
+  display: none;
+}
+.default {
+  color: var(--zdt_separator_default_text);
+}
+.primary {
+  color: var(--zdt_separator_primary_text);
+}
+.secondary {
+  color: var(--zdt_separator_secondary_text);
+}

package/es/Separator/props/defaultProps.js

@@ -0,0 +1,12 @@
+export const defaultProps = {
+  palette: 'default',
+  type: 'dot',
+  wrap: false,
+  shrink: false,
+  aligndirection: 'row',
+  customClass: {
+    customWrapper: '',
+    customSeparator: '',
+    customChildren: ''
+  }
+};

package/es/Separator/props/propTypes.js

@@ -0,0 +1,11 @@
+import PropTypes from 'prop-types';
+export const propTypes = {
+  aligndirection: PropTypes.string,
+  children: PropTypes.any,
+  palette: PropTypes.oneOf(['default', 'primary', 'secondary']),
+  shrink: PropTypes.bool,
+  type: PropTypes.oneOf(['dot', 'slash', 'arrow', 'comma', 'none']),
+  wrap: PropTypes.bool,
+  customClass: PropTypes.obj,
+  customSeparatorType: PropTypes.string
+};

package/es/TagWithIcon/TagWithIcon.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
+import { Container, Box } from '@zohodesk/components/es/Layout';
+import Icon from '@zohodesk/icons/es/Icon';
+import style from './TagWithIcon.module.css';
+export default class TagWithIcon extends React.Component {
+  render() {
+    const {
+      text,
+      iconName,
+      iconSize,
+      palette,
+      iconClass,
+      isBold,
+      size,
+      dataId,
+      className,
+      title
+    } = this.props;
+    return /*#__PURE__*/React.createElement(Container, {
+      isInline: true,
+      alignBox: "row",
+      align: "vertical",
+      isCover: false,
+      className: `${style.wrapper} ${style[palette]} ${style[size]} ${className}`,
+      dataId: dataId,
+      title: title
+    }, iconName ? /*#__PURE__*/React.createElement(Icon, {
+      name: iconName,
+      size: iconSize,
+      iconClass: `${text ? style.iconSpace : ''} ${iconClass} `
+    }) : null, text ? /*#__PURE__*/React.createElement(Box, {
+      shrink: true,
+      "data-title": text,
+      className: `${style.text} ${style[size]}_text ${isBold ? style.bold : ''}`
+    }, text) : null);
+  }
+
+}
+TagWithIcon.propTypes = propTypes;
+TagWithIcon.defaultProps = defaultProps;

package/es/TagWithIcon/TagWithIcon.module.css

@@ -0,0 +1,56 @@
+.varClass {
+  --tag_bg_color: var(--zdt_tagWithIconGrey_bg);
+  --tag_text_color: var(--zdt_tagWithIconGrey_text);
+  --tag_border_color: var(--zdt_tagWithIconGrey_border);
+  --tag_small_fontSize: var(--zd_font_size10);
+  --tag_large_fontSize: var(--zd_font_size12);
+}
+.wrapper {
+  composes: varClass;
+  color: var(--tag_text_color);
+  background-color: var(--tag_bg_color);
+}
+.small,
+.large {
+  max-width: 100% ;
+  height: var(--zd_size18) ;
+}
+.small, .large {
+  border: 1px solid;
+  border-color: var(--tag_border_color);
+  border-radius: var(--zd_size4);
+  padding: 0 var(--zd_size6) ;
+}
+.bold {
+  composes: semibold from '~@zohodesk/components/lib/common/common.module.css';
+}
+.small_text {
+  font-size: var(--tag_small_fontSize);
+}
+.large_text {
+  font-size: var(--tag_large_fontSize);
+}
+.text {
+  composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
+}
+[dir=ltr] .iconSpace{
+  margin-right: var(--zd_size4) ;
+}
+[dir=rtl] .iconSpace{
+  margin-left: var(--zd_size4) ;
+}
+.yellow {
+  --tag_bg_color: var(--zdt_tagWithIconYellow_bg);
+  --tag_text_color: var(--zdt_tagWithIconYellow_text);
+  --tag_border_color: var(--zdt_tagWithIconYellow_border);
+}
+.grey {
+  --tag_bg_color: var(--zdt_tagWithIconGrey_bg);
+  --tag_text_color: var(--zdt_tagWithIconGrey_text);
+  --tag_border_color: var(--zdt_tagWithIconGrey_border);
+}
+.blue {
+  --tag_bg_color: var(--zdt_tagWithIconBlue_bg);
+  --tag_text_color: var(--zdt_tagWithIconBlue_text);
+  --tag_border_color: var(--zdt_tagWithIconBlue_border);
+}

package/es/TagWithIcon/props/defaultProps.js

@@ -0,0 +1,8 @@
+export const defaultProps = {
+  iconSize: '9',
+  size: 'large',
+  iconClass: '',
+  isBold: true,
+  palette: 'grey',
+  className: ''
+};

package/es/TagWithIcon/props/propTypes.js

@@ -0,0 +1,12 @@
+import PropTypes from 'prop-types';
+export const propTypes = {
+  iconClass: PropTypes.string,
+  iconName: PropTypes.string,
+  iconSize: PropTypes.string,
+  title: PropTypes.string,
+  isBold: PropTypes.bool,
+  palette: PropTypes.oneOf(['yellow', 'blue', 'grey']),
+  size: PropTypes.oneOf('small', 'large'),
+  className: PropTypes.string,
+  text: PropTypes.string
+};