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

package/lib/cjs/components/Badge/Badge.test.d.ts

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

package/lib/cjs/components/Badge/index.d.ts

@@ -0,0 +1 @@
+export { default } from './Badge';

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

@@ -13,7 +13,7 @@ var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable
 var _react = _interopRequireDefault(require("react"));
 var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
 var _index = require("../../index");
-var _colors = require("../../styles/colors.js");
+var _colors = require("../../styles/colors");
 var _htmlElements = require("../../utils/devUtils/constants/htmlElements");
 var _images = require("../../utils/devUtils/constants/images");
 var _Box = _interopRequireDefault(require("./Box.mdx"));

package/lib/cjs/components/Button/Button.stories.d.ts

@@ -28,9 +28,51 @@ export declare const Default: {
         };
     };
 };
-export declare const Disabled: () => React.JSX.Element;
-export declare const TextIconButton: () => React.JSX.Element;
-export declare const InlineButton: () => React.JSX.Element;
+export declare const Primary: {
+    (): React.JSX.Element;
+    parameters: {
+        design: {
+            type: string;
+            url: string;
+        };
+    };
+};
+export declare const Critical: {
+    (): React.JSX.Element;
+    parameters: {
+        design: {
+            type: string;
+            url: string;
+        };
+    };
+};
+export declare const InlineButton: {
+    (): React.JSX.Element;
+    parameters: {
+        design: {
+            type: string;
+            url: string;
+        };
+    };
+};
+export declare const TextIconButton: {
+    (): React.JSX.Element;
+    parameters: {
+        design: {
+            type: string;
+            url: string;
+        };
+    };
+};
+export declare const Disabled: {
+    (): React.JSX.Element;
+    parameters: {
+        design: {
+            type: string;
+            url: string;
+        };
+    };
+};
 export declare const ColorBlockButton: {
     (args: any): React.JSX.Element;
     argTypes: {
@@ -41,6 +83,10 @@ export declare const ColorBlockButton: {
             defaultValue: boolean;
         };
     };
+    parameters: {
+        design: {
+            type: string;
+            url: string;
+        };
+    };
 };
-export declare const Critical: () => React.JSX.Element;
-export declare const Primary: () => React.JSX.Element;

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

@@ -60,71 +60,114 @@ Default.parameters = {
     url: _figmaLinks.FIGMA_LINKS.button["default"]
   }
 };
-var Disabled = function Disabled() {
+var Primary = function Primary() {
   return (0, _react2.jsx)(_index.Button, {
-    isDisabled: true
+    variant: "primary"
   }, "Button Text");
 };
-exports.Disabled = Disabled;
-var TextIconButton = function TextIconButton() {
+exports.Primary = Primary;
+Primary.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.button.primary
+  }
+};
+var Critical = function Critical() {
   return (0, _react2.jsx)(_index.Button, {
+    variant: "critical"
+  }, "Button Text");
+};
+exports.Critical = Critical;
+Critical.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.button.critical
+  }
+};
+var InlineButton = function InlineButton() {
+  return (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Button, {
+    mb: "sm",
+    mr: "auto",
+    variant: "inline"
+  }, "Button Text"), (0, _react2.jsx)(_index.Button, {
+    mb: "sm",
+    mr: "auto",
+    variant: "inlinePrimary"
+  }, "Button Text"));
+};
+exports.InlineButton = InlineButton;
+InlineButton.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.button.inlineButton
+  }
+};
+var TextIconButton = function TextIconButton() {
+  return (0, _react2.jsx)(_index.Box, {
+    width: 20
+  }, (0, _react2.jsx)(_index.Button, {
     mb: "sm",
     variant: "withIcon"
-  }, (0, _react2.jsx)(_index.Box, {
-    isRow: true,
-    alignItems: "center"
   }, (0, _react2.jsx)(_index.Icon, {
     icon: _PlusIcon["default"],
     mr: "xs",
-    color: "active",
+    color: "accent.30",
     size: 20,
     title: {
       name: 'Add Circle Icon'
     }
-  }), "Add a Form"));
-};
-exports.TextIconButton = TextIconButton;
-var InlineButton = function InlineButton() {
-  return (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Button, {
-    mb: "sm",
-    mr: "auto",
-    variant: "inline"
-  }, "Inline"), (0, _react2.jsx)(_index.Button, {
+  }), "Button Text"), (0, _react2.jsx)(_index.Button, {
     mb: "sm",
     mr: "auto",
     variant: "inlineWithIcon"
   }, (0, _react2.jsx)(_index.Icon, {
     icon: _PlusIcon["default"],
     mr: "xs",
-    color: "active",
+    color: "accent.30",
     size: 15,
     title: {
       name: 'Add Circle Icon'
     }
-  }), "Inline with icon"), (0, _react2.jsx)(_index.Button, {
-    mb: "sm",
-    mr: "auto",
-    variant: "inlinePrimary"
-  }, "Inline primary"), (0, _react2.jsx)(_index.Button, {
+  }), "Button Text"), (0, _react2.jsx)(_index.Button, {
     mb: "sm",
     mr: "auto",
     variant: "inlinePrimaryWithIcon"
   }, (0, _react2.jsx)(_index.Icon, {
     icon: _PlusIcon["default"],
     mr: "xs",
-    color: "active",
+    color: "accent.30",
     size: 15,
     title: {
       name: 'Add Circle Icon'
     }
-  }), "Inline primary with icon"));
+  }), "Button Text"));
+};
+exports.TextIconButton = TextIconButton;
+TextIconButton.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.button.textIconButton
+  }
+};
+var Disabled = function Disabled() {
+  return (0, _react2.jsx)(_index.Button, {
+    isDisabled: true
+  }, "Button Text");
+};
+exports.Disabled = Disabled;
+Disabled.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.button.disabled
+  }
 };
