@dhis2-ui/calendar 8.8.0

package/build/cjs/features/supports_gregorian_calendar/supports_gregorian_calendar.js

@@ -0,0 +1,39 @@
+"use strict";
+
+var _steps = require("cypress-cucumber-preprocessor/steps");
+
+(0, _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');
+});
+(0, _steps.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');
+  });
+});
+(0, _steps.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');
+});
+(0, _steps.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/cjs/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/cjs/features/supports_islamic_calendar/supports_islamic_calendar.js

@@ -0,0 +1,18 @@
+"use strict";
+
+var _steps = require("cypress-cucumber-preprocessor/steps");
+
+(0, _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');
+});
+(0, _steps.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/cjs/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/cjs/features/supports_nepali_calendar/supports_nepali_calendar.js

@@ -0,0 +1,42 @@
+"use strict";
+
+var _steps = require("cypress-cucumber-preprocessor/steps");
+
+(0, _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');
+});
+(0, _steps.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');
+  });
+});
+(0, _steps.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');
+});
+(0, _steps.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/cjs/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/cjs/index.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Calendar", {
+  enumerable: true,
+  get: function () {
+    return _index.Calendar;
+  }
+});
+Object.defineProperty(exports, "CalendarInput", {
+  enumerable: true,
+  get: function () {
+    return _index2.CalendarInput;
+  }
+});
+
+var _index = require("./calendar/index.js");
+
+var _index2 = require("./calendar-input/index.js");

