@pingux/astro 2.103.0 → 2.104.0-alpha.1

package/lib/cjs/components/Calendar/Calendar.js

@@ -112,7 +112,8 @@ var Calendar = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     variant: "itemTitle",
     role: "heading",
     "aria-level": 3,
-    fontWeight: 3
+    fontWeight: 3,
+    flex: 1
   }, title);
   return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({}, calendarProps, {
     ref: calenderRef,
@@ -131,27 +132,30 @@ var Calendar = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       return handleYearSelection(nav.PREVIOUS);
     },
     mx: "sm",
+    p: 0,
     isDisabled: prevButtonProps.isDisabled,
     "aria-label": "Previous year navigation"
   }, (0, _react2.jsx)(_index.Icon, {
     icon: _ChevronDoubleLeftIcon["default"],
-    size: 18,
+    size: 25,
     title: {
       name: 'Chevron Double Left Icon'
     }
   })), (0, _react2.jsx)(_index.IconButton, (0, _extends2["default"])({}, prevButtonProps, {
-    "aria-label": "Previous month navigation"
+    "aria-label": "Previous month navigation",
+    p: 0
   }), (0, _react2.jsx)(_index.Icon, {
     icon: _ChevronLeftIcon["default"],
-    size: 18,
+    size: 25,
     title: {
       name: 'Chevron Left Icon'
     }
   })), renderTitle, (0, _react2.jsx)(_index.IconButton, (0, _extends2["default"])({}, nextButtonProps, {
+    p: 0,
     "aria-label": "Next month navigation"
   }), (0, _react2.jsx)(_index.Icon, {
     icon: _ChevronRightIcon["default"],
-    size: 18,
+    size: 25,
     title: {
       name: 'Chevron Right Icon'
     }
@@ -161,11 +165,12 @@ var Calendar = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       return handleYearSelection(nav.NEXT);
     },
     mx: "sm",
+    p: 0,
     isDisabled: nextButtonProps.isDisabled,
     "aria-label": "Next year navigation"
   }, (0, _react2.jsx)(_index.Icon, {
     icon: _ChevronDoubleRightIcon["default"],
-    size: 18,
+    size: 25,
     title: {
       name: 'Chevron Double Right Icon'
     }

package/lib/cjs/components/Calendar/Calendar.styles.d.ts

@@ -1,6 +1,7 @@
 declare const _default: {
     calendarBody: {
         pb: string;
+        px: string;
         borderTop: string;
         borderTopColor: string;
         '& > tr:nth-of-type(odd) ': {
@@ -26,9 +27,10 @@ declare const _default: {
             boxShadow: string;
         };
         '&.is-focused': {
+            outlineOffset: string;
+            zIndex: number;
             outline: string;
             outlineColor: string;
-            outlineOffset: string;
         };
         '&.is-unavailable': {
             backgroundColor: string;

package/lib/cjs/components/Calendar/Calendar.styles.js

@@ -19,6 +19,7 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 var calendarBody = {
   pb: '10px',
+  px: '1px',
   borderTop: '1px solid',
   borderTopColor: 'neutral.80',
   '& > tr:nth-of-type(odd) ': {
@@ -43,7 +44,10 @@ var calendarButton = {
     outline: 'none',
     boxShadow: 'none'
   },
-  '&.is-focused': _objectSpread({}, _Buttons.defaultFocus),
+  '&.is-focused': _objectSpread(_objectSpread({}, _Buttons.defaultFocus), {}, {
+    outlineOffset: '0px',
+    zIndex: 1
+  }),
   '&.is-unavailable': {
     backgroundColor: 'neutral.80'
   },

package/lib/cjs/components/DatePicker/DatePicker.stories.js

@@ -14,7 +14,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.UnavailableDates = exports.Success = exports.Required = exports.ReadOnly = exports.MinimumDate = exports.MaximumDate = exports.FormatHelperText = exports.Error = exports.Disabled = exports.DefaultValue = exports.DefaultOpen = exports.Default = exports.Controlled = void 0;
+exports["default"] = exports.UnavailableDates = exports.Required = exports.ReadOnly = exports.MinimumDate = exports.MaximumDate = exports.FormatHelperText = exports.Error = exports.Disabled = exports.DefaultValue = exports.DefaultOpen = exports.Default = exports.Controlled = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
@@ -24,6 +24,7 @@ var _utils = require("@react-aria/utils");
 var _addonActions = require("@storybook/addon-actions");
 var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
 var _index = require("../../index");
+var _figmaLinks = require("../../utils/designUtils/figmaLinks");
 var _ariaAttributes = require("../../utils/docUtils/ariaAttributes");
 var _DatePicker = _interopRequireDefault(require("./DatePicker"));
 var _DatePicker2 = _interopRequireDefault(require("./DatePicker.mdx"));
@@ -43,6 +44,14 @@ var _default = {
       page: function page() {
         return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_DatePicker2["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
       }
+    },
+    a11y: {
+      config: {
+        rules: [{
+          id: 'color-contrast',
+          enabled: false
+        }]
+      }
     }
   },
   argTypes: _objectSpread({
@@ -106,7 +115,7 @@ var _default = {
     isDisabled: false,
     isReadOnly: false,
     isRequired: false,
-    label: 'Example label',
+    label: 'Example Label',
     onChange: null
   }
 };
@@ -115,12 +124,24 @@ var Default = function Default(args) {
   return (0, _react2.jsx)(_DatePicker["default"], args);
 };
 exports.Default = Default;
+Default.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.datePicker["default"]
+  }
+};
 var DefaultValue = function DefaultValue(args) {
   return (0, _react2.jsx)(_DatePicker["default"], (0, _extends2["default"])({}, args, {
     defaultValue: "2030-01-15"
   }));
 };
 exports.DefaultValue = DefaultValue;
+DefaultValue.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.datePicker.defaultValue
+  }
+};
 var Controlled = function Controlled(args) {
   var _useState = (0, _react.useState)(null),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
@@ -150,12 +171,24 @@ var Disabled = function Disabled(args) {
   }));
 };
 exports.Disabled = Disabled;
+Disabled.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.datePicker.disabled
+  }
+};
 var ReadOnly = function ReadOnly(args) {
   return (0, _react2.jsx)(_DatePicker["default"], (0, _extends2["default"])({}, args, {
     isReadOnly: true
   }));
 };
 exports.ReadOnly = ReadOnly;
+ReadOnly.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.datePicker.readOnly
+  }
+};
 var UnavailableDates = function UnavailableDates(args) {
   var unavailableRanges = [['2030-07-28', '2030-08-03'], ['2030-08-11', '2030-08-17'], ['2030-08-25', '2030-08-31']];
   return (0, _react2.jsx)(_DatePicker["default"], (0, _extends2["default"])({}, args, {
@@ -164,6 +197,12 @@ var UnavailableDates = function UnavailableDates(args) {
   }));
 };
 exports.UnavailableDates = UnavailableDates;
+UnavailableDates.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.datePicker.unavailableDates
+  }
+};
 var MinimumDate = function MinimumDate(args) {
   return (0, _react2.jsx)(_DatePicker["default"], (0, _extends2["default"])({}, args, {
     defaultValue: "2030-01-15",
@@ -171,6 +210,12 @@ var MinimumDate = function MinimumDate(args) {
   }));
 };
 exports.MinimumDate = MinimumDate;
+MinimumDate.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.datePicker.minimumDate
+  }
+};
 var MaximumDate = function MaximumDate(args) {
   return (0, _react2.jsx)(_DatePicker["default"], (0, _extends2["default"])({}, args, {
     defaultValue: "2030-01-15",
@@ -178,18 +223,36 @@ var MaximumDate = function MaximumDate(args) {
   }));
 };
 exports.MaximumDate = MaximumDate;
+MaximumDate.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.datePicker.maximumDate
+  }
+};
 var Required = function Required(args) {
   return (0, _react2.jsx)(_DatePicker["default"], (0, _extends2["default"])({}, args, {
     isRequired: true
   }));
 };
 exports.Required = Required;
