@pingux/astro 2.36.0-alpha.1 → 2.36.0-alpha.3

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

@@ -34,7 +34,13 @@ var FIGMA_LINKS = {
     overflowing: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=45064-7148&mode=design&t=0RGDgLyKBzT6bOXO-0'
   },
   button: {
-    "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=0-1&t=8Wwd3tIBh3GEjCJB-0'
+    "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=44916%3A47047&mode=dev',
+    disabled: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=45003%3A54887&mode=dev',
+    textIconButton: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=45003%3A54941&mode=dev',
+    inlineButton: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=44916%3A47247&mode=dev',
+    colorBlockButton: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=44916%3A47405&mode=dev',
+    critical: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=44916%3A47237&mode=dev',
+    primary: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=44916%3A47151&mode=dev'
   },
   buttonBar: {
     "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=46080%3A753&mode=dev',
@@ -43,7 +49,13 @@ var FIGMA_LINKS = {
     secondaryRightAligned: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=46080%3A788&mode=dev'
   },
   calendar: {
-    "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=6373%3A25490&t=BoHXzVpQq9Lf7MaU-1'
+    "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=47640-5789&mode=design&t=SZGzEV7PufQjYBN5-4',
+    defaultValue: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=46454-14593&mode=design&t=PX1Q47IuuVvOafDQ-4',
+    disabled: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=46454-15106&mode=design&t=PX1Q47IuuVvOafDQ-4',
+    unavailableDates: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=46454-15681&mode=design&t=PX1Q47IuuVvOafDQ-4',
+    minimumDate: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=46454-16197&mode=design&t=PX1Q47IuuVvOafDQ-4',
+    maximumDate: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=46454-16454&mode=design&t=PX1Q47IuuVvOafDQ-4',
+    autofocus: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=46454-16768&mode=design&t=PX1Q47IuuVvOafDQ-4'
   },
   callout: {
     "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=14289-33201&t=VgqEexa1CXAXfPpp-0'

package/lib/components/Badge/Badge.js

@@ -14,7 +14,6 @@ import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/ins
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 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) { _defineProperty(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; }
 import React from 'react';
-import PropTypes from 'prop-types';
 import { Badge as ThemeUIBadge } from 'theme-ui';
 import { Box, Text } from '../..';
 import { BadgeContext } from '../../context/BadgeContext';
@@ -49,49 +48,24 @@ var Badge = /*#__PURE__*/React.forwardRef(function (props, ref) {
   // The following is to correct a visual regression released in 1.39.0 https://jira.pingidentity.com/browse/UIP-5907.
   // TODO : Remove in Astro V2 with theme remapping roll out.
   var oldVariantPaths = ['boxes.countBadge', 'boxes.countNeutral', 'boxes.itemBadgeWithSlot', 'collapsiblePanel.collapsiblePanelBadge', 'boxes.environmentBadge', 'boxes.readOnlyBadge', 'boxes.selectedItemBadge'];
-  var fixedVariant = _includesInstanceProperty(oldVariantPaths).call(oldVariantPaths, props.variant) ? "variants.".concat(props.variant) : props.variant;
+  var fixedVariant = variant && _includesInstanceProperty(oldVariantPaths).call(oldVariantPaths, variant) ? "variants.".concat(variant) : variant;
   return ___EmotionJSX(BadgeContext.Provider, {
     value: {
       bg: bg
     }
-  }, ___EmotionJSX(ThemeUIBadge, _extends({
-    isRow: true
-  }, badgeProps, {
-    variant: props.variant ? fixedVariant : 'baseBadge'
+  }, ___EmotionJSX(ThemeUIBadge, _extends({}, badgeProps, {
+    variant: variant ? fixedVariant : 'baseBadge'
   }), (slots === null || slots === void 0 ? void 0 : slots.leftIcon) && ___EmotionJSX(Box, {
     mr: "xs"
   }, slots.leftIcon), ___EmotionJSX(Text, _extends({
     variant: "label",
     color: textColor,
-    sx: isUppercase && {
+    sx: isUppercase ? {
       textTransform: 'uppercase',
       fontSize: '11px'
-    }
+    } : {}
   }, textProps), label), children));
 });
-Badge.propTypes = {
-  /** The text color of the badge. */
-  textColor: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
-  /** The background color of the badge. */
-  bg: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
-  /** Provides a way to insert markup in specified places. */
-  slots: PropTypes.shape({
-    /** The given node will be inserted into left side of the badge. */
-    leftIcon: PropTypes.node
-  }),
-  /** The label of the badge. */
-  label: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
-  /** Props object that is spread directly into the text. */
-  textProps: PropTypes.shape({}),
-  /** When true, display badge label as uppercase. */
-  isUppercase: PropTypes.bool,
-  /** Alignment of badge relative to parent container. */
-  align: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
-  /** JSX styling that is passed into the component. */
-  sx: PropTypes.shape({}),
-  /** The variant of the badge */
-  variant: PropTypes.oneOfType([PropTypes.string, PropTypes.object])
-};
 Badge.defaultProps = {
   textColor: 'white',
   bg: colors.neutral[10],

package/lib/components/Badge/Badge.stories.js

@@ -9,7 +9,7 @@ import Earth from '@pingux/mdi-react/EarthIcon';
 import { withDesign } from 'storybook-addon-designs';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import { Badge, Box, Icon, IconButton } from '../../index';
-import { flatColorList } from '../../styles/colors.js';
+import { flatColorList } from '../../styles/colors';
 import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks.ts';
 import BadgeReadme from './Badge.mdx';
 import { jsx as ___EmotionJSX } from "@emotion/react";

package/lib/components/Box/Box.stories.js

@@ -5,7 +5,7 @@ import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance
 import React from 'react';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import { Box, Image, Text } from '../../index';
-import { flatColorList } from '../../styles/colors.js';
+import { flatColorList } from '../../styles/colors';
 import { htmlElements } from '../../utils/devUtils/constants/htmlElements';
 import { pingImg } from '../../utils/devUtils/constants/images';
 import BoxReadme from './Box.mdx';

package/lib/components/Button/Button.stories.js

@@ -51,68 +51,109 @@ Default.parameters = {
     url: FIGMA_LINKS.button["default"]
   }
 };
-export var Disabled = function Disabled() {
+export var Primary = function Primary() {
   return ___EmotionJSX(Button, {
-    isDisabled: true
+    variant: "primary"
   }, "Button Text");
 };
-export var TextIconButton = function TextIconButton() {
+Primary.parameters = {
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.button.primary
+  }
+};
+export var Critical = function Critical() {
   return ___EmotionJSX(Button, {
+    variant: "critical"
+  }, "Button Text");
+};
+Critical.parameters = {
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.button.critical
+  }
+};
+export var InlineButton = function InlineButton() {
+  return ___EmotionJSX(Box, null, ___EmotionJSX(Button, {
+    mb: "sm",
+    mr: "auto",
+    variant: "inline"
+  }, "Button Text"), ___EmotionJSX(Button, {
+    mb: "sm",
+    mr: "auto",
+    variant: "inlinePrimary"
+  }, "Button Text"));
+};
+InlineButton.parameters = {
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.button.inlineButton
+  }
+};
+export var TextIconButton = function TextIconButton() {
+  return ___EmotionJSX(Box, {
+    width: 20
+  }, ___EmotionJSX(Button, {
     mb: "sm",
     variant: "withIcon"
-  }, ___EmotionJSX(Box, {
-    isRow: true,
-    alignItems: "center"
   }, ___EmotionJSX(Icon, {
     icon: PlusIcon,
     mr: "xs",
-    color: "active",
+    color: "accent.30",
     size: 20,
     title: {
       name: 'Add Circle Icon'
     }
-  }), "Add a Form"));
-};
-export var InlineButton = function InlineButton() {
-  return ___EmotionJSX(Box, null, ___EmotionJSX(Button, {
-    mb: "sm",
-    mr: "auto",
-    variant: "inline"
-  }, "Inline"), ___EmotionJSX(Button, {
+  }), "Button Text"), ___EmotionJSX(Button, {
     mb: "sm",
     mr: "auto",
     variant: "inlineWithIcon"
   }, ___EmotionJSX(Icon, {
     icon: PlusIcon,
     mr: "xs",
-    color: "active",
+    color: "accent.30",
     size: 15,
     title: {
       name: 'Add Circle Icon'
     }
-  }), "Inline with icon"), ___EmotionJSX(Button, {
-    mb: "sm",
-    mr: "auto",
-    variant: "inlinePrimary"
-  }, "Inline primary"), ___EmotionJSX(Button, {
+  }), "Button Text"), ___EmotionJSX(Button, {
     mb: "sm",
     mr: "auto",
     variant: "inlinePrimaryWithIcon"
   }, ___EmotionJSX(Icon, {
     icon: PlusIcon,
     mr: "xs",
-    color: "active",
+    color: "accent.30",
     size: 15,
     title: {
       name: 'Add Circle Icon'
     }
-  }), "Inline primary with icon"));
+  }), "Button Text"));
+};
+TextIconButton.parameters = {
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.button.textIconButton
+  }
+};
+export var Disabled = function Disabled() {
+  return ___EmotionJSX(Button, {
+    isDisabled: true
+  }, "Button Text");
+};
+Disabled.parameters = {
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.button.disabled
+  }
 };
 export var ColorBlockButton = function ColorBlockButton(args) {
   // Change `isConfigured` property in storybook controls
   var isConfigured = args.isConfigured,
     props = _objectWithoutProperties(args, _excluded);
-  return ___EmotionJSX(Button, _extends({}, props, {
+  return ___EmotionJSX(Box, null, ___EmotionJSX(Button, _extends({
+    mb: "sm"
+  }, props, {
     variant: "colorBlock",
     className: isConfigured ? 'is-configured' : ''
   }), ___EmotionJSX(Box, null, ___EmotionJSX(Text, {
@@ -124,7 +165,19 @@ export var ColorBlockButton = function ColorBlockButton(args) {
     title: {
       name: 'Create Icon'
     }
-  }));
+  })), ___EmotionJSX(Button, _extends({}, props, {
+    variant: "colorBlockPrimary",
+    className: isConfigured ? 'is-configured' : ''
+  }), ___EmotionJSX(Box, null, ___EmotionJSX(Text, {
+    variant: "buttonTitle"
+  }, "Title"), ___EmotionJSX(Text, {
+    variant: "buttonSubtitle"
+  }, "Info")), ___EmotionJSX(Icon, {
+    icon: CreateIcon,
+    title: {
+      name: 'Create Icon'
+    }
+  })));
 };
 ColorBlockButton.argTypes = {
   isConfigured: {
@@ -134,13 +187,9 @@ ColorBlockButton.argTypes = {
     defaultValue: false
   }
 };
-export var Critical = function Critical() {
-  return ___EmotionJSX(Button, {
-    variant: "critical"
-  }, "Button Text");
-};
-export var Primary = function Primary() {
-  return ___EmotionJSX(Button, {
-    variant: "primary"
-  }, "Button Text");
+ColorBlockButton.parameters = {
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.button.colorBlockButton
+  }
 };

package/lib/components/Button/Buttons.styles.js

@@ -72,10 +72,11 @@ var primary = _objectSpread(_objectSpread({}, base), {}, {
   '&.is-focused': _objectSpread({}, defaultFocus)
 });
 var withIcon = _objectSpread(_objectSpread({}, base), {}, {
-  padding: '8.5px 15px 8.5px 10px',
+  padding: '10px 15px 10px 10px',
   bg: 'white',
   border: '1px solid',
   borderColor: 'active',
+  display: 'inline-flex',
   '&.is-hovered': _objectSpread({}, defaultHover),
   '&.is-pressed': _objectSpread({}, defaultActive),
   '&.is-focused': _objectSpread({}, defaultFocus)
@@ -234,6 +235,21 @@ var colorBlock = {
     borderColor: 'accent.20'
   }
 };
+var colorBlockPrimary = _objectSpread(_objectSpread(_objectSpread({}, colorBlock), defaultActive), {}, {
+  '& span': {
+    color: 'white',
+    textAlign: 'left'
+  },
+  '&.is-hovered': _objectSpread(_objectSpread({}, defaultHover), {}, {
+    backgroundColor: 'accent.40',
+    color: 'white'
+  }),
+  '&.is-pressed': _objectSpread(_objectSpread({}, defaultActive), {}, {
+    backgroundColor: 'accent.20',
+    border: '1px solid',
+    borderColor: 'accent.20'
+  })
+});
 var headerBar = _objectSpread(_objectSpread({}, base), {}, {
   backgroundColor: 'white',
   '&.is-hovered': _objectSpread(_objectSpread({}, defaultHover), {}, {
@@ -273,6 +289,7 @@ export default {
   quiet: quiet,
   success: success,
   colorBlock: colorBlock,
+  colorBlockPrimary: colorBlockPrimary,
   exampleText: exampleText,
   withIcon: withIcon,
   inlineWithIcon: inlineWithIcon,

package/lib/components/Calendar/Calendar.stories.js

@@ -128,16 +128,11 @@ export var DefaultValue = function DefaultValue(args) {
     defaultValue: "2022-08-10"
   }));
 };
-export var Controlled = function Controlled(args) {
-  var _useState = useState(null),
-    _useState2 = _slicedToArray(_useState, 2),
-    date = _useState2[0],
-    setDate = _useState2[1];
-  return ___EmotionJSX(Calendar, _extends({}, args, {
-    "aria-label": "calendar-component-controlled",
-    value: date,
-    onChange: setDate
-  }));
+DefaultValue.parameters = {
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.calendar.defaultValue
+  }
 };
 export var Disabled = function Disabled(args) {
   return ___EmotionJSX(Calendar, _extends({}, args, {
@@ -145,11 +140,11 @@ export var Disabled = function Disabled(args) {
     isDisabled: true
   }));
 };
-export var ReadOnly = function ReadOnly(args) {
-  return ___EmotionJSX(Calendar, _extends({}, args, {
-    "aria-label": "calendar-component-readonly",
-    isReadOnly: true
-  }));
+Disabled.parameters = {
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.calendar.disabled
+  }
 };
 export var UnavailableDates = function UnavailableDates(args) {
   var unavailableRanges = [['2022-07-29', '2022-08-05'], ['2022-08-15', '2022-08-20'], ['2022-08-25', '2022-08-26']];
@@ -165,6 +160,12 @@ export var UnavailableDates = function UnavailableDates(args) {
     isDateUnavailable: isDateUnavailable
   }));
 };
+UnavailableDates.parameters = {
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.calendar.unavailableDates
+  }
+};
 export var MinimumDate = function MinimumDate(args) {
   return ___EmotionJSX(Calendar, _extends({}, args, {
     "aria-label": "calendar-component-min-date",
@@ -172,6 +173,12 @@ export var MinimumDate = function MinimumDate(args) {
     defaultDate: "2022-09-14"
   }));
 };
+MinimumDate.parameters = {
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.calendar.minimumDate
+  }
+};
 export var MaximumDate = function MaximumDate(args) {
   return ___EmotionJSX(Calendar, _extends({}, args, {
     "aria-label": "calendar-component-max-date",
@@ -179,9 +186,32 @@ export var MaximumDate = function MaximumDate(args) {
     defaultValue: "2022-10-05"
   }));
 };
+MaximumDate.parameters = {
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.calendar.maximumDate
+  }
+};
 export var Autofocus = function Autofocus(args) {
   return ___EmotionJSX(Calendar, _extends({}, args, {
     "aria-label": "calendar-component",
     hasAutoFocus: true
   }));
+};
+Autofocus.parameters = {
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.calendar.autofocus
+  }
+};
+export var Controlled = function Controlled(args) {
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    date = _useState2[0],
+    setDate = _useState2[1];
+  return ___EmotionJSX(Calendar, _extends({}, args, {
+    "aria-label": "calendar-component-controlled",
+    value: date,
+    onChange: setDate
+  }));
 };

package/lib/components/EnvironmentBreadcrumb/EnvironmentBreadcrumb.test.js

@@ -83,17 +83,16 @@ var defaultWithSectionsProps = {
   items: itemsWithSections
 };
 var onSelectionChange = jest.fn();
-export var getComponent = function getComponent(props) {
-  return render(___EmotionJSX(OverlayProvider, null, ___EmotionJSX(EnvironmentBreadcrumb, _extends({}, defaultProps, props), function (item) {
+export var renderComponent = function renderComponent(props) {
+  return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(EnvironmentBreadcrumb, _extends({}, defaultProps, props), function (item) {
     return ___EmotionJSX(Item, {
       key: item.name,
       "data-testid": item.name
     }, item.name);
-  })));
+  }));
 };
-export var getSectionsComponent = function getSectionsComponent() {
-  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return render(___EmotionJSX(OverlayProvider, null, ___EmotionJSX(EnvironmentBreadcrumb, _extends({}, defaultWithSectionsProps, props), function (section) {
+export var renderSectionsComponent = function renderSectionsComponent(props) {
+  return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(EnvironmentBreadcrumb, _extends({}, defaultWithSectionsProps, props), function (section) {
     return (
       // eslint-disable-next-line testing-library/no-node-access
       ___EmotionJSX(Section, {
@@ -109,7 +108,14 @@ export var getSectionsComponent = function getSectionsComponent() {
         }, item.name);
       })
     );
-  })));
+  }));
+};
+var getComponent = function getComponent(props) {
+  return render(renderComponent(props));
+};
+var getSectionsComponent = function getSectionsComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return render(renderSectionsComponent(props));
 };
 beforeAll(function () {
   jest.spyOn(window.HTMLElement.prototype, 'clientWidth', 'get').mockImplementation(function () {

package/lib/components/EnvironmentBreadcrumb/EnvironmentalBreadcrumbUniversal.test.js

@@ -0,0 +1,8 @@
+import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
+import { renderComponent, renderSectionsComponent } from './EnvironmentBreadcrumb.test';
+universalComponentTests({
+  renderComponent: renderComponent
+});
+universalComponentTests({
+  renderComponent: renderSectionsComponent
+});

package/lib/hooks/useColumnStyles/useColumnStyles.js

@@ -2,13 +2,17 @@ import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import { useEffect, useState } from 'react';
 var useColumnStyles = function useColumnStyles(_ref) {
   var labelMode = _ref.labelMode;
-  var _useState = useState(false),
+  var _useState = useState({
+      sx: {
+        gridTemplateColumns: ''
+      }
+    }),
     _useState2 = _slicedToArray(_useState, 2),
     labelStyleProps = _useState2[0],
-    setlabelStyleProps = _useState2[1];
+    setLabelStyleProps = _useState2[1];
   useEffect(function () {
     if (labelMode === 'left') {
-      setlabelStyleProps({
+      setLabelStyleProps({
         sx: {
           gridTemplateColumns: '40% auto'
         }

package/lib/styles/ColorDocumentation.js

@@ -14,7 +14,7 @@ import Box from '../components/Box';
 import SelectField from '../components/SelectField';
 import Text from '../components/Text';
 import TextField from '../components/TextField';
-import { flatColorList } from './colors.js';
+import { flatColorList } from './colors';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var exactMatchThreshold = 0.02;
 function Color(_ref) {

package/lib/types/badge.js

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

package/lib/types/index.js

@@ -1,3 +1,4 @@
+export * from './badge';
 export * from './box';
 export * from './button';
 export * from './icon';

package/lib/utils/designUtils/figmaLinks.js

@@ -27,7 +27,13 @@ export var FIGMA_LINKS = {
     overflowing: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=45064-7148&mode=design&t=0RGDgLyKBzT6bOXO-0'
   },
   button: {
-    "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=0-1&t=8Wwd3tIBh3GEjCJB-0'
+    "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=44916%3A47047&mode=dev',
+    disabled: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=45003%3A54887&mode=dev',
+    textIconButton: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=45003%3A54941&mode=dev',
+    inlineButton: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=44916%3A47247&mode=dev',
+    colorBlockButton: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=44916%3A47405&mode=dev',
+    critical: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=44916%3A47237&mode=dev',
+    primary: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=44916%3A47151&mode=dev'
   },
   buttonBar: {
     "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=46080%3A753&mode=dev',
@@ -36,7 +42,13 @@ export var FIGMA_LINKS = {
     secondaryRightAligned: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=46080%3A788&mode=dev'
   },
   calendar: {
-    "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=6373%3A25490&t=BoHXzVpQq9Lf7MaU-1'
+    "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=47640-5789&mode=design&t=SZGzEV7PufQjYBN5-4',
+    defaultValue: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=46454-14593&mode=design&t=PX1Q47IuuVvOafDQ-4',
+    disabled: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=46454-15106&mode=design&t=PX1Q47IuuVvOafDQ-4',
+    unavailableDates: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=46454-15681&mode=design&t=PX1Q47IuuVvOafDQ-4',
+    minimumDate: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=46454-16197&mode=design&t=PX1Q47IuuVvOafDQ-4',
+    maximumDate: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=46454-16454&mode=design&t=PX1Q47IuuVvOafDQ-4',
+    autofocus: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=46454-16768&mode=design&t=PX1Q47IuuVvOafDQ-4'
   },
   callout: {
     "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=14289-33201&t=VgqEexa1CXAXfPpp-0'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.36.0-alpha.1",
+  "version": "2.36.0-alpha.3",
   "description": "React component library for Ping Identity's design system",
   "repository": {
     "type": "git",
@@ -139,6 +139,7 @@
     "@testing-library/react": "^11.0.4",
     "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^12.8.3",
+    "@types/chroma-js": "^2.4.3",
     "@types/jest": "^29.5.3",
     "@types/jest-axe": "^3.5.8",
     "@types/mdx": "^2.0.5",

package/lib/cjs/components/EnvironmentBreadcrumb/EnvironmentBreadcrumbAxe.test.js

@@ -1,7 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-var _testAxe = _interopRequireDefault(require("../../utils/testUtils/testAxe"));
-var _EnvironmentBreadcrumb = require("./EnvironmentBreadcrumb.test");
-(0, _testAxe["default"])(_EnvironmentBreadcrumb.getComponent);
-(0, _testAxe["default"])(_EnvironmentBreadcrumb.getSectionsComponent);

package/lib/components/EnvironmentBreadcrumb/EnvironmentBreadcrumbAxe.test.js

@@ -1,4 +0,0 @@
-import axeTest from '../../utils/testUtils/testAxe';
-import { getComponent, getSectionsComponent } from './EnvironmentBreadcrumb.test';
-axeTest(getComponent);
-axeTest(getSectionsComponent);