package/build/cjs/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/cjs/locales/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _d2I18n = _interopRequireDefault(require("@dhis2/d2-i18n"));
+
+var _translations = _interopRequireDefault(require("./en/translations.json"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+//------------------------------------------------------------------------------
+// <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>
+//------------------------------------------------------------------------------
+const namespace = 'default';
+
+_d2I18n.default.addResources('en', namespace, _translations.default);
+
+var _default = _d2I18n.default;
+exports.default = _default;

package/build/cjs/stories/calendar.stories.js

@@ -0,0 +1,66 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.WithAnyCalendar = exports.Nepali = exports.Ethiopic = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _index = require("../calendar/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 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";
+var _default = {
+  title: 'Calendar',
+  component: _index.Calendar,
+  parameters: {
+    componentSubtitle: subtitle,
+    docs: {
+      description: {
+        component: description
+      }
+    }
+  }
+};
+exports.default = _default;
+
+const Ethiopic = args => {
+  return /*#__PURE__*/_react.default.createElement(_calendarStoryWrapper.CalendarStoryWrapper, _extends({
+    calendar: "ethiopic",
+    locale: "am-et",
+    numberingSystem: "ethi",
+    date: "2014-04-05" // 13th of October 2022
+    ,
+    timeZone: "Africa/Khartoum"
+  }, args));
+};
+
+exports.Ethiopic = Ethiopic;
+
+const Nepali = args => {
+  return /*#__PURE__*/_react.default.createElement(_calendarStoryWrapper.CalendarStoryWrapper, _extends({
+    calendar: "nepali",
+    locale: "ne-NP",
+    date: "2079-06-29" // 13th of October 2022
+    ,
+    timeZone: "Africa/Khartoum"
+  }, args));
+};
+
+exports.Nepali = Nepali;
+
+const WithAnyCalendar = args => {
+  return /*#__PURE__*/_react.default.createElement(_calendarStoryWrapper.CalendarStoryWrapper, _extends({
+    calendar: "gregory",
+    locale: "en-GB"
+  }, args));
+};
+
+exports.WithAnyCalendar = WithAnyCalendar;

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

@@ -0,0 +1,107 @@
+"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/cjs/stories/calendarStoryWrapper.js

@@ -0,0 +1,196 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CalendarStoryWrapper = void 0;
+
+var _multiCalendarDates = require("@dhis2/multi-calendar-dates");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _index = require("../calendar/index.js");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+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 {
+  calendars,
+  numberingSystems
+} = _multiCalendarDates.constants;
+
+const CalendarStoryWrapper = props => {
+  const {
+    calendar,
+    locale,
+    timeZone,
+    dir,
+    component: Component,
+    date,
+    weekDayFormat
+  } = props;
+  const [selectedCalendar, setSelectedCalendar] = (0, _react.useState)(calendar);
+  const [selectedNumberingSystem, setSelectedNumberingSystem] = (0, _react.useState)();
+  const [selectedDirection, setSelectedDirection] = (0, _react.useState)(dir);
+  const [selectedWeekFormat, setWeekDayFormat] = (0, _react.useState)(weekDayFormat);
+  const [selectedLocale, setLocale] = (0, _react.useState)(locale);
+  const [selectedDate, setSelectedDate] = (0, _react.useState)();
+
+  const changeCalendar = _ref => {
+    let {
+      target: {
+        value
+      }
+    } = _ref;
+    setSelectedCalendar(value);
+  };
+
+  const changeNumberingSystem = _ref2 => {
+    let {
+      target: {
+        value
+      }
+    } = _ref2;
+
+    if (value === '-1') {
+      setSelectedNumberingSystem(null);
+    } else {
+      setSelectedNumberingSystem(value);
+    }
+  };
+
+  const changeDirection = _ref3 => {
+    let {
+      target: {
+        value
+      }
+    } = _ref3;
+    setSelectedDirection(value);
+  };
+
+  const changeWeekFormat = _ref4 => {
+    let {
+      target: {
+        value
+      }
+    } = _ref4;
+    setWeekDayFormat(value);
+  };
+
+  const onLocaleChanged = _ref5 => {
+    let {
+      target: {
+        value
+      }
+    } = _ref5;
+    setLocale(value);
+  };
+
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      fontSize: '0.8em',
+      marginBottom: 20,
+      gap: 5,
+      display: 'flex',
+      alignItems: 'center'
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", null, "Options"), /*#__PURE__*/_react.default.createElement("input", {
+    defaultValue: locale,
+    placeholder: "locale",
+    onBlur: onLocaleChanged
+  }), /*#__PURE__*/_react.default.createElement("select", {
+    onChange: changeCalendar,
+    value: selectedCalendar
+  }, /*#__PURE__*/_react.default.createElement("option", {
+    disabled: true,
+    key: calendar,
+    value: "-1"
+  }, "Select calendar"), calendars.map(calendar => {
+    return /*#__PURE__*/_react.default.createElement("option", {
+      value: calendar,
+      key: calendar
+    }, calendar);
+  })), /*#__PURE__*/_react.default.createElement("select", {
+    onChange: changeNumberingSystem,
+    value: selectedNumberingSystem
+  }, /*#__PURE__*/_react.default.createElement("option", {
+    disabled: true,
+    key: calendar,
+    value: "-1"
+  }, "Select numbering system"), numberingSystems.map(system => {
+    return /*#__PURE__*/_react.default.createElement("option", {
+      value: system,
+      key: system
+    }, system);
+  })), /*#__PURE__*/_react.default.createElement("select", {
+    onChange: changeDirection,
+    value: selectedDirection
+  }, /*#__PURE__*/_react.default.createElement("option", {
+    disabled: true,
+    value: "-1"
+  }, "Select direction"), /*#__PURE__*/_react.default.createElement("option", {
+    value: "ltr"
+  }, "Left-To-Right"), /*#__PURE__*/_react.default.createElement("option", {
+    value: "rtl"
+  }, "Right-To-Left")), /*#__PURE__*/_react.default.createElement("select", {
+    onChange: changeWeekFormat,
+    value: selectedWeekFormat
+  }, /*#__PURE__*/_react.default.createElement("option", {
+    disabled: true,
+    value: "-1"
+  }, "Select format"), /*#__PURE__*/_react.default.createElement("option", {
+    value: "narrow"
+  }, "narrow"), /*#__PURE__*/_react.default.createElement("option", {
+    value: "short"
+  }, "short"), /*#__PURE__*/_react.default.createElement("option", {
+    value: "long"
+  }, "long"))), /*#__PURE__*/_react.default.createElement(Component, _extends({}, props, {
+    calendar: selectedCalendar,
+    dir: selectedDirection,
+    locale: selectedLocale,
+    date: date,
+    onDateSelect: date => {
+      setSelectedDate(date);
+    },
+    timeZone: timeZone,
+    weekDayFormat: selectedWeekFormat,
+    numberingSystem: selectedNumberingSystem
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      marginTop: 10,
+      gap: 5,
+      fontSize: '12px',
+      display: 'flex',
+      flexDirection: 'column'
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", null, selectedDate && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("label", null, "calendar date: "), /*#__PURE__*/_react.default.createElement("span", {
+    "data-test": "storybook-calendar-result"
+  }, selectedDate.calendarDateString)), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("label", null, "iso date: "), /*#__PURE__*/_react.default.createElement("span", {
+    "data-test": "storybook-calendar-result-iso"
+  }, selectedDate.calendarDate.withCalendar('iso8601').toLocaleString('en-GB', {
+    dateStyle: 'long'
+  }))), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("label", null, "callback:"), JSON.stringify(selectedDate, null, 2))))));
+};
+
+exports.CalendarStoryWrapper = CalendarStoryWrapper;
+CalendarStoryWrapper.defaultProps = {
+  calendar: 'gregorian',
+  component: _index.Calendar,
+  weekDayFormat: 'narrow'
+};
+CalendarStoryWrapper.propTypes = {
+  calendar: _propTypes.default.string.isRequired,
+  component: _propTypes.default.elementType.isRequired,
+  date: _propTypes.default.string,
+  dir: _propTypes.default.oneOf(['ltr', 'rtl']),
+  locale: _propTypes.default.string,
+  timeZone: _propTypes.default.string,
+  weekDayFormat: _propTypes.default.string
+};

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

@@ -0,0 +1,6 @@
+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

@@ -0,0 +1,13 @@
+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
+};

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

@@ -0,0 +1,39 @@
+import _JSXStyle from "styled-jsx/style";
+import { colors, spacers } from '@dhis2/ui-constants';
+import cx from 'classnames';
+import PropTypes from 'prop-types';
+import React from 'react';
+export const CalendarTableCell = _ref => {
+  let {
+    day,
+    cellSize
+  } = _ref;
+  const dayHoverBackgroundColor = colors.grey200;
+  const selectedDayBackgroundColor = colors.teal700;
+  return /*#__PURE__*/React.createElement("td", {
+    "data-test": day === null || day === void 0 ? void 0 : day.calendarDate,
+    onClick: day.onClick,
+    className: _JSXStyle.dynamic([["86824133", [cellSize, cellSize, cellSize, cellSize, spacers.dp2, colors.grey900, dayHoverBackgroundColor, selectedDayBackgroundColor, colors.grey600]]])
+  }, /*#__PURE__*/React.createElement("button", {
+    name: "day",
+    className: _JSXStyle.dynamic([["86824133", [cellSize, cellSize, cellSize, cellSize, spacers.dp2, colors.grey900, dayHoverBackgroundColor, selectedDayBackgroundColor, colors.grey600]]]) + " " + (cx('day', {
+      isSelected: day.isSelected,
+      isToday: day.isToday,
+      otherMonth: !day.isInCurrentMonth
+    }) || "")
+  }, day.label), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "86824133",
+    dynamic: [cellSize, cellSize, cellSize, cellSize, spacers.dp2, colors.grey900, dayHoverBackgroundColor, selectedDayBackgroundColor, colors.grey600]
+  }, ["td.__jsx-style-dynamic-selector{width:".concat(cellSize, ";height:100%;height:").concat(cellSize, ";text-align:center;border:2px solid transparent;}"), "td.__jsx-style-dynamic-selector span.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;padding:2px 2px;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;border:2px solid transparent;min-width:16px;}", "button.__jsx-style-dynamic-selector{border:0;overflow:hidden;width:".concat(cellSize, ";height:").concat(cellSize, ";border:2px solid transparent;border-radius:3px;background:none;margin:").concat(spacers.dp2, ";color:").concat(colors.grey900, ";}"), "button.__jsx-style-dynamic-selector:hover{background-color:".concat(dayHoverBackgroundColor, ";-webkit-text-decoration:underline;text-decoration:underline;}"), "button.isSelected.__jsx-style-dynamic-selector,button.otherMonth.isSelected.__jsx-style-dynamic-selector{background-color:".concat(selectedDayBackgroundColor, ";color:white;}"), "button.isToday.__jsx-style-dynamic-selector{-webkit-text-decoration:underline;text-decoration:underline;}", "button.otherMonth.__jsx-style-dynamic-selector{color:".concat(colors.grey600, ";}")]));
+};
+CalendarTableCell.propTypes = {
+  cellSize: PropTypes.string,
+  day: PropTypes.shape({
+    calendarDate: PropTypes.string,
+    isInCurrentMonth: PropTypes.bool,
+    isSelected: PropTypes.bool,
+    isToday: PropTypes.bool,
+    label: PropTypes.string,
+    onClick: PropTypes.func
+  })
+};

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

@@ -0,0 +1,25 @@
+import _JSXStyle from "styled-jsx/style";
+import { colors } from '@dhis2/ui-constants';
+import PropTypes from 'prop-types';
+import React from 'react';
+export const CalendarTableDaysHeader = _ref => {
+  let {
+    weekDayLabels
+  } = _ref;
+  const dayNamesColor = colors.grey700;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("thead", {
+    className: _JSXStyle.dynamic([["275131861", [dayNamesColor]]])
+  }, /*#__PURE__*/React.createElement("tr", {
+    className: _JSXStyle.dynamic([["275131861", [dayNamesColor]]])
+  }, weekDayLabels.map((label, i) => /*#__PURE__*/React.createElement("th", {
+    scope: "col",
+    key: "weekday-".concat(i),
+    className: _JSXStyle.dynamic([["275131861", [dayNamesColor]]])
+  }, label)))), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "275131861",
+    dynamic: [dayNamesColor]
+  }, ["th.__jsx-style-dynamic-selector{color:".concat(dayNamesColor, ";font-weight:300;font-style:normal;padding:8px 8px;background:none;font-size:0.85em;border:none;}"), "tr.__jsx-style-dynamic-selector{border:none;}"]));
+};
+CalendarTableDaysHeader.propTypes = {
+  weekDayLabels: PropTypes.arrayOf(PropTypes.string)
+};