@pingux/astro 1.1.1-alpha.1 → 1.1.1-alpha.2

package/lib/cjs/components/Separator/Separator.js

@@ -0,0 +1,69 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime-corejs3/helpers/interopRequireWildcard");
+
+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"] = 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 _separator = require("@react-aria/separator");
+
+var _Box = _interopRequireDefault(require("../Box/Box"));
+
+var _hooks = require("../../hooks");
+
+var _orientation = _interopRequireDefault(require("../../utils/devUtils/constants/orientation"));
+
+var _react2 = require("@emotion/react");
+
+/**
+ * Basic separator or HR component.
+ * Accepts most of the styling props from [styled-system](https://styled-system.com/table).
+*/
+var Separator = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var className = props.className,
+      orientation = props.orientation,
+      others = (0, _objectWithoutProperties2["default"])(props, ["className", "orientation"]);
+
+  var _useSeparator = (0, _separator.useSeparator)(props, ref),
+      separatorProps = _useSeparator.separatorProps;
+
+  var _useStatusClasses = (0, _hooks.useStatusClasses)(className, {
+    'is-vertical': orientation === _orientation["default"].VERTICAL,
+    'is-horizontal': orientation === _orientation["default"].HORIZONTAL
+  }),
+      classNames = _useStatusClasses.classNames;
+
+  return (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
+    ref: ref,
+    className: classNames,
+    variant: "separator.base"
+  }, others, separatorProps));
+});
+Separator.propTypes = {
+  /** Sets horizontal or vertical orientation of the divider. If
+  * vertical orientation is specified, the parent container must have the following styles:
+  * a defined height, flexDirection="row" alignItems="center"
+  */
+  orientation: _propTypes["default"].oneOf(['vertical', 'horizontal'])
+};
+Separator.defaultProps = {
+  orientation: 'horizontal'
+};
+Separator.displayName = 'Separator';
+var _default = Separator;
+exports["default"] = _default;

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

@@ -0,0 +1,49 @@
+"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.verticalSeparator = exports.Default = exports["default"] = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Separator = _interopRequireDefault(require("./Separator"));
+
+var _Box = _interopRequireDefault(require("../Box/Box"));
+
+var _react2 = require("@emotion/react");
+
+var _default = {
+  title: 'Separator',
+  component: _Separator["default"]
+};
+exports["default"] = _default;
+
+var Default = function Default(_ref) {
+  var args = (0, _extends2["default"])({}, _ref);
+  return (0, _react2.jsx)(_Box["default"], {
+    height: "60px",
+    alignItems: "center"
+  }, "Content above", (0, _react2.jsx)(_Separator["default"], args), "Content below");
+};
+
+exports.Default = Default;
+
+var verticalSeparator = function verticalSeparator() {
+  return (0, _react2.jsx)(_Box["default"], {
+    height: "50px",
+    flexDirection: "row",
+    alignItems: "center"
+  }, "Content left", (0, _react2.jsx)(_Separator["default"], {
+    orientation: "vertical"
+  }), "Content right");
+};
+
+exports.verticalSeparator = verticalSeparator;

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

@@ -0,0 +1,38 @@
+"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 _testAxe = _interopRequireDefault(require("../../utils/testUtils/testAxe"));
+
+var _testWrapper = require("../../utils/testUtils/testWrapper");
+
+var _Separator = _interopRequireDefault(require("./Separator"));
+
+var _react2 = require("@emotion/react");
+
+var testId = 'test-separator';
+var defaultProps = {
+  'data-testid': testId
+};
+
+var getComponent = function getComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return (0, _testWrapper.render)((0, _react2.jsx)(_Separator["default"], (0, _extends2["default"])({}, defaultProps, props)));
+}; // Need to be added to each test file to test accessibility using axe.
+
+
+(0, _testAxe["default"])(getComponent);
+test('renders Separator component', function () {
+  getComponent();
+
+  var separator = _testWrapper.screen.getByTestId(testId);
+
+  _testWrapper.screen.getByRole('separator');
+
+  expect(separator).toBeInstanceOf(HTMLDivElement);
+  expect(separator).toBeInTheDocument();
+});

package/lib/cjs/components/Separator/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 _Separator["default"];
+  }
+});
+
+var _Separator = _interopRequireDefault(require("./Separator"));