-exports.InlineButton = InlineButton;
 var ColorBlockButton = function ColorBlockButton(args) {
   // Change `isConfigured` property in storybook controls
   var isConfigured = args.isConfigured,
     props = (0, _objectWithoutProperties2["default"])(args, _excluded);
-  return (0, _react2.jsx)(_index.Button, (0, _extends2["default"])({}, props, {
+  return (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Button, (0, _extends2["default"])({
+    mb: "sm"
+  }, props, {
     variant: "colorBlock",
     className: isConfigured ? 'is-configured' : ''
   }), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Text, {
@@ -136,7 +179,19 @@ var ColorBlockButton = function ColorBlockButton(args) {
     title: {
       name: 'Create Icon'
     }
-  }));
+  })), (0, _react2.jsx)(_index.Button, (0, _extends2["default"])({}, props, {
+    variant: "colorBlockPrimary",
+    className: isConfigured ? 'is-configured' : ''
+  }), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Text, {
+    variant: "buttonTitle"
+  }, "Title"), (0, _react2.jsx)(_index.Text, {
+    variant: "buttonSubtitle"
+  }, "Info")), (0, _react2.jsx)(_index.Icon, {
+    icon: _CreateIcon["default"],
+    title: {
+      name: 'Create Icon'
+    }
+  })));
 };
 exports.ColorBlockButton = ColorBlockButton;
 ColorBlockButton.argTypes = {
@@ -147,15 +202,9 @@ ColorBlockButton.argTypes = {
     defaultValue: false
   }
 };
-var Critical = function Critical() {
-  return (0, _react2.jsx)(_index.Button, {
-    variant: "critical"
-  }, "Button Text");
-};
-exports.Critical = Critical;
-var Primary = function Primary() {
-  return (0, _react2.jsx)(_index.Button, {
-    variant: "primary"
-  }, "Button Text");
-};
-exports.Primary = Primary;
+ColorBlockButton.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.button.colorBlockButton
+  }
+};

package/lib/cjs/components/Button/Buttons.styles.d.ts

@@ -564,6 +564,77 @@ declare const _default: {
             borderColor: string;
         };
     };
+    colorBlockPrimary: {
+        '& span': {
+            color: string;
+            textAlign: string;
+        };
+        '&.is-hovered': {
+            backgroundColor: string;
+            color: string;
+            bg: string;
+            border: string;
+            borderColor: string;
+            boxShadow: string;
+        };
+        '&.is-pressed': {
+            backgroundColor: string;
+            border: string;
+            borderColor: string;
+            bg: string;
+            color: string;
+            path: {
+                fill: string;
+            };
+        };
+        bg: string;
+        border: string;
+        borderColor: string;
+        color: string;
+        path: {
+            fill: string;
+        };
+        borderRadius: number;
+        outline: string;
+        cursor: string;
+        width: number;
+        height: string;
+        p: string;
+        display: string;
+        justifyContent: string;
+        alignItems: string;
+        '&.is-focused': {
+            outline: string;
+            outlineColor: string;
+            outlineOffset: string;
+        };
+        '&>div': {
+            alignItems: string;
+        };
+        '&>svg': {
+            color: string;
+            fill: string;
+        };
+        '&.is-configured': {
+            bg: string;
+            borderColor: string;
+            '& span': {
+                color: string;
+            };
+            '&>svg': {
+                color: string;
+                fill: string;
+            };
+        };
+        '&.is-configured.is-hovered': {
+            bg: string;
+            borderColor: string;
+        };
+        '&.is-configured.is-pressed': {
+            bg: string;
+            borderColor: string;
+        };
+    };
     exampleText: {
         '&.is-hovered': {
             textDecoration: string;
@@ -600,6 +671,7 @@ declare const _default: {
         bg: string;
         border: string;
         borderColor: string;
+        display: string;
         '&.is-hovered': {
             bg: string;
             border: string;
@@ -625,7 +697,6 @@ declare const _default: {
         fontWeight: number;
         color: string;
         fontFamily: string;
-        display: string;
         overflowWrap: string;
         maxWidth: string;
         wordWrap: string;

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

@@ -82,10 +82,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)
@@ -247,6 +248,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), {}, {
@@ -286,6 +302,7 @@ var _default = {
   quiet: quiet,
   success: success,
   colorBlock: colorBlock,
+  colorBlockPrimary: colorBlockPrimary,
   exampleText: exampleText,
   withIcon: withIcon,
   inlineWithIcon: inlineWithIcon,

package/lib/cjs/components/Calendar/Calendar.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.ReadOnly = exports.MinimumDate = exports.MaximumDate = exports.Disabled = exports.DefaultValue = exports.Default = exports.Controlled = exports.Autofocus = void 0;
+exports["default"] = exports.UnavailableDates = exports.MinimumDate = exports.MaximumDate = exports.Disabled = exports.DefaultValue = exports.Default = exports.Controlled = exports.Autofocus = void 0;
 var _some = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/some"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
@@ -142,18 +142,12 @@ var DefaultValue = function DefaultValue(args) {
   }));
 };
 exports.DefaultValue = DefaultValue;
-var Controlled = function Controlled(args) {
-  var _useState = (0, _react.useState)(null),
-    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-    date = _useState2[0],
-    setDate = _useState2[1];
-  return (0, _react2.jsx)(_Calendar["default"], (0, _extends2["default"])({}, args, {
-    "aria-label": "calendar-component-controlled",
-    value: date,
-    onChange: setDate
-  }));
+DefaultValue.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.calendar.defaultValue
+  }
 };
-exports.Controlled = Controlled;
 var Disabled = function Disabled(args) {
   return (0, _react2.jsx)(_Calendar["default"], (0, _extends2["default"])({}, args, {
     "aria-label": "calendar-component-disabled",
@@ -161,13 +155,12 @@ var Disabled = function Disabled(args) {
   }));
 };
 exports.Disabled = Disabled;
-var ReadOnly = function ReadOnly(args) {
-  return (0, _react2.jsx)(_Calendar["default"], (0, _extends2["default"])({}, args, {
-    "aria-label": "calendar-component-readonly",
-    isReadOnly: true
-  }));
+Disabled.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.calendar.disabled
+  }
 };
-exports.ReadOnly = ReadOnly;
 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']];
   // This function is run against each date in the calendar
@@ -183,6 +176,12 @@ var UnavailableDates = function UnavailableDates(args) {
   }));
 };
 exports.UnavailableDates = UnavailableDates;
+UnavailableDates.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.calendar.unavailableDates
+  }
+};
 var MinimumDate = function MinimumDate(args) {
   return (0, _react2.jsx)(_Calendar["default"], (0, _extends2["default"])({}, args, {
     "aria-label": "calendar-component-min-date",
@@ -191,6 +190,12 @@ var MinimumDate = function MinimumDate(args) {
   }));
 };
 exports.MinimumDate = MinimumDate;
+MinimumDate.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.calendar.minimumDate
+  }
+};
 var MaximumDate = function MaximumDate(args) {
   return (0, _react2.jsx)(_Calendar["default"], (0, _extends2["default"])({}, args, {
     "aria-label": "calendar-component-max-date",
@@ -199,10 +204,34 @@ var MaximumDate = function MaximumDate(args) {
   }));
 };
 exports.MaximumDate = MaximumDate;
+MaximumDate.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.calendar.maximumDate
+  }
+};
 var Autofocus = function Autofocus(args) {
   return (0, _react2.jsx)(_Calendar["default"], (0, _extends2["default"])({}, args, {
     "aria-label": "calendar-component",
     hasAutoFocus: true
   }));
 };
-exports.Autofocus = Autofocus;
+exports.Autofocus = Autofocus;
+Autofocus.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.calendar.autofocus
+  }
+};
+var Controlled = function Controlled(args) {
+  var _useState = (0, _react.useState)(null),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    date = _useState2[0],
+    setDate = _useState2[1];
+  return (0, _react2.jsx)(_Calendar["default"], (0, _extends2["default"])({}, args, {
+    "aria-label": "calendar-component-controlled",
+    value: date,
+    onChange: setDate
+  }));
+};
+exports.Controlled = Controlled;

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

@@ -20,7 +20,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getSectionsComponent = exports.getComponent = void 0;
+exports.renderSectionsComponent = exports.renderComponent = void 0;
 var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
 var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/for-each"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/asyncToGenerator"));
@@ -91,18 +91,17 @@ var defaultWithSectionsProps = {
   items: itemsWithSections
 };
 var onSelectionChange = jest.fn();
-var getComponent = function getComponent(props) {
-  return (0, _testWrapper.render)((0, _react2.jsx)(_.OverlayProvider, null, (0, _react2.jsx)(_.EnvironmentBreadcrumb, (0, _extends2["default"])({}, defaultProps, props), function (item) {
+var renderComponent = function renderComponent(props) {
+  return (0, _react2.jsx)(_.OverlayProvider, null, (0, _react2.jsx)(_.EnvironmentBreadcrumb, (0, _extends2["default"])({}, defaultProps, props), function (item) {
     return (0, _react2.jsx)(_.Item, {
       key: item.name,
       "data-testid": item.name
     }, item.name);
-  })));
+  }));
 };
-exports.getComponent = getComponent;
-var getSectionsComponent = function getSectionsComponent() {
-  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return (0, _testWrapper.render)((0, _react2.jsx)(_.OverlayProvider, null, (0, _react2.jsx)(_.EnvironmentBreadcrumb, (0, _extends2["default"])({}, defaultWithSectionsProps, props), function (section) {
+exports.renderComponent = renderComponent;
+var renderSectionsComponent = function renderSectionsComponent(props) {
+  return (0, _react2.jsx)(_.OverlayProvider, null, (0, _react2.jsx)(_.EnvironmentBreadcrumb, (0, _extends2["default"])({}, defaultWithSectionsProps, props), function (section) {
     return (
       // eslint-disable-next-line testing-library/no-node-access
       (0, _react2.jsx)(_reactStately.Section, {
@@ -118,9 +117,16 @@ var getSectionsComponent = function getSectionsComponent() {
         }, item.name);
       })
     );
-  })));
+  }));
+};
+exports.renderSectionsComponent = renderSectionsComponent;
+var getComponent = function getComponent(props) {
+  return (0, _testWrapper.render)(renderComponent(props));
+};
+var getSectionsComponent = function getSectionsComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return (0, _testWrapper.render)(renderSectionsComponent(props));
 };
-exports.getSectionsComponent = getSectionsComponent;
 beforeAll(function () {
   jest.spyOn(window.HTMLElement.prototype, 'clientWidth', 'get').mockImplementation(function () {
     return 1000;

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

@@ -0,0 +1,10 @@
+"use strict";
+
+var _universalComponentTest = require("../../utils/testUtils/universalComponentTest");
+var _EnvironmentBreadcrumb = require("./EnvironmentBreadcrumb.test");
+(0, _universalComponentTest.universalComponentTests)({
+  renderComponent: _EnvironmentBreadcrumb.renderComponent
+});
+(0, _universalComponentTest.universalComponentTests)({
+  renderComponent: _EnvironmentBreadcrumb.renderSectionsComponent
+});

package/lib/cjs/context/BadgeContext/index.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const BadgeContext: import("react").Context<string | object>;

package/lib/cjs/hooks/useColumnStyles/index.d.ts

@@ -0,0 +1 @@
+export { default } from './useColumnStyles';

package/lib/cjs/hooks/useColumnStyles/useColumnStyles.d.ts

@@ -0,0 +1,11 @@
+export type LabelMode = 'default' | 'float' | 'left';
+interface UseColumnStylesProps {
+    labelMode: LabelMode;
+}
+interface LabelStyleProps {
+    sx: {
+        gridTemplateColumns: string;
+    };
+}
+declare const useColumnStyles: ({ labelMode }: UseColumnStylesProps) => LabelStyleProps;
+export default useColumnStyles;

package/lib/cjs/hooks/useColumnStyles/useColumnStyles.js

@@ -10,13 +10,17 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/hel
 var _react = require("react");
 var useColumnStyles = function useColumnStyles(_ref) {
   var labelMode = _ref.labelMode;
-  var _useState = (0, _react.useState)(false),
+  var _useState = (0, _react.useState)({
+      sx: {
+        gridTemplateColumns: ''
+      }
+    }),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     labelStyleProps = _useState2[0],
-    setlabelStyleProps = _useState2[1];
+    setLabelStyleProps = _useState2[1];
   (0, _react.useEffect)(function () {
     if (labelMode === 'left') {
-      setlabelStyleProps({
+      setLabelStyleProps({
         sx: {
           gridTemplateColumns: '40% auto'
         }