@zohodesk/components 1.0.0-alpha-250 → 1.0.0-alpha-253

package/es/DateTime/DateTime.module.css

@@ -1,20 +1,24 @@
 .semibold {
   font-family: var(--zd_semibold);
 }
+
 [dir=ltr] .boxPadding {
   padding-right: var(--zd_size19);
   padding-left: var(--zd_size19);
 }
+
 [dir=rtl] .boxPadding {
   padding-left: var(--zd_size19);
   padding-right: var(--zd_size19);
 }
+
 .container {
   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);
   composes: boxPadding;
@@ -27,26 +31,32 @@
 .datesStr {
   font-family: var(--zd_regular);
 }
+
 .grid {
   width: var(--zd_size28);
   height: var(--zd_size28);
-  line-height: var(--zd_size20);
+  line-height: var(--zd_size18);
   text-align: center;
   padding: var(--zd_size4) 0;
   border-radius: 50%;
+  border: 1px solid transparent;
 }
+
 .thArrow,
 .datesStr {
   font-size: var(--zd_font_size13);
   color: var(--zdt_datetime_datestr_text);
 }
+
 .thArrow, .datesStr {
   cursor: pointer;
 }
+
 .thArrow:hover,
 .datesStr:hover {
   color: var(--zdt_datetime_datestr_text);
 }
+
 .thArrow:hover, .datesStr:hover {
   background: var(--zdt_datetime_datestr_hover_bg);
 }
@@ -58,82 +68,110 @@
 [dir=rtl] .navigation {
   margin-right: var(--zd_size2);
 }
+
 .thMonYear {
   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;
 }
+
 .separator {
   border-bottom: 1px dotted var(--zdt_datetime_separator_border);
 }
+
 .days {
   min-height: var(--zd_size36);
   composes: boxPadding;
   composes: alignBetween from '../common/common.module.css';
   padding-top: var(--zd_size7);
 }
+
 .daysStr {
   font-size: var(--zd_font_size10);
   color: var(--zdt_datetime_daystr_text);
   text-transform: uppercase;
   composes: semibold;
 }
+
 .dateRow {
   height: var(--zd_size28);
   composes: alignBetween from '../common/common.module.css';
   margin: var(--zd_size1) 0 var(--zd_size5);
 }
+
 .dateRow:last-child {
   margin-bottom: 0;
 }
+
 .sunday,
 .sunday:hover,
 .invalidDate.sunday:hover {
   color: var(--zdt_datetime_invalid_hover_text);
 }
+
 .invalidDate {
   color: var(--zdt_datetime_invalid_text);
 }
+
 .invalidDate.sunday {
   color: var(--zdt_datetime_invaliddate_text);
 }
 
-.today,
-.today:hover {
+.active,
+.active:hover,
+.active.today,
+.active:hover.today:hover {
   color: var(--zdt_datetime_today_text);
 }
 
-.today, .today:hover {
-  background-color: var(--zdt_datetime_today_bg);
+.active, .active:hover, .active.today, .active:hover.today:hover {
+  background-color: var(--zdt_datetime_selected_bg);
   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);
 }
+
 .dropDownContainer {
   padding: 0 var(--zd_size5);
 }
+
 .dropDown {
   width: var(--zd_size60);
   display: inline-block;
   position: relative;
   margin: 0 var(--zd_size4);
 }
+
 .footer {
   margin-top: var(--zd_size10);
   padding-bottom: var(--zd_size12);
 }
+
 .timesection,
 .footer {
   composes: boxPadding;
 }
+
 .space {
   display: inline-block;
   width: var(--zd_size15);
@@ -150,12 +188,15 @@
 [dir=rtl] .downArrow {
   margin-right: var(--zd_size2);
 }
+
 .dateText {
   cursor: pointer;
 }
+
 .dateText:hover .downArrow {
   color: var(--zdt_datetime_datestr_text);
 }
+
 .text {
   composes: boxPadding;
   font-size: var(--zd_font_size11);
@@ -165,21 +206,26 @@
   display: block;
   margin-top: var(--zd_size14);
 }
+
 .yearContainer {
   position: absolute;
   top: 0;
   width: 100%;
   height: 100%;
 }
+
 [dir=ltr] .yearContainer {
   left: 0;
 }
+
 [dir=rtl] .yearContainer {
   right: 0;
 }
+
 .subContainer {
   position: relative;
 }
+
 .dropBox {
   width: 100%;
   border-radius: 3px;

package/es/DateTime/DateTimePopupFooter.js

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

package/es/DateTime/DateTimePopupHeader.js

@@ -2,20 +2,19 @@
 
 /** ** Libraries *** */
 import React, { PureComponent } from 'react';
-/** ** Components *** */
 
+/** ** Components *** */
 import { Container, Box } from '../Layout';
 import Icon from '@zohodesk/icons/lib/Icon';
-/** ** CSS *** */
+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,
@@ -23,24 +22,24 @@ 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 {
@@ -59,19 +58,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
@@ -80,11 +86,12 @@ 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);
   }
-
 }