package/lib/cjs/components/Stepper/Line.js

@@ -0,0 +1,51 @@
+"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"] = void 0;
+
+var _values = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/values"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _hooks = require("../../hooks");
+
+var _Stepper = require("./Stepper.constants");
+
+var _Box = _interopRequireDefault(require("../Box"));
+
+var _react2 = require("@emotion/react");
+
+var INACTIVE = _Stepper.stepStatuses.INACTIVE;
+
+var Line = function Line(_ref) {
+  var className = _ref.className,
+      status = _ref.status;
+
+  var _useStatusClasses = (0, _hooks.useStatusClasses)(className, {
+    isInactive: status === INACTIVE
+  }),
+      classNames = _useStatusClasses.classNames;
+
+  return (0, _react2.jsx)(_Box["default"], {
+    variant: "stepper.line",
+    className: classNames
+  });
+};
+
+Line.propTypes = {
+  status: _propTypes["default"].oneOf((0, _values["default"])(_Stepper.stepStatuses))
+};
+Line.defaultProps = {
+  status: INACTIVE
+};
+var _default = Line;
+exports["default"] = _default;

package/lib/cjs/components/Stepper/Step.js

@@ -0,0 +1,64 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime-corejs3/helpers/interopRequireWildcard");
+
+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.CollectionStep = void 0;
+
+var _values = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/values"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _CheckBoldIcon = _interopRequireDefault(require("mdi-react/CheckBoldIcon"));
+
+var _interactions = require("@react-aria/interactions");
+
+var _collections = require("@react-stately/collections");
+
+var _Stepper = require("./Stepper.constants");
+
+var _index = require("../../index");
+
+var _react2 = require("@emotion/react");
+
+var COMPLETED = _Stepper.stepStatuses.COMPLETED,
+    INACTIVE = _Stepper.stepStatuses.INACTIVE;
+var CollectionStep = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var status = props.status,
+      value = props.value;
+
+  var _useHover = (0, _interactions.useHover)(props),
+      hoverProps = _useHover.hoverProps,
+      isHovered = _useHover.isHovered;
+
+  return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
+    variant: "stepper.step.".concat(status),
+    ref: ref
+  }, hoverProps), status === COMPLETED && !isHovered ? (0, _react2.jsx)(_index.Icon, {
+    icon: _CheckBoldIcon["default"],
+    size: 23,
+    color: "text.primaryLight"
+  }) : value);
+});
+exports.CollectionStep = CollectionStep;
+CollectionStep.propTypes = {
+  status: _propTypes["default"].oneOf((0, _values["default"])(_Stepper.stepStatuses)),
+  value: _propTypes["default"].number
+};
+CollectionStep.defaultProps = {
+  status: INACTIVE,
+  value: 0
+};
+var _default = _collections.Item;
+exports["default"] = _default;

package/lib/cjs/components/Stepper/Stepper.constants.js

@@ -0,0 +1,15 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.stepStatuses = void 0;
+var stepStatuses = {
+  ACTIVE: 'active',
+  COMPLETED: 'completed',
+  INACTIVE: 'inactive'
+};
+exports.stepStatuses = stepStatuses;

package/lib/cjs/components/Stepper/Stepper.js

