@zohodesk/components 1.0.0-temp-188 → 1.0.0-temp-189

package/es/CheckBox/CheckBox.module.css

@@ -9,76 +9,66 @@
   --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';
   /* css:theme-validation:ignore */
   border-radius: 2px;
   background-color: var(--checkbox_bg_color);
 }
-
 .filled {
   --checkbox_bg_color: inherit;
 }
-
 .medium {
-  width: 16px;
-  height: 16px;
+  width: var(--zd_size16) ;
+  height: var(--zd_size16) ;
 }
-
 .small {
-  width: 13px;
-  height: 13px;
+  width: var(--zd_size13) ;
+  height: var(--zd_size13) ;
 }
 
 .checkbox {
   position: relative;
-  font-size: 0;
+  font-size: 0 ;
   display: block;
 }
 .tick {
   position: absolute;
-  left: 0;
+  left: 0 ;
 }
 .mediumtick {
-  top: -2px;
-  height: 20px;
-  width: 20px;
+  top: calc( var(--zd_size2) * -1 ) ;
+  height: var(--zd_size20) ;
+  width: var(--zd_size20) ;
 }
 .smalltick {
-  top: -3px;
-  height: 18px;
-  width: 18px;
-  left: -1px;
+  top: calc( var(--zd_size3) * -1 ) ;
+  height: var(--zd_size18) ;
+  width: var(--zd_size18) ;
+  left: calc( var(--zd_size1) * -1 ) ;
 }
 
 .checkedtickPath {
@@ -92,50 +82,39 @@
 [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: 6px;
+  margin-left: var(--zd_size6) ;
 }
-
 [dir=rtl] .text {
-  margin-right: 6px;
+  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);
 }
@@ -145,25 +124,19 @@
   /* css:theme-validation:ignore */
   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);
 }
@@ -171,7 +144,6 @@
   0% {
     stroke-dashoffset: 40;
   }
-
   100% {
     stroke-dashoffset: 0;
   }
@@ -181,8 +153,7 @@
   0% {
     transform: scaleX(0);
   }
-
   100% {
     transform: scaleX(1);
   }
-}
+}

package/es/DateTime/CalendarView.js

@@ -5,19 +5,21 @@ 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'] }] */
+
 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,
@@ -37,9 +39,7 @@ 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)
@@ -53,16 +53,21 @@ export default class CalendarView extends React.PureComponent {
     let incremleti = 1;
     let isSelectedDay = false;
     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 (parseInt(date) === incremday && parseInt(month) === userSeeMonth && parseInt(year) === userSeeYear) {
               isSelectedDay = true;
@@ -73,6 +78,7 @@ export default class CalendarView extends React.PureComponent {
               isSelectedDay = false;
               isToday = false;
             }
+
             output = /*#__PURE__*/React.createElement(Span, {
               i: i,
               isActive: isSelectedDay,
@@ -88,54 +94,51 @@ 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;
+            const prevDate = prevMonthEnd - (userSeeDay - 1) + incremleti; // isSelectedDay =
 
-            // isSelectedDay =
-            prevDate === parseInt(date) && parseInt(month) === prevMonth && parseInt(year) === prevYear ? true : false;
-            // isToday = prevDate === incremday && todayMonth === userSeeMonth && todayYear === userSeeYear ? true : false;
+            prevDate === parseInt(date) && parseInt(month) === prevMonth && parseInt(year) === prevYear ? true : false; // isToday = prevDate === incremday && todayMonth === userSeeMonth && todayYear === userSeeYear ? true : false;
 
             output = /*#__PURE__*/React.createElement(Span, {
-              i: i
-              //isActive={isSelectedDay}
+              i: i //isActive={isSelectedDay}
               ,
               tdclass: `${tdclass} ${style.invalidDate}`,
               handleSelect: this.handleSelect,
               incremday: prevDate,
               userSeeMonth: prevMonth,
               userSeeYear: prevYear,
-              dataId: isSelectedDay ? `${dataId}_dateSelected` : `${dataId}_invalidDate`
-              // isToday={isToday}
+              dataId: isSelectedDay ? `${dataId}_dateSelected` : `${dataId}_invalidDate` // isToday={isToday}
+
             });
           } 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;
 
-            // isSelectedDay =
-            nextDate === parseInt(date) && parseInt(month) === nextMonth && parseInt(year) === nextYear ? true : false;
+            const nextDate = incremleti - (userSeeDay - 1) - monthEnd; // isSelectedDay =
 
-            // isToday = nextDate === incremday && todayMonth === userSeeMonth && todayYear === userSeeYear ? true : false;
+            nextDate === parseInt(date) && parseInt(month) === nextMonth && parseInt(year) === nextYear ? true : false; // isToday = nextDate === incremday && todayMonth === userSeeMonth && todayYear === userSeeYear ? true : false;
 
             output = /*#__PURE__*/React.createElement(Span, {
-              i: i
-              // isActive={isSelectedDay}
+              i: i // isActive={isSelectedDay}
               ,
               tdclass: `${tdclass}  ${style.invalidDate}`,
               handleSelect: this.handleSelect,
               incremday: nextDate,
               userSeeMonth: nextMonth,
               userSeeYear: nextYear,
-              dataId: isSelectedDay ? `${dataId}_dateSelected` : `${dataId}_invalidDate`
-              //isToday={isToday}
+              dataId: isSelectedDay ? `${dataId}_dateSelected` : `${dataId}_invalidDate` //isToday={isToday}
+
             });
           } else {
             output = /*#__PURE__*/React.createElement(Box, {
@@ -143,10 +146,13 @@ 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",
@@ -155,8 +161,10 @@ 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,
@@ -167,6 +175,7 @@ export default class CalendarView extends React.PureComponent {
       className: `${style.dateContainer} ${needBorder ? style.separator : ''}`
     }, rows));
   }
+
 }
 CalendarView.propTypes = CalendarView_propTypes;
 CalendarView.defaultProps = CalendarView_defaultProps;
@@ -175,6 +184,7 @@ export class Span extends React.PureComponent {
     super(props);
     this.handleSelectChild = this.handleSelectChild.bind(this);
   }
+
   handleSelectChild(e) {
     const {
       handleSelect,
@@ -184,6 +194,7 @@ export class Span extends React.PureComponent {
     } = this.props;
     handleSelect(incremday, userSeeMonth, userSeeYear, e);
   }
+
   render() {
     const {
       tdclass,
@@ -201,6 +212,7 @@ export class Span extends React.PureComponent {
       "aria-label": incremday
     }, incremday);
   }
+
 }
 Span.propTypes = Span_propTypes;
 Span.defaultProps = Span_defaultProps;