@pingux/astro 2.70.0 → 2.71.0-alpha.1

package/lib/recipes/DateTimeRangePicker.stories.js

@@ -0,0 +1,167 @@
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import _padStartInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/pad-start";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import React, { useState } from 'react';
+import { Time } from '@internationalized/date';
+import CalendarIcon from '@pingux/mdi-react/CalendarIcon';
+import { withDesign } from 'storybook-addon-designs';
+import { useModalState } from '../hooks';
+import { Box, Button, ButtonBar, Icon, Item, Modal, OverlayProvider, RangeCalendar, SelectField, Separator, Text, TimeField } from '../index';
+import { FIGMA_LINKS } from '../utils/designUtils/figmaLinks';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Recipes/DateTimeRangePicker',
+  decorators: [withDesign]
+};
+var dropdownItems = [{
+  key: 'Today',
+  name: 'Today'
+}, {
+  key: 'From Yesterday',
+  name: 'From Yesterday'
+}, {
+  key: 'Last 7 Days',
+  name: 'Last 7 Days'
+}, {
+  key: 'Last 30 Days',
+  name: 'Last 30 Days'
+}, {
+  key: 'This Month',
+  name: 'This Month'
+}, {
+  key: 'Last Month',
+  name: 'Last Month'
+}, {
+  key: 'Custom Range',
+  name: 'Custom Range'
+}];
+function convertDateTimeValueToString(timeValue, DateValue) {
+  var _context, _context2, _context3, _context4;
+  // eslint-disable-next-line prefer-const
+  var hour = timeValue.hour,
+    minute = timeValue.minute;
+  var ampm = hour >= 12 ? 'PM' : 'AM';
+  hour %= 12;
+  hour = hour || 12;
+  var hourString = String(hour);
+  var minuteString = _padStartInstanceProperty(_context = String(minute)).call(_context, 2, '0');
+  return _concatInstanceProperty(_context2 = _concatInstanceProperty(_context3 = _concatInstanceProperty(_context4 = "".concat(DateValue.toString(), " ")).call(_context4, hourString, ":")).call(_context3, minuteString, " ")).call(_context2, ampm);
+}
+export var Default = function Default() {
+  var modalState = useModalState();
+  var _useState = useState({
+      start: '2030-01-12',
+      end: '2030-01-15'
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    range = _useState2[0],
+    setRange = _useState2[1];
+  var _useState3 = useState(new Time(1)),
+    _useState4 = _slicedToArray(_useState3, 2),
+    startTime = _useState4[0],
+    setStartTime = _useState4[1];
+  var _useState5 = useState(new Time(12, 59)),
+    _useState6 = _slicedToArray(_useState5, 2),
+    endTime = _useState6[0],
+    setEndTime = _useState6[1];
+  var _useState7 = useState('Today'),
+    _useState8 = _slicedToArray(_useState7, 2),
+    selectedKey = _useState8[0],
+    setSelectedKey = _useState8[1];
+  var handleSelectionChange = function handleSelectionChange(key) {
+    if (key === 'Custom Range') {
+      modalState.open();
+    }
+    setSelectedKey(key);
+  };
+  return ___EmotionJSX(Box, {
+    gap: "lg"
+  }, ___EmotionJSX(Text, null, "Click on the \u2018Custom Range\u2019 option to view the modal"), ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(SelectField, {
+    width: "200px",
+    items: dropdownItems,
+    selectedKey: selectedKey,
+    onSelectionChange: handleSelectionChange,
+    label: "Date Range",
+    slots: {
+      leftOfData: ___EmotionJSX(Icon, {
+        icon: CalendarIcon,
+        color: "accent.40",
+        mr: "xs",
+        title: {
+          name: 'Calendar Icon'
+        }
+      })
+    }
+  }, function (item) {
+    return ___EmotionJSX(Item, {
+      key: item.key
+    }, item.name);
+  }), modalState.isOpen && ___EmotionJSX(Modal, {
+    isOpen: modalState.isOpen,
+    onClose: modalState.close,
+    hasCloseButton: true,
+    title: "Custom Date and Time Range",
+    contentProps: {
+      maxWidth: '636px',
+      width: '100%'
+    }
+  }, ___EmotionJSX(Box, {
+    gap: "lg",
+    mt: "lg"
+  }, ___EmotionJSX(Box, {
+    minHeight: "358px"
+  }, ___EmotionJSX(Text, {
+    as: "h2",
+    variant: "H2",
+    mb: "xs"
+  }, "Date Range"), ___EmotionJSX(RangeCalendar, {
+    value: range,
+    onChange: setRange
+  })), ___EmotionJSX(Separator, {
+    margin: 0
+  }), ___EmotionJSX(Box, null, ___EmotionJSX(Text, {
+    as: "h2",
+    variant: "H2"
+  }, "Time Range"), ___EmotionJSX(Box, {
+    isRow: true,
+    gap: "lg",
+    alignItems: "center",
+    mt: "xs"
+  }, ___EmotionJSX(TimeField, {
+    label: "Start Time",
+    value: startTime,
+    onChange: setStartTime
+  }), ___EmotionJSX(Box, {
+    height: "59.95px"
+  }, ___EmotionJSX(Box, {
+    height: "19.95px"
+  }), ___EmotionJSX(Box, {
+    height: "40px",
+    justifyContent: "center"
+  }, ___EmotionJSX(Text, {
+    as: "h2",
+    variant: "H2"
+  }, "-"))), ___EmotionJSX(TimeField, {
+    label: "End Time",
+    value: endTime,
+    onChange: setEndTime
+  }))), ___EmotionJSX(Separator, {
+    margin: 0
+  }), ___EmotionJSX(Text, null, convertDateTimeValueToString(startTime, range.start), ' ', "-", ' ', convertDateTimeValueToString(endTime, range.end)), ___EmotionJSX(ButtonBar, {
+    sx: {
+      padding: 0
+    }
+  }, ___EmotionJSX(Button, {
+    variant: "primary",
+    "data-id": "apply-button"
+  }, "Apply"), ___EmotionJSX(Button, {
+    variant: "link",
+    "data-id": "cancel-button"
+  }, "Cancel"))))));
+};
+Default.parameters = {
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.dateTimeRangePicker["default"]
+  }
+};