@@ -0,0 +1,170 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime-corejs3/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$defineProperty2 = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty2(exports, "__esModule", {
+  value: true
+});
+
+exports["default"] = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/define-property"));
+
+var _defineProperties = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/define-properties"));
+
+var _getOwnPropertyDescriptors = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors"));
+
+var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/for-each"));
+
+var _getOwnPropertyDescriptor = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor"));
+
+var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
+
+var _getOwnPropertySymbols = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols"));
+
+var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/keys"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _defineProperty3 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
+var _isArray = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/is-array"));
+
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+
+var _from = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/from"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _list = require("@react-stately/list");
+
+var _isValidPositiveInt = _interopRequireDefault(require("../../utils/devUtils/props/isValidPositiveInt"));
+
+var _Stepper = require("./Stepper.constants");
+
+var _Step = require("./Step");
+
+var _Line = _interopRequireDefault(require("./Line"));
+
+var _Tab = _interopRequireDefault(require("../Tab"));
+
+var _Tabs = _interopRequireDefault(require("../Tabs"));
+
+var _react2 = require("@emotion/react");
+
+function ownKeys(object, enumerableOnly) { var keys = (0, _keys["default"])(object); if (_getOwnPropertySymbols["default"]) { var symbols = (0, _getOwnPropertySymbols["default"])(object); if (enumerableOnly) symbols = (0, _filter["default"])(symbols).call(symbols, function (sym) { return (0, _getOwnPropertyDescriptor["default"])(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; (0, _forEach["default"])(_context = ownKeys(Object(source), true)).call(_context, function (key) { (0, _defineProperty3["default"])(target, key, source[key]); }); } else if (_getOwnPropertyDescriptors["default"]) { (0, _defineProperties["default"])(target, (0, _getOwnPropertyDescriptors["default"])(source)); } else { var _context2; (0, _forEach["default"])(_context2 = ownKeys(Object(source))).call(_context2, function (key) { (0, _defineProperty2["default"])(target, key, (0, _getOwnPropertyDescriptor["default"])(source, key)); }); } } return target; }
+
+var ACTIVE = _Stepper.stepStatuses.ACTIVE,
+    COMPLETED = _Stepper.stepStatuses.COMPLETED,
+    INACTIVE = _Stepper.stepStatuses.INACTIVE;
+var Stepper = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var activeStep = props.activeStep,
+      onStepChange = props.onStepChange,
+      tabListProps = props.tabListProps,
+      others = (0, _objectWithoutProperties2["default"])(props, ["activeStep", "onStepChange", "tabListProps"]);
+  var state = (0, _list.useSingleSelectListState)(props);
+
+  var getStatus = function getStatus(i) {
+    if (i === activeStep) {
+      return ACTIVE;
+    } else if (i < activeStep) {
+      return COMPLETED;
+    }
+
+    return INACTIVE;
+  };
+
+  var onStepChangeHandler = function onStepChangeHandler(key) {
+    if (onStepChange) {
+      onStepChange(+key);
+    }
+  };
+
+  var steps = (0, _from["default"])(state.collection);
+  var lines = (0, _map["default"])(steps).call(steps, function (_v, i) {
+    return (0, _react2.jsx)(_Line["default"], {
+      status: getStatus(i + 2)
+    });
+  });
+  var isFirst = true; // make sure not to insert until there's at least one non-null child
+
+  var render = (0, _map["default"])(steps).call(steps, function (item, i) {
+    var stepIndex = i + 1;
+    var stepStatus = getStatus(stepIndex);
+    var step = (0, _react2.jsx)(_Step.CollectionStep, {
+      key: item.key,
+      value: stepIndex,
+      status: stepStatus
+    });
+    var line = (0, _react2.jsx)(_react["default"].Fragment, null, (0, _isArray["default"])(lines) ? lines[i - 1] : lines);
+    var textValue = item && item.value && item.value.label || item.textValue || stepIndex.toString();
+    var container = (0, _react2.jsx)(_Tab["default"], {
+      key: stepIndex,
+      variant: "stepper.tab",
+      tabLineProps: {
+        display: 'none'
+      },
+      tabLabelProps: {
+        variant: 'stepper.tabLabel'
+      },
+      textValue: textValue,
+      title: step,
+      "aria-label": textValue,
+      content: item.rendered,
+      separator: !isFirst && line
+    });
+    isFirst = isFirst && !container;
+    return container;
+  });
+  return (0, _react2.jsx)(_Tabs["default"], (0, _extends2["default"])({
+    ref: ref,
+    variant: "stepper.wrapper",
+    tabListProps: _objectSpread({
+      variant: 'stepper.tabs',
+      gap: '0'
+    }, tabListProps),
+    onSelectionChange: onStepChangeHandler,
+    selectedKey: activeStep === null || activeStep === void 0 ? void 0 : activeStep.toString(),
+    mode: "tooltip"
+  }, others), render);
+});
+Stepper.propTypes = {
+  /**
+   * *For performance reasons, use this prop instead of Array.map when iteratively rendering Items*.
+   * For use with [dynamic collections](https://react-spectrum.adobe.com/react-stately/collections.html#dynamic-collections).
+  */
+  items: _propTypes["default"].arrayOf(_propTypes["default"].shape({
+    /** The primary option for the tooltip label. */
+    label: _propTypes["default"].string,
+    children: _propTypes["default"].node,
+    name: _propTypes["default"].string
+  })),
+
+  /** The number of the current step (using one-based indexing) */
+  activeStep: _isValidPositiveInt["default"],
+
+  /**
+  * Handler that is called when the current step changes
+  * `(index: number) => void`
+  */
+  onStepChange: _propTypes["default"].func,
+
+  /** A props object that is subsequently spread into the rendered tablist. */
+  tabListProps: _propTypes["default"].shape({})
+};
+Stepper.defaultProps = {
+  activeStep: 1
+};
+Stepper.displayName = 'Stepper';
+var _default = Stepper;
+exports["default"] = _default;

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

