@pingux/astro 2.71.0-alpha.0 → 2.71.0-alpha.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/cjs/components/SelectFieldBase/SelectFieldBase.js +3 -1
- package/lib/cjs/recipes/DateTimeRangePicker.stories.js +182 -0
- package/lib/cjs/utils/designUtils/figmaLinks.d.ts +3 -0
- package/lib/cjs/utils/designUtils/figmaLinks.js +3 -0
- package/lib/components/SelectFieldBase/SelectFieldBase.js +3 -1
- package/lib/recipes/DateTimeRangePicker.stories.js +167 -0
- package/lib/utils/designUtils/figmaLinks.js +3 -0
- package/package.json +1 -1
|
@@ -83,7 +83,7 @@ var SelectFieldBase = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
|
83
83
|
variant: "forms.select"
|
|
84
84
|
}, triggerProps, ariaProps, {
|
|
85
85
|
"aria-describedby": helperText && helperTextId
|
|
86
|
-
}), (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
|
|
86
|
+
}), slots === null || slots === void 0 ? void 0 : slots.leftOfData, (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
|
|
87
87
|
as: "span",
|
|
88
88
|
variant: "forms.select.currentValue"
|
|
89
89
|
}, valueProps), state.selectedItem ? state.selectedItem.rendered : (0, _react2.jsx)(_Text["default"], {
|
|
@@ -158,6 +158,8 @@ SelectFieldBase.propTypes = _objectSpread(_objectSpread({
|
|
|
158
158
|
}),
|
|
159
159
|
/** Provides a way to insert markup in specified places. */
|
|
160
160
|
slots: _propTypes["default"].shape({
|
|
161
|
+
/** The given node will be inserted before the text in field container. */
|
|
162
|
+
leftOfData: _propTypes["default"].node,
|
|
161
163
|
/** The given node will be inserted into the field container. */
|
|
162
164
|
inContainer: _propTypes["default"].node
|
|
163
165
|
}),
|
|
@@ -0,0 +1,182 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
|
|
4
|
+
var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
|
|
5
|
+
var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
|
|
6
|
+
var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
|
|
7
|
+
var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
|
|
8
|
+
_Object$defineProperty(exports, "__esModule", {
|
|
9
|
+
value: true
|
|
10
|
+
});
|
|
11
|
+
exports["default"] = exports.Default = void 0;
|
|
12
|
+
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
|
|
13
|
+
var _padStart = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/pad-start"));
|
|
14
|
+
var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
|
|
15
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
16
|
+
var _date = require("@internationalized/date");
|
|
17
|
+
var _CalendarIcon = _interopRequireDefault(require("@pingux/mdi-react/CalendarIcon"));
|
|
18
|
+
var _storybookAddonDesigns = require("storybook-addon-designs");
|
|
19
|
+
var _hooks = require("../hooks");
|
|
20
|
+
var _index = require("../index");
|
|
21
|
+
var _figmaLinks = require("../utils/designUtils/figmaLinks");
|
|
22
|
+
var _react2 = require("@emotion/react");
|
|
23
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
24
|
+
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; }
|
|
25
|
+
var _default = {
|
|
26
|
+
title: 'Recipes/DateTimeRangePicker',
|
|
27
|
+
decorators: [_storybookAddonDesigns.withDesign]
|
|
28
|
+
};
|
|
29
|
+
exports["default"] = _default;
|
|
30
|
+
var dropdownItems = [{
|
|
31
|
+
key: 'Today',
|
|
32
|
+
name: 'Today'
|
|
33
|
+
}, {
|
|
34
|
+
key: 'From Yesterday',
|
|
35
|
+
name: 'From Yesterday'
|
|
36
|
+
}, {
|
|
37
|
+
key: 'Last 7 Days',
|
|
38
|
+
name: 'Last 7 Days'
|
|
39
|
+
}, {
|
|
40
|
+
key: 'Last 30 Days',
|
|
41
|
+
name: 'Last 30 Days'
|
|
42
|
+
}, {
|
|
43
|
+
key: 'This Month',
|
|
44
|
+
name: 'This Month'
|
|
45
|
+
}, {
|
|
46
|
+
key: 'Last Month',
|
|
47
|
+
name: 'Last Month'
|
|
48
|
+
}, {
|
|
49
|
+
key: 'Custom Range',
|
|
50
|
+
name: 'Custom Range'
|
|
51
|
+
}];
|
|
52
|
+
function convertDateTimeValueToString(timeValue, DateValue) {
|
|
53
|
+
var _context, _context2, _context3, _context4;
|
|
54
|
+
// eslint-disable-next-line prefer-const
|
|
55
|
+
var hour = timeValue.hour,
|
|
56
|
+
minute = timeValue.minute;
|
|
57
|
+
var ampm = hour >= 12 ? 'PM' : 'AM';
|
|
58
|
+
hour %= 12;
|
|
59
|
+
hour = hour || 12;
|
|
60
|
+
var hourString = String(hour);
|
|
61
|
+
var minuteString = (0, _padStart["default"])(_context = String(minute)).call(_context, 2, '0');
|
|
62
|
+
return (0, _concat["default"])(_context2 = (0, _concat["default"])(_context3 = (0, _concat["default"])(_context4 = "".concat(DateValue.toString(), " ")).call(_context4, hourString, ":")).call(_context3, minuteString, " ")).call(_context2, ampm);
|
|
63
|
+
}
|
|
64
|
+
var Default = function Default() {
|
|
65
|
+
var modalState = (0, _hooks.useModalState)();
|
|
66
|
+
var _useState = (0, _react.useState)({
|
|
67
|
+
start: '2030-01-12',
|
|
68
|
+
end: '2030-01-15'
|
|
69
|
+
}),
|
|
70
|
+
_useState2 = (0, _slicedToArray2["default"])(_useState, 2),
|
|
71
|
+
range = _useState2[0],
|
|
72
|
+
setRange = _useState2[1];
|
|
73
|
+
var _useState3 = (0, _react.useState)(new _date.Time(1)),
|
|
74
|
+
_useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
|
|
75
|
+
startTime = _useState4[0],
|
|
76
|
+
setStartTime = _useState4[1];
|
|
77
|
+
var _useState5 = (0, _react.useState)(new _date.Time(12, 59)),
|
|
78
|
+
_useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
|
|
79
|
+
endTime = _useState6[0],
|
|
80
|
+
setEndTime = _useState6[1];
|
|
81
|
+
var _useState7 = (0, _react.useState)('Today'),
|
|
82
|
+
_useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
|
|
83
|
+
selectedKey = _useState8[0],
|
|
84
|
+
setSelectedKey = _useState8[1];
|
|
85
|
+
var handleSelectionChange = function handleSelectionChange(key) {
|
|
86
|
+
if (key === 'Custom Range') {
|
|
87
|
+
modalState.open();
|
|
88
|
+
}
|
|
89
|
+
setSelectedKey(key);
|
|
90
|
+
};
|
|
91
|
+
return (0, _react2.jsx)(_index.Box, {
|
|
92
|
+
gap: "lg"
|
|
93
|
+
}, (0, _react2.jsx)(_index.Text, null, "Click on the \u2018Custom Range\u2019 option to view the modal"), (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.SelectField, {
|
|
94
|
+
width: "200px",
|
|
95
|
+
items: dropdownItems,
|
|
96
|
+
selectedKey: selectedKey,
|
|
97
|
+
onSelectionChange: handleSelectionChange,
|
|
98
|
+
label: "Date Range",
|
|
99
|
+
slots: {
|
|
100
|
+
leftOfData: (0, _react2.jsx)(_index.Icon, {
|
|
101
|
+
icon: _CalendarIcon["default"],
|
|
102
|
+
color: "accent.40",
|
|
103
|
+
mr: "xs",
|
|
104
|
+
title: {
|
|
105
|
+
name: 'Calendar Icon'
|
|
106
|
+
}
|
|
107
|
+
})
|
|
108
|
+
}
|
|
109
|
+
}, function (item) {
|
|
110
|
+
return (0, _react2.jsx)(_index.Item, {
|
|
111
|
+
key: item.key
|
|
112
|
+
}, item.name);
|
|
113
|
+
}), modalState.isOpen && (0, _react2.jsx)(_index.Modal, {
|
|
114
|
+
isOpen: modalState.isOpen,
|
|
115
|
+
onClose: modalState.close,
|
|
116
|
+
hasCloseButton: true,
|
|
117
|
+
title: "Custom Date and Time Range",
|
|
118
|
+
contentProps: {
|
|
119
|
+
maxWidth: '636px',
|
|
120
|
+
width: '100%'
|
|
121
|
+
}
|
|
122
|
+
}, (0, _react2.jsx)(_index.Box, {
|
|
123
|
+
gap: "lg",
|
|
124
|
+
mt: "lg"
|
|
125
|
+
}, (0, _react2.jsx)(_index.Box, {
|
|
126
|
+
minHeight: "358px"
|
|
127
|
+
}, (0, _react2.jsx)(_index.Text, {
|
|
128
|
+
as: "h2",
|
|
129
|
+
variant: "H2",
|
|
130
|
+
mb: "xs"
|
|
131
|
+
}, "Date Range"), (0, _react2.jsx)(_index.RangeCalendar, {
|
|
132
|
+
value: range,
|
|
133
|
+
onChange: setRange
|
|
134
|
+
})), (0, _react2.jsx)(_index.Separator, {
|
|
135
|
+
margin: 0
|
|
136
|
+
}), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Text, {
|
|
137
|
+
as: "h2",
|
|
138
|
+
variant: "H2"
|
|
139
|
+
}, "Time Range"), (0, _react2.jsx)(_index.Box, {
|
|
140
|
+
isRow: true,
|
|
141
|
+
gap: "lg",
|
|
142
|
+
alignItems: "center",
|
|
143
|
+
mt: "xs"
|
|
144
|
+
}, (0, _react2.jsx)(_index.TimeField, {
|
|
145
|
+
label: "Start Time",
|
|
146
|
+
value: startTime,
|
|
147
|
+
onChange: setStartTime
|
|
148
|
+
}), (0, _react2.jsx)(_index.Box, {
|
|
149
|
+
height: "59.95px"
|
|
150
|
+
}, (0, _react2.jsx)(_index.Box, {
|
|
151
|
+
height: "19.95px"
|
|
152
|
+
}), (0, _react2.jsx)(_index.Box, {
|
|
153
|
+
height: "40px",
|
|
154
|
+
justifyContent: "center"
|
|
155
|
+
}, (0, _react2.jsx)(_index.Text, {
|
|
156
|
+
as: "h2",
|
|
157
|
+
variant: "H2"
|
|
158
|
+
}, "-"))), (0, _react2.jsx)(_index.TimeField, {
|
|
159
|
+
label: "End Time",
|
|
160
|
+
value: endTime,
|
|
161
|
+
onChange: setEndTime
|
|
162
|
+
}))), (0, _react2.jsx)(_index.Separator, {
|
|
163
|
+
margin: 0
|
|
164
|
+
}), (0, _react2.jsx)(_index.Text, null, convertDateTimeValueToString(startTime, range.start), ' ', "-", ' ', convertDateTimeValueToString(endTime, range.end)), (0, _react2.jsx)(_index.ButtonBar, {
|
|
165
|
+
sx: {
|
|
166
|
+
padding: 0
|
|
167
|
+
}
|
|
168
|
+
}, (0, _react2.jsx)(_index.Button, {
|
|
169
|
+
variant: "primary",
|
|
170
|
+
"data-id": "apply-button"
|
|
171
|
+
}, "Apply"), (0, _react2.jsx)(_index.Button, {
|
|
172
|
+
variant: "link",
|
|
173
|
+
"data-id": "cancel-button"
|
|
174
|
+
}, "Cancel"))))));
|
|
175
|
+
};
|
|
176
|
+
exports.Default = Default;
|
|
177
|
+
Default.parameters = {
|
|
178
|
+
design: {
|
|
179
|
+
type: 'figma',
|
|
180
|
+
url: _figmaLinks.FIGMA_LINKS.dateTimeRangePicker["default"]
|
|
181
|
+
}
|
|
182
|
+
};
|
|
@@ -86,6 +86,9 @@ var FIGMA_LINKS = {
|
|
|
86
86
|
countryPicker: {
|
|
87
87
|
"default": 'https://www.figma.com/file/Oa6VYtJcUJzEJuuRp0p4ls/Astro?type=design&node-id=4568-7532&mode=design&t=eSfQYHRFNPf37J4C-0'
|
|
88
88
|
},
|
|
89
|
+
dateTimeRangePicker: {
|
|
90
|
+
"default": 'https://www.figma.com/design/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=49152-4497&t=n7OkhpTOBBWW4rme-0'
|
|
91
|
+
},
|
|
89
92
|
helpHint: {
|
|
90
93
|
"default": 'https://www.figma.com/file/Oa6VYtJcUJzEJuuRp0p4ls/Astro?type=design&node-id=0%3A4534&t=We3h7LaaFJQnxdSy-1',
|
|
91
94
|
withLink: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=28958%3A40081&mode=design&t=WmSYPx1hR8kxFiXf-1'
|
|
@@ -73,7 +73,7 @@ var SelectFieldBase = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
73
73
|
variant: "forms.select"
|
|
74
74
|
}, triggerProps, ariaProps, {
|
|
75
75
|
"aria-describedby": helperText && helperTextId
|
|
76
|
-
}), ___EmotionJSX(Box, _extends({
|
|
76
|
+
}), slots === null || slots === void 0 ? void 0 : slots.leftOfData, ___EmotionJSX(Box, _extends({
|
|
77
77
|
as: "span",
|
|
78
78
|
variant: "forms.select.currentValue"
|
|
79
79
|
}, valueProps), state.selectedItem ? state.selectedItem.rendered : ___EmotionJSX(Text, {
|
|
@@ -148,6 +148,8 @@ SelectFieldBase.propTypes = _objectSpread(_objectSpread({
|
|
|
148
148
|
}),
|
|
149
149
|
/** Provides a way to insert markup in specified places. */
|
|
150
150
|
slots: PropTypes.shape({
|
|
151
|
+
/** The given node will be inserted before the text in field container. */
|
|
152
|
+
leftOfData: PropTypes.node,
|
|
151
153
|
/** The given node will be inserted into the field container. */
|
|
152
154
|
inContainer: PropTypes.node
|
|
153
155
|
}),
|
|
@@ -0,0 +1,167 @@
|
|
|
1
|
+
import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
|
|
2
|
+
import _padStartInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/pad-start";
|
|
3
|
+
import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
|
|
4
|
+
import React, { useState } from 'react';
|
|
5
|
+
import { Time } from '@internationalized/date';
|
|
6
|
+
import CalendarIcon from '@pingux/mdi-react/CalendarIcon';
|
|
7
|
+
import { withDesign } from 'storybook-addon-designs';
|
|
8
|
+
import { useModalState } from '../hooks';
|
|
9
|
+
import { Box, Button, ButtonBar, Icon, Item, Modal, OverlayProvider, RangeCalendar, SelectField, Separator, Text, TimeField } from '../index';
|
|
10
|
+
import { FIGMA_LINKS } from '../utils/designUtils/figmaLinks';
|
|
11
|
+
import { jsx as ___EmotionJSX } from "@emotion/react";
|
|
12
|
+
export default {
|
|
13
|
+
title: 'Recipes/DateTimeRangePicker',
|
|
14
|
+
decorators: [withDesign]
|
|
15
|
+
};
|
|
16
|
+
var dropdownItems = [{
|
|
17
|
+
key: 'Today',
|
|
18
|
+
name: 'Today'
|
|
19
|
+
}, {
|
|
20
|
+
key: 'From Yesterday',
|
|
21
|
+
name: 'From Yesterday'
|
|
22
|
+
}, {
|
|
23
|
+
key: 'Last 7 Days',
|
|
24
|
+
name: 'Last 7 Days'
|
|
25
|
+
}, {
|
|
26
|
+
key: 'Last 30 Days',
|
|
27
|
+
name: 'Last 30 Days'
|
|
28
|
+
}, {
|
|
29
|
+
key: 'This Month',
|
|
30
|
+
name: 'This Month'
|
|
31
|
+
}, {
|
|
32
|
+
key: 'Last Month',
|
|
33
|
+
name: 'Last Month'
|
|
34
|
+
}, {
|
|
35
|
+
key: 'Custom Range',
|
|
36
|
+
name: 'Custom Range'
|
|
37
|
+
}];
|
|
38
|
+
function convertDateTimeValueToString(timeValue, DateValue) {
|
|
39
|
+
var _context, _context2, _context3, _context4;
|
|
40
|
+
// eslint-disable-next-line prefer-const
|
|
41
|
+
var hour = timeValue.hour,
|
|
42
|
+
minute = timeValue.minute;
|
|
43
|
+
var ampm = hour >= 12 ? 'PM' : 'AM';
|
|
44
|
+
hour %= 12;
|
|
45
|
+
hour = hour || 12;
|
|
46
|
+
var hourString = String(hour);
|
|
47
|
+
var minuteString = _padStartInstanceProperty(_context = String(minute)).call(_context, 2, '0');
|
|
48
|
+
return _concatInstanceProperty(_context2 = _concatInstanceProperty(_context3 = _concatInstanceProperty(_context4 = "".concat(DateValue.toString(), " ")).call(_context4, hourString, ":")).call(_context3, minuteString, " ")).call(_context2, ampm);
|
|
49
|
+
}
|
|
50
|
+
export var Default = function Default() {
|
|
51
|
+
var modalState = useModalState();
|
|
52
|
+
var _useState = useState({
|
|
53
|
+
start: '2030-01-12',
|
|
54
|
+
end: '2030-01-15'
|
|
55
|
+
}),
|
|
56
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
57
|
+
range = _useState2[0],
|
|
58
|
+
setRange = _useState2[1];
|
|
59
|
+
var _useState3 = useState(new Time(1)),
|
|
60
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
61
|
+
startTime = _useState4[0],
|
|
62
|
+
setStartTime = _useState4[1];
|
|
63
|
+
var _useState5 = useState(new Time(12, 59)),
|
|
64
|
+
_useState6 = _slicedToArray(_useState5, 2),
|
|
65
|
+
endTime = _useState6[0],
|
|
66
|
+
setEndTime = _useState6[1];
|
|
67
|
+
var _useState7 = useState('Today'),
|
|
68
|
+
_useState8 = _slicedToArray(_useState7, 2),
|
|
69
|
+
selectedKey = _useState8[0],
|
|
70
|
+
setSelectedKey = _useState8[1];
|
|
71
|
+
var handleSelectionChange = function handleSelectionChange(key) {
|
|
72
|
+
if (key === 'Custom Range') {
|
|
73
|
+
modalState.open();
|
|
74
|
+
}
|
|
75
|
+
setSelectedKey(key);
|
|
76
|
+
};
|
|
77
|
+
return ___EmotionJSX(Box, {
|
|
78
|
+
gap: "lg"
|
|
79
|
+
}, ___EmotionJSX(Text, null, "Click on the \u2018Custom Range\u2019 option to view the modal"), ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(SelectField, {
|
|
80
|
+
width: "200px",
|
|
81
|
+
items: dropdownItems,
|
|
82
|
+
selectedKey: selectedKey,
|
|
83
|
+
onSelectionChange: handleSelectionChange,
|
|
84
|
+
label: "Date Range",
|
|
85
|
+
slots: {
|
|
86
|
+
leftOfData: ___EmotionJSX(Icon, {
|
|
87
|
+
icon: CalendarIcon,
|
|
88
|
+
color: "accent.40",
|
|
89
|
+
mr: "xs",
|
|
90
|
+
title: {
|
|
91
|
+
name: 'Calendar Icon'
|
|
92
|
+
}
|
|
93
|
+
})
|
|
94
|
+
}
|
|
95
|
+
}, function (item) {
|
|
96
|
+
return ___EmotionJSX(Item, {
|
|
97
|
+
key: item.key
|
|
98
|
+
}, item.name);
|
|
99
|
+
}), modalState.isOpen && ___EmotionJSX(Modal, {
|
|
100
|
+
isOpen: modalState.isOpen,
|
|
101
|
+
onClose: modalState.close,
|
|
102
|
+
hasCloseButton: true,
|
|
103
|
+
title: "Custom Date and Time Range",
|
|
104
|
+
contentProps: {
|
|
105
|
+
maxWidth: '636px',
|
|
106
|
+
width: '100%'
|
|
107
|
+
}
|
|
108
|
+
}, ___EmotionJSX(Box, {
|
|
109
|
+
gap: "lg",
|
|
110
|
+
mt: "lg"
|
|
111
|
+
}, ___EmotionJSX(Box, {
|
|
112
|
+
minHeight: "358px"
|
|
113
|
+
}, ___EmotionJSX(Text, {
|
|
114
|
+
as: "h2",
|
|
115
|
+
variant: "H2",
|
|
116
|
+
mb: "xs"
|
|
117
|
+
}, "Date Range"), ___EmotionJSX(RangeCalendar, {
|
|
118
|
+
value: range,
|
|
119
|
+
onChange: setRange
|
|
120
|
+
})), ___EmotionJSX(Separator, {
|
|
121
|
+
margin: 0
|
|
122
|
+
}), ___EmotionJSX(Box, null, ___EmotionJSX(Text, {
|
|
123
|
+
as: "h2",
|
|
124
|
+
variant: "H2"
|
|
125
|
+
}, "Time Range"), ___EmotionJSX(Box, {
|
|
126
|
+
isRow: true,
|
|
127
|
+
gap: "lg",
|
|
128
|
+
alignItems: "center",
|
|
129
|
+
mt: "xs"
|
|
130
|
+
}, ___EmotionJSX(TimeField, {
|
|
131
|
+
label: "Start Time",
|
|
132
|
+
value: startTime,
|
|
133
|
+
onChange: setStartTime
|
|
134
|
+
}), ___EmotionJSX(Box, {
|
|
135
|
+
height: "59.95px"
|
|
136
|
+
}, ___EmotionJSX(Box, {
|
|
137
|
+
height: "19.95px"
|
|
138
|
+
}), ___EmotionJSX(Box, {
|
|
139
|
+
height: "40px",
|
|
140
|
+
justifyContent: "center"
|
|
141
|
+
}, ___EmotionJSX(Text, {
|
|
142
|
+
as: "h2",
|
|
143
|
+
variant: "H2"
|
|
144
|
+
}, "-"))), ___EmotionJSX(TimeField, {
|
|
145
|
+
label: "End Time",
|
|
146
|
+
value: endTime,
|
|
147
|
+
onChange: setEndTime
|
|
148
|
+
}))), ___EmotionJSX(Separator, {
|
|
149
|
+
margin: 0
|
|
150
|
+
}), ___EmotionJSX(Text, null, convertDateTimeValueToString(startTime, range.start), ' ', "-", ' ', convertDateTimeValueToString(endTime, range.end)), ___EmotionJSX(ButtonBar, {
|
|
151
|
+
sx: {
|
|
152
|
+
padding: 0
|
|
153
|
+
}
|
|
154
|
+
}, ___EmotionJSX(Button, {
|
|
155
|
+
variant: "primary",
|
|
156
|
+
"data-id": "apply-button"
|
|
157
|
+
}, "Apply"), ___EmotionJSX(Button, {
|
|
158
|
+
variant: "link",
|
|
159
|
+
"data-id": "cancel-button"
|
|
160
|
+
}, "Cancel"))))));
|
|
161
|
+
};
|
|
162
|
+
Default.parameters = {
|
|
163
|
+
design: {
|
|
164
|
+
type: 'figma',
|
|
165
|
+
url: FIGMA_LINKS.dateTimeRangePicker["default"]
|
|
166
|
+
}
|
|
167
|
+
};
|
|
@@ -79,6 +79,9 @@ export var FIGMA_LINKS = {
|
|
|
79
79
|
countryPicker: {
|
|
80
80
|
"default": 'https://www.figma.com/file/Oa6VYtJcUJzEJuuRp0p4ls/Astro?type=design&node-id=4568-7532&mode=design&t=eSfQYHRFNPf37J4C-0'
|
|
81
81
|
},
|
|
82
|
+
dateTimeRangePicker: {
|
|
83
|
+
"default": 'https://www.figma.com/design/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=49152-4497&t=n7OkhpTOBBWW4rme-0'
|
|
84
|
+
},
|
|
82
85
|
helpHint: {
|
|
83
86
|
"default": 'https://www.figma.com/file/Oa6VYtJcUJzEJuuRp0p4ls/Astro?type=design&node-id=0%3A4534&t=We3h7LaaFJQnxdSy-1',
|
|
84
87
|
withLink: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=28958%3A40081&mode=design&t=WmSYPx1hR8kxFiXf-1'
|