@dhis2-ui/calendar 8.12.0 → 8.12.2
Sign up to get free protection for your applications and to get access to all the features.
- package/build/cjs/calendar/calendar-table-cell.js +5 -5
- package/build/cjs/calendar/calendar-table-days-header.js +5 -5
- package/build/cjs/calendar/navigation-container.js +30 -29
- package/build/cjs/features/supports_calendar_clear_button/supports_calendar_clear_button.js +1 -1
- package/build/cjs/features/supports_ethiopic_calendar/supports_ethiopic_calendar.js +3 -0
- package/build/cjs/features/supports_ethiopic_calendar.feature +1 -0
- package/build/cjs/stories/calendar-input.stories.js +2 -1
- package/build/es/calendar/calendar-table-cell.js +6 -6
- package/build/es/calendar/calendar-table-days-header.js +5 -5
- package/build/es/calendar/navigation-container.js +30 -29
- package/build/es/features/supports_calendar_clear_button/supports_calendar_clear_button.js +1 -1
- package/build/es/features/supports_ethiopic_calendar/supports_ethiopic_calendar.js +3 -0
- package/build/es/features/supports_ethiopic_calendar.feature +1 -0
- package/build/es/stories/calendar-input.stories.js +2 -1
- package/package.json +9 -9
|
@@ -28,18 +28,18 @@ const CalendarTableCell = _ref => {
|
|
|
28
28
|
return /*#__PURE__*/_react.default.createElement("td", {
|
|
29
29
|
"data-test": day === null || day === void 0 ? void 0 : day.calendarDate,
|
|
30
30
|
onClick: day.onClick,
|
|
31
|
-
className: _style.default.dynamic([["
|
|
31
|
+
className: _style.default.dynamic([["2052411850", [cellSize, cellSize, cellSize, cellSize, _uiConstants.colors.grey900, dayHoverBackgroundColor, _uiConstants.colors.grey300, selectedDayBackgroundColor, _uiConstants.colors.teal600, _uiConstants.colors.teal200, _uiConstants.colors.grey600]]])
|
|
32
32
|
}, /*#__PURE__*/_react.default.createElement("button", {
|
|
33
33
|
name: "day",
|
|
34
|
-
className: _style.default.dynamic([["
|
|
34
|
+
className: _style.default.dynamic([["2052411850", [cellSize, cellSize, cellSize, cellSize, _uiConstants.colors.grey900, dayHoverBackgroundColor, _uiConstants.colors.grey300, selectedDayBackgroundColor, _uiConstants.colors.teal600, _uiConstants.colors.teal200, _uiConstants.colors.grey600]]]) + " " + ((0, _classnames.default)('day', {
|
|
35
35
|
isSelected: selectedDate === (day === null || day === void 0 ? void 0 : day.calendarDate),
|
|
36
36
|
isToday: day.isToday,
|
|
37
37
|
otherMonth: !day.isInCurrentMonth
|
|
38
38
|
}) || "")
|
|
39
39
|
}, day.label), /*#__PURE__*/_react.default.createElement(_style.default, {
|
|
40
|
-
id: "
|
|
41
|
-
dynamic: [cellSize, cellSize, cellSize, cellSize, _uiConstants.
|
|
42
|
-
}, ["td.__jsx-style-dynamic-selector{width:".concat(cellSize, ";height:100%;height:").concat(cellSize, ";text-align:center;border:2px solid transparent;padding:0;}"), "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;
|
|
40
|
+
id: "2052411850",
|
|
41
|
+
dynamic: [cellSize, cellSize, cellSize, cellSize, _uiConstants.colors.grey900, dayHoverBackgroundColor, _uiConstants.colors.grey300, selectedDayBackgroundColor, _uiConstants.colors.teal600, _uiConstants.colors.teal200, _uiConstants.colors.grey600]
|
|
42
|
+
}, ["td.__jsx-style-dynamic-selector{width:".concat(cellSize, ";height:100%;height:").concat(cellSize, ";text-align:center;border:2px solid transparent;padding:0;}"), "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;color:").concat(_uiConstants.colors.grey900, ";}"), "button.__jsx-style-dynamic-selector:hover{background-color:".concat(dayHoverBackgroundColor, ";-webkit-text-decoration:underline;text-decoration:underline;cursor:pointer;}"), "button.__jsx-style-dynamic-selector:active{background-color:".concat(_uiConstants.colors.grey300, ";}"), "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{position:relative;}", "button.isToday.__jsx-style-dynamic-selector::after{content:'';position:absolute;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);height:4px;width:4px;bottom:2px;left:50%;border-radius:100%;background-color:".concat(_uiConstants.colors.teal600, ";}"), "button.isSelected.isToday.__jsx-style-dynamic-selector::after{background-color:".concat(_uiConstants.colors.teal200, ";}"), "button.otherMonth.__jsx-style-dynamic-selector{color:".concat(_uiConstants.colors.grey600, ";}")]));
|
|
43
43
|
};
|
|
44
44
|
|
|
45
45
|
exports.CalendarTableCell = CalendarTableCell;
|
|
@@ -21,17 +21,17 @@ const CalendarTableDaysHeader = _ref => {
|
|
|
21
21
|
} = _ref;
|
|
22
22
|
const dayNamesColor = _uiConstants.colors.grey700;
|
|
23
23
|
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("thead", {
|
|
24
|
-
className: _style.default.dynamic([["
|
|
24
|
+
className: _style.default.dynamic([["1577512909", [dayNamesColor]]])
|
|
25
25
|
}, /*#__PURE__*/_react.default.createElement("tr", {
|
|
26
|
-
className: _style.default.dynamic([["
|
|
26
|
+
className: _style.default.dynamic([["1577512909", [dayNamesColor]]])
|
|
27
27
|
}, weekDayLabels.map((label, i) => /*#__PURE__*/_react.default.createElement("th", {
|
|
28
28
|
scope: "col",
|
|
29
29
|
key: "weekday-".concat(i),
|
|
30
|
-
className: _style.default.dynamic([["
|
|
30
|
+
className: _style.default.dynamic([["1577512909", [dayNamesColor]]])
|
|
31
31
|
}, label)))), /*#__PURE__*/_react.default.createElement(_style.default, {
|
|
32
|
-
id: "
|
|
32
|
+
id: "1577512909",
|
|
33
33
|
dynamic: [dayNamesColor]
|
|
34
|
-
}, ["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;}"]));
|
|
34
|
+
}, ["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;cursor:default;}"), "tr.__jsx-style-dynamic-selector{border:none;}"]));
|
|
35
35
|
};
|
|
36
36
|
|
|
37
37
|
exports.CalendarTableDaysHeader = CalendarTableDaysHeader;
|
|
@@ -19,11 +19,12 @@ var _index = _interopRequireDefault(require("../locales/index.js"));
|
|
|
19
19
|
|
|
20
20
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
21
21
|
|
|
22
|
-
const chevronColor = _uiConstants.colors.grey600;
|
|
23
22
|
const wrapperBorderColor = _uiConstants.colors.grey300;
|
|
24
23
|
const headerBackground = _uiConstants.colors.grey050;
|
|
25
24
|
|
|
26
25
|
const NavigationContainer = _ref => {
|
|
26
|
+
var _currYear$label;
|
|
27
|
+
|
|
27
28
|
let {
|
|
28
29
|
languageDirection,
|
|
29
30
|
pickerOptions
|
|
@@ -37,71 +38,71 @@ const NavigationContainer = _ref => {
|
|
|
37
38
|
nextYear,
|
|
38
39
|
prevMonth,
|
|
39
40
|
prevYear
|
|
40
|
-
} = pickerOptions;
|
|
41
|
+
} = pickerOptions; // Ethiopic years - when localised to English - add the era (i.e. 2015 ERA1), which is redundant in practice (like writing AD for gregorian years)
|
|
42
|
+
// there is an ongoing discussion in JS-Temporal polyfill whether the era should be included or not, but for our case, it's safer to remove it
|
|
43
|
+
|
|
44
|
+
const currentYearLabel = (_currYear$label = currYear.label) === null || _currYear$label === void 0 ? void 0 : _currYear$label.toString().replace(/ERA1/, '');
|
|
41
45
|
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
|
|
42
|
-
className: _style.default.dynamic([["
|
|
46
|
+
className: _style.default.dynamic([["3883083596", [_uiConstants.spacers.dp4, _uiConstants.colors.grey600, _uiConstants.colors.grey200, _uiConstants.colors.grey900, _uiConstants.colors.grey300, _uiConstants.spacers.dp8, _uiConstants.spacers.dp4, wrapperBorderColor, headerBackground]]]) + " " + "navigation-container"
|
|
43
47
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
44
|
-
className: _style.default.dynamic([["
|
|
48
|
+
className: _style.default.dynamic([["3883083596", [_uiConstants.spacers.dp4, _uiConstants.colors.grey600, _uiConstants.colors.grey200, _uiConstants.colors.grey900, _uiConstants.colors.grey300, _uiConstants.spacers.dp8, _uiConstants.spacers.dp4, wrapperBorderColor, headerBackground]]]) + " " + "month"
|
|
45
49
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
46
|
-
className: _style.default.dynamic([["
|
|
50
|
+
className: _style.default.dynamic([["3883083596", [_uiConstants.spacers.dp4, _uiConstants.colors.grey600, _uiConstants.colors.grey200, _uiConstants.colors.grey900, _uiConstants.colors.grey300, _uiConstants.spacers.dp8, _uiConstants.spacers.dp4, wrapperBorderColor, headerBackground]]]) + " " + "prev"
|
|
47
51
|
}, /*#__PURE__*/_react.default.createElement("button", {
|
|
48
52
|
onClick: prevMonth.navigateTo,
|
|
49
53
|
name: "previous-month",
|
|
50
54
|
"data-test": "calendar-previous-month",
|
|
51
55
|
"aria-label": "".concat(_index.default.t("Go to ".concat(prevMonth.label))),
|
|
52
56
|
type: "button",
|
|
53
|
-
className: _style.default.dynamic([["
|
|
57
|
+
className: _style.default.dynamic([["3883083596", [_uiConstants.spacers.dp4, _uiConstants.colors.grey600, _uiConstants.colors.grey200, _uiConstants.colors.grey900, _uiConstants.colors.grey300, _uiConstants.spacers.dp8, _uiConstants.spacers.dp4, wrapperBorderColor, headerBackground]]])
|
|
54
58
|
}, /*#__PURE__*/_react.default.createElement(PreviousIcon, {
|
|
55
|
-
|
|
56
|
-
className: _style.default.dynamic([["4112940194", [_uiConstants.spacers.dp4, _uiConstants.colors.grey200, _uiConstants.spacers.dp36, _uiConstants.spacers.dp8, _uiConstants.spacers.dp4, wrapperBorderColor, headerBackground]]])
|
|
59
|
+
className: _style.default.dynamic([["3883083596", [_uiConstants.spacers.dp4, _uiConstants.colors.grey600, _uiConstants.colors.grey200, _uiConstants.colors.grey900, _uiConstants.colors.grey300, _uiConstants.spacers.dp8, _uiConstants.spacers.dp4, wrapperBorderColor, headerBackground]]])
|
|
57
60
|
}))), /*#__PURE__*/_react.default.createElement("div", {
|
|
58
|
-
className: _style.default.dynamic([["
|
|
61
|
+
className: _style.default.dynamic([["3883083596", [_uiConstants.spacers.dp4, _uiConstants.colors.grey600, _uiConstants.colors.grey200, _uiConstants.colors.grey900, _uiConstants.colors.grey300, _uiConstants.spacers.dp8, _uiConstants.spacers.dp4, wrapperBorderColor, headerBackground]]]) + " " + "curr"
|
|
59
62
|
}, /*#__PURE__*/_react.default.createElement("span", {
|
|
60
|
-
className: _style.default.dynamic([["
|
|
63
|
+
className: _style.default.dynamic([["3883083596", [_uiConstants.spacers.dp4, _uiConstants.colors.grey600, _uiConstants.colors.grey200, _uiConstants.colors.grey900, _uiConstants.colors.grey300, _uiConstants.spacers.dp8, _uiConstants.spacers.dp4, wrapperBorderColor, headerBackground]]]) + " " + "label"
|
|
61
64
|
}, currMonth.label)), /*#__PURE__*/_react.default.createElement("div", {
|
|
62
|
-
className: _style.default.dynamic([["
|
|
65
|
+
className: _style.default.dynamic([["3883083596", [_uiConstants.spacers.dp4, _uiConstants.colors.grey600, _uiConstants.colors.grey200, _uiConstants.colors.grey900, _uiConstants.colors.grey300, _uiConstants.spacers.dp8, _uiConstants.spacers.dp4, wrapperBorderColor, headerBackground]]]) + " " + "next"
|
|
63
66
|
}, /*#__PURE__*/_react.default.createElement("button", {
|
|
64
67
|
onClick: nextMonth.navigateTo,
|
|
65
68
|
"data-test": "calendar-next-month",
|
|
66
69
|
name: "next-month",
|
|
67
70
|
"aria-label": "".concat(_index.default.t("Go to ".concat(nextMonth.label))),
|
|
68
71
|
type: "button",
|
|
69
|
-
className: _style.default.dynamic([["
|
|
72
|
+
className: _style.default.dynamic([["3883083596", [_uiConstants.spacers.dp4, _uiConstants.colors.grey600, _uiConstants.colors.grey200, _uiConstants.colors.grey900, _uiConstants.colors.grey300, _uiConstants.spacers.dp8, _uiConstants.spacers.dp4, wrapperBorderColor, headerBackground]]])
|
|
70
73
|
}, /*#__PURE__*/_react.default.createElement(NextIcon, {
|
|
71
|
-
|
|
72
|
-
className: _style.default.dynamic([["4112940194", [_uiConstants.spacers.dp4, _uiConstants.colors.grey200, _uiConstants.spacers.dp36, _uiConstants.spacers.dp8, _uiConstants.spacers.dp4, wrapperBorderColor, headerBackground]]])
|
|
74
|
+
className: _style.default.dynamic([["3883083596", [_uiConstants.spacers.dp4, _uiConstants.colors.grey600, _uiConstants.colors.grey200, _uiConstants.colors.grey900, _uiConstants.colors.grey300, _uiConstants.spacers.dp8, _uiConstants.spacers.dp4, wrapperBorderColor, headerBackground]]])
|
|
73
75
|
})))), /*#__PURE__*/_react.default.createElement("div", {
|
|
74
|
-
className: _style.default.dynamic([["
|
|
76
|
+
className: _style.default.dynamic([["3883083596", [_uiConstants.spacers.dp4, _uiConstants.colors.grey600, _uiConstants.colors.grey200, _uiConstants.colors.grey900, _uiConstants.colors.grey300, _uiConstants.spacers.dp8, _uiConstants.spacers.dp4, wrapperBorderColor, headerBackground]]]) + " " + "year"
|
|
75
77
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
76
|
-
className: _style.default.dynamic([["
|
|
78
|
+
className: _style.default.dynamic([["3883083596", [_uiConstants.spacers.dp4, _uiConstants.colors.grey600, _uiConstants.colors.grey200, _uiConstants.colors.grey900, _uiConstants.colors.grey300, _uiConstants.spacers.dp8, _uiConstants.spacers.dp4, wrapperBorderColor, headerBackground]]]) + " " + "prev"
|
|
77
79
|
}, /*#__PURE__*/_react.default.createElement("button", {
|
|
78
80
|
onClick: prevYear.navigateTo,
|
|
79
81
|
name: "previous-year",
|
|
80
82
|
"aria-label": "".concat(_index.default.t('Go to previous year')),
|
|
81
83
|
type: "button",
|
|
82
|
-
className: _style.default.dynamic([["
|
|
84
|
+
className: _style.default.dynamic([["3883083596", [_uiConstants.spacers.dp4, _uiConstants.colors.grey600, _uiConstants.colors.grey200, _uiConstants.colors.grey900, _uiConstants.colors.grey300, _uiConstants.spacers.dp8, _uiConstants.spacers.dp4, wrapperBorderColor, headerBackground]]])
|
|
83
85
|
}, /*#__PURE__*/_react.default.createElement(PreviousIcon, {
|
|
84
|
-
|
|
85
|
-
className: _style.default.dynamic([["4112940194", [_uiConstants.spacers.dp4, _uiConstants.colors.grey200, _uiConstants.spacers.dp36, _uiConstants.spacers.dp8, _uiConstants.spacers.dp4, wrapperBorderColor, headerBackground]]])
|
|
86
|
+
className: _style.default.dynamic([["3883083596", [_uiConstants.spacers.dp4, _uiConstants.colors.grey600, _uiConstants.colors.grey200, _uiConstants.colors.grey900, _uiConstants.colors.grey300, _uiConstants.spacers.dp8, _uiConstants.spacers.dp4, wrapperBorderColor, headerBackground]]])
|
|
86
87
|
}))), /*#__PURE__*/_react.default.createElement("div", {
|
|
87
|
-
className: _style.default.dynamic([["
|
|
88
|
+
className: _style.default.dynamic([["3883083596", [_uiConstants.spacers.dp4, _uiConstants.colors.grey600, _uiConstants.colors.grey200, _uiConstants.colors.grey900, _uiConstants.colors.grey300, _uiConstants.spacers.dp8, _uiConstants.spacers.dp4, wrapperBorderColor, headerBackground]]]) + " " + "curr"
|
|
88
89
|
}, /*#__PURE__*/_react.default.createElement("span", {
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
90
|
+
"data-test": "calendar-current-year",
|
|
91
|
+
className: _style.default.dynamic([["3883083596", [_uiConstants.spacers.dp4, _uiConstants.colors.grey600, _uiConstants.colors.grey200, _uiConstants.colors.grey900, _uiConstants.colors.grey300, _uiConstants.spacers.dp8, _uiConstants.spacers.dp4, wrapperBorderColor, headerBackground]]]) + " " + "label"
|
|
92
|
+
}, currentYearLabel)), /*#__PURE__*/_react.default.createElement("div", {
|
|
93
|
+
className: _style.default.dynamic([["3883083596", [_uiConstants.spacers.dp4, _uiConstants.colors.grey600, _uiConstants.colors.grey200, _uiConstants.colors.grey900, _uiConstants.colors.grey300, _uiConstants.spacers.dp8, _uiConstants.spacers.dp4, wrapperBorderColor, headerBackground]]]) + " " + "next"
|
|
92
94
|
}, /*#__PURE__*/_react.default.createElement("button", {
|
|
93
95
|
onClick: nextYear.navigateTo,
|
|
94
96
|
name: "next-year",
|
|
95
97
|
"aria-label": "".concat(_index.default.t('Go to next year')),
|
|
96
98
|
type: "button",
|
|
97
|
-
className: _style.default.dynamic([["
|
|
99
|
+
className: _style.default.dynamic([["3883083596", [_uiConstants.spacers.dp4, _uiConstants.colors.grey600, _uiConstants.colors.grey200, _uiConstants.colors.grey900, _uiConstants.colors.grey300, _uiConstants.spacers.dp8, _uiConstants.spacers.dp4, wrapperBorderColor, headerBackground]]])
|
|
98
100
|
}, /*#__PURE__*/_react.default.createElement(NextIcon, {
|
|
99
|
-
|
|
100
|
-
className: _style.default.dynamic([["4112940194", [_uiConstants.spacers.dp4, _uiConstants.colors.grey200, _uiConstants.spacers.dp36, _uiConstants.spacers.dp8, _uiConstants.spacers.dp4, wrapperBorderColor, headerBackground]]])
|
|
101
|
+
className: _style.default.dynamic([["3883083596", [_uiConstants.spacers.dp4, _uiConstants.colors.grey600, _uiConstants.colors.grey200, _uiConstants.colors.grey900, _uiConstants.colors.grey300, _uiConstants.spacers.dp8, _uiConstants.spacers.dp4, wrapperBorderColor, headerBackground]]])
|
|
101
102
|
}))))), /*#__PURE__*/_react.default.createElement(_style.default, {
|
|
102
|
-
id: "
|
|
103
|
-
dynamic: [_uiConstants.spacers.dp4, _uiConstants.colors.grey200, _uiConstants.
|
|
104
|
-
}, ["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(_uiConstants.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(_uiConstants.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{
|
|
103
|
+
id: "3883083596",
|
|
104
|
+
dynamic: [_uiConstants.spacers.dp4, _uiConstants.colors.grey600, _uiConstants.colors.grey200, _uiConstants.colors.grey900, _uiConstants.colors.grey300, _uiConstants.spacers.dp8, _uiConstants.spacers.dp4, wrapperBorderColor, headerBackground]
|
|
105
|
+
}, ["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;cursor:default;}", ".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(_uiConstants.spacers.dp4, ";height:24px;width:24px;color:").concat(_uiConstants.colors.grey600, ";border-radius:3px;}"), ".prev.__jsx-style-dynamic-selector button.__jsx-style-dynamic-selector svg.__jsx-style-dynamic-selector,.next.__jsx-style-dynamic-selector button.__jsx-style-dynamic-selector svg.__jsx-style-dynamic-selector{width:16px;height:16px;}", ".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(_uiConstants.colors.grey200, ";color:").concat(_uiConstants.colors.grey900, ";cursor:pointer;}"), ".prev.__jsx-style-dynamic-selector button.__jsx-style-dynamic-selector:active,.next.__jsx-style-dynamic-selector button.__jsx-style-dynamic-selector:active{background-color:".concat(_uiConstants.colors.grey300, ";}"), ".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{gap:".concat(_uiConstants.spacers.dp8, ";padding:").concat(_uiConstants.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;}")]));
|
|
105
106
|
};
|
|
106
107
|
|
|
107
108
|
exports.NavigationContainer = NavigationContainer;
|
|
@@ -29,6 +29,6 @@ var _steps = require("cypress-cucumber-preprocessor/steps");
|
|
|
29
29
|
(0, _steps.And)('highlight today as the selected date', () => {
|
|
30
30
|
cy.get('[data-test="dhis2-uiwidgets-calendar-inputfield"]').click();
|
|
31
31
|
cy.get('.isToday').parent().invoke('attr', 'data-test').then(todayDate => {
|
|
32
|
-
cy.get('.isSelected').should('have.text', todayDate.split('-')[2]);
|
|
32
|
+
cy.get('.isSelected').should('have.text', Number(todayDate.split('-')[2]).toString());
|
|
33
33
|
});
|
|
34
34
|
});
|
|
@@ -30,6 +30,9 @@ var _steps = require("cypress-cucumber-preprocessor/steps");
|
|
|
30
30
|
cy.get('[data-test="calendar-previous-month"]').click();
|
|
31
31
|
cy.contains(months.previous).should('be.visible');
|
|
32
32
|
});
|
|
33
|
+
(0, _steps.And)('the era should not be displayed in the year', () => {
|
|
34
|
+
cy.get('[data-test="calendar-current-year"]').should('not.contain.text', 'ERA1');
|
|
35
|
+
});
|
|
33
36
|
(0, _steps.Then)('we should be able to select a day', () => {
|
|
34
37
|
const date = '2014-02-03';
|
|
35
38
|
cy.get("[data-test=\"".concat(date, "\"]")).click();
|
|
@@ -13,6 +13,7 @@ Feature: The Calendar renders in the Ethiopic calendar system
|
|
|
13
13
|
Given an Ethiopic calendar is rendered in "english"
|
|
14
14
|
Then days should be rendered in "english"
|
|
15
15
|
And months should be rendered in "english" with navigation
|
|
16
|
+
And the era should not be displayed in the year
|
|
16
17
|
|
|
17
18
|
Scenario: Select a day in the Ethiopic calendar in English
|
|
18
19
|
Given an Ethiopic calendar is rendered in English
|
|
@@ -56,7 +56,8 @@ const EthiopicWithAmharic = buildCalendar({
|
|
|
56
56
|
});
|
|
57
57
|
exports.EthiopicWithAmharic = EthiopicWithAmharic;
|
|
58
58
|
const EthiopicWithEnglish = buildCalendar({
|
|
59
|
-
calendar: '
|
|
59
|
+
calendar: 'ethiopian',
|
|
60
|
+
// using "ethiopian" rather than the correct "ethiopic" to immitate DHIS2 calendar types
|
|
60
61
|
locale: 'en-ET',
|
|
61
62
|
date: '2014-02-03' // 13 Oct 2021
|
|
62
63
|
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import _JSXStyle from "styled-jsx/style";
|
|
2
|
-
import { colors
|
|
2
|
+
import { colors } from '@dhis2/ui-constants';
|
|
3
3
|
import cx from 'classnames';
|
|
4
4
|
import PropTypes from 'prop-types';
|
|
5
5
|
import React from 'react';
|
|
@@ -14,18 +14,18 @@ export const CalendarTableCell = _ref => {
|
|
|
14
14
|
return /*#__PURE__*/React.createElement("td", {
|
|
15
15
|
"data-test": day === null || day === void 0 ? void 0 : day.calendarDate,
|
|
16
16
|
onClick: day.onClick,
|
|
17
|
-
className: _JSXStyle.dynamic([["
|
|
17
|
+
className: _JSXStyle.dynamic([["2052411850", [cellSize, cellSize, cellSize, cellSize, colors.grey900, dayHoverBackgroundColor, colors.grey300, selectedDayBackgroundColor, colors.teal600, colors.teal200, colors.grey600]]])
|
|
18
18
|
}, /*#__PURE__*/React.createElement("button", {
|
|
19
19
|
name: "day",
|
|
20
|
-
className: _JSXStyle.dynamic([["
|
|
20
|
+
className: _JSXStyle.dynamic([["2052411850", [cellSize, cellSize, cellSize, cellSize, colors.grey900, dayHoverBackgroundColor, colors.grey300, selectedDayBackgroundColor, colors.teal600, colors.teal200, colors.grey600]]]) + " " + (cx('day', {
|
|
21
21
|
isSelected: selectedDate === (day === null || day === void 0 ? void 0 : day.calendarDate),
|
|
22
22
|
isToday: day.isToday,
|
|
23
23
|
otherMonth: !day.isInCurrentMonth
|
|
24
24
|
}) || "")
|
|
25
25
|
}, day.label), /*#__PURE__*/React.createElement(_JSXStyle, {
|
|
26
|
-
id: "
|
|
27
|
-
dynamic: [cellSize, cellSize, cellSize, cellSize,
|
|
28
|
-
}, ["td.__jsx-style-dynamic-selector{width:".concat(cellSize, ";height:100%;height:").concat(cellSize, ";text-align:center;border:2px solid transparent;padding:0;}"), "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;
|
|
26
|
+
id: "2052411850",
|
|
27
|
+
dynamic: [cellSize, cellSize, cellSize, cellSize, colors.grey900, dayHoverBackgroundColor, colors.grey300, selectedDayBackgroundColor, colors.teal600, colors.teal200, colors.grey600]
|
|
28
|
+
}, ["td.__jsx-style-dynamic-selector{width:".concat(cellSize, ";height:100%;height:").concat(cellSize, ";text-align:center;border:2px solid transparent;padding:0;}"), "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;color:").concat(colors.grey900, ";}"), "button.__jsx-style-dynamic-selector:hover{background-color:".concat(dayHoverBackgroundColor, ";-webkit-text-decoration:underline;text-decoration:underline;cursor:pointer;}"), "button.__jsx-style-dynamic-selector:active{background-color:".concat(colors.grey300, ";}"), "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{position:relative;}", "button.isToday.__jsx-style-dynamic-selector::after{content:'';position:absolute;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);height:4px;width:4px;bottom:2px;left:50%;border-radius:100%;background-color:".concat(colors.teal600, ";}"), "button.isSelected.isToday.__jsx-style-dynamic-selector::after{background-color:".concat(colors.teal200, ";}"), "button.otherMonth.__jsx-style-dynamic-selector{color:".concat(colors.grey600, ";}")]));
|
|
29
29
|
};
|
|
30
30
|
CalendarTableCell.propTypes = {
|
|
31
31
|
cellSize: PropTypes.string,
|
|
@@ -8,17 +8,17 @@ export const CalendarTableDaysHeader = _ref => {
|
|
|
8
8
|
} = _ref;
|
|
9
9
|
const dayNamesColor = colors.grey700;
|
|
10
10
|
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("thead", {
|
|
11
|
-
className: _JSXStyle.dynamic([["
|
|
11
|
+
className: _JSXStyle.dynamic([["1577512909", [dayNamesColor]]])
|
|
12
12
|
}, /*#__PURE__*/React.createElement("tr", {
|
|
13
|
-
className: _JSXStyle.dynamic([["
|
|
13
|
+
className: _JSXStyle.dynamic([["1577512909", [dayNamesColor]]])
|
|
14
14
|
}, weekDayLabels.map((label, i) => /*#__PURE__*/React.createElement("th", {
|
|
15
15
|
scope: "col",
|
|
16
16
|
key: "weekday-".concat(i),
|
|
17
|
-
className: _JSXStyle.dynamic([["
|
|
17
|
+
className: _JSXStyle.dynamic([["1577512909", [dayNamesColor]]])
|
|
18
18
|
}, label)))), /*#__PURE__*/React.createElement(_JSXStyle, {
|
|
19
|
-
id: "
|
|
19
|
+
id: "1577512909",
|
|
20
20
|
dynamic: [dayNamesColor]
|
|
21
|
-
}, ["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;}"]));
|
|
21
|
+
}, ["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;cursor:default;}"), "tr.__jsx-style-dynamic-selector{border:none;}"]));
|
|
22
22
|
};
|
|
23
23
|
CalendarTableDaysHeader.propTypes = {
|
|
24
24
|
weekDayLabels: PropTypes.arrayOf(PropTypes.string)
|
|
@@ -4,10 +4,11 @@ import { IconChevronLeft16, IconChevronRight16 } from '@dhis2/ui-icons';
|
|
|
4
4
|
import PropTypes from 'prop-types';
|
|
5
5
|
import React from 'react';
|
|
6
6
|
import i18n from '../locales/index.js';
|
|
7
|
-
const chevronColor = colors.grey600;
|
|
8
7
|
const wrapperBorderColor = colors.grey300;
|
|
9
8
|
const headerBackground = colors.grey050;
|
|
10
9
|
export const NavigationContainer = _ref => {
|
|
10
|
+
var _currYear$label;
|
|
11
|
+
|
|
11
12
|
let {
|
|
12
13
|
languageDirection,
|
|
13
14
|
pickerOptions
|
|
@@ -21,71 +22,71 @@ export const NavigationContainer = _ref => {
|
|
|
21
22
|
nextYear,
|
|
22
23
|
prevMonth,
|
|
23
24
|
prevYear
|
|
24
|
-
} = pickerOptions;
|
|
25
|
+
} = pickerOptions; // Ethiopic years - when localised to English - add the era (i.e. 2015 ERA1), which is redundant in practice (like writing AD for gregorian years)
|
|
26
|
+
// there is an ongoing discussion in JS-Temporal polyfill whether the era should be included or not, but for our case, it's safer to remove it
|
|
27
|
+
|
|
28
|
+
const currentYearLabel = (_currYear$label = currYear.label) === null || _currYear$label === void 0 ? void 0 : _currYear$label.toString().replace(/ERA1/, '');
|
|
25
29
|
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
|
|
26
|
-
className: _JSXStyle.dynamic([["
|
|
30
|
+
className: _JSXStyle.dynamic([["3883083596", [spacers.dp4, colors.grey600, colors.grey200, colors.grey900, colors.grey300, spacers.dp8, spacers.dp4, wrapperBorderColor, headerBackground]]]) + " " + "navigation-container"
|
|
27
31
|
}, /*#__PURE__*/React.createElement("div", {
|
|
28
|
-
className: _JSXStyle.dynamic([["
|
|
32
|
+
className: _JSXStyle.dynamic([["3883083596", [spacers.dp4, colors.grey600, colors.grey200, colors.grey900, colors.grey300, spacers.dp8, spacers.dp4, wrapperBorderColor, headerBackground]]]) + " " + "month"
|
|
29
33
|
}, /*#__PURE__*/React.createElement("div", {
|
|
30
|
-
className: _JSXStyle.dynamic([["
|
|
34
|
+
className: _JSXStyle.dynamic([["3883083596", [spacers.dp4, colors.grey600, colors.grey200, colors.grey900, colors.grey300, spacers.dp8, spacers.dp4, wrapperBorderColor, headerBackground]]]) + " " + "prev"
|
|
31
35
|
}, /*#__PURE__*/React.createElement("button", {
|
|
32
36
|
onClick: prevMonth.navigateTo,
|
|
33
37
|
name: "previous-month",
|
|
34
38
|
"data-test": "calendar-previous-month",
|
|
35
39
|
"aria-label": "".concat(i18n.t("Go to ".concat(prevMonth.label))),
|
|
36
40
|
type: "button",
|
|
37
|
-
className: _JSXStyle.dynamic([["
|
|
41
|
+
className: _JSXStyle.dynamic([["3883083596", [spacers.dp4, colors.grey600, colors.grey200, colors.grey900, colors.grey300, spacers.dp8, spacers.dp4, wrapperBorderColor, headerBackground]]])
|
|
38
42
|
}, /*#__PURE__*/React.createElement(PreviousIcon, {
|
|
39
|
-
|
|
40
|
-
className: _JSXStyle.dynamic([["4112940194", [spacers.dp4, colors.grey200, spacers.dp36, spacers.dp8, spacers.dp4, wrapperBorderColor, headerBackground]]])
|
|
43
|
+
className: _JSXStyle.dynamic([["3883083596", [spacers.dp4, colors.grey600, colors.grey200, colors.grey900, colors.grey300, spacers.dp8, spacers.dp4, wrapperBorderColor, headerBackground]]])
|
|
41
44
|
}))), /*#__PURE__*/React.createElement("div", {
|
|
42
|
-
className: _JSXStyle.dynamic([["
|
|
45
|
+
className: _JSXStyle.dynamic([["3883083596", [spacers.dp4, colors.grey600, colors.grey200, colors.grey900, colors.grey300, spacers.dp8, spacers.dp4, wrapperBorderColor, headerBackground]]]) + " " + "curr"
|
|
43
46
|
}, /*#__PURE__*/React.createElement("span", {
|
|
44
|
-
className: _JSXStyle.dynamic([["
|
|
47
|
+
className: _JSXStyle.dynamic([["3883083596", [spacers.dp4, colors.grey600, colors.grey200, colors.grey900, colors.grey300, spacers.dp8, spacers.dp4, wrapperBorderColor, headerBackground]]]) + " " + "label"
|
|
45
48
|
}, currMonth.label)), /*#__PURE__*/React.createElement("div", {
|
|
46
|
-
className: _JSXStyle.dynamic([["
|
|
49
|
+
className: _JSXStyle.dynamic([["3883083596", [spacers.dp4, colors.grey600, colors.grey200, colors.grey900, colors.grey300, spacers.dp8, spacers.dp4, wrapperBorderColor, headerBackground]]]) + " " + "next"
|
|
47
50
|
}, /*#__PURE__*/React.createElement("button", {
|
|
48
51
|
onClick: nextMonth.navigateTo,
|
|
49
52
|
"data-test": "calendar-next-month",
|
|
50
53
|
name: "next-month",
|
|
51
54
|
"aria-label": "".concat(i18n.t("Go to ".concat(nextMonth.label))),
|
|
52
55
|
type: "button",
|
|
53
|
-
className: _JSXStyle.dynamic([["
|
|
56
|
+
className: _JSXStyle.dynamic([["3883083596", [spacers.dp4, colors.grey600, colors.grey200, colors.grey900, colors.grey300, spacers.dp8, spacers.dp4, wrapperBorderColor, headerBackground]]])
|
|
54
57
|
}, /*#__PURE__*/React.createElement(NextIcon, {
|
|
55
|
-
|
|
56
|
-
className: _JSXStyle.dynamic([["4112940194", [spacers.dp4, colors.grey200, spacers.dp36, spacers.dp8, spacers.dp4, wrapperBorderColor, headerBackground]]])
|
|
58
|
+
className: _JSXStyle.dynamic([["3883083596", [spacers.dp4, colors.grey600, colors.grey200, colors.grey900, colors.grey300, spacers.dp8, spacers.dp4, wrapperBorderColor, headerBackground]]])
|
|
57
59
|
})))), /*#__PURE__*/React.createElement("div", {
|
|
58
|
-
className: _JSXStyle.dynamic([["
|
|
60
|
+
className: _JSXStyle.dynamic([["3883083596", [spacers.dp4, colors.grey600, colors.grey200, colors.grey900, colors.grey300, spacers.dp8, spacers.dp4, wrapperBorderColor, headerBackground]]]) + " " + "year"
|
|
59
61
|
}, /*#__PURE__*/React.createElement("div", {
|
|
60
|
-
className: _JSXStyle.dynamic([["
|
|
62
|
+
className: _JSXStyle.dynamic([["3883083596", [spacers.dp4, colors.grey600, colors.grey200, colors.grey900, colors.grey300, spacers.dp8, spacers.dp4, wrapperBorderColor, headerBackground]]]) + " " + "prev"
|
|
61
63
|
}, /*#__PURE__*/React.createElement("button", {
|
|
62
64
|
onClick: prevYear.navigateTo,
|
|
63
65
|
name: "previous-year",
|
|
64
66
|
"aria-label": "".concat(i18n.t('Go to previous year')),
|
|
65
67
|
type: "button",
|
|
66
|
-
className: _JSXStyle.dynamic([["
|
|
68
|
+
className: _JSXStyle.dynamic([["3883083596", [spacers.dp4, colors.grey600, colors.grey200, colors.grey900, colors.grey300, spacers.dp8, spacers.dp4, wrapperBorderColor, headerBackground]]])
|
|
67
69
|
}, /*#__PURE__*/React.createElement(PreviousIcon, {
|
|
68
|
-
|
|
69
|
-
className: _JSXStyle.dynamic([["4112940194", [spacers.dp4, colors.grey200, spacers.dp36, spacers.dp8, spacers.dp4, wrapperBorderColor, headerBackground]]])
|
|
70
|
+
className: _JSXStyle.dynamic([["3883083596", [spacers.dp4, colors.grey600, colors.grey200, colors.grey900, colors.grey300, spacers.dp8, spacers.dp4, wrapperBorderColor, headerBackground]]])
|
|
70
71
|
}))), /*#__PURE__*/React.createElement("div", {
|
|
71
|
-
className: _JSXStyle.dynamic([["
|
|
72
|
+
className: _JSXStyle.dynamic([["3883083596", [spacers.dp4, colors.grey600, colors.grey200, colors.grey900, colors.grey300, spacers.dp8, spacers.dp4, wrapperBorderColor, headerBackground]]]) + " " + "curr"
|
|
72
73
|
}, /*#__PURE__*/React.createElement("span", {
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
74
|
+
"data-test": "calendar-current-year",
|
|
75
|
+
className: _JSXStyle.dynamic([["3883083596", [spacers.dp4, colors.grey600, colors.grey200, colors.grey900, colors.grey300, spacers.dp8, spacers.dp4, wrapperBorderColor, headerBackground]]]) + " " + "label"
|
|
76
|
+
}, currentYearLabel)), /*#__PURE__*/React.createElement("div", {
|
|
77
|
+
className: _JSXStyle.dynamic([["3883083596", [spacers.dp4, colors.grey600, colors.grey200, colors.grey900, colors.grey300, spacers.dp8, spacers.dp4, wrapperBorderColor, headerBackground]]]) + " " + "next"
|
|
76
78
|
}, /*#__PURE__*/React.createElement("button", {
|
|
77
79
|
onClick: nextYear.navigateTo,
|
|
78
80
|
name: "next-year",
|
|
79
81
|
"aria-label": "".concat(i18n.t('Go to next year')),
|
|
80
82
|
type: "button",
|
|
81
|
-
className: _JSXStyle.dynamic([["
|
|
83
|
+
className: _JSXStyle.dynamic([["3883083596", [spacers.dp4, colors.grey600, colors.grey200, colors.grey900, colors.grey300, spacers.dp8, spacers.dp4, wrapperBorderColor, headerBackground]]])
|
|
82
84
|
}, /*#__PURE__*/React.createElement(NextIcon, {
|
|
83
|
-
|
|
84
|
-
className: _JSXStyle.dynamic([["4112940194", [spacers.dp4, colors.grey200, spacers.dp36, spacers.dp8, spacers.dp4, wrapperBorderColor, headerBackground]]])
|
|
85
|
+
className: _JSXStyle.dynamic([["3883083596", [spacers.dp4, colors.grey600, colors.grey200, colors.grey900, colors.grey300, spacers.dp8, spacers.dp4, wrapperBorderColor, headerBackground]]])
|
|
85
86
|
}))))), /*#__PURE__*/React.createElement(_JSXStyle, {
|
|
86
|
-
id: "
|
|
87
|
-
dynamic: [spacers.dp4, colors.grey200,
|
|
88
|
-
}, ["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{
|
|
87
|
+
id: "3883083596",
|
|
88
|
+
dynamic: [spacers.dp4, colors.grey600, colors.grey200, colors.grey900, colors.grey300, spacers.dp8, spacers.dp4, wrapperBorderColor, headerBackground]
|
|
89
|
+
}, ["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;cursor:default;}", ".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, ";height:24px;width:24px;color:").concat(colors.grey600, ";border-radius:3px;}"), ".prev.__jsx-style-dynamic-selector button.__jsx-style-dynamic-selector svg.__jsx-style-dynamic-selector,.next.__jsx-style-dynamic-selector button.__jsx-style-dynamic-selector svg.__jsx-style-dynamic-selector{width:16px;height:16px;}", ".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, ";color:").concat(colors.grey900, ";cursor:pointer;}"), ".prev.__jsx-style-dynamic-selector button.__jsx-style-dynamic-selector:active,.next.__jsx-style-dynamic-selector button.__jsx-style-dynamic-selector:active{background-color:".concat(colors.grey300, ";}"), ".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{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;}")]));
|
|
89
90
|
};
|
|
90
91
|
NavigationContainer.propTypes = {
|
|
91
92
|
languageDirection: PropTypes.oneOf(['ltr', 'rtl']),
|
|
@@ -26,6 +26,6 @@ And("allow selecting today's date", () => {
|
|
|
26
26
|
And('highlight today as the selected date', () => {
|
|
27
27
|
cy.get('[data-test="dhis2-uiwidgets-calendar-inputfield"]').click();
|
|
28
28
|
cy.get('.isToday').parent().invoke('attr', 'data-test').then(todayDate => {
|
|
29
|
-
cy.get('.isSelected').should('have.text', todayDate.split('-')[2]);
|
|
29
|
+
cy.get('.isSelected').should('have.text', Number(todayDate.split('-')[2]).toString());
|
|
30
30
|
});
|
|
31
31
|
});
|
|
@@ -27,6 +27,9 @@ And('months should be rendered in "{word}" with navigation', language => {
|
|
|
27
27
|
cy.get('[data-test="calendar-previous-month"]').click();
|
|
28
28
|
cy.contains(months.previous).should('be.visible');
|
|
29
29
|
});
|
|
30
|
+
And('the era should not be displayed in the year', () => {
|
|
31
|
+
cy.get('[data-test="calendar-current-year"]').should('not.contain.text', 'ERA1');
|
|
32
|
+
});
|
|
30
33
|
Then('we should be able to select a day', () => {
|
|
31
34
|
const date = '2014-02-03';
|
|
32
35
|
cy.get("[data-test=\"".concat(date, "\"]")).click();
|
|
@@ -13,6 +13,7 @@ Feature: The Calendar renders in the Ethiopic calendar system
|
|
|
13
13
|
Given an Ethiopic calendar is rendered in "english"
|
|
14
14
|
Then days should be rendered in "english"
|
|
15
15
|
And months should be rendered in "english" with navigation
|
|
16
|
+
And the era should not be displayed in the year
|
|
16
17
|
|
|
17
18
|
Scenario: Select a day in the Ethiopic calendar in English
|
|
18
19
|
Given an Ethiopic calendar is rendered in English
|
|
@@ -40,7 +40,8 @@ export const EthiopicWithAmharic = buildCalendar({
|
|
|
40
40
|
|
|
41
41
|
});
|
|
42
42
|
export const EthiopicWithEnglish = buildCalendar({
|
|
43
|
-
calendar: '
|
|
43
|
+
calendar: 'ethiopian',
|
|
44
|
+
// using "ethiopian" rather than the correct "ethiopic" to immitate DHIS2 calendar types
|
|
44
45
|
locale: 'en-ET',
|
|
45
46
|
date: '2014-02-03' // 13 Oct 2021
|
|
46
47
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dhis2-ui/calendar",
|
|
3
|
-
"version": "8.12.
|
|
3
|
+
"version": "8.12.2",
|
|
4
4
|
"description": "UI Calendar",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -31,15 +31,15 @@
|
|
|
31
31
|
"styled-jsx": "^4"
|
|
32
32
|
},
|
|
33
33
|
"dependencies": {
|
|
34
|
-
"@dhis2-ui/button": "8.12.
|
|
35
|
-
"@dhis2-ui/card": "8.12.
|
|
36
|
-
"@dhis2-ui/input": "8.12.
|
|
37
|
-
"@dhis2-ui/layer": "8.12.
|
|
38
|
-
"@dhis2-ui/popper": "8.12.
|
|
39
|
-
"@dhis2/multi-calendar-dates": "1.0.
|
|
34
|
+
"@dhis2-ui/button": "8.12.2",
|
|
35
|
+
"@dhis2-ui/card": "8.12.2",
|
|
36
|
+
"@dhis2-ui/input": "8.12.2",
|
|
37
|
+
"@dhis2-ui/layer": "8.12.2",
|
|
38
|
+
"@dhis2-ui/popper": "8.12.2",
|
|
39
|
+
"@dhis2/multi-calendar-dates": "1.0.2",
|
|
40
40
|
"@dhis2/prop-types": "^3.1.2",
|
|
41
|
-
"@dhis2/ui-constants": "8.12.
|
|
42
|
-
"@dhis2/ui-icons": "8.12.
|
|
41
|
+
"@dhis2/ui-constants": "8.12.2",
|
|
42
|
+
"@dhis2/ui-icons": "8.12.2",
|
|
43
43
|
"classnames": "^2.3.1",
|
|
44
44
|
"prop-types": "^15.7.2"
|
|
45
45
|
},
|