@dhis2-ui/calendar 8.11.2 → 8.12.1

package/build/es/features/supports_calendar_clear_button/supports_calendar_clear_button.js

@@ -0,0 +1,31 @@
+import { Given, Then, And } from 'cypress-cucumber-preprocessor/steps';
+Given('a "{word}" calendar is rendered with a selected date "{word}"', (calendar, initialDate) => {
+  cy.visitStory('CalendarInputTesting', 'Test Calendar With Clear Button', {
+    qs: {
+      initialDate,
+      calendar
+    }
+  });
+  cy.get('[data-test="storybook-calendar-date-value"]').should('have.text', initialDate);
+});
+Then('we should be able to clear it', () => {
+  cy.get("[data-test=\"calendar-clear-button\"]").click();
+  cy.get('[data-test="storybook-calendar-date-value"]').should('have.text', 'undefined');
+});
+And('show the current month afterwards', () => {
+  cy.get('[data-test="dhis2-uiwidgets-calendar-inputfield"]').click();
+  cy.get('.isToday').should('be.visible');
+});
+And("allow selecting today's date", () => {
+  cy.get('.isToday').parent().invoke('attr', 'data-test').then(todayDate => {
+    cy.get('.isToday').click();
+    cy.get('[data-test="storybook-calendar-date-value"]').should('have.text', todayDate);
+    cy.get('[data-test="dhis2-uiwidgets-calendar-inputfield"] input').should('have.value', todayDate);
+  });
+});
+And('highlight today as the selected date', () => {
+  cy.get('[data-test="dhis2-uiwidgets-calendar-inputfield"]').click();
+  cy.get('.isToday').parent().invoke('attr', 'data-test').then(todayDate => {
+    cy.get('.isSelected').should('have.text', Number(todayDate.split('-')[2]).toString());
+  });
+});

package/build/es/features/supports_calendar_clear_button.feature

@@ -0,0 +1,23 @@
+Feature: The Calendar allows clearing the selection
+
+    Scenario: Clear the selection in the Gregorian calendar
+        Given a "gregory" calendar is rendered with a selected date "2021-10-13"
+        Then we should be able to clear it
+        And show the current month afterwards
+        And allow selecting today's date
+        And highlight today as the selected date
+
+    Scenario: Clear the selection in the Ethiopic calendar
+        Given a "ethiopic" calendar is rendered with a selected date "2014-02-03"
+        Then we should be able to clear it
+        And show the current month afterwards
+        And allow selecting today's date
+        And highlight today as the selected date
+
+    Scenario: Clear the selection in the Nepali calendar
+        Given a "nepali" calendar is rendered with a selected date "2078-06-27"
+        Then we should be able to clear it
+        And show the current month afterwards
+        And allow selecting today's date
+        And highlight today as the selected date
+

package/build/es/index.js

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

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

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

package/build/es/stories/{calendarInput.stories.js → calendar-input.stories.js}

@@ -1,8 +1,6 @@
-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 { CalendarInput } from '../calendar-input/index.js';
-import { CalendarStoryWrapper } from './calendarStoryWrapper.js';
+import React, { useState } from 'react';
+import { CalendarInput } from '../calendar-input/calendar-input.js';
+import { CalendarStoryWrapper } from './calendar-story-wrapper.js';
 const subtitle = "[Experimental] Calendar Input is a wrapper around Calendar displaying an input that triggers the calendar";
 const description = "\nUse a CalendarInput where there is a need to let the user input a date.\n\nNote that it requires a parent, like [Box](../?path=/docs/layout-box--default), to define its size.\n\n```js\nimport { CalendarInput } from '@dhis2/ui'\n```\n";
 export default {
@@ -69,16 +67,36 @@ export const GregorianWithArabic = buildCalendar({
   locale: 'ar-SD',
   date: '2021-10-13'
 });
-export const IslamicWithArabic = buildCalendar({
-  calendar: 'islamic-civil',
-  locale: 'ar-SD',
-  date: '2015-01-13'
-});
-export const WithAnyCalendar = args => {
-  return /*#__PURE__*/React.createElement(CalendarStoryWrapper, _extends({
-    calendarInput: true,
+export const IslamicWithArabic = () => {
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      direction: 'rtl'
+    }
+  }, /*#__PURE__*/React.createElement(CalendarStoryWrapper, {
+    component: CalendarInput,
+    dir: "rtl",
+    timeZone: "Africa/Khartoum",
+    weekDayFormat: "short",
+    date: "1477-01-13",
+    locale: "ar-SD",
     calendar: "islamic-civil",
-    locale: "en",
-    timeZone: "Africa/Khartoum"
-  }, args));
+    clearable: true
+  }));
+};
+export const CalendarWithClearButton = _ref2 => {
+  let {
+    calendar = 'gregory',
+    date: initialDate = null
+  } = _ref2;
+  const [date, setDate] = useState(initialDate);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CalendarInput, {
+    calendar: calendar,
+    date: date,
+    onDateSelect: date => {
+      setDate(date === null || date === void 0 ? void 0 : date.calendarDateString);
+    },
+    clearable: true
+  }), /*#__PURE__*/React.createElement("div", null, "value:", /*#__PURE__*/React.createElement("span", {
+    "data-test": "storybook-calendar-date-value"
+  }, date !== null && date !== void 0 ? date : 'undefined')));
 };

package/build/es/stories/{calendarStoryWrapper.js → calendar-story-wrapper.js}

@@ -3,12 +3,14 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 import { constants } from '@dhis2/multi-calendar-dates';
 import PropTypes from 'prop-types';
 import React, { useState } from 'react';
-import { Calendar } from '../calendar/index.js';
+import { Calendar } from '../calendar/calendar.js';
 const {
   calendars,
   numberingSystems
 } = constants;
 export const CalendarStoryWrapper = props => {
+  var _selectedDate$calenda;
+
   const {
     calendar,
     locale,
@@ -23,7 +25,9 @@ export const CalendarStoryWrapper = props => {
   const [selectedDirection, setSelectedDirection] = useState(dir);
   const [selectedWeekFormat, setWeekDayFormat] = useState(weekDayFormat);
   const [selectedLocale, setLocale] = useState(locale);
-  const [selectedDate, setSelectedDate] = useState();
+  const [selectedDate, setSelectedDate] = useState({
+    calendarDateString: date
+  });
 
   const changeCalendar = _ref => {
     let {
@@ -137,7 +141,7 @@ export const CalendarStoryWrapper = props => {
     calendar: selectedCalendar,
     dir: selectedDirection,
     locale: selectedLocale,
-    date: date,
+    date: selectedDate.calendarDateString,
     onDateSelect: date => {
       setSelectedDate(date);
     },
@@ -156,7 +160,7 @@ export const CalendarStoryWrapper = props => {
     "data-test": "storybook-calendar-result"
   }, selectedDate.calendarDateString)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, "iso date: "), /*#__PURE__*/React.createElement("span", {
     "data-test": "storybook-calendar-result-iso"
-  }, selectedDate.calendarDate.withCalendar('iso8601').toLocaleString('en-GB', {
+  }, (_selectedDate$calenda = selectedDate.calendarDate) === null || _selectedDate$calenda === void 0 ? void 0 : _selectedDate$calenda.withCalendar('iso8601').toLocaleString('en-GB', {
     dateStyle: 'long'
   }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, "callback:"), JSON.stringify(selectedDate, null, 2))))));
 };

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

@@ -1,8 +1,8 @@
 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';
+import { Calendar } from '../calendar/calendar.js';
+import { CalendarStoryWrapper } from './calendar-story-wrapper.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 {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/calendar",
-    "version": "8.11.2",
+    "version": "8.12.1",
     "description": "UI Calendar",
     "repository": {
         "type": "git",
@@ -31,14 +31,15 @@
         "styled-jsx": "^4"
     },
     "dependencies": {
-        "@dhis2-ui/card": "8.11.2",
-        "@dhis2-ui/input": "8.11.2",
-        "@dhis2-ui/layer": "8.11.2",
-        "@dhis2-ui/popper": "8.11.2",
+        "@dhis2-ui/button": "8.12.1",
+        "@dhis2-ui/card": "8.12.1",
+        "@dhis2-ui/input": "8.12.1",
+        "@dhis2-ui/layer": "8.12.1",
+        "@dhis2-ui/popper": "8.12.1",
         "@dhis2/multi-calendar-dates": "1.0.0-alpha.18",
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2/ui-constants": "8.11.2",
-        "@dhis2/ui-icons": "8.11.2",
+        "@dhis2/ui-constants": "8.12.1",
+        "@dhis2/ui-icons": "8.12.1",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },

package/build/cjs/calendar/calendar-prop-types.js

@@ -1,24 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.CalendarProps = void 0;
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const CalendarProps = {
-  calendar: _propTypes.default.any.isRequired,
-  cellSize: _propTypes.default.string,
-  date: _propTypes.default.string,
-  dir: _propTypes.default.oneOf(['ltr', 'rtl']),
-  locale: _propTypes.default.string,
-  numberingSystem: _propTypes.default.string,
-  timeZone: _propTypes.default.string,
-  weekDayFormat: _propTypes.default.string,
-  width: _propTypes.default.string,
-  onDateSelect: _propTypes.default.func
-};
-exports.CalendarProps = CalendarProps;

package/build/cjs/stories/calendarInput.stories.js

@@ -1,107 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.WithAnyCalendar = exports.NepaliWithNepali = exports.NepaliWithEnglish = exports.IslamicWithArabic = exports.GregorianWithEnglish = exports.GregorianWithArabic = exports.EthiopicWithEnglish = exports.EthiopicWithAmharic = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _index = require("../calendar-input/index.js");
-
-var _calendarStoryWrapper = require("./calendarStoryWrapper.js");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-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); }
-
-const subtitle = "[Experimental] Calendar Input is a wrapper around Calendar displaying an input that triggers the calendar";
-const description = "\nUse a CalendarInput where there is a need to let the user input a date.\n\nNote that it requires a parent, like [Box](../?path=/docs/layout-box--default), to define its size.\n\n```js\nimport { CalendarInput } from '@dhis2/ui'\n```\n";
-var _default = {
-  title: 'CalendarInput',
-  component: _index.CalendarInput,
-  parameters: {
-    componentSubtitle: subtitle,
-    docs: {
-      description: {
-        component: description
-      }
-    }
-  }
-};
-exports.default = _default;
-
-const buildCalendar = _ref => {
-  let {
-    date,
-    locale,
-    calendar
-  } = _ref;
-  return () => /*#__PURE__*/_react.default.createElement(_calendarStoryWrapper.CalendarStoryWrapper, {
-    component: _index.CalendarInput,
-    dir: "ltr",
-    timeZone: "Africa/Khartoum",
-    weekDayFormat: "short",
-    date: date,
-    locale: locale,
-    calendar: calendar
-  });
-};
-
-const EthiopicWithAmharic = buildCalendar({
-  calendar: 'ethiopic',
-  locale: 'am-ET',
-  date: '2014-02-03' // 13 Oct 2021
-
-});
-exports.EthiopicWithAmharic = EthiopicWithAmharic;
-const EthiopicWithEnglish = buildCalendar({
-  calendar: 'ethiopic',
-  locale: 'en-ET',
-  date: '2014-02-03' // 13 Oct 2021
-
-});
-exports.EthiopicWithEnglish = EthiopicWithEnglish;
-const NepaliWithNepali = buildCalendar({
-  calendar: 'nepali',
-  locale: 'ne-NP',
-  date: '2078-06-27' // 13 Oct 2021
-
-});
-exports.NepaliWithNepali = NepaliWithNepali;
-const NepaliWithEnglish = buildCalendar({
-  calendar: 'nepali',
-  locale: 'en-NP',
-  date: '2078-06-27' // 13 Oct 2021
-
-});
-exports.NepaliWithEnglish = NepaliWithEnglish;
-const GregorianWithEnglish = buildCalendar({
-  calendar: 'gregorian',
-  locale: 'en-CA',
-  date: '2021-10-13'
-});
-exports.GregorianWithEnglish = GregorianWithEnglish;
-const GregorianWithArabic = buildCalendar({
-  calendar: 'gregorian',
-  locale: 'ar-SD',
-  date: '2021-10-13'
-});
-exports.GregorianWithArabic = GregorianWithArabic;
-const IslamicWithArabic = buildCalendar({
-  calendar: 'islamic-civil',
-  locale: 'ar-SD',
-  date: '2015-01-13'
-});
-exports.IslamicWithArabic = IslamicWithArabic;
-
-const WithAnyCalendar = args => {
-  return /*#__PURE__*/_react.default.createElement(_calendarStoryWrapper.CalendarStoryWrapper, _extends({
-    calendarInput: true,
-    calendar: "islamic-civil",
-    locale: "en",
-    timeZone: "Africa/Khartoum"
-  }, args));
-};
-
-exports.WithAnyCalendar = WithAnyCalendar;

package/build/es/__e2e__/calendarInput.stories.e2e.js

@@ -1,6 +0,0 @@
-import { CalendarInput as component } from '../index.js';
-export default {
-  title: 'CalendarInputTesting',
-  component
-};
-export { EthiopicWithAmharic, EthiopicWithEnglish, NepaliWithEnglish, NepaliWithNepali, GregorianWithArabic, GregorianWithEnglish, IslamicWithArabic } from '../stories/calendarInput.stories.js';

package/build/es/calendar/calendar-prop-types.js

@@ -1,13 +0,0 @@
-import PropTypes from 'prop-types';
-export const CalendarProps = {
-  calendar: PropTypes.any.isRequired,
-  cellSize: PropTypes.string,
-  date: PropTypes.string,
-  dir: PropTypes.oneOf(['ltr', 'rtl']),
-  locale: PropTypes.string,
-  numberingSystem: PropTypes.string,
-  timeZone: PropTypes.string,
-  weekDayFormat: PropTypes.string,
-  width: PropTypes.string,
-  onDateSelect: PropTypes.func
-};