@zohodesk/components 1.0.0-temp-79 → 1.0.0-temp-80

package/es/CheckBox/CheckBox.module.css

@@ -1,151 +1,157 @@
-.varClass {
-  /* checkbox default variables */
-  --checkbox_bg_color: var(--zdt_checkbox_default_bg);
-  --checkbox_cursor: auto;
-  --checkbox_stroke_width: var(--zd_size2);
-  --checkbox_stroke_color: var(--zdt_checkbox_default_stroke_border);
-
-  /* checkbox checked state default variables */
-  --checkbox_checked_stroke_color: var(--zdt_checkbox_primary_stroke_border);
-  --checkbox_checked_active_color: var(--zdt_checkbox_primary_stroke_border);
-}
-.container {
-  composes: varClass;
-  stroke: var(--checkbox_stroke_color);
-}
-.container,
-.pointer,
-.readonly {
-  cursor: var(--checkbox_cursor);
-}
-.pointer {
-  --checkbox_cursor: pointer;
-}
-.readonly {
-  --checkbox_cursor: default;
-}
-.cbBox {
-  fill: none;
-  stroke-width: var(--checkbox_stroke_width);
-  stroke-linecap: round;
-  stroke: inherit;
-}
-.tickPath {
-  composes: cbBox;
-  stroke-dasharray: 40;
-}
-.boxContainer {
-  composes: offSelection from '../common/common.module.css';
-  border-radius: 2px;
-  background-color: var(--checkbox_bg_color);
-}
-.filled {
-  --checkbox_bg_color: inherit;
-}
-.medium {
-  width: var(--zd_size16);
-  height: var(--zd_size16);
-}
-.small {
-  width: var(--zd_size13);
-  height: var(--zd_size13);
-}
-
-.checkbox {
-  position: relative;
-  font-size: 0;
-  display: block;
-}
-/*rtl:begin:ignore*/
-.tick {
-  position: absolute;
-  left: 0;
-}
-/*rtl:end:ignore*/
-.mediumtick {
-  top: calc(var(--zd_size2) * -1);
-  height: var(--zd_size20);
-  width: var(--zd_size20);
-}
-/*rtl:begin:ignore*/
-.smalltick {
-  top: calc(var(--zd_size3) * -1);
-  height: var(--zd_size18);
-  width: var(--zd_size18);
-  left: calc(var(--zd_size1) * -1);
-}
-/*rtl:end:ignore*/
-
-.checkedtickPath {
-  stroke-dashoffset: 40;
-  animation: tickAnimate var(--zd_transition3) ease forwards;
-}
-.linePath {
-  transform-origin: center;
-  animation: lineAnimate var(--zd_transition3) ease forwards;
-}
-.text {
-  margin-left: var(--zd_size6);
-}
-
-.checkedprimary,
-.checkeddanger {
-  stroke: var(--checkbox_checked_stroke_color);
-}
-.primary:hover
-/* .primary:focus  */
-{
-  --checkbox_stroke_color: var(--zdt_checkbox_primary_stroke_border);
-}
-.checkedprimary {
-  --checkbox_checked_stroke_color: var(--zdt_checkbox_primary_stroke_border);
-}
-.danger:hover
-/* .danger:focus */
- {
-  --checkbox_stroke_color: var(--zdt_checkbox_danger_stroke_border);
-}
-.checkeddanger {
-  --checkbox_checked_stroke_color: var(--zdt_checkbox_danger_stroke_border);
-}
-
-.checkedprimaryLabel,
-.checkeddangerLabel {
-  color: var(--checkbox_checked_active_color);
-}
-.activeprimaryLabel:hover
-/* .activeprimaryLabel:focus  */
-{
-  --label_text_color: var(--zdt_checkbox_label_primary_text);
-}
-.checkedprimaryLabel {
-  --checkbox_checked_active_color: var(--zdt_checkbox_primary_stroke_border);
-}
-.activedangerLabel:hover
-/* .activedangerLabel:focus  */
-{
-  --label_text_color: var(--zdt_checkbox_label_danger_text);
-}
-.checkeddangerLabel {
-  --checkbox_checked_active_color: var(--zdt_checkbox_danger_stroke_border);
-}
-
-/*rtl:begin:ignore*/
-@keyframes tickAnimate {
-  0% {
-    stroke-dashoffset: 40;
-  }
-  100% {
-    stroke-dashoffset: 0;
-  }
-}
-
-@keyframes lineAnimate {
-  0% {
-    transform: scaleX(0);
-  }
-  100% {
-    transform: scaleX(1);
-  }
-}
-/*rtl:end:ignore*/
+.varClass {
+  /* checkbox default variables */
+  --checkbox_bg_color: var(--zdt_checkbox_default_bg);
+  --checkbox_cursor: auto;
+  --checkbox_stroke_width: var(--zd_size2);
+  --checkbox_stroke_color: var(--zdt_checkbox_default_stroke_border);
+
+  /* checkbox checked state default variables */
+  --checkbox_checked_stroke_color: var(--zdt_checkbox_primary_stroke_border);
+  --checkbox_checked_active_color: var(--zdt_checkbox_primary_stroke_border);
+}
+.container {
+  composes: varClass;
+  stroke: var(--checkbox_stroke_color);
+}
+.container, .pointer, .readonly {
+  cursor: var(--checkbox_cursor);
+}
+.pointer {
+  --checkbox_cursor: pointer;
+}
+.readonly {
+  --checkbox_cursor: default;
+}
+.cbBox {
+  fill: none;
+  stroke-width: var(--checkbox_stroke_width);
+  stroke-linecap: round;
+  stroke: inherit;
+}
+.tickPath {
+  composes: cbBox;
+  stroke-dasharray: 40;
+}
+.boxContainer {
+  composes: offSelection from '../common/common.module.css';
+  border-radius: 2px;
+  background-color: var(--checkbox_bg_color);
+}
+.filled {
+  --checkbox_bg_color: inherit;
+}
+.medium {
+  width: var(--zd_size16);
+  height: var(--zd_size16);
+}
+.small {
+  width: var(--zd_size13);
+  height: var(--zd_size13);
+}
+
+.checkbox {
+  position: relative;
+  font-size: 0;
+  display: block;
+}
+.tick {
+  position: absolute;
+  left: 0;
+}
+.mediumtick {
+  top: calc(var(--zd_size2) * -1);
+  height: var(--zd_size20);
+  width: var(--zd_size20);
+}
+.smalltick {
+  top: calc(var(--zd_size3) * -1);
+  height: var(--zd_size18);
+  width: var(--zd_size18);
+  left: calc(var(--zd_size1) * -1);
+}
+
+.checkedtickPath {
+  stroke-dashoffset: 40;
+}
+
+[dir=ltr] .checkedtickPath {
+  animation: tickAnimate var(--zd_transition3) ease forwards;
+}
+
+[dir=rtl] .checkedtickPath {
+  animation: tickAnimate var(--zd_transition3) ease forwards;
+}
+.linePath {
+  transform-origin: center;
+}
+[dir=ltr] .linePath {
+  animation: lineAnimate var(--zd_transition3) ease forwards;
+}
+[dir=rtl] .linePath {
+  animation: lineAnimate var(--zd_transition3) ease forwards;
+}
+[dir=ltr] .text {
+  margin-left: var(--zd_size6);
+}
+[dir=rtl] .text {
+  margin-right: var(--zd_size6);
+}
+
+.checkedprimary,
+.checkeddanger {
+  stroke: var(--checkbox_checked_stroke_color);
+}
+.primary:hover
+/* .primary:focus  */
+{
+  --checkbox_stroke_color: var(--zdt_checkbox_primary_stroke_border);
+}
+.checkedprimary {
+  --checkbox_checked_stroke_color: var(--zdt_checkbox_primary_stroke_border);
+}
+.danger:hover
+/* .danger:focus */
+ {
+  --checkbox_stroke_color: var(--zdt_checkbox_danger_stroke_border);
+}
+.checkeddanger {
+  --checkbox_checked_stroke_color: var(--zdt_checkbox_danger_stroke_border);
+}
+
+.checkedprimaryLabel,
+.checkeddangerLabel {
+  color: var(--checkbox_checked_active_color);
+}
+.activeprimaryLabel:hover
+/* .activeprimaryLabel:focus  */
+{
+  --label_text_color: var(--zdt_checkbox_label_primary_text);
+}
+.checkedprimaryLabel {
+  --checkbox_checked_active_color: var(--zdt_checkbox_primary_stroke_border);
+}
+.activedangerLabel:hover
+/* .activedangerLabel:focus  */
+{
+  --label_text_color: var(--zdt_checkbox_label_danger_text);
+}
+.checkeddangerLabel {
+  --checkbox_checked_active_color: var(--zdt_checkbox_danger_stroke_border);
+}
+@keyframes tickAnimate {
+  0% {
+    stroke-dashoffset: 40;
+  }
+  100% {
+    stroke-dashoffset: 0;
+  }
+}
+
+@keyframes lineAnimate {
+  0% {
+    transform: scaleX(0);
+  }
+  100% {
+    transform: scaleX(1);
+  }
+}

