@zohodesk/components 1.4.15 → 1.4.16

package/es/DateTime/DateTime.module.css

@@ -0,0 +1,249 @@
+.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;
+  text-align: center;
+  background-color: var(--zdt_datetime_header_bg);
+  border-radius: 0 0 2px 2px;
+  border-bottom: 1px solid var(--zdt_datetime_header_border);
+}
+
+.datesStr {
+  font-family: var(--zd_regular);
+}
+
+.grid {
+  width: var(--zd_size28) ;
+  height: var(--zd_size28) ;
+  line-height: 1.3846;
+  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);
+}
+
+[dir=ltr] .navigation {
+  margin-left: var(--zd_size2) ;
+}
+
+[dir=rtl] .navigation {
+  margin-right: var(--zd_size2) ;
+}
+
+.thMonYear {
+  font-size: var(--zd_font_size13) ;
+  line-height: 1.8462;
+  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 {
+  composes: dotted from '../common/common.module.css';
+  font-size: var(--zd_font_size10) ;
+  color: var(--zdt_datetime_daystr_text);
+  text-transform: uppercase;
+  composes: semibold;
+  width: var(--zd_size31) ;
+}
+
+.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 ;
+}
+
+.holiday,
+.holiday:hover,
+.invalidDate.holiday:hover {
+  color: var(--zdt_datetime_invalid_hover_text);
+}
+
+.invalidDate {
+  color: var(--zdt_datetime_invalid_text);
+}
+
+.invalidDate.holiday,.inActiveDate.holiday:hover {
+  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,
+.active:hover.today:hover {
+  color: var(--zdt_datetime_today_text);
+}
+
+.active, .active:hover, .active.today, .active:hover.today:hover {
+  background-color: var(--zdt_datetime_selected_bg);
+  border-radius: 50%;
+}
+.inActiveDate{
+color: var(--zdt_datetime_invalid_text);
+cursor: no-drop;
+}
+.inActiveDate:hover
+{
+  color: var(--zdt_datetime_invalid_text);
+}
+.inActiveDate:hover, .inActiveDate.holiday:hover{
+  background-color: var(--zdt_datetime_inactivedate_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) ;
+}
+
+.downArrow {
+  color: var(--zdt_datetime_daystr_text);
+}
+
+[dir=ltr] .downArrow {
+  margin-left: var(--zd_size2) ;
+}
+
+[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) ;
+  text-transform: uppercase;
+  color: var(--zdt_datetime_text);
+  composes: semibold;
+  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;
+  box-shadow: var(--zd_bs_dropbox_bottom);
+  background-color: var(--zdt_dropbox_default_bg);
+}

package/es/DateTime/DateTimePopupFooter.js

@@ -0,0 +1,47 @@
+/* eslint-disable react/forbid-component-props */
+
+/** ** Libraries *** */
+import React, { PureComponent } from 'react';
+import { DateTimePopupFooter_propTypes } from "./props/propTypes";
+import { DateTimePopupFooter_defaultProps } from "./props/defaultProps";
+/** ** Components *** */
+
+import { Container } from "../Layout";
+import Button from "../Button/Button";
+/** ** CSS *** */
+
+import style from "./DateTime.module.css";
+export default class DateTimePopupFooter extends PureComponent {
+  render() {
+    const {
+      submitText,
+      onSubmit,
+      cancelText,
+      onCancel,
+      dataId
+    } = this.props;
+    return /*#__PURE__*/React.createElement(Container, {
+      isCover: false,
+      align: "vertical",
+      alignBox: "row",
+      className: style.footer
+    }, /*#__PURE__*/React.createElement(Button, {
+      text: submitText,
+      size: "medium",
+      palette: "primaryFilled",
+      onClick: onSubmit,
+      dataId: `${dataId}_saveBtn`
+    }), /*#__PURE__*/React.createElement("span", {
+      className: style.space
+    }), /*#__PURE__*/React.createElement(Button, {
+      text: cancelText,
+      size: "medium",
+      palette: "secondary",
+      onClick: onCancel,
+      dataId: `${dataId}_clearBtn`
+    }));
+  }
+
+}
+DateTimePopupFooter.propTypes = DateTimePopupFooter_propTypes;
+DateTimePopupFooter.defaultProps = DateTimePopupFooter_defaultProps;

package/es/DateTime/DateTimePopupHeader.js

@@ -0,0 +1,105 @@
+/* eslint-disable react/forbid-component-props */
+
+/** ** Libraries *** */
+import React, { PureComponent } from 'react';
+import { DateTimePopupHeader_propTypes } from "./props/propTypes";
+/** ** Components *** */
+
+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,
+      type
+    } = this.props;
+    modifyCalendar(type);
+  }
+
+  render() {
+    const {
+      dataTitle,
+      children,
+      dataId,
+      className = '',
+      ariaLabel
+    } = this.props;
+    return /*#__PURE__*/React.createElement(Box, {
+      "data-title": dataTitle,
+      dataId: dataId,
+      className: `${style.thArrow} ${style.grid} ${className}`,
+      onClick: this.modifyCalendarChild,
+      "aria-label": ariaLabel,
+      tabindex: "0"
+    }, children);
+  }
+
+}
+
+export default class DateTimePopupHeader extends PureComponent {
+  render() {
+    const {
+      onOpenYearView,
+      showMonthTxt,
+      isYearView,
+      prevMonthTitleText,
+      nextMonthTitleText,
+      onModifyCalendar
+    } = this.props;
+    return /*#__PURE__*/React.createElement(Container, {
+      alignBox: "row",
+      align: "both",
+      className: style.header
+    }, /*#__PURE__*/React.createElement(Box, {
+      className: style.dateText,
+      dataId: "selectYear",
+      onClick: onOpenYearView
+    }, /*#__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, {
+      flexible: true
+    }), !isYearView ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Span, {
+      dataTitle: prevMonthTitleText,
+      dataId: "prevMonth",
+      modifyCalendar: onModifyCalendar,
+      type: "previousMonth",
+      ariaLabel: "prevMonth",
+      tabindex: "0"
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "ZD-arrowLeft3",
+      isBold: true
+    })), /*#__PURE__*/React.createElement(Span, {
+      dataTitle: nextMonthTitleText,
+      dataId: "nextMonth",
+      modifyCalendar: onModifyCalendar,
+      type: "nextMonth",
+      className: style.navigation,
+      ariaLabel: "nextMonth",
+      tabindex: "0"
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "ZD-arrowRight3",
+      isBold: true
+    }))) : null);
+  }
+
+}
+DateTimePopupHeader.propTypes = DateTimePopupHeader_propTypes;