@pingux/astro 1.42.2 → 2.0.0-alpha.4

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

@@ -1,42 +1,26 @@
 "use strict";
 
 var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
-
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-
 exports["default"] = exports.Disabled = exports.Default = exports.BoxesWithGaps = void 0;
-
+var _objectDestructuringEmpty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectDestructuringEmpty"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
-
 var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
-
 var _react = _interopRequireDefault(require("react"));
-
-var _ = _interopRequireDefault(require("."));
-
-var _index = require("../../index");
-
 var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
-
-var _images = require("../../utils/devUtils/constants/images");
-
+var _index = require("../../index");
 var _colors = require("../../styles/colors.js");
-
 var _htmlElements = require("../../utils/devUtils/constants/htmlElements");
-
+var _images = require("../../utils/devUtils/constants/images");
 var _Box = _interopRequireDefault(require("./Box.mdx"));
-
 var _react2 = require("@emotion/react");
-
 var _default = {
   title: 'Components/Box',
-  component: _["default"],
+  component: _index.Box,
   parameters: {
     docs: {
       page: function page() {
@@ -53,8 +37,7 @@ var _default = {
         type: 'select',
         options: (0, _map["default"])(_colors.flatColorList).call(_colors.flatColorList, function (_ref) {
           var _ref2 = (0, _slicedToArray2["default"])(_ref, 1),
-              colorName = _ref2[0];
-
+            colorName = _ref2[0];
           return colorName;
         })
       },
@@ -77,36 +60,33 @@ var _default = {
   }
 };
 exports["default"] = _default;
-
 var Default = function Default(_ref3) {
-  var args = (0, _extends2["default"])({}, _ref3);
-  return (0, _react2.jsx)(_["default"], (0, _extends2["default"])({
+  var args = (0, _extends2["default"])({}, ((0, _objectDestructuringEmpty2["default"])(_ref3), _ref3));
+  return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
     bg: "active",
     width: "100%",
     p: "xl"
-  }, args), (0, _react2.jsx)(_["default"], {
+  }, args), (0, _react2.jsx)(_index.Box, {
     width: 30,
     height: 15,
     m: "sm",
     bg: "success.bright"
-  }), (0, _react2.jsx)(_["default"], {
+  }), (0, _react2.jsx)(_index.Box, {
     width: 100,
     height: 50,
     m: "sm",
     bg: "critical.bright"
-  }), (0, _react2.jsx)(_["default"], {
+  }), (0, _react2.jsx)(_index.Box, {
     width: 190,
     height: 45,
     m: "sm",
     bg: "warning.bright"
   }));
 };
-
 exports.Default = Default;
-
 var Disabled = function Disabled(_ref4) {
-  var args = (0, _extends2["default"])({}, _ref4);
-  return (0, _react2.jsx)(_["default"], (0, _extends2["default"])({
+  var args = (0, _extends2["default"])({}, ((0, _objectDestructuringEmpty2["default"])(_ref4), _ref4));
+  return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
     bg: "white",
     isDisabled: true,
     width: "100%",
@@ -122,7 +102,6 @@ var Disabled = function Disabled(_ref4) {
     fontSize: "xl"
   }, "Exceptional Experiences Start with Secure Identity"));
 };
-
 exports.Disabled = Disabled;
 Disabled.parameters = {
   docs: {
@@ -140,8 +119,7 @@ Disabled.args = {
       type: 'select',
       options: (0, _map["default"])(_colors.flatColorList).call(_colors.flatColorList, function (_ref5) {
         var _ref6 = (0, _slicedToArray2["default"])(_ref5, 1),
-            colorName = _ref6[0];
-
+          colorName = _ref6[0];
         return colorName;
       })
     },
@@ -155,146 +133,144 @@ Disabled.args = {
     gap: '10px'
   }
 };
-
 var BoxesWithGaps = function BoxesWithGaps() {
-  return (0, _react2.jsx)(_["default"], {
+  return (0, _react2.jsx)(_index.Box, {
     gap: "xs"
-  }, (0, _react2.jsx)(_["default"], {
+  }, (0, _react2.jsx)(_index.Box, {
     bg: "accent.5",
     isRow: true,
     gap: "xl",
     justifyContent: "center"
-  }, (0, _react2.jsx)(_["default"], {
+  }, (0, _react2.jsx)(_index.Box, {
     width: 10,
     height: 50,
     bg: "decorativeLight.1"
-  }), (0, _react2.jsx)(_["default"], {
+  }), (0, _react2.jsx)(_index.Box, {
     width: 10,
     height: 50,
     bg: "decorativeLight.2"
-  }), (0, _react2.jsx)(_["default"], {
+  }), (0, _react2.jsx)(_index.Box, {
     width: 10,
     height: 50,
     bg: "decorativeLight.3"
-  }), (0, _react2.jsx)(_["default"], {
+  }), (0, _react2.jsx)(_index.Box, {
     width: 10,
     height: 50,
     bg: "decorativeLight.4"
-  }), (0, _react2.jsx)(_["default"], {
+  }), (0, _react2.jsx)(_index.Box, {
     width: 10,
     height: 50,
     bg: "decorativeLight.5"
-  }), (0, _react2.jsx)(_["default"], {
+  }), (0, _react2.jsx)(_index.Box, {
     width: 10,
     height: 50,
     bg: "decorativeLight.6"
-  }), (0, _react2.jsx)(_["default"], {
+  }), (0, _react2.jsx)(_index.Box, {
     width: 10,
     height: 50,
     bg: "decorativeLight.7"
-  }), (0, _react2.jsx)(_["default"], {
+  }), (0, _react2.jsx)(_index.Box, {
     width: 10,
     height: 50,
     bg: "decorativeLight.8"
-  }), (0, _react2.jsx)(_["default"], {
+  }), (0, _react2.jsx)(_index.Box, {
     width: 10,
     height: 50,
     bg: "decorativeLight.9"
-  }), (0, _react2.jsx)(_["default"], {
+  }), (0, _react2.jsx)(_index.Box, {
     width: 10,
     height: 50,
     bg: "decorativeLight.10"
-  })), (0, _react2.jsx)(_["default"], {
+  })), (0, _react2.jsx)(_index.Box, {
     bg: "accent.50",
     isRow: true,
     gap: "lg",
     justifyContent: "center"
-  }, (0, _react2.jsx)(_["default"], {
+  }, (0, _react2.jsx)(_index.Box, {
     width: 10,
     height: 50,
     bg: "decorative.1"
-  }), (0, _react2.jsx)(_["default"], {
+  }), (0, _react2.jsx)(_index.Box, {
     width: 10,
     height: 50,
     bg: "decorative.2"
-  }), (0, _react2.jsx)(_["default"], {
+  }), (0, _react2.jsx)(_index.Box, {
     width: 10,
     height: 50,
     bg: "decorative.3"
-  }), (0, _react2.jsx)(_["default"], {
+  }), (0, _react2.jsx)(_index.Box, {
     width: 10,
     height: 50,
     bg: "decorative.4"
-  }), (0, _react2.jsx)(_["default"], {
+  }), (0, _react2.jsx)(_index.Box, {
     width: 10,
     height: 50,
     bg: "decorative.5"
-  }), (0, _react2.jsx)(_["default"], {
+  }), (0, _react2.jsx)(_index.Box, {
     width: 10,
     height: 50,
     bg: "decorative.6"
-  }), (0, _react2.jsx)(_["default"], {
+  }), (0, _react2.jsx)(_index.Box, {
     width: 10,
     height: 50,
     bg: "decorative.7"
-  }), (0, _react2.jsx)(_["default"], {
+  }), (0, _react2.jsx)(_index.Box, {
     width: 10,
     height: 50,
     bg: "decorative.8"
-  }), (0, _react2.jsx)(_["default"], {
+  }), (0, _react2.jsx)(_index.Box, {
     width: 10,
     height: 50,
     bg: "decorative.9"
-  }), (0, _react2.jsx)(_["default"], {
+  }), (0, _react2.jsx)(_index.Box, {
     width: 10,
     height: 50,
     bg: "decorative.10"
-  })), (0, _react2.jsx)(_["default"], {
+  })), (0, _react2.jsx)(_index.Box, {
     bg: "accent.90",
     isRow: true,
     gap: "md",
     justifyContent: "center"
-  }, (0, _react2.jsx)(_["default"], {
+  }, (0, _react2.jsx)(_index.Box, {
     width: 10,
     height: 50,
     bg: "decorativeDark.1"
-  }), (0, _react2.jsx)(_["default"], {
+  }), (0, _react2.jsx)(_index.Box, {
     width: 10,
     height: 50,
     bg: "decorativeDark.2"
-  }), (0, _react2.jsx)(_["default"], {
+  }), (0, _react2.jsx)(_index.Box, {
     width: 10,
     height: 50,
     bg: "decorativeDark.3"
-  }), (0, _react2.jsx)(_["default"], {
+  }), (0, _react2.jsx)(_index.Box, {
     width: 10,
     height: 50,
     bg: "decorativeDark.4"
-  }), (0, _react2.jsx)(_["default"], {
+  }), (0, _react2.jsx)(_index.Box, {
     width: 10,
     height: 50,
     bg: "decorativeDark.5"
-  }), (0, _react2.jsx)(_["default"], {
+  }), (0, _react2.jsx)(_index.Box, {
     width: 10,
     height: 50,
     bg: "decorativeDark.6"
-  }), (0, _react2.jsx)(_["default"], {
+  }), (0, _react2.jsx)(_index.Box, {
     width: 10,
     height: 50,
     bg: "decorativeDark.7"
-  }), (0, _react2.jsx)(_["default"], {
+  }), (0, _react2.jsx)(_index.Box, {
     width: 10,
     height: 50,
     bg: "decorativeDark.8"
-  }), (0, _react2.jsx)(_["default"], {
+  }), (0, _react2.jsx)(_index.Box, {
     width: 10,
     height: 50,
     bg: "decorativeDark.9"
-  }), (0, _react2.jsx)(_["default"], {
+  }), (0, _react2.jsx)(_index.Box, {
     width: 10,
     height: 50,
     bg: "decorativeDark.10"
   })));
 };
-
 exports.BoxesWithGaps = BoxesWithGaps;

package/lib/cjs/{styles/variants/tooltip.js → components/Box/Box.styles.js}

@@ -1,16 +1,14 @@
 "use strict";
 
 var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
-
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-
 exports["default"] = void 0;
-var tooltipContainer = {
-  p: 'sm'
+var base = {
+  display: 'flex'
 };
 var _default = {
-  tooltipContainer: tooltipContainer
+  base: base
 };
 exports["default"] = _default;

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

@@ -1,21 +1,13 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
-
 var _react = _interopRequireDefault(require("react"));
-
-var _react2 = require("@testing-library/react");
-
-var _react3 = require("@emotion/react");
-
 var _cache = _interopRequireDefault(require("@emotion/cache"));
-
-var _ = _interopRequireDefault(require("."));
-
+var _react2 = require("@emotion/react");
+var _react3 = require("@testing-library/react");
 var _testAxe = _interopRequireDefault(require("../../utils/testUtils/testAxe"));
-
+var _ = _interopRequireDefault(require("."));
 // Emotion Cache added as test fails otherwise, root cause of this failure is unknown.
 // Failure occured with ThemeUI refactor.
 // https://github.com/emotion-js/emotion/issues/1105#issuecomment-557726922
@@ -27,21 +19,18 @@ var testId = 'test-box';
 var defaultProps = {
   'data-testid': testId
 };
-
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return (0, _react2.render)((0, _react3.jsx)(_react3.CacheProvider, {
+  return (0, _react3.render)((0, _react2.jsx)(_react2.CacheProvider, {
     value: emotionCache
-  }, (0, _react3.jsx)(_["default"], (0, _extends2["default"])({}, defaultProps, props))));
-}; // Need to be added to each test file to test accessibility using axe.
-
+  }, (0, _react2.jsx)(_["default"], (0, _extends2["default"])({}, defaultProps, props))));
+};
 
+// Need to be added to each test file to test accessibility using axe.
 (0, _testAxe["default"])(getComponent);
 test('default box', function () {
   getComponent();
-
-  var box = _react2.screen.getByTestId(testId);
-
+  var box = _react3.screen.getByTestId(testId);
   expect(box).toBeInstanceOf(HTMLDivElement);
   expect(box).toBeInTheDocument();
 });
@@ -49,18 +38,14 @@ test('box as a row', function () {
   getComponent({
     isRow: true
   });
-
-  var box = _react2.screen.getByTestId(testId);
-
+  var box = _react3.screen.getByTestId(testId);
   expect(box).toHaveStyleRule('flex-direction', 'row');
 });
 test('box with default gap', function () {
   getComponent({
     gap: '30px'
   });
-
-  var box = _react2.screen.getByTestId(testId);
-
+  var box = _react3.screen.getByTestId(testId);
   expect(box).toHaveStyle('margin-top: 0px', {
     target: '> * + *'
   });
@@ -70,9 +55,7 @@ test('box as row with gap', function () {
     isRow: true,
     gap: '30px'
   });
-
-  var box = _react2.screen.getByTestId(testId);
-
+  var box = _react3.screen.getByTestId(testId);
   expect(box).toHaveStyle('margin-left: 0px', {
     target: '> * + *'
   });

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

@@ -1,18 +1,14 @@
 "use strict";
 
 var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
-
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-
 _Object$defineProperty(exports, "default", {
   enumerable: true,
   get: function get() {
     return _Box["default"];
   }
 });
-
 var _Box = _interopRequireDefault(require("./Box"));

package/lib/cjs/components/Bracket/Bracket.js

@@ -1,53 +1,36 @@
 "use strict";
 
 var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
-
 var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
-
 var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
-
 var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
-
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-
 exports["default"] = void 0;
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _index = require("../../index");
-
 var _colors = require("../../styles/colors");
-
 var _react2 = require("@emotion/react");
-
 var _excluded = ["isLast", "color"];
-
 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); }
-
 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; }
-
 var Bracket = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var isLast = props.isLast,
-      color = props.color,
-      others = (0, _objectWithoutProperties2["default"])(props, _excluded);
+    color = props.color,
+    others = (0, _objectWithoutProperties2["default"])(props, _excluded);
   var bracketRef = (0, _react.useRef)();
-  /* istanbul ignore next */
 
+  /* istanbul ignore next */
   (0, _react.useImperativeHandle)(ref, function () {
     return bracketRef.current;
   });
   return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
-    variant: "boxes.bracketBase"
+    variant: "bracket.base"
   }, others), !isLast && (0, _react2.jsx)(_index.Box, {
     width: 15,
     sx: {
@@ -110,7 +93,6 @@ Bracket.defaultProps = {
 Bracket.propTypes = {
   /** A prop to set the strokes color. */
   color: _propTypes["default"].string,
-
   /** Whether or not the bracket is the last in a series of brackets. */
   isLast: _propTypes["default"].bool
 };

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

@@ -1,27 +1,17 @@
 "use strict";
 
 var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
-
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-
 exports["default"] = exports.Default = void 0;
-
 var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
-
 var _react = _interopRequireDefault(require("react"));
-
-var _index = require("../../index");
-
 var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
-
+var _index = require("../../index");
 var _Bracket = _interopRequireDefault(require("./Bracket.mdx"));
-
 var _react2 = require("@emotion/react");
-
 var _default = {
   title: 'Components/Bracket',
   component: _index.Bracket,
@@ -37,7 +27,6 @@ var _default = {
   }
 };
 exports["default"] = _default;
-
 var Default = function Default() {
   var anyConditions = [{
     field1: 'Group',
@@ -48,7 +37,7 @@ var Default = function Default() {
     field3: 'UX Team',
     key: 'Group2Field'
   }];
-  var customChipStyles = {
+  var customBadgeStyles = {
     '& > span': {
       textTransform: 'none',
       fontWeight: '500'
@@ -62,11 +51,11 @@ var Default = function Default() {
     bg: "background"
   }, (0, _react2.jsx)(_index.Box, {
     isRow: true
-  }, (0, _react2.jsx)(_index.Chip, {
+  }, (0, _react2.jsx)(_index.Badge, {
     label: "Any",
     bg: "neutral.20",
     mr: "sm",
-    sx: customChipStyles,
+    sx: customBadgeStyles,
     alignSelf: "center"
   }), (0, _react2.jsx)(_index.Text, null, " of the conditions are true")), (0, _map["default"])(anyConditions).call(anyConditions, function (item, index) {
     return (0, _react2.jsx)(_index.Box, {
@@ -76,7 +65,8 @@ var Default = function Default() {
       isLast: index === anyConditions.length - 1
     }), (0, _react2.jsx)(_index.Box, {
       mt: "md",
-      variant: "forms.input.container",
+      ml: "xs",
+      variant: "forms.input.fieldControlWrapper",
       bg: "white",
       isRow: true,
       alignItems: "center",
@@ -90,15 +80,14 @@ var Default = function Default() {
     }, (0, _react2.jsx)(_index.Text, {
       pl: "md",
       pr: "sm"
-    }, item.field1), (0, _react2.jsx)(_index.Chip, {
+    }, item.field1), (0, _react2.jsx)(_index.Badge, {
       label: "Equals",
       bg: "accent.90",
       textColor: "neutral.10",
-      sx: customChipStyles,
+      sx: customBadgeStyles,
       mr: "sm",
       alignSelf: "center"
     }), (0, _react2.jsx)(_index.Text, null, item.field3)));
   }));
 };
-
 exports.Default = Default;

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

@@ -0,0 +1,17 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var base = {
+  width: '15px',
+  pl: '5px',
+  ml: '5px',
+  position: 'relative'
+};
+var _default = {
+  base: base
+};
+exports["default"] = _default;

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

@@ -1,36 +1,26 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _react2 = require("@testing-library/react");
-
-var _ = _interopRequireDefault(require("."));
-
 var _testAxe = _interopRequireDefault(require("../../utils/testUtils/testAxe"));
-
+var _ = _interopRequireDefault(require("."));
 var _react3 = require("@emotion/react");
-
 var testId = 'test-bracket';
 var defaultProps = {
   'data-testid': testId
 };
-
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return (0, _react2.render)((0, _react3.jsx)(_["default"], (0, _extends2["default"])({}, defaultProps, props)));
-}; // // Need to be added to each test file to test accessibility using axe.
-
+};
 
+// // Need to be added to each test file to test accessibility using axe.
 (0, _testAxe["default"])(getComponent);
 test('default bracket', function () {
   getComponent();
-
   var bracket = _react2.screen.getByTestId(testId);
-
   expect(bracket).toBeInTheDocument();
 });
 test('additional svg does not render if isLast=true', function () {

package/lib/cjs/components/Bracket/index.js

@@ -1,18 +1,14 @@
 "use strict";
 
 var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
-
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-
 _Object$defineProperty(exports, "default", {
   enumerable: true,
   get: function get() {
     return _Bracket["default"];
   }
 });
-
 var _Bracket = _interopRequireDefault(require("./Bracket"));