@@ -0,0 +1,139 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime-corejs3/helpers/interopRequireWildcard");
+
+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.WithoutContent = exports.ControlledStepper = exports.Default = exports["default"] = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _index = require("../../index");
+
+var _react2 = require("@emotion/react");
+
+var _default = {
+  title: 'Stepper',
+  component: _index.Stepper,
+  args: {
+    items: undefined,
+    onStepChange: undefined
+  },
+  argTypes: {
+    activeStep: {
+      control: {
+        type: 'number',
+        min: 0,
+        step: 1
+      },
+      defaultValue: 1,
+      description: 'The number of the current step (using one-based indexing)',
+      table: {
+        type: {
+          summary: 'number'
+        },
+        defaultValue: {
+          summary: 1
+        }
+      }
+    },
+    onStepChange: {
+      control: {
+        type: 'none'
+      }
+    },
+    items: {
+      defaultValue: undefined,
+      control: {
+        type: 'none'
+      }
+    }
+  },
+  parameters: {
+    docs: {
+      source: {
+        type: 'code'
+      }
+    }
+  }
+};
+exports["default"] = _default;
+var steps = [{
+  label: 'Label 1',
+  children: 'This is content for step 1',
+  name: 'step1'
+}, {
+  label: 'Label 2',
+  children: 'This is content for step 2',
+  name: 'step2'
+}, {
+  label: 'Label 3',
+  children: 'This is content for step 3',
+  name: 'step3'
+}];
+
+var Default = function Default(args) {
+  return (0, _react2.jsx)(_index.Stepper, args, (0, _react2.jsx)(_index.Step, {
+    key: "step1",
+    textValue: "Step 1"
+  }, (0, _react2.jsx)(_index.Text, {
+    pt: "lg"
+  }, "This is content for step 1")), (0, _react2.jsx)(_index.Step, {
+    key: "step2",
+    textValue: "Step 2"
+  }, (0, _react2.jsx)(_index.Text, {
+    pt: "lg"
+  }, "This is content for step 2")));
+};
+
+exports.Default = Default;
+
+var ControlledStepper = function ControlledStepper() {
+  var _useState = (0, _react.useState)(2),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      activeStep = _useState2[0],
+      setActiveStep = _useState2[1]; // steps = [
+  // { label: 'Label 1', children: 'This is content for step 1', name: 'step1' },
+  // { label: 'Label 2', children: 'This is content for step 2', name: 'step2' },
+  // { label: 'Label 3', children: 'This is content for step 3', name: 'step3' },
+  // ];
+
+
+  return (0, _react2.jsx)(_index.Stepper, {
+    items: steps,
+    activeStep: activeStep,
+    onStepChange: setActiveStep
+  }, function (item) {
+    return (0, _react2.jsx)(_index.Step, {
+      key: item.name,
+      textValue: item.name
+    }, (0, _react2.jsx)(_index.Text, {
+      pt: "lg"
+    }, item.children));
+  });
+};
+
+exports.ControlledStepper = ControlledStepper;
+
+var WithoutContent = function WithoutContent() {
+  return (0, _react2.jsx)(_index.Stepper, null, (0, _react2.jsx)(_index.Step, {
+    key: "step1",
+    textValue: "Step 1"
+  }), (0, _react2.jsx)(_index.Step, {
+    key: "step2",
+    textValue: "Step 2"
+  }), (0, _react2.jsx)(_index.Step, {
+    key: "step3",
+    textValue: "Step 3"
+  }));
+};
+
+exports.WithoutContent = WithoutContent;