@dhis2-ui/calendar 8.8.0

package/build/es/calendar/calendar-table.js

@@ -0,0 +1,40 @@
+import _JSXStyle from "styled-jsx/style";
+import { spacers } from '@dhis2/ui-constants';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { CalendarTableCell } from './calendar-table-cell.js';
+import { CalendarTableDaysHeader } from './calendar-table-days-header.js';
+export const CalendarTable = _ref => {
+  let {
+    weekDayLabels,
+    calendarWeekDays,
+    width,
+    cellSize
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["452536960", [spacers.dp4, spacers.dp4]]]) + " " + "calendar-table-wrapper"
+  }, /*#__PURE__*/React.createElement("table", {
+    className: _JSXStyle.dynamic([["452536960", [spacers.dp4, spacers.dp4]]]) + " " + "calendar-table"
+  }, /*#__PURE__*/React.createElement(CalendarTableDaysHeader, {
+    weekDayLabels: weekDayLabels
+  }), /*#__PURE__*/React.createElement("tbody", {
+    className: _JSXStyle.dynamic([["452536960", [spacers.dp4, spacers.dp4]]])
+  }, calendarWeekDays.map((week, weekIndex) => /*#__PURE__*/React.createElement("tr", {
+    key: "week-".concat(weekIndex + 1),
+    className: _JSXStyle.dynamic([["452536960", [spacers.dp4, spacers.dp4]]])
+  }, week.map(day => /*#__PURE__*/React.createElement(CalendarTableCell, {
+    day: day,
+    key: day === null || day === void 0 ? void 0 : day.calendarDate,
+    cellSize: cellSize,
+    width: width
+  })))))), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "452536960",
+    dynamic: [spacers.dp4, spacers.dp4]
+  }, [".calendar-table.__jsx-style-dynamic-selector{border:none;border-collapse:collapse;width:100%;margin-block:".concat(spacers.dp4, ";}"), ".calendar-table.__jsx-style-dynamic-selector tr.__jsx-style-dynamic-selector,.calendar-table.__jsx-style-dynamic-selector td.__jsx-style-dynamic-selector{border:none;}", ".calendar-table-wrapper.__jsx-style-dynamic-selector{padding-inline:".concat(spacers.dp4, ";}")]));
+};
+CalendarTable.propTypes = {
+  calendarWeekDays: PropTypes.arrayOf(PropTypes.string),
+  cellSize: PropTypes.string,
+  weekDayLabels: PropTypes.arrayOf(PropTypes.string),
+  width: PropTypes.string
+};

package/build/es/calendar/index.js

@@ -0,0 +1,71 @@
+import _JSXStyle from "styled-jsx/style";
+import { useDatePicker, useResolvedDirection } from '@dhis2/multi-calendar-dates';
+import { colors } from '@dhis2/ui-constants';
+import React, { useState } from 'react';
+import { CalendarProps } from './calendar-prop-types.js';
+import { CalendarTable } from './calendar-table.js';
+import { NavigationContainer } from './navigation-container.js';
+export const Calendar = _ref => {
+  let {
+    onDateSelect,
+    calendar,
+    date,
+    dir,
+    locale,
+    numberingSystem,
+    weekDayFormat,
+    timeZone,
+    width,
+    cellSize
+  } = _ref;
+  const wrapperBorderColor = colors.grey300;
+  const backgroundColor = 'none';
+  const [selectedDateString, setSelectedDateString] = useState(date);
+  const languageDirection = useResolvedDirection(dir, locale);
+  const options = {
+    locale,
+    calendar,
+    timeZone,
+    numberingSystem,
+    weekDayFormat
+  };
+  const pickerOptions = useDatePicker({
+    onDateSelect: result => {
+      const {
+        calendarDateString
+      } = result;
+      setSelectedDateString(calendarDateString);
+      onDateSelect(result);
+    },
+    date: selectedDateString,
+    options
+  });
+  const {
+    calendarWeekDays,
+    weekDayLabels
+  } = pickerOptions;
+  return /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["2823859047", [backgroundColor, wrapperBorderColor, width]]])
+  }, /*#__PURE__*/React.createElement("div", {
+    dir: languageDirection,
+    "data-test": "calendar",
+    className: _JSXStyle.dynamic([["2823859047", [backgroundColor, wrapperBorderColor, width]]]) + " " + "calendar-wrapper"
+  }, /*#__PURE__*/React.createElement(NavigationContainer, {
+    pickerOptions: pickerOptions,
+    languageDirection: languageDirection
+  }), /*#__PURE__*/React.createElement(CalendarTable, {
+    calendarWeekDays: calendarWeekDays,
+    weekDayLabels: weekDayLabels,
+    cellSize: cellSize,
+    width: width
+  })), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "2823859047",
+    dynamic: [backgroundColor, wrapperBorderColor, width]
+  }, [".calendar-wrapper.__jsx-style-dynamic-selector{font-family:Roboto,sans-serif;font-weight:400;font-size:14px;background-color:".concat(backgroundColor, ";display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;border:1px solid ").concat(wrapperBorderColor, ";border-radius:3px;min-width:").concat(width, ";width:-webkit-max-content;width:-moz-max-content;width:max-content;box-shadow:0px 4px 6px -2px #2129340d;box-shadow:0px 10px 15px -3px #2129341a;}")]));
+};
+Calendar.defaultProps = {
+  cellSize: '32px',
+  width: '240px',
+  weekDayFormat: 'narrow'
+};
+Calendar.propTypes = CalendarProps;

package/build/es/calendar/navigation-container.js

@@ -0,0 +1,116 @@
+import _JSXStyle from "styled-jsx/style";
+import { colors, spacers } from '@dhis2/ui-constants';
+import { IconChevronLeft16, IconChevronRight16 } from '@dhis2/ui-icons';
+import PropTypes from 'prop-types';
+import React from 'react';
+import i18n from '../locales/index.js';
+const chevronColor = colors.grey600;
+const wrapperBorderColor = colors.grey300;
+const headerBackground = colors.grey050;
+export const NavigationContainer = _ref => {
+  let {
+    languageDirection,
+    pickerOptions
+  } = _ref;
+  const PreviousIcon = languageDirection === 'ltr' ? IconChevronLeft16 : IconChevronRight16;
+  const NextIcon = languageDirection === 'ltr' ? IconChevronRight16 : IconChevronLeft16;
+  const {
+    currMonth,
+    currYear,
+    nextMonth,
+    nextYear,
+    prevMonth,
+    prevYear
+  } = pickerOptions;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["4112940194", [spacers.dp4, colors.grey200, spacers.dp36, spacers.dp8, spacers.dp4, wrapperBorderColor, headerBackground]]]) + " " + "navigation-container"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["4112940194", [spacers.dp4, colors.grey200, spacers.dp36, spacers.dp8, spacers.dp4, wrapperBorderColor, headerBackground]]]) + " " + "month"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["4112940194", [spacers.dp4, colors.grey200, spacers.dp36, spacers.dp8, spacers.dp4, wrapperBorderColor, headerBackground]]]) + " " + "prev"
+  }, /*#__PURE__*/React.createElement("button", {
+    onClick: prevMonth.navigateTo,
+    name: "previous-month",
+    "data-test": "calendar-previous-month",
+    "aria-label": "".concat(i18n.t("Go to ".concat(prevMonth.label))),
+    type: "button",
+    className: _JSXStyle.dynamic([["4112940194", [spacers.dp4, colors.grey200, spacers.dp36, spacers.dp8, spacers.dp4, wrapperBorderColor, headerBackground]]])
+  }, /*#__PURE__*/React.createElement(PreviousIcon, {
+    color: chevronColor,
+    className: _JSXStyle.dynamic([["4112940194", [spacers.dp4, colors.grey200, spacers.dp36, spacers.dp8, spacers.dp4, wrapperBorderColor, headerBackground]]])
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["4112940194", [spacers.dp4, colors.grey200, spacers.dp36, spacers.dp8, spacers.dp4, wrapperBorderColor, headerBackground]]]) + " " + "curr"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: _JSXStyle.dynamic([["4112940194", [spacers.dp4, colors.grey200, spacers.dp36, spacers.dp8, spacers.dp4, wrapperBorderColor, headerBackground]]]) + " " + "label"
+  }, currMonth.label)), /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["4112940194", [spacers.dp4, colors.grey200, spacers.dp36, spacers.dp8, spacers.dp4, wrapperBorderColor, headerBackground]]]) + " " + "next"
+  }, /*#__PURE__*/React.createElement("button", {
+    onClick: nextMonth.navigateTo,
+    "data-test": "calendar-next-month",
+    name: "next-month",
+    "aria-label": "".concat(i18n.t("Go to ".concat(nextMonth.label))),
+    type: "button",
+    className: _JSXStyle.dynamic([["4112940194", [spacers.dp4, colors.grey200, spacers.dp36, spacers.dp8, spacers.dp4, wrapperBorderColor, headerBackground]]])
+  }, /*#__PURE__*/React.createElement(NextIcon, {
+    color: chevronColor,
+    className: _JSXStyle.dynamic([["4112940194", [spacers.dp4, colors.grey200, spacers.dp36, spacers.dp8, spacers.dp4, wrapperBorderColor, headerBackground]]])
+  })))), /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["4112940194", [spacers.dp4, colors.grey200, spacers.dp36, spacers.dp8, spacers.dp4, wrapperBorderColor, headerBackground]]]) + " " + "year"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["4112940194", [spacers.dp4, colors.grey200, spacers.dp36, spacers.dp8, spacers.dp4, wrapperBorderColor, headerBackground]]]) + " " + "prev"
+  }, /*#__PURE__*/React.createElement("button", {
+    onClick: prevYear.navigateTo,
+    name: "previous-year",
+    "aria-label": "".concat(i18n.t('Go to previous year')),
+    type: "button",
+    className: _JSXStyle.dynamic([["4112940194", [spacers.dp4, colors.grey200, spacers.dp36, spacers.dp8, spacers.dp4, wrapperBorderColor, headerBackground]]])
+  }, /*#__PURE__*/React.createElement(PreviousIcon, {
+    color: chevronColor,
+    className: _JSXStyle.dynamic([["4112940194", [spacers.dp4, colors.grey200, spacers.dp36, spacers.dp8, spacers.dp4, wrapperBorderColor, headerBackground]]])
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["4112940194", [spacers.dp4, colors.grey200, spacers.dp36, spacers.dp8, spacers.dp4, wrapperBorderColor, headerBackground]]]) + " " + "curr"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: _JSXStyle.dynamic([["4112940194", [spacers.dp4, colors.grey200, spacers.dp36, spacers.dp8, spacers.dp4, wrapperBorderColor, headerBackground]]]) + " " + "label"
+  }, currYear.label)), /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["4112940194", [spacers.dp4, colors.grey200, spacers.dp36, spacers.dp8, spacers.dp4, wrapperBorderColor, headerBackground]]]) + " " + "next"
+  }, /*#__PURE__*/React.createElement("button", {
+    onClick: nextYear.navigateTo,
+    name: "next-year",
+    "aria-label": "".concat(i18n.t('Go to next year')),
+    type: "button",
+    className: _JSXStyle.dynamic([["4112940194", [spacers.dp4, colors.grey200, spacers.dp36, spacers.dp8, spacers.dp4, wrapperBorderColor, headerBackground]]])
+  }, /*#__PURE__*/React.createElement(NextIcon, {
+    color: chevronColor,
+    className: _JSXStyle.dynamic([["4112940194", [spacers.dp4, colors.grey200, spacers.dp36, spacers.dp8, spacers.dp4, wrapperBorderColor, headerBackground]]])
+  }))))), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "4112940194",
+    dynamic: [spacers.dp4, colors.grey200, spacers.dp36, spacers.dp8, spacers.dp4, wrapperBorderColor, headerBackground]
+  }, ["button.__jsx-style-dynamic-selector{background:none;border:0;}", ".month.__jsx-style-dynamic-selector,.year.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}", ".month.__jsx-style-dynamic-selector .curr.__jsx-style-dynamic-selector,.year.__jsx-style-dynamic-selector .curr.__jsx-style-dynamic-selector{-webkit-flex:2;-ms-flex:2;flex:2;white-space:nowrap;}", ".prev.__jsx-style-dynamic-selector,.next.__jsx-style-dynamic-selector{-webkit-flex:1;-ms-flex:1;flex:1;text-align:center;}", ".prev.__jsx-style-dynamic-selector button.__jsx-style-dynamic-selector,.next.__jsx-style-dynamic-selector button.__jsx-style-dynamic-selector{padding:".concat(spacers.dp4, ";}"), ".prev.__jsx-style-dynamic-selector:hover button.__jsx-style-dynamic-selector,.next.__jsx-style-dynamic-selector:hover button.__jsx-style-dynamic-selector{background-color:".concat(colors.grey200, ";cursor:pointer;}"), ".label.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;padding:4px 8px;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;min-height:16px;}", ".navigation-container.__jsx-style-dynamic-selector{height:".concat(spacers.dp36, ";gap:").concat(spacers.dp8, ";padding:").concat(spacers.dp4, ";display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;border-bottom:1px solid ").concat(wrapperBorderColor, ";background-color:").concat(headerBackground, ";font-size:1.08em;}")]));
+};
+NavigationContainer.propTypes = {
+  languageDirection: PropTypes.oneOf(['ltr', 'rtl']),
+  pickerOptions: PropTypes.shape({
+    currMonth: PropTypes.shape({
+      label: PropTypes.string
+    }),
+    currYear: PropTypes.shape({
+      label: PropTypes.string
+    }),
+    nextMonth: PropTypes.shape({
+      label: PropTypes.string,
+      navigateTo: PropTypes.func
+    }),
+    nextYear: PropTypes.shape({
+      label: PropTypes.string,
+      navigateTo: PropTypes.func
+    }),
+    prevMonth: PropTypes.shape({
+      label: PropTypes.string,
+      navigateTo: PropTypes.func
+    }),
+    prevYear: PropTypes.shape({
+      label: PropTypes.string,
+      navigateTo: PropTypes.func
+    })
+  })
+};

package/build/es/calendar-input/index.js

@@ -0,0 +1,95 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import { Card } from '@dhis2-ui/card';
+import { InputField, InputFieldProps } from '@dhis2-ui/input';
+import { Layer } from '@dhis2-ui/layer';
+import { Popper } from '@dhis2-ui/popper';
+import { getNowInCalendar } from '@dhis2/multi-calendar-dates';
+import React, { useRef, useState } from 'react';
+import { CalendarProps } from '../calendar/calendar-prop-types.js';
+import { Calendar } from '../calendar/index.js';
+
+const padWithZeroes = function (number) {
+  let count = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 2;
+  return String(number).padStart(count, '0');
+};
+
+const offsetModifier = {
+  name: 'offset',
+  options: {
+    offset: [0, 2]
+  }
+};
+export const CalendarInput = function () {
+  let {
+    onDateSelect,
+    calendar,
+    date,
+    dir,
+    locale,
+    numberingSystem,
+    weekDayFormat,
+    timeZone,
+    width,
+    cellSize,
+    ...rest
+  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  const ref = useRef();
+  const [open, setOpen] = useState(false);
+  const currentDate = getNowInCalendar(calendar, timeZone);
+  const initialDate = date || "".concat(currentDate.eraYear || currentDate.year, "-").concat(padWithZeroes(currentDate.month), "-").concat(padWithZeroes(currentDate.day));
+  const [value, setValue] = useState(initialDate);
+  const calendarProps = React.useMemo(() => {
+    const onDateSelectWrapper = selectedDate => {
+      const {
+        calendarDateString
+      } = selectedDate;
+      setValue(calendarDateString);
+      setOpen(false);
+      onDateSelect === null || onDateSelect === void 0 ? void 0 : onDateSelect(selectedDate);
+    };
+
+    return {
+      onDateSelect: onDateSelectWrapper,
+      calendar,
+      date,
+      dir,
+      locale,
+      numberingSystem,
+      weekDayFormat,
+      timeZone,
+      width,
+      cellSize
+    };
+  }, [calendar, cellSize, date, dir, locale, numberingSystem, onDateSelect, timeZone, weekDayFormat, width]);
+
+  const onFocus = () => {
+    setOpen(true);
+  };
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    ref: ref
+  }, /*#__PURE__*/React.createElement(InputField, _extends({
+    label: "Pick a date"
+  }, rest, {
+    type: "text",
+    onFocus: onFocus,
+    value: value
+  }))), open && /*#__PURE__*/React.createElement(Layer, {
+    onBackdropClick: () => {
+      setOpen(false);
+    }
+  }, /*#__PURE__*/React.createElement(Popper, {
+    reference: ref,
+    placement: "bottom-start",
+    modifiers: [offsetModifier]
+  }, /*#__PURE__*/React.createElement(Card, null, /*#__PURE__*/React.createElement(Calendar, _extends({}, calendarProps, {
+    date: value
+  }))))));
+};
+CalendarInput.defaultProps = {
+  dataTest: 'dhis2-uiwidgets-calendar-inputfield'
+};
+CalendarInput.propTypes = { ...CalendarProps,
+  ...InputFieldProps
+};

package/build/es/features/supports_ethiopic_calendar/supports_ethiopic_calendar.js

@@ -0,0 +1,36 @@
+import { Given, Then, And } from 'cypress-cucumber-preprocessor/steps';
+Given('an Ethiopic calendar is rendered in {word}', language => {
+  cy.visitStory('CalendarInputTesting', "Ethiopic With ".concat(language));
+  cy.get('[data-test="dhis2-uiwidgets-calendar-inputfield"]').click();
+  cy.get('[data-test=calendar]').should('be.visible');
+});
+Then('days should be rendered in "{word}"', language => {
+  const days = language === 'amharic' ? ['ሰኞ', 'ማክሰ', 'ረቡዕ', 'ሐሙስ', 'ዓርብ', 'ቅዳሜ', 'እሑድ'] : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
+  days.forEach(day => {
+    cy.contains(day).should('be.visible');
+  });
+});
+And('months should be rendered in "{word}" with navigation', language => {
+  const months = language === 'amharic' ? {
+    current: 'ጥቅምት',
+    previous: 'መስከረም',
+    next: 'ኅዳር'
+  } : {
+    current: 'Tekemt',
+    previous: 'Meskerem',
+    next: 'Hedar'
+  };
+  cy.contains(months.current).should('be.visible');
+  cy.get('[data-test="calendar-next-month"]').click();
+  cy.contains(months.next).should('be.visible');
+  cy.get('[data-test="calendar-previous-month"]').click();
+  cy.get('[data-test="calendar-previous-month"]').click();
+  cy.contains(months.previous).should('be.visible');
+});
+Then('we should be able to select a day', () => {
+  const date = '2014-02-03';
+  cy.get("[data-test=\"".concat(date, "\"]")).click();
+  cy.get('[data-test="dhis2-uiwidgets-calendar-inputfield"] input').should('have.value', date);
+  cy.get('[data-test="storybook-calendar-result"]').should('have.text', date);
+  cy.get('[data-test="storybook-calendar-result-iso"]').should('have.text', '13 October 2021');
+});

package/build/es/features/supports_ethiopic_calendar.feature

@@ -0,0 +1,19 @@
+Feature: The Calendar renders in the Ethiopic calendar system
+
+    Scenario: Display an Ethiopic calendar in Amharic
+        Given an Ethiopic calendar is rendered in "amharic"
+        Then days should be rendered in "amharic"
+        And months should be rendered in "amharic" with navigation
+
+    Scenario: Select a day in the Ethiopic calendar in Amharic
+        Given an Ethiopic calendar is rendered in "amharic"
+        Then we should be able to select a day
+
+    Scenario: Display an Ethiopic calendar in English
+        Given an Ethiopic calendar is rendered in "english"
+        Then days should be rendered in "english"
+        And months should be rendered in "english" with navigation
+
+    Scenario: Select a day in the Ethiopic calendar in English
+        Given an Ethiopic calendar is rendered in English
+        Then we should be able to select a day

package/build/es/features/supports_gregorian_calendar/supports_gregorian_calendar.js

@@ -0,0 +1,36 @@
+import { Given, Then, And } from 'cypress-cucumber-preprocessor/steps';
+Given('a Gregorian calendar is rendered in {word}', language => {
+  cy.visitStory('CalendarInputTesting', "Gregorian With ".concat(language));
+  cy.get('[data-test="dhis2-uiwidgets-calendar-inputfield"]').click();
+  cy.get('[data-test=calendar]').should('be.visible');
+});
+Then('days should be rendered in "{word}"', language => {
+  const days = language === 'arabic' ? ['الاثنين', 'الثلاثاء', 'الأربعاء', 'الخميس', 'الجمعة', 'السبت', 'الأحد'] : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
+  days.forEach(day => {
+    cy.contains(day).should('be.visible');
+  });
+});
+And('months should be rendered in "{word}" with navigation', language => {
+  const months = language === 'english' ? {
+    current: 'October',
+    previous: 'September',
+    next: 'November'
+  } : {
+    current: 'أكتوبر',
+    previous: 'سبتمبر',
+    next: 'نوفمبر'
+  };
+  cy.contains(months.current).should('be.visible');
+  cy.get('[data-test="calendar-next-month"]').click();
+  cy.contains(months.next).should('be.visible');
+  cy.get('[data-test="calendar-previous-month"]').click();
+  cy.get('[data-test="calendar-previous-month"]').click();
+  cy.contains(months.previous).should('be.visible');
+});
+Then('we should be able to select a day', () => {
+  const date = '2021-10-13';
+  cy.get("[data-test=\"".concat(date, "\"]")).click();
+  cy.get('[data-test="dhis2-uiwidgets-calendar-inputfield"] input').should('have.value', date);
+  cy.get('[data-test="storybook-calendar-result"]').should('have.text', date);
+  cy.get('[data-test="storybook-calendar-result-iso"]').should('have.text', '13 October 2021');
+});

package/build/es/features/supports_gregorian_calendar.feature

@@ -0,0 +1,19 @@
+Feature: The Calendar renders in the Gregorian calendar system
+
+    Scenario: Display a Gregorian calendar in arabic
+        Given a Gregorian calendar is rendered in "arabic"
+        Then days should be rendered in "arabic"
+        And months should be rendered in "arabic" with navigation
+
+    Scenario: Select a day in the Gregorian calendar in arabic
+        Given a Gregorian calendar is rendered in "arabic"
+        Then we should be able to select a day
+
+    Scenario: Display a Gregorian calendar in English
+        Given a Gregorian calendar is rendered in "english"
+        Then days should be rendered in "english"
+        And months should be rendered in "english" with navigation
+
+    Scenario: Select a day in the Gregorian calendar in English
+        Given a Gregorian calendar is rendered in English
+        Then we should be able to select a day

package/build/es/features/supports_islamic_calendar/supports_islamic_calendar.js

@@ -0,0 +1,15 @@
+import { Given, Then } from 'cypress-cucumber-preprocessor/steps';
+Given('an Islamic calendar is rendered with Arabic locale', () => {
+  cy.visitStory('CalendarInputTesting', "Islamic With Arabic");
+  cy.get('[data-test="dhis2-uiwidgets-calendar-inputfield"]').click();
+  cy.get('[data-test=calendar]').should('be.visible');
+});
+Then('days should be rendered in Arabic', () => {
+  cy.contains('الأحد').should('be.visible');
+  cy.contains('السبت').should('be.visible');
+  cy.contains('الجمعة').should('be.visible');
+  cy.contains('الخميس').should('be.visible');
+  cy.contains('الأربعاء').should('be.visible');
+  cy.contains('الثلاثاء').should('be.visible');
+  cy.contains('الاثنين').should('be.visible');
+});

package/build/es/features/supports_islamic_calendar.feature

@@ -0,0 +1,5 @@
+Feature: The Calendar renders in the islamic-civil calendar system
+
+    Scenario: A Calendar for the Islamic calendar
+        Given an Islamic calendar is rendered with Arabic locale
+        Then days should be rendered in Arabic

package/build/es/features/supports_nepali_calendar/supports_nepali_calendar.js

@@ -0,0 +1,39 @@
+import { Given, Then, And } from 'cypress-cucumber-preprocessor/steps';
+Given('a nepali calendar in "{word}" is rendered', language => {
+  cy.visitStory('CalendarInputTesting', "Nepali With ".concat(language));
+  cy.get('[data-test="dhis2-uiwidgets-calendar-inputfield"]', {
+    timeout: 10000
+  }).click();
+  cy.get('[data-test=calendar]').should('be.visible');
+});
+Then('nepali days should be rendered in "{word}"', language => {
+  const days = language === 'nepali' ? ['आइत', 'सोम', 'सोम', 'बुध', 'बिही', 'शुक्र', 'शनि'] : ['Som', 'Mangl', 'Budha', 'Bihi', 'Shukra', 'Shani', 'Aaita'];
+  days.forEach(day => {
+    cy.contains(day).should('be.visible');
+  });
+});
+And('months should be rendered in "{word}" with navigation', language => {
+  //
+  const months = language === 'nepali' ? {
+    current: 'असोज',
+    previous: 'भदौ',
+    next: 'कार्तिक'
+  } : {
+    current: 'Ashwin',
+    previous: 'Bhadra',
+    next: 'Kartik'
+  };
+  cy.contains(months.current).should('be.visible');
+  cy.get('[data-test="calendar-next-month"]').click();
+  cy.contains(months.next).should('be.visible');
+  cy.get('[data-test="calendar-previous-month"]').click();
+  cy.get('[data-test="calendar-previous-month"]').click();
+  cy.contains(months.previous).should('be.visible');
+});
+Then('we should be able to select a day', () => {
+  const nepaliDate = '2078-06-27';
+  cy.get("[data-test=\"".concat(nepaliDate, "\"]")).click();
+  cy.get('[data-test="dhis2-uiwidgets-calendar-inputfield"] input').should('have.value', nepaliDate);
+  cy.get('[data-test="storybook-calendar-result"]').should('have.text', nepaliDate);
+  cy.get('[data-test="storybook-calendar-result-iso"]').should('have.text', '13 October 2021');
+});

package/build/es/features/supports_nepali_calendar.feature

@@ -0,0 +1,19 @@
+Feature: The Calendar renders in Nepali calendar system
+
+    Scenario: Display a Nepali calendar in Nepali
+        Given a nepali calendar in "nepali" is rendered
+        Then nepali days should be rendered in "nepali"
+        And months should be rendered in "nepali" with navigation
+
+    Scenario: Select a day in the Nepali calendar in Nepali
+        Given a nepali calendar in "nepali" is rendered
+        Then we should be able to select a day
+
+    Scenario: Display a Nepali calendar in English
+        Given a nepali calendar in "english" is rendered
+        Then nepali days should be rendered in "english"
+        And months should be rendered in "english" with navigation
+
+    Scenario: Select a day in the Nepali calendar in English
+        Given a nepali calendar in "english" is rendered
+        Then we should be able to select a day

package/build/es/index.js

@@ -0,0 +1,2 @@
+export { Calendar } from './calendar/index.js';
+export { CalendarInput } from './calendar-input/index.js';

package/build/es/locales/en/translations.json

@@ -0,0 +1,4 @@
+{
+    "Go to previous year": "Go to previous year",
+    "Go to next year": "Go to next year"
+}

package/build/es/locales/index.js

@@ -0,0 +1,13 @@
+//------------------------------------------------------------------------------
+// <auto-generated>
+// This code was generated by d2-i18n-generate.
+//
+// Changes to this file may cause incorrect behavior and will be lost if
+// the code is regenerated.
+// </auto-generated>
+//------------------------------------------------------------------------------
+import i18n from '@dhis2/d2-i18n';
+import enTranslations from './en/translations.json';
+const namespace = 'default';
+i18n.addResources('en', namespace, enTranslations);
+export default i18n;

package/build/es/stories/calendar.stories.js

@@ -0,0 +1,44 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import React from 'react';
+import { Calendar } from '../calendar/index.js';
+import { CalendarStoryWrapper } from './calendarStoryWrapper.js';
+const subtitle = "[Experimental] Calendar component is useful for creating a variety of calendars including Ethiopic, Islamic etc..";
+const description = "\nUse a Calendar where there is a need to let the user select a date.\n\nNote that it requires a parent, like [Box](../?path=/docs/layout-box--default), to define its size.\n\n```js\nimport { Calendar } from '@dhis2/ui'\n```\n";
+export default {
+  title: 'Calendar',
+  component: Calendar,
+  parameters: {
+    componentSubtitle: subtitle,
+    docs: {
+      description: {
+        component: description
+      }
+    }
+  }
+};
+export const Ethiopic = args => {
+  return /*#__PURE__*/React.createElement(CalendarStoryWrapper, _extends({
+    calendar: "ethiopic",
+    locale: "am-et",
+    numberingSystem: "ethi",
+    date: "2014-04-05" // 13th of October 2022
+    ,
+    timeZone: "Africa/Khartoum"
+  }, args));
+};
+export const Nepali = args => {
+  return /*#__PURE__*/React.createElement(CalendarStoryWrapper, _extends({
+    calendar: "nepali",
+    locale: "ne-NP",
+    date: "2079-06-29" // 13th of October 2022
+    ,
+    timeZone: "Africa/Khartoum"
+  }, args));
+};
+export const WithAnyCalendar = args => {
+  return /*#__PURE__*/React.createElement(CalendarStoryWrapper, _extends({
+    calendar: "gregory",
+    locale: "en-GB"
+  }, args));
+};