package/lib/styles/forms/index.js

@@ -22,6 +22,7 @@ import search from '../../components/SearchField/Search.styles';
 import * as select from '../../components/SelectField/Select.styles';
 import * as switchable from '../../components/Switch/Switch.styles'; // 'switch' is a reserved keyword
 import textarea from '../../components/TextArea/TextArea.styles';
+import timeField from '../../components/TimeField/TimeField.styles';
 
 // See ThemeUI docs on variants and themes for intended structure
 // Variants should be defined in the approprate file.
@@ -35,6 +36,7 @@ export default _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSp
   radio: radio
 }, select), {}, {
   textarea: textarea,
+  timeField: timeField,
   "switch": _objectSpread({}, switchable),
   search: search
 });

package/lib/styles/variants/variants.js

@@ -46,6 +46,7 @@ import separator from '../../components/Separator/Separator.styles';
 import stepper from '../../components/Stepper/Stepper.styles';
 import table from '../../components/Table/Table.styles';
 import * as tab from '../../components/Tabs/Tabs.style';
+import timefield from '../../components/TimeField/TimeField.styles';
 import timeZone from '../../components/TimeZonePicker/TimeZone.styles';
 import tooltip from '../../components/TooltipTrigger/Tooltip.styles';
 import treeView from '../../components/TreeView/TreeView.styles';
@@ -86,6 +87,7 @@ export default _objectSpread({
   separator: separator,
   stepper: stepper,
   table: table,
+  timefield: timefield,
   timeZone: timeZone,
   tooltip: tooltip,
   treeView: treeView

package/lib/types/index.js

@@ -44,4 +44,5 @@ export * from './tab';
 export * from './table';
 export * from './tabs';
 export * from './text';
+export * from './timefield';
 export * from './tooltipTrigger';

package/lib/types/timefield.js

@@ -0,0 +1 @@
+export {};

package/lib/utils/designUtils/figmaLinks.js

@@ -79,6 +79,9 @@ export var FIGMA_LINKS = {
   countryPicker: {
     "default": 'https://www.figma.com/file/Oa6VYtJcUJzEJuuRp0p4ls/Astro?type=design&node-id=4568-7532&mode=design&t=eSfQYHRFNPf37J4C-0'
   },
+  dateTimeRangePicker: {
+    "default": 'https://www.figma.com/design/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=49152-4497&t=n7OkhpTOBBWW4rme-0'
+  },
   helpHint: {
     "default": 'https://www.figma.com/file/Oa6VYtJcUJzEJuuRp0p4ls/Astro?type=design&node-id=0%3A4534&t=We3h7LaaFJQnxdSy-1',
     withLink: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=28958%3A40081&mode=design&t=WmSYPx1hR8kxFiXf-1'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.70.0",
+  "version": "2.71.0-alpha.1",
   "description": "React component library for Ping Identity's design system",
   "repository": {
     "type": "git",
@@ -51,7 +51,7 @@
     "@react-aria/checkbox": "^3.2.0",
     "@react-aria/color": "~3.0.0-beta.15",
     "@react-aria/combobox": "^3.0.0",
-    "@react-aria/datepicker": "^3.10.0",
+    "@react-aria/datepicker": "^3.10.1",
     "@react-aria/dialog": "^3.1.2",
     "@react-aria/dnd": "^3.5.0",
     "@react-aria/focus": "~3.8.0",
@@ -76,7 +76,7 @@
     "@react-spectrum/utils": "~3.6.1",
     "@react-stately/calendar": "^3.5.0",
     "@react-stately/color": "~3.1.1",
-    "@react-stately/datepicker": "^3.9.3",
+    "@react-stately/datepicker": "^3.9.4",
     "@react-stately/dnd": "^3.2.6",
     "@react-stately/grid": "~3.3.1",
     "@react-stately/layout": "^3.13.4",
@@ -93,7 +93,7 @@
     "@react-types/button": "^3.9.3",
     "@react-types/calendar": "^3.4.5",
     "@react-types/checkbox": "^3.8.0",
-    "@react-types/datepicker": "^3.7.3",
+    "@react-types/datepicker": "^3.7.4",
     "@react-types/grid": "^3.2.4",
     "@react-types/select": "^3.9.1",
     "@react-types/shared": "^3.23.1",