+Required.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.datePicker.required
+  }
+};
 var FormatHelperText = function FormatHelperText(args) {
   return (0, _react2.jsx)(_DatePicker["default"], (0, _extends2["default"])({}, args, {
     hasFormatHelpText: true
   }));
 };
 exports.FormatHelperText = FormatHelperText;
+FormatHelperText.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.datePicker.formatHelperText
+  }
+};
 var DefaultOpen = function DefaultOpen(args) {
   return (0, _react2.jsx)(_DatePicker["default"], (0, _extends2["default"])({}, args, {
     isDefaultOpen: true,
@@ -197,6 +260,12 @@ var DefaultOpen = function DefaultOpen(args) {
   }));
 };
 exports.DefaultOpen = DefaultOpen;
+DefaultOpen.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.datePicker.defaultOpen
+  }
+};
 var Error = function Error(args) {
   return (0, _react2.jsx)(_DatePicker["default"], (0, _extends2["default"])({}, args, {
     status: "error",
@@ -204,10 +273,9 @@ var Error = function Error(args) {
   }));
 };
 exports.Error = Error;
-var Success = function Success(args) {
-  return (0, _react2.jsx)(_DatePicker["default"], (0, _extends2["default"])({}, args, {
-    status: "success",
-    helperText: "Here is some helpful text..."
-  }));
-};
-exports.Success = Success;
+Error.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.datePicker.error
+  }
+};