package/es/CheckBox/docs/CheckBox__custom.docs.js

@@ -11,33 +11,30 @@ export default class CheckBox__custom extends Component {
       selected: true
     };
   }
-
   onChange() {
     this.setState({
       checked: !this.state.checked
     });
   }
-
   onSelect() {
     this.setState({
       selected: !this.state.selected
     });
   }
-
   render() {
     let style = {
-      margin: '10px'
-    },
-        titleStyle = {
-      fontSize: '13px',
-      padding: '15px 0',
-      textTransform: 'upperCase',
-      borderTop: '1px solid #e3e6eb'
-    },
-        spanStyle = {
-      display: 'inline-block',
-      margin: '10px 10px 10px 0'
-    };
+        margin: '10px'
+      },
+      titleStyle = {
+        fontSize: '13px',
+        padding: '15px 0',
+        textTransform: 'upperCase',
+        borderTop: '1px solid #e3e6eb'
+      },
+      spanStyle = {
+        display: 'inline-block',
+        margin: '10px 10px 10px 0'
+      };
     return /*#__PURE__*/React.createElement("div", {
       style: style
     }, /*#__PURE__*/React.createElement("div", {
@@ -284,7 +281,6 @@ export default class CheckBox__custom extends Component {
       text: "Danger"
     }))));
   }
