@zohodesk/components 1.0.0-temp-168 → 1.0.0-temp-169

package/es/v1/DateTime/DateTimePopupFooter.js

@@ -0,0 +1,47 @@
+/* eslint-disable react/forbid-component-props */
+
+/** ** Libraries *** */
+import React, { PureComponent } from 'react';
+import { DateTimePopupFooter_propTypes } from '../../DateTime/props/propTypes';
+import { DateTimePopupFooter_defaultProps } from '../../DateTime/props/defaultProps';
+/** ** Components *** */
+
+import { Container } from '../Layout';
+import Button from '../Button/Button';
+/** ** CSS *** */
+
+import style from '../../DateTime/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/v1/DateTime/DateTimePopupHeader.js

@@ -0,0 +1,105 @@
+/* eslint-disable react/forbid-component-props */
+
+/** ** Libraries *** */
+import React, { PureComponent } from 'react';
+import { DateTimePopupHeader_propTypes } from '../../DateTime/props/propTypes';
+/** ** Components *** */
+
+import { Container, Box } from '../Layout';
+import { Icon } from '@zohodesk/icons';
+import Heading from '../Heading/Heading';
+/** ** CSS *** */
+
+import style from '../../DateTime/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;