@pingux/astro 1.31.0-alpha.5 → 1.31.0-alpha.6

package/lib/cjs/components/Chip/Chip.js

@@ -2,13 +2,25 @@
 
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
 
-var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+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 _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
 
-var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
 
 _Object$defineProperty(exports, "__esModule", {
   value: true
@@ -18,6 +30,8 @@ exports["default"] = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
 var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -36,6 +50,10 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "functi
 
 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; }
 
+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) { (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; }
+
 /**
  * Chip component.
  * Built on top of the [Box from Theme-UI](https://theme-ui.com/components/box/) and uses the
@@ -47,7 +65,18 @@ var Chip = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
       textColor = props.textColor,
       textProps = props.textProps,
       label = props.label,
+      align = props.align,
       isUppercase = props.isUppercase;
+
+  var sx = _objectSpread({}, isUppercase && {
+    paddingBottom: '3px'
+  });
+
+  if (align) {
+    sx.position = 'absolute';
+    sx[align] = '15px';
+  }
+
   return (0, _react2.jsx)(_ChipContext.ChipContext.Provider, {
     value: {
       bg: bg
@@ -55,9 +84,7 @@ var Chip = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
   }, (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
     isRow: true,
     variant: "boxes.chip",
-    sx: isUppercase && {
-      paddingBottom: '3px'
-    },
+    sx: sx,
     ref: ref
   }, props), (0, _react2.jsx)(_Text["default"], (0, _extends2["default"])({
     variant: "label",
@@ -83,7 +110,10 @@ Chip.propTypes = {
   textProps: _propTypes["default"].shape({}),
 
   /** When true, display chip label as uppercase. */
-  isUppercase: _propTypes["default"].bool
+  isUppercase: _propTypes["default"].bool,
+
+  /** Alignment of chip relative to parent container. */
+  align: _propTypes["default"].oneOf(['top', 'right', 'bottom', 'left'])
 };
 Chip.defaultProps = {
   textColor: 'white',

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

@@ -54,4 +54,12 @@ test('renders Chip component with uppercase', function () {
     isUppercase: isUppercase
   });
   expect(_react2.screen.queryByText('uppercase')).toHaveStyleRule('text-transform', 'uppercase');
+});
+test('renders Chip component with custom alignment', function () {
+  var align = 'right';
+  getComponent({
+    align: align
+  });
+  expect(_react2.screen.getByTestId(testId)).toHaveStyleRule('position', 'absolute');
+  expect(_react2.screen.getByTestId(testId)).toHaveStyleRule('right', '15px');
 });

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

@@ -26,7 +26,7 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 
-exports["default"] = exports.WithSections = exports.OrgLevel = exports.DefaultOpen = exports.Default = exports.ControlledMenu = void 0;
+exports["default"] = exports.WithSections = exports.RightAlignedChips = exports.OrgLevel = exports.DefaultOpen = exports.Default = exports.ControlledMenu = void 0;
 
 var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
 
@@ -410,4 +410,86 @@ var ControlledMenu = function ControlledMenu() {
   });
 };
 
-exports.ControlledMenu = ControlledMenu;
+exports.ControlledMenu = ControlledMenu;
+
+var RightAlignedChips = function RightAlignedChips(args) {
+  var _useState13 = (0, _react.useState)({
+    name: 'Snail',
+    isSandbox: true
+  }),
+      _useState14 = (0, _slicedToArray2["default"])(_useState13, 2),
+      selectedEnvironment = _useState14[0],
+      setSelectedEnvironment = _useState14[1];
+
+  var envNode = (0, _react2.jsx)(_index.Box, {
+    isRow: true
+  }, (0, _react2.jsx)(_index.Text, {
+    color: "inherit"
+  }, selectedEnvironment.name), selectedEnvironment.isSandbox ? (0, _react2.jsx)(_index.Chip, {
+    label: "SANDBOX",
+    variant: "boxes.environmentChip",
+    bg: "neutral.40"
+  }) : null);
+
+  var findEnvObj = function findEnvObj(envName) {
+    return (0, _find["default"])(defaultEnvironments).call(defaultEnvironments, function (_ref9) {
+      var name = _ref9.name;
+      return name === envName;
+    });
+  };
+
+  var handleSelectionChange = function handleSelectionChange(newEnvName) {
+    var envObj = findEnvObj(newEnvName);
+    setSelectedEnvironment(_objectSpread({}, envObj));
+  };
+
+  var items = [{
+    name: 'Default'
+  }, {
+    name: 'Kangaroo',
+    isSandbox: true
+  }, {
+    name: 'Snake',
+    isSandbox: true
+  }, {
+    name: 'Snail'
+  }, {
+    name: 'Slug',
+    isSandbox: true
+  }, {
+    name: 'Crow'
+  }, {
+    name: 'Dog'
+  }, {
+    name: 'Crab',
+    isSandbox: true
+  }, {
+    name: 'Fish',
+    isSandbox: true
+  }, {
+    name: 'Turtle',
+    isSandbox: true
+  }, {
+    name: 'Mouse'
+  }];
+  return (0, _react2.jsx)(_EnvironmentBreadcrumb["default"], (0, _extends2["default"])({}, args, {
+    items: items,
+    name: "Globochem",
+    selectedItem: envNode,
+    onSelectionChange: handleSelectionChange
+  }), function (_ref10) {
+    var name = _ref10.name,
+        isSandbox = _ref10.isSandbox;
+    return (0, _react2.jsx)(_index.Item, {
+      key: name,
+      textValue: name
+    }, name, isSandbox ? (0, _react2.jsx)(_index.Chip, {
+      label: "SANDBOX",
+      variant: "boxes.environmentChip",
+      bg: "neutral.40",
+      align: "right"
+    }) : null);
+  });
+};
+
+exports.RightAlignedChips = RightAlignedChips;

package/lib/components/Chip/Chip.js

@@ -1,4 +1,18 @@
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+
+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 { ChipContext } from './ChipContext';
@@ -18,7 +32,18 @@ var Chip = /*#__PURE__*/React.forwardRef(function (props, ref) {
       textColor = props.textColor,
       textProps = props.textProps,
       label = props.label,
+      align = props.align,
       isUppercase = props.isUppercase;
+
+  var sx = _objectSpread({}, isUppercase && {
+    paddingBottom: '3px'
+  });
+
+  if (align) {
+    sx.position = 'absolute';
+    sx[align] = '15px';
+  }
+
   return ___EmotionJSX(ChipContext.Provider, {
     value: {
       bg: bg
@@ -26,9 +51,7 @@ var Chip = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }, ___EmotionJSX(Box, _extends({
     isRow: true,
     variant: "boxes.chip",
-    sx: isUppercase && {
-      paddingBottom: '3px'
-    },
+    sx: sx,
     ref: ref
   }, props), ___EmotionJSX(Text, _extends({
     variant: "label",
@@ -53,7 +76,10 @@ Chip.propTypes = {
   textProps: PropTypes.shape({}),
 
   /** When true, display chip label as uppercase. */
-  isUppercase: PropTypes.bool
+  isUppercase: PropTypes.bool,
+
+  /** Alignment of chip relative to parent container. */
+  align: PropTypes.oneOf(['top', 'right', 'bottom', 'left'])
 };
 Chip.defaultProps = {
   textColor: 'white',

package/lib/components/Chip/Chip.test.js

@@ -40,4 +40,12 @@ test('renders Chip component with uppercase', function () {
     isUppercase: isUppercase
   });
   expect(screen.queryByText('uppercase')).toHaveStyleRule('text-transform', 'uppercase');
+});
+test('renders Chip component with custom alignment', function () {
+  var align = 'right';
+  getComponent({
+    align: align
+  });
+  expect(screen.getByTestId(testId)).toHaveStyleRule('position', 'absolute');
+  expect(screen.getByTestId(testId)).toHaveStyleRule('right', '15px');
 });

package/lib/components/EnvironmentBreadcrumb/EnvironmentBreadcrumb.stories.js

@@ -359,4 +359,83 @@ export var ControlledMenu = function ControlledMenu() {
       bg: "neutral.40"
     }) : null);
   });
+};
+export var RightAlignedChips = function RightAlignedChips(args) {
+  var _useState13 = useState({
+    name: 'Snail',
+    isSandbox: true
+  }),
+      _useState14 = _slicedToArray(_useState13, 2),
+      selectedEnvironment = _useState14[0],
+      setSelectedEnvironment = _useState14[1];
+
+  var envNode = ___EmotionJSX(Box, {
+    isRow: true
+  }, ___EmotionJSX(Text, {
+    color: "inherit"
+  }, selectedEnvironment.name), selectedEnvironment.isSandbox ? ___EmotionJSX(Chip, {
+    label: "SANDBOX",
+    variant: "boxes.environmentChip",
+    bg: "neutral.40"
+  }) : null);
+
+  var findEnvObj = function findEnvObj(envName) {
+    return _findInstanceProperty(defaultEnvironments).call(defaultEnvironments, function (_ref9) {
+      var name = _ref9.name;
+      return name === envName;
+    });
+  };
+
+  var handleSelectionChange = function handleSelectionChange(newEnvName) {
+    var envObj = findEnvObj(newEnvName);
+    setSelectedEnvironment(_objectSpread({}, envObj));
+  };
+
+  var items = [{
+    name: 'Default'
+  }, {
+    name: 'Kangaroo',
+    isSandbox: true
+  }, {
+    name: 'Snake',
+    isSandbox: true
+  }, {
+    name: 'Snail'
+  }, {
+    name: 'Slug',
+    isSandbox: true
+  }, {
+    name: 'Crow'
+  }, {
+    name: 'Dog'
+  }, {
+    name: 'Crab',
+    isSandbox: true
+  }, {
+    name: 'Fish',
+    isSandbox: true
+  }, {
+    name: 'Turtle',
+    isSandbox: true
+  }, {
+    name: 'Mouse'
+  }];
+  return ___EmotionJSX(EnvironmentBreadcrumb, _extends({}, args, {
+    items: items,
+    name: "Globochem",
+    selectedItem: envNode,
+    onSelectionChange: handleSelectionChange
+  }), function (_ref10) {
+    var name = _ref10.name,
+        isSandbox = _ref10.isSandbox;
+    return ___EmotionJSX(Item, {
+      key: name,
+      textValue: name
+    }, name, isSandbox ? ___EmotionJSX(Chip, {
+      label: "SANDBOX",
+      variant: "boxes.environmentChip",
+      bg: "neutral.40",
+      align: "right"
+    }) : null);
+  });
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "1.31.0-alpha.5",
+  "version": "1.31.0-alpha.6",
   "description": "PingUX themeable React component library",
   "repository": {
     "type": "git",