-
 }
 CheckBox__custom.docs = {
   componentGroup: 'Form Elements',

package/es/CheckBox/docs/CheckBox__default.docs.js

@@ -10,33 +10,30 @@ export default class CheckBox__default extends Component {
       selected: true
     };
   }
-
   onChange() {
     this.setState({
       checked: !this.state.checked
     });
   }
-
   onSelect() {
     this.setState({
       selected: !this.state.selected
     });
   }
-
   render() {
     let style = {
-      margin: '10px'
-    },
-        titleStyle = {
-      fontSize: '13px',
-      padding: '15px 0',
-      textTransform: 'upperCase',
-      borderTop: '1px solid #e3e6eb'
-    },
-        spanStyle = {
-      display: 'inline-block',
-      margin: '10px 10px 10px 0'
-    };
+        margin: '10px'
+      },
+      titleStyle = {
+        fontSize: '13px',
+        padding: '15px 0',
+        textTransform: 'upperCase',
+        borderTop: '1px solid #e3e6eb'
+      },
+      spanStyle = {
+        display: 'inline-block',
+        margin: '10px 10px 10px 0'
+      };
     return /*#__PURE__*/React.createElement("div", {
       style: style
     }, /*#__PURE__*/React.createElement("div", {
@@ -210,7 +207,6 @@ export default class CheckBox__default extends Component {
       text: "Danger"
     }))));
   }
