@zohodesk/dot 1.0.0-temp-49 → 1.0.0-temp-53

package/src/list/GridStencils/GridStencils.module.css

@@ -1,102 +1,102 @@
-.stenLoading {
-  background-color: var(--zdt_gridstencils_default_bg);
-  border-bottom: 1px solid var(--zdt_gridstencils_default_border);
-  padding: var(--zd_size13) var(--zd_size20) var(--zd_size11);
-  position: relative;
-  margin-bottom: var(--zd_size10);
-}
-.stenLoadbody {
-  margin: var(--zd_size8) var(--zd_size20) var(--zd_size8) 0;
-}
-.stenLoadbody::after {
-  content: '';
-  height: var(--zd_size22);
-  width: var(--zd_size22);
-  right: var(--zd_size20);
-  top: var(--zd_size15);
-  border-radius: 50%;
-  position: absolute;
-  background-color: var(--zdt_gridstencils_after_bg);
-}
-
-.lineBar {
-  width: 90%;
-}
-.lineBar2 {
-  width: 70%;
-  margin: var(--zd_size22) 0;
-}
-.lineBar3 {
-  width: 50%;
-}
-.lineBar,
-.lineBar2,
-.lineBar3 {
-  height: var(--zd_size5);
-  border-radius: var(--zd_size5);
-}
-.stenListBAr {
-  -webkit-animation-duration:var(--zd_transition10);
-  -webkit-animation-fill-mode: forwards;
-  -webkit-animation-iteration-count: infinite;
-  -webkit-animation-name: placeHolderShimmer;
-  -webkit-animation-timing-function: linear;
-  background: var(--zdt_gridstencils_listbar_bg);
-  background-image: var(--zdt_gridstencils_listbar_gradient_bg);
-  background-repeat: no-repeat;
-  position: relative;
-}
-.stenListBAr {
-  -webkit-animation-duration: var(--zd_transition10);
-  -webkit-animation-fill-mode: forwards;
-  -webkit-animation-iteration-count: infinite;
-  -webkit-animation-name: placeHolderShimmer;
-  -webkit-animation-timing-function: linear;
-  background: var(--zdt_gridstencils_listbar_bg);
-  background-image: var(--zdt_gridstencils_listbar_gradient_bg);
-  background-repeat: no-repeat;
-}
-@keyframes placeHolderShimmer {
-  0% {
-    background-position: -468px 0;
-  }
-
-  100% {
-    background-position: 468px 0;
-  }
-}
-.threeLayout .stenLoadbody::before {
-  left: var(--zd_size16);
-  transform: scale(0.8);
-}
-
-.threeLayout .stenLoadbody {
-  margin: var(--zd_size8) var(--zd_size20) var(--zd_size8) 0 ;
-}
-.threeLayout .stenLoadbody::after {
-  right: var(--zd_size20);
-  transform: scale(0.8);
-  top: var(--zd_size15);
-}
-
-.leftCont .stenLoadbody::before {
-  left: var(--zd_size33);
-}
-
-.leftCont .stenLoadbody {
-  margin: var(--zd_size8) var(--zd_size20) var(--zd_size8) var(--zd_size46);
-}
-
-.leftCont .stenLoadbody::after {
-  right: var(--zd_size40);
-}
-
-.leftCont .lineBar {
-  width: 80%;
-}
-.leftCont .lineBar2 {
-  width: 60%;
-}
-.leftCont .lineBar3 {
-  width: 40%;
-}
+.stenLoading {
+  background-color: var(--zdt_gridstencils_default_bg);
+  border-bottom: 1px solid var(--zdt_gridstencils_default_border);
+  padding: var(--zd_size13) var(--zd_size20) var(--zd_size11);
+  position: relative;
+  margin-bottom: var(--zd_size10);
+}
+.stenLoadbody {
+  margin: var(--zd_size8) var(--zd_size20) var(--zd_size8) 0;
+}
+.stenLoadbody::after {
+  content: '';
+  height: var(--zd_size22);
+  width: var(--zd_size22);
+  right: var(--zd_size20);
+  top: var(--zd_size15);
+  border-radius: 50%;
+  position: absolute;
+  background-color: var(--zdt_gridstencils_after_bg);
+}
+
+.lineBar {
+  width: 90%;
+}
+.lineBar2 {
+  width: 70%;
+  margin: var(--zd_size22) 0;
+}
+.lineBar3 {
+  width: 50%;
+}
+.lineBar,
+.lineBar2,
+.lineBar3 {
+  height: var(--zd_size5);
+  border-radius: var(--zd_size5);
+}
+.stenListBAr {
+  -webkit-animation-duration:var(--zd_transition10);
+  -webkit-animation-fill-mode: forwards;
+  -webkit-animation-iteration-count: infinite;
+  -webkit-animation-name: placeHolderShimmer;
+  -webkit-animation-timing-function: linear;
+  background: var(--zdt_gridstencils_listbar_bg);
+  background-image: var(--zdt_gridstencils_listbar_gradient_bg);
+  background-repeat: no-repeat;
+  position: relative;
+}
+.stenListBAr {
+  -webkit-animation-duration: var(--zd_transition10);
+  -webkit-animation-fill-mode: forwards;
+  -webkit-animation-iteration-count: infinite;
+  -webkit-animation-name: placeHolderShimmer;
+  -webkit-animation-timing-function: linear;
+  background: var(--zdt_gridstencils_listbar_bg);
+  background-image: var(--zdt_gridstencils_listbar_gradient_bg);
+  background-repeat: no-repeat;
+}
+@keyframes placeHolderShimmer {
+  0% {
+    background-position: -468px 0;
+  }
+
+  100% {
+    background-position: 468px 0;
+  }
+}
+.threeLayout .stenLoadbody::before {
+  left: var(--zd_size16);
+  transform: scale(0.8);
+}
+
+.threeLayout .stenLoadbody {
+  margin: var(--zd_size8) var(--zd_size20) var(--zd_size8) 0 ;
+}
+.threeLayout .stenLoadbody::after {
+  right: var(--zd_size20);
+  transform: scale(0.8);
+  top: var(--zd_size15);
+}
+
+.leftCont .stenLoadbody::before {
+  left: var(--zd_size33);
+}
+
+.leftCont .stenLoadbody {
+  margin: var(--zd_size8) var(--zd_size20) var(--zd_size8) var(--zd_size46);
+}
+
+.leftCont .stenLoadbody::after {
+  right: var(--zd_size40);
+}
+
+.leftCont .lineBar {
+  width: 80%;
+}
+.leftCont .lineBar2 {
+  width: 60%;
+}
+.leftCont .lineBar3 {
+  width: 40%;
+}

package/src/list/GridStencils/docs/GridStencils__default.docs.js

@@ -1,30 +1,30 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import GridStencils from '../GridStencils';
-import style from '@zohodesk/components/lib/common/docStyle.module.css';
-export default class GridStencils__default extends Component {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    return (
-      <span>
-        <div className={style.w350}>
-          <GridStencils lineBar='Bar' from='leftPanel' isThreeLayout />
-          <GridStencils lineBar='Bar' />
-          <GridStencils lineBar='Bar' />
-          <GridStencils lineBar='Bar' />
-          <GridStencils lineBar='Bar' />
-        </div>
-      </span>
-    );
-  }
-}
-
-if (__DOCS__) {
-  GridStencils__default.docs = {
-    folderName: 'List',
-    componentGroup: 'GridStencils'
-  };
-}
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import GridStencils from '../GridStencils';
+import style from '@zohodesk/components/lib/common/docStyle.module.css';
+export default class GridStencils__default extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <span>
+        <div className={style.w350}>
+          <GridStencils lineBar='Bar' from='leftPanel' isThreeLayout />
+          <GridStencils lineBar='Bar' />
+          <GridStencils lineBar='Bar' />
+          <GridStencils lineBar='Bar' />
+          <GridStencils lineBar='Bar' />
+        </div>
+      </span>
+    );
+  }
+}
+
+if (__DOCS__) {
+  GridStencils__default.docs = {
+    folderName: 'List',
+    componentGroup: 'GridStencils'
+  };
+}

package/src/list/Icons/AddNewIcon.js

@@ -1,29 +1,29 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Icon from '@zohodesk/icons/lib/Icon';
-import style from './Icons.module.css';
-
-export default class AddNewIcon extends React.Component {
-  render() {
-    let { onClick, dataId, dataTitle, iconClass, className } = this.props;
-    return (
-      <span
-        onClick={onClick}
-        className={`${style.iconStyle} ${style.blueHover} ${
-          className ? className : ''
-        }`}
-        data-id={dataId}
-        data-title={dataTitle}
-      >
-        <Icon name='ZD-SE-addTickets' iconClass={iconClass?iconClass:''} />
-      </span>
-    );
-  }
-}
-AddNewIcon.propTypes = {
-  className: PropTypes.string,
-  dataId: PropTypes.string,
-  dataTitle: PropTypes.string,
-  iconClass: PropTypes.string,
-  onClick: PropTypes.func
-};
+import React from 'react';
+import PropTypes from 'prop-types';
+import Icon from '@zohodesk/icons/lib/Icon';
+import style from './Icons.module.css';
+
+export default class AddNewIcon extends React.Component {
+  render() {
+    let { onClick, dataId, dataTitle, iconClass, className } = this.props;
+    return (
+      <span
+        onClick={onClick}
+        className={`${style.iconStyle} ${style.blueHover} ${
+          className ? className : ''
+        }`}
+        data-id={dataId}
+        data-title={dataTitle}
+      >
+        <Icon name='ZD-SE-addTickets' iconClass={iconClass?iconClass:''} />
+      </span>
+    );
+  }
+}
+AddNewIcon.propTypes = {
+  className: PropTypes.string,
+  dataId: PropTypes.string,
+  dataTitle: PropTypes.string,
+  iconClass: PropTypes.string,
+  onClick: PropTypes.func
+};

package/src/list/Icons/CompleteIcon.js

@@ -1,30 +1,30 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Icon from '@zohodesk/icons/lib/Icon';
-import style from './Icons.module.css';
-export default class CompleteIcon extends React.Component {
-  render() {
-    let { onClick, dataId, dataTitle, iconClass, className, iconSize } =
-      this.props;
-    return (
-      <span
-        onClick={onClick}
-        className={`${style.iconStyle} ${style.blueHover} ${
-          className ? className : ''
-        }`}
-        data-id={dataId}
-        data-title={dataTitle}
-      >
-        <Icon name='ZD-GN-checkbox' iconClass={iconClass?iconClass:''} size={iconSize} />
-      </span>
-    );
-  }
-}
-CompleteIcon.propTypes = {
-  className: PropTypes.string,
-  dataId: PropTypes.string,
-  dataTitle: PropTypes.string,
-  iconClass: PropTypes.string,
-  iconSize: PropTypes.string,
-  onClick: PropTypes.func
-};
+import React from 'react';
+import PropTypes from 'prop-types';
+import Icon from '@zohodesk/icons/lib/Icon';
+import style from './Icons.module.css';
+export default class CompleteIcon extends React.Component {
+  render() {
+    let { onClick, dataId, dataTitle, iconClass, className, iconSize } =
+      this.props;
+    return (
+      <span
+        onClick={onClick}
+        className={`${style.iconStyle} ${style.blueHover} ${
+          className ? className : ''
+        }`}
+        data-id={dataId}
+        data-title={dataTitle}
+      >
+        <Icon name='ZD-GN-checkbox' iconClass={iconClass?iconClass:''} size={iconSize} />
+      </span>
+    );
+  }
+}
+CompleteIcon.propTypes = {
+  className: PropTypes.string,
+  dataId: PropTypes.string,
+  dataTitle: PropTypes.string,
+  iconClass: PropTypes.string,
+  iconSize: PropTypes.string,
+  onClick: PropTypes.func
+};

package/src/list/Icons/DeleteIcon.js

@@ -1,31 +1,31 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import style from './Icons.module.css';
-import Icon from '@zohodesk/icons/lib/Icon';
-
-export default class DeleteComponent extends React.Component {
-  render() {
-    let { onClick, dataId, dataTitle, iconClass, iconSize, className } =
-      this.props;
-    return (
-      <span
-        onClick={onClick}
-        className={`${style.iconStyle} ${style.redHover} ${
-          className ? className : ''
-        }`}
-        data-id={dataId}
-        data-title={dataTitle}
-      >
-        <Icon name='ZD-GN-delete' iconClass={iconClass?iconClass:''} size={iconSize} />
-      </span>
-    );
-  }
-}
-DeleteComponent.propTypes = {
-  className: PropTypes.string,
-  dataId: PropTypes.string,
-  dataTitle: PropTypes.string,
-  iconClass: PropTypes.string,
-  iconSize: PropTypes.string,
-  onClick: PropTypes.func
-};
+import React from 'react';
+import PropTypes from 'prop-types';
+import style from './Icons.module.css';
+import Icon from '@zohodesk/icons/lib/Icon';
+
+export default class DeleteComponent extends React.Component {
+  render() {
+    let { onClick, dataId, dataTitle, iconClass, iconSize, className } =
+      this.props;
+    return (
+      <span
+        onClick={onClick}
+        className={`${style.iconStyle} ${style.redHover} ${
+          className ? className : ''
+        }`}
+        data-id={dataId}
+        data-title={dataTitle}
+      >
+        <Icon name='ZD-GN-delete' iconClass={iconClass?iconClass:''} size={iconSize} />
+      </span>
+    );
+  }
+}
+DeleteComponent.propTypes = {
+  className: PropTypes.string,
+  dataId: PropTypes.string,
+  dataTitle: PropTypes.string,
+  iconClass: PropTypes.string,
+  iconSize: PropTypes.string,
+  onClick: PropTypes.func
+};

package/src/list/Icons/EditIcon.js

@@ -1,31 +1,31 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import style from './Icons.module.css';
-import Icon from '@zohodesk/icons/lib/Icon';
-
-export default class EditIcon extends React.Component {
-  render() {
-    let { onClick, dataId, dataTitle, iconClass, iconSize, className } =
-      this.props;
-    return (
-      <span
-        onClick={onClick}
-        className={`${style.iconStyle} ${style.blueHover} ${
-          className ? className : ''
-        }`}
-        data-id={dataId}
-        data-title={dataTitle}
-      >
-        <Icon name='ZD-GN-edit' iconClass={iconClass?iconClass:''} size={iconSize} />
-      </span>
-    );
-  }
-}
-EditIcon.propTypes = {
-  className: PropTypes.string,
-  dataId: PropTypes.string,
-  dataTitle: PropTypes.string,
-  iconClass: PropTypes.string,
-  iconSize: PropTypes.string,
-  onClick: PropTypes.func
-};
+import React from 'react';
+import PropTypes from 'prop-types';
+import style from './Icons.module.css';
+import Icon from '@zohodesk/icons/lib/Icon';
+
+export default class EditIcon extends React.Component {
+  render() {
+    let { onClick, dataId, dataTitle, iconClass, iconSize, className } =
+      this.props;
+    return (
+      <span
+        onClick={onClick}
+        className={`${style.iconStyle} ${style.blueHover} ${
+          className ? className : ''
+        }`}
+        data-id={dataId}
+        data-title={dataTitle}
+      >
+        <Icon name='ZD-GN-edit' iconClass={iconClass?iconClass:''} size={iconSize} />
+      </span>
+    );
+  }
+}
+EditIcon.propTypes = {
+  className: PropTypes.string,
+  dataId: PropTypes.string,
+  dataTitle: PropTypes.string,
+  iconClass: PropTypes.string,
+  iconSize: PropTypes.string,
+  onClick: PropTypes.func
+};

package/src/list/Icons/FloatingIcons.js

@@ -1,32 +1,32 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import style from './Icons.module.css';
-export default class FloatingIcons extends Component {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    let { children = [], iconClass } = this.props;
-    const icons = React.Children.toArray(children).filter(o => o);
-
-    return (
-      <span className={`${style.container}`}>
-        {icons.map(child => React.cloneElement(child, { iconClass }))}
-      </span>
-    );
-  }
-}
-FloatingIcons.propTypes = {
-  children: PropTypes.arrayOf(PropTypes.element),
-  iconClass: PropTypes.string
-};
-FloatingIcons.defaultProps = {
-  size: 'medium'
-};
-if (__DOCS__) {
-  FloatingIcons.docs = {
-    folderName: 'List',
-    componentGroup: 'FloatingIcons'
-  };
-}
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import style from './Icons.module.css';
+export default class FloatingIcons extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    let { children = [], iconClass } = this.props;
+    const icons = React.Children.toArray(children).filter(o => o);
+
+    return (
+      <span className={`${style.container}`}>
+        {icons.map(child => React.cloneElement(child, { iconClass }))}
+      </span>
+    );
+  }
+}
+FloatingIcons.propTypes = {
+  children: PropTypes.arrayOf(PropTypes.element),
+  iconClass: PropTypes.string
+};
+FloatingIcons.defaultProps = {
+  size: 'medium'
+};
+if (__DOCS__) {
+  FloatingIcons.docs = {
+    folderName: 'List',
+    componentGroup: 'FloatingIcons'
+  };
+}

package/src/list/Icons/Icons.module.css

@@ -1,16 +1,16 @@
-.container,
-.iconStyle {
-  composes: inlineFlex from '../listCommon.module.css';
-}
-.iconStyle {
-  color: var(--zdt_icons_default);
-  padding: 0 var(--zd_size8);
-  width: var(--zd_size33);
-  cursor: pointer;
-}
-.blueHover:hover {
-  color: var(--zdt_icons_hover_blue);
-}
-.redHover:hover {
-  color: var(--zdt_icons_hover_red);
+.container,
+.iconStyle {
+  composes: inlineFlex from '../listCommon.module.css';
+}
+.iconStyle {
+  color: var(--zdt_icons_default);
+  padding: 0 var(--zd_size8);
+  width: var(--zd_size33);
+  cursor: pointer;
+}
+.blueHover:hover {
+  color: var(--zdt_icons_hover_blue);
+}
+.redHover:hover {
+  color: var(--zdt_icons_hover_red);
 }