@pingux/astro 1.29.0 → 1.30.0-alpha.0

package/lib/cjs/components/IconBadge/IconBadge.js

@@ -0,0 +1,111 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+
+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
+});
+
+exports["default"] = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _index = require("../../index");
+
+var _react2 = require("@emotion/react");
+
+var _excluded = ["children", "sx", "circleColor", "baseSize", "circleSize"];
+
+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; }
+
+var IconBadge = function IconBadge(props) {
+  var children = props.children,
+      sx = props.sx,
+      circleColor = props.circleColor,
+      baseSize = props.baseSize,
+      circleSize = props.circleSize,
+      others = (0, _objectWithoutProperties2["default"])(props, _excluded);
+
+  var _React$Children$toArr = _react["default"].Children.toArray(children),
+      _React$Children$toArr2 = (0, _slicedToArray2["default"])(_React$Children$toArr, 2),
+      firstIcon = _React$Children$toArr2[0],
+      secondIcon = _React$Children$toArr2[1];
+
+  return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
+    as: "span",
+    sx: _objectSpread({
+      position: 'relative',
+      height: "".concat(baseSize, "px"),
+      width: "".concat(baseSize, "px"),
+      display: 'flex',
+      alignItems: 'top'
+    }, sx)
+  }, others), firstIcon, (0, _react2.jsx)(_index.Box, {
+    as: "span",
+    sx: {
+      position: 'absolute',
+      bottom: '-5.5px',
+      right: '1px',
+      borderRadius: "".concat(circleSize / 2, "px"),
+      height: "".concat(circleSize, "px"),
+      width: "".concat(circleSize, "px"),
+      alignItems: 'center',
+      justifyContent: 'center',
+      backgroundColor: circleColor
+    }
+  }, secondIcon));
+};
+
+IconBadge.propTypes = {
+  /** JSX styling that is passed into the component. */
+  sx: _propTypes["default"].shape({}),
+
+  /** Color that is applied to the circular background.
+   * Default is white.
+   */
+  circleColor: _propTypes["default"].string,
+
+  /**
+   * The size of the base Icon. When given a number value, it will be converted to pixels.
+   */
+  baseSize: _propTypes["default"].number,
+
+  /**
+   * The size of the Icon within the circle.
+   * When given a number value, it will be converted to pixels.
+   */
+  circleSize: _propTypes["default"].number
+};
+IconBadge.defaultProps = {
+  circleColor: 'white'
+};
+var _default = IconBadge;
+exports["default"] = _default;

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

@@ -0,0 +1,55 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports["default"] = exports.Default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ArrowTopRightThickIcon = _interopRequireDefault(require("mdi-react/ArrowTopRightThickIcon"));
+
+var _AccountGroupIcon = _interopRequireDefault(require("mdi-react/AccountGroupIcon"));
+
+var _ = _interopRequireDefault(require("."));
+
+var _index = require("../../index");
+
+var _react2 = require("@emotion/react");
+
+var _default = {
+  title: 'IconBadge',
+  component: _["default"],
+  parameters: {
+    docs: {
+      source: {
+        type: 'code'
+      }
+    }
+  }
+};
+exports["default"] = _default;
+
+var Default = function Default(args) {
+  return (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_["default"], (0, _extends2["default"])({}, args, {
+    baseSize: 25,
+    circleSize: 15
+  }), (0, _react2.jsx)(_index.Icon, {
+    icon: _AccountGroupIcon["default"],
+    size: "25px",
+    color: "accent.40"
+  }), (0, _react2.jsx)(_index.Icon, {
+    icon: _ArrowTopRightThickIcon["default"],
+    size: "13px",
+    color: "accent.40"
+  })));
+};
+
+exports.Default = Default;

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

@@ -0,0 +1,65 @@
+"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 _index = require("../../index");
+
+var _testAxe = _interopRequireDefault(require("../../utils/testUtils/testAxe"));
+
+var _react3 = require("@emotion/react");
+
+var testId = 'test-icon';
+var defaultProps = {
+  'data-testid': testId
+};
+
+var ThisIcon = function ThisIcon(args) {
+  return (0, _react3.jsx)("svg", (0, _extends2["default"])({
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, args), (0, _react3.jsx)("path", {
+    d: "M12.5 7.28125C14.1979 7.28125 15.6979 7.6875 16.9167 8.21875C18.0417 8.71875 18.75 9.84375 18.75 11.0625V12.75H6.25V11.0729C6.25 9.84375 6.95833 8.71875 8.08333 8.22917C9.30208 7.6875 10.8021 7.28125 12.5 7.28125ZM4.16667 7.54167C5.3125 7.54167 6.25 6.60417 6.25 5.45833C6.25 4.3125 5.3125 3.375 4.16667 3.375C3.02083 3.375 2.08333 4.3125 2.08333 5.45833C2.08333 6.60417 3.02083 7.54167 4.16667 7.54167ZM5.34375 8.6875C4.95833 8.625 4.57292 8.58333 4.16667 8.58333C3.13542 8.58333 2.15625 8.80208 1.27083 9.1875C0.5 9.52083 0 10.2708 0 11.1146V12.75H4.6875V11.0729C4.6875 10.2083 4.92708 9.39583 5.34375 8.6875ZM20.8333 7.54167C21.9792 7.54167 22.9167 6.60417 22.9167 5.45833C22.9167 4.3125 21.9792 3.375 20.8333 3.375C19.6875 3.375 18.75 4.3125 18.75 5.45833C18.75 6.60417 19.6875 7.54167 20.8333 7.54167ZM25 11.1146C25 10.2708 24.5 9.52083 23.7292 9.1875C22.8437 8.80208 21.8646 8.58333 20.8333 8.58333C20.4271 8.58333 20.0417 8.625 19.6563 8.6875C20.0729 9.39583 20.3125 10.2083 20.3125 11.0729V12.75H25V11.1146ZM12.5 0.25C14.2292 0.25 15.625 1.64583 15.625 3.375C15.625 5.10417 14.2292 6.5 12.5 6.5C10.7708 6.5 9.375 5.10417 9.375 3.375C9.375 1.64583 10.7708 0.25 12.5 0.25Z",
+    fill: "currentColor"
+  }));
+};
+
+var ThisSecondIcon = function ThisSecondIcon(args) {
+  return (0, _react3.jsx)("svg", (0, _extends2["default"])({
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, args), (0, _react3.jsx)("path", {
+    d: "M1.71875 0.624999L7.96875 0.625L7.96875 6.875L6.09375 6.875L6.09375 3.89375L1.73125 8.125L0.46875 6.85625L4.75 2.5L1.71875 2.5L1.71875 0.624999Z",
+    fill: "currentColor"
+  }));
+};
+
+var getComponent = function getComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return (0, _react2.render)((0, _react3.jsx)(_index.IconBadge, (0, _extends2["default"])({}, props, {
+    backgroundColor: "white"
+  }, defaultProps), (0, _react3.jsx)(_index.Icon, {
+    icon: ThisIcon,
+    size: "25px",
+    color: "accent.40"
+  }), (0, _react3.jsx)(_index.Icon, {
+    icon: ThisSecondIcon,
+    size: "9px",
+    color: "accent.40"
+  })));
+}; // Need to be added to each test file to test accessibility using axe.
+
+
+(0, _testAxe["default"])(getComponent);
+test('default iconbadge render', function () {
+  getComponent();
+
+  var iconButton = _react2.screen.getByTestId(testId);
+
+  expect(iconButton).toBeInTheDocument();
+});

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

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