-
 }
 CheckBox__default.docs = {
   componentGroup: 'Form Elements',

package/es/DateTime/CalendarView.js

@@ -5,21 +5,19 @@ import { Container, Box } from '../Layout';
 import style from './DateTime.module.css';
 import { getMonthEnd } from '../utils/datetime/common';
 import DaysRow from './DaysRow';
-/* eslint css-modules/no-unused-class: [0, { markAsUsed: ['container', 'header', 'thArrowConatainer', 'thArrow', 'thMonYear', 'days', 'daysStr', 'timesection', 'timeStr', 'dropDownContainer', 'dropDown', 'footer', 'space'] }] */
 
+/* eslint css-modules/no-unused-class: [0, { markAsUsed: ['container', 'header', 'thArrowConatainer', 'thArrow', 'thMonYear', 'days', 'daysStr', 'timesection', 'timeStr', 'dropDownContainer', 'dropDown', 'footer', 'space'] }] */
 export default class CalendarView extends React.PureComponent {
   constructor(props) {
     super(props);
     this.handleSelect = this.handleSelect.bind(this);
   }
-
   handleSelect(day, month, year, e) {
     const {
       onSelect
     } = this.props;
     onSelect(day, month, year, e);
   }
-
   render() {
     const {
       date,
@@ -36,7 +34,9 @@ export default class CalendarView extends React.PureComponent {
     const userSeeMonth = userSeeDate.getMonth();
     const monthEnd = getMonthEnd(month, year);
     const lastMonth = 11;
-    const firstMonth = 0; // let noOfRow = 5;
+    const firstMonth = 0;
+
+    // let noOfRow = 5;
     // if (
     //   (monthEnd === 31 && userSeeDay >= 6) ||
     //   (monthEnd === 30 && userSeeDay === 7)
@@ -49,28 +49,22 @@ export default class CalendarView extends React.PureComponent {
     let incremday = 1;
     let incremleti = 1;
     let isToday = false;
-
     const rows = (() => {
       const rowArr = [];
-
       for (let j = 1; j <= 6; j++) {
         const dayArr = [];
         let output = null;
-
         for (let i = 1; i < 8; i++) {
           let tdclass = `${style.datesStr} ${style.grid}`;
-
           if (i === 1) {
             tdclass += ` ${style.sunday}`;
           }
-
           if (incremleti >= userSeeDay && incremday <= monthEnd) {
             if (incremday === parseInt(date) && parseInt(month) === userSeeMonth && parseInt(year) === userSeeYear) {
               isToday = true;
             } else {
               isToday = false;
             }
-
             output = /*#__PURE__*/React.createElement(Span, {
               i: i,
               isActive: isToday,
@@ -85,12 +79,10 @@ export default class CalendarView extends React.PureComponent {
           } else if (incremleti < userSeeDay) {
             let prevMonth = userSeeMonth - 1;
             let prevYear = userSeeYear;
-
             if (userSeeMonth === firstMonth) {
               prevMonth = lastMonth;
               prevYear = userSeeYear - 1;
             }
-
             const prevMonthEnd = getMonthEnd(prevMonth, prevYear);
             const prevDate = prevMonthEnd - (userSeeDay - 1) + incremleti;
             isToday = prevDate === parseInt(date) && parseInt(month) === prevMonth && parseInt(year) === prevYear ? true : false;
@@ -107,12 +99,10 @@ export default class CalendarView extends React.PureComponent {
           } else if (incremleti > monthEnd) {
             let nextMonth = userSeeMonth + 1;
             let nextYear = userSeeYear;
-
             if (userSeeMonth === lastMonth) {
               nextMonth = firstMonth;
               nextYear = userSeeYear + 1;
             }
-
             const nextDate = incremleti - (userSeeDay - 1) - monthEnd;
             isToday = nextDate === parseInt(date) && parseInt(month) === nextMonth && parseInt(year) === nextYear ? true : false;
             output = /*#__PURE__*/React.createElement(Span, {
@@ -131,13 +121,10 @@ export default class CalendarView extends React.PureComponent {
               className: `${style.grid}`
             });
           }
-
           incremleti++;
           dayArr.push(output);
         }
         /* eslint-disable react/forbid-component-props */
-
-
         rowArr.push( /*#__PURE__*/React.createElement(Container, {
           key: j,
           alignBox: "row",
@@ -146,10 +133,8 @@ export default class CalendarView extends React.PureComponent {
           className: style.dateRow
         }, dayArr));
       }
-
       return rowArr;
     })();
-
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DaysRow, {
       dayNames: dayNames,
       dayNamesShort: dayNamesShort
@@ -158,7 +143,6 @@ export default class CalendarView extends React.PureComponent {
       className: `${style.dateContainer} ${needBorder ? style.separator : ''}`
     }, rows));
   }
-
 }
 CalendarView.propTypes = CalendarView_propTypes;
 CalendarView.defaultProps = CalendarView_defaultProps;
@@ -167,7 +151,6 @@ export class Span extends React.PureComponent {
     super(props);
     this.handleSelectChild = this.handleSelectChild.bind(this);
   }
-
   handleSelectChild(e) {
     const {
       handleSelect,
@@ -177,7 +160,6 @@ export class Span extends React.PureComponent {
     } = this.props;
     handleSelect(incremday, userSeeMonth, userSeeYear, e);
   }
-
   render() {
     const {
       tdclass,
@@ -193,7 +175,6 @@ export class Span extends React.PureComponent {
       onClick: this.handleSelectChild
     }, incremday);
   }
-
 }
 Span.propTypes = Span_propTypes;
 Span.defaultProps = Span_defaultProps;