package/lib/cjs/components/Image/Image.stories.js

@@ -95,7 +95,7 @@ var Disabled = function Disabled() {
 exports.Disabled = Disabled;
 var FallbackImage = function FallbackImage() {
   return (0, _react2.jsx)(_index.Image, {
-    fallbackImage: _images.pingImg,
+    fallbackImage: _images.fallbackImg,
     fallbackAlt: "Ping Identity",
     src: "https://deelay.me/7000/https://picsum.photos/150/150",
     sx: {

package/lib/cjs/utils/designUtils/figmaLinks.d.ts

@@ -79,6 +79,19 @@ export declare const FIGMA_LINKS: {
     countryPicker: {
         default: string;
     };
+    datePicker: {
+        default: string;
+        defaultValue: string;
+        disabled: string;
+        readOnly: string;
+        required: string;
+        formatHelperText: string;
+        error: string;
+        defaultOpen: string;
+        unavailableDates: string;
+        minimumDate: string;
+        maximumDate: string;
+    };
     dateTimeRangePicker: {
         default: string;
     };

package/lib/cjs/utils/designUtils/figmaLinks.js

@@ -86,6 +86,19 @@ var FIGMA_LINKS = {
   countryPicker: {
     "default": 'https://www.figma.com/file/Oa6VYtJcUJzEJuuRp0p4ls/Astro?type=design&node-id=4568-7532&mode=design&t=eSfQYHRFNPf37J4C-0'
   },
+  datePicker: {
+    "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=54750-58556&mode=design&t=xKC70FhpRo7cbuqQ-4',
+    defaultValue: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&mode=design&node-id=53997-4894&t=xKC70FhpRo7cbuqQ-4',
+    disabled: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&mode=design&node-id=54750-58557&t=xKC70FhpRo7cbuqQ-4',
+    readOnly: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&mode=design&node-id=54750-58568&t=xKC70FhpRo7cbuqQ-4',
+    required: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&mode=design&node-id=54750-58706&t=xKC70FhpRo7cbuqQ-4',
+    formatHelperText: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&mode=design&node-id=54750-58722&t=xKC70FhpRo7cbuqQ-4',
+    error: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&mode=design&node-id=54752-58829&t=xKC70FhpRo7cbuqQ-4',
+    defaultOpen: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&mode=design&node-id=54752-58855&t=xKC70FhpRo7cbuqQ-4',
+    unavailableDates: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&mode=design&node-id=57486-7296&t=xKC70FhpRo7cbuqQ-4',
+    minimumDate: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&mode=design&node-id=57486-7812&t=xKC70FhpRo7cbuqQ-4',
+    maximumDate: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&mode=design&node-id=57486-7297&t=xKC70FhpRo7cbuqQ-4'
+  },
   dateTimeRangePicker: {
     "default": 'https://www.figma.com/design/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=49152-4497&t=n7OkhpTOBBWW4rme-0'
   },