@zohodesk/components 1.0.0-test-252 → 1.0.0

package/es/DateTime/DateTime.module.css

@@ -3,24 +3,24 @@
 }
 
 [dir=ltr] .boxPadding {
-  padding-right: var(--zd_size19);
-  padding-left: var(--zd_size19);
+  padding-right: var(--zd_size19) ;
+  padding-left: var(--zd_size19) ;
 }
 
 [dir=rtl] .boxPadding {
-  padding-left: var(--zd_size19);
-  padding-right: var(--zd_size19);
+  padding-left: var(--zd_size19) ;
+  padding-right: var(--zd_size19) ;
 }
 
 .container {
-  font-size: var(--zd_font_size16);
+  font-size: var(--zd_font_size16) ;
   composes: offSelection from '../common/common.module.css';
   border-radius: 3px;
   background-color: var(--zdt_datetime_default_bg);
 }
 
 .header {
-  min-height: var(--zd_size36);
+  min-height: var(--zd_size36) ;
   composes: boxPadding;
   text-align: center;
   background-color: var(--zdt_datetime_header_bg);
@@ -33,18 +33,18 @@
 }
 
 .grid {
-  width: var(--zd_size28);
-  height: var(--zd_size28);
+  width: var(--zd_size28) ;
+  height: var(--zd_size28) ;
   line-height: var(--zd_size18);
   text-align: center;
-  padding: var(--zd_size4) 0;
+  padding: var(--zd_size4) 0 ;
   border-radius: 50%;
   border: 1px solid transparent;
 }
 
 .thArrow,
 .datesStr {
-  font-size: var(--zd_font_size13);
+  font-size: var(--zd_font_size13) ;
   color: var(--zdt_datetime_datestr_text);
 }
 
@@ -62,23 +62,24 @@
 }
 
 [dir=ltr] .navigation {
-  margin-left: var(--zd_size2);
+  margin-left: var(--zd_size2) ;
 }
 
 [dir=rtl] .navigation {
-  margin-right: var(--zd_size2);
+  margin-right: var(--zd_size2) ;
 }
 
 .thMonYear {
-  font-size: var(--zd_font_size13);
+  font-size: var(--zd_font_size13) ;
   line-height: var(--zd_size24);
   color: var(--zdt_datetime_datestr_text);
   composes: semibold;
+  display: initial
 }
 
 .dateContainer {
-  margin: 0 var(--zd_size19) 0 var(--zd_size19);
-  padding: var(--zd_size6) 0 var(--zd_size10) 0;
+  margin: 0 var(--zd_size19) 0 var(--zd_size19) ;
+  padding: var(--zd_size6) 0 var(--zd_size10) 0 ;
 }
 
 .separator {
@@ -86,27 +87,27 @@
 }
 
 .days {
-  min-height: var(--zd_size36);
+  min-height: var(--zd_size36) ;
   composes: boxPadding;
   composes: alignBetween from '../common/common.module.css';
-  padding-top: var(--zd_size7);
+  padding-top: var(--zd_size7) ;
 }
 
 .daysStr {
-  font-size: var(--zd_font_size10);
+  font-size: var(--zd_font_size10) ;
   color: var(--zdt_datetime_daystr_text);
   text-transform: uppercase;
   composes: semibold;
 }
 
 .dateRow {
-  height: var(--zd_size28);
+  height: var(--zd_size28) ;
   composes: alignBetween from '../common/common.module.css';
-  margin: var(--zd_size1) 0 var(--zd_size5);
+  margin: var(--zd_size1) 0 var(--zd_size5) ;
 }
 
 .dateRow:last-child {
-  margin-bottom: 0;
+  margin-bottom: 0 ;
 }
 
 .sunday,
@@ -123,6 +124,16 @@
   color: var(--zdt_datetime_invaliddate_text);
 }
 
+.today {
+  border: 1px solid var(--zdt_datetime_today_border);
+  border-radius: 50%;
+}
+
+.today:hover {
+  border: 1px solid var(--zdt_datetime_today_border);
+  background-color: var(--zdt_datetime_datestr_hover_bg);
+}
+
 .active,
 .active:hover,
 .active.today,
@@ -135,35 +146,27 @@
   border-radius: 50%;
 }
 
-.today {
-  border: 1px solid var(--zdt_datetime_today_border);
-  border-radius: 50%;
-}
 
-.today:hover {
-  border: 1px solid var(--zdt_datetime_today_border);
-  background-color: var(--zdt_datetime_datestr_hover_bg);
-}
 
 .timesection {
-  padding-top: var(--zd_size5);
-  padding-bottom: var(--zd_size10);
+  padding-top: var(--zd_size5) ;
+  padding-bottom: var(--zd_size10) ;
 }
 
 .dropDownContainer {
-  padding: 0 var(--zd_size5);
+  padding: 0 var(--zd_size5) ;
 }
 
 .dropDown {
-  width: var(--zd_size60);
+  width: var(--zd_size60) ;
   display: inline-block;
   position: relative;
-  margin: 0 var(--zd_size4);
+  margin: 0 var(--zd_size4) ;
 }
 
 .footer {
-  margin-top: var(--zd_size10);
-  padding-bottom: var(--zd_size12);
+  margin-top: var(--zd_size10) ;
+  padding-bottom: var(--zd_size12) ;
 }
 
 .timesection,
@@ -173,7 +176,7 @@
 
 .space {
   display: inline-block;
-  width: var(--zd_size15);
+  width: var(--zd_size15) ;
 }
 
 .downArrow {
@@ -181,11 +184,11 @@
 }
 
 [dir=ltr] .downArrow {
-  margin-left: var(--zd_size2);
+  margin-left: var(--zd_size2) ;
 }
 
 [dir=rtl] .downArrow {
-  margin-right: var(--zd_size2);
+  margin-right: var(--zd_size2) ;
 }
 
 .dateText {
@@ -198,27 +201,27 @@
 
 .text {
   composes: boxPadding;
-  font-size: var(--zd_font_size11);
+  font-size: var(--zd_font_size11) ;
   text-transform: uppercase;
   color: var(--zdt_datetime_text);
   composes: semibold;
   display: block;
-  margin-top: var(--zd_size14);
+  margin-top: var(--zd_size14) ;
 }
 
 .yearContainer {
   position: absolute;
-  top: 0;
-  width: 100%;
-  height: 100%;
+  top: 0 ;
+  width: 100% ;
+  height: 100% ;
 }
 
 [dir=ltr] .yearContainer {
-  left: 0;
+  left: 0 ;
 }
 
 [dir=rtl] .yearContainer {
-  right: 0;
+  right: 0 ;
 }
 
 .subContainer {
@@ -226,8 +229,8 @@
 }
 
 .dropBox {
-  width: 100%;
+  width: 100% ;
   border-radius: 3px;
-  box-shadow: 0 3px 30px var(--zdt_dropbox_default_box_shadow);
+  box-shadow: var(--zd_bs_dropbox_bottom);
   background-color: var(--zdt_dropbox_default_bg);
 }

package/es/DateTime/DateTimePopupFooter.js

@@ -1,12 +1,13 @@
 /* eslint-disable react/forbid-component-props */
+
 /** ** Libraries *** */
 import React, { PureComponent } from 'react';
-
 /** ** Components *** */
+
 import { Container } from '../Layout';
 import Button from '../Button/Button';
-
 /** ** CSS *** */
+
 import style from './DateTime.module.css';
 export default class DateTimePopupFooter extends PureComponent {
   render() {
@@ -38,4 +39,5 @@ export default class DateTimePopupFooter extends PureComponent {
       dataId: `${dataId}_clearBtn`
     }));
   }
+
 }

package/es/DateTime/DateTimePopupHeader.js

@@ -2,18 +2,21 @@
 
 /** ** Libraries *** */
 import React, { PureComponent } from 'react';
-
 /** ** Components *** */
-import { Container, Box } from '../Layout';
-import Icon from '@zohodesk/icons/lib/Icon';
 
+import { Container, Box } from '../Layout';
+import { Icon } from '@zohodesk/icons';
+import Heading from '../Heading/Heading';
 /** ** CSS *** */
+
 import style from './DateTime.module.css';
+
 class Span extends React.PureComponent {
   constructor(props) {
     super(props);
     this.modifyCalendarChild = this.modifyCalendarChild.bind(this);
   }
+
   modifyCalendarChild() {
     const {
       modifyCalendar,
@@ -21,21 +24,27 @@ class Span extends React.PureComponent {
     } = this.props;
     modifyCalendar(type);
   }
+
   render() {
     const {
       dataTitle,
       children,
       dataId,
-      className = ''
+      className = '',
+      ariaLabel
     } = this.props;
     return /*#__PURE__*/React.createElement(Box, {
       "data-title": dataTitle,
       dataId: dataId,
       className: `${style.thArrow} ${style.grid} ${className}`,
-      onClick: this.modifyCalendarChild
+      onClick: this.modifyCalendarChild,
+      "aria-label": ariaLabel,
+      tabindex: "0"
     }, children);
   }
+
 }
+
 export default class DateTimePopupHeader extends PureComponent {
   render() {
     const {
@@ -54,19 +63,26 @@ export default class DateTimePopupHeader extends PureComponent {
       className: style.dateText,
       dataId: "selectYear",
       onClick: onOpenYearView
-    }, /*#__PURE__*/React.createElement("span", {
-      className: style.thMonYear
-    }, showMonthTxt), /*#__PURE__*/React.createElement(Icon, {
+    }, /*#__PURE__*/React.createElement(Heading, {
+      className: style.thMonYear,
+      title: showMonthTxt,
+      tagName: "h2",
+      a11y: {
+        tabindex: '0'
+      }
+    }), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-GN-dropdown",
       size: "12",
       iconClass: style.downArrow
-    })), /*#__PURE__*/React.createElement(Box, {
+    }))), /*#__PURE__*/React.createElement(Box, {
       flexible: true
     }), !isYearView ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Span, {
       dataTitle: prevMonthTitleText,
       dataId: "prevMonth",
       modifyCalendar: onModifyCalendar,
-      type: "previousMonth"
+      type: "previousMonth",
+      ariaLabel: "prevMonth",
+      tabindex: "0"
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-arrowLeft3",
       isBold: true
@@ -75,10 +91,13 @@ export default class DateTimePopupHeader extends PureComponent {
       dataId: "nextMonth",
       modifyCalendar: onModifyCalendar,
       type: "nextMonth",
-      className: style.navigation
+      className: style.navigation,
+      ariaLabel: "nextMonth",
+      tabindex: "0"
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-arrowRight3",
       isBold: true
     }))) : null);
   }
+
 }