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

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

@@ -0,0 +1,113 @@
+"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.InlineButton = exports.TextButton = exports.TextIconButton = exports.Disabled = exports.Default = exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _AddCircleIcon = _interopRequireDefault(require("mdi-react/AddCircleIcon"));
+
+var _Box = _interopRequireDefault(require("../Box"));
+
+var _ = _interopRequireDefault(require("."));
+
+var _Icon = _interopRequireDefault(require("../Icon"));
+
+var _Text = _interopRequireDefault(require("../Text"));
+
+var _variants = require("../../utils/devUtils/constants/variants");
+
+var _react2 = require("@emotion/react");
+
+// removing the iconButton variants from this story.
+var variants = _variants.buttonVariants;
+delete variants.ICON;
+delete variants.ICON_BUTTON;
+delete variants.INVERTED; // add designer approved variants for devs to use here
+
+var variantOptions = ['critical', 'danger', 'default', 'inline', 'link', 'primary', 'success', 'text'];
+var _default = {
+  title: 'Button',
+  component: _["default"],
+  argTypes: {
+    variant: {
+      control: {
+        type: 'select',
+        options: variantOptions
+      },
+      defaultValue: 'default'
+    },
+    children: {
+      description: 'Button text.',
+      defaultValue: 'Button Text',
+      table: {
+        type: {
+          summary: 'string'
+        }
+      },
+      control: {
+        type: 'text'
+      }
+    }
+  }
+};
+exports["default"] = _default;
+
+var Default = function Default(args) {
+  return (0, _react2.jsx)(_["default"], args);
+};
+
+exports.Default = Default;
+
+var Disabled = function Disabled() {
+  return (0, _react2.jsx)(_["default"], {
+    isDisabled: true
+  }, "Button Text");
+};
+
+exports.Disabled = Disabled;
+
+var TextIconButton = function TextIconButton() {
+  return (0, _react2.jsx)(_["default"], {
+    mb: "sm"
+  }, (0, _react2.jsx)(_Box["default"], {
+    isRow: true,
+    alignItems: "center"
+  }, (0, _react2.jsx)(_Icon["default"], {
+    icon: _AddCircleIcon["default"],
+    mr: "sm",
+    color: "active",
+    size: 20
+  }), "Add a Form"));
+};
+
+exports.TextIconButton = TextIconButton;
+
+var TextButton = function TextButton() {
+  return (0, _react2.jsx)(_["default"], {
+    mb: "sm",
+    variant: "text",
+    "aria-label": "Add option"
+  }, (0, _react2.jsx)(_Text["default"], {
+    variant: "label",
+    color: "active"
+  }, " + Add Option"));
+};
+
+exports.TextButton = TextButton;
+
+var InlineButton = function InlineButton() {
+  return (0, _react2.jsx)(_["default"], {
+    mb: "sm",
+    variant: "inline"
+  }, "Inline");
+};
+
+exports.InlineButton = InlineButton;

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

@@ -0,0 +1,125 @@
+"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 _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
+
+var _testAxe = _interopRequireDefault(require("../../utils/testUtils/testAxe"));
+
+var _testWrapper = require("../../utils/testUtils/testWrapper");
+
+var _ = _interopRequireDefault(require("."));
+
+var _react2 = require("@emotion/react");
+
+var testId = 'test-button';
+var defaultProps = {
+  'data-testid': testId,
+  'aria-label': 'Test button'
+};
+
+var getComponent = function getComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return (0, _testWrapper.render)((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 button', function () {
+  getComponent();
+
+  var button = _testWrapper.screen.getByRole('button');
+
+  expect(button).toHaveAttribute('data-testid', testId);
+  expect(button).toBeInstanceOf(HTMLButtonElement);
+  expect(button).toBeInTheDocument();
+});
+test('button hover', function () {
+  getComponent();
+
+  var button = _testWrapper.screen.getByRole('button');
+
+  expect(button).not.toHaveClass('is-hovered');
+
+  _userEvent["default"].hover(button);
+
+  expect(button).toHaveClass('is-hovered');
+
+  _userEvent["default"].unhover(button);
+
+  expect(button).not.toHaveClass('is-hovered');
+});
+test('icon button press', function () {
+  var onPress = jest.fn();
+  getComponent({
+    onPress: onPress
+  });
+
+  var button = _testWrapper.screen.getByRole('button');
+
+  expect(button).not.toHaveClass('is-pressed');
+  expect(onPress).not.toHaveBeenCalled(); // Hold down the button to see pressed styles
+
+  _testWrapper.fireEvent.mouseDown(button);
+
+  expect(button).toHaveClass('is-pressed'); // Finish the click to fire the event handler
+
+  _testWrapper.fireEvent.mouseUp(button);
+
+  expect(button).not.toHaveClass('is-pressed');
+  expect(onPress).toHaveBeenCalledTimes(1);
+});
+test('keyboard icon button press', function () {
+  var onPress = jest.fn();
+  getComponent({
+    onPress: onPress
+  });
+
+  var button = _testWrapper.screen.getByRole('button');
+
+  expect(onPress).not.toHaveBeenCalled();
+
+  _testWrapper.fireEvent.keyDown(button, {
+    key: 'Enter',
+    code: 13
+  });
+
+  expect(button).toHaveClass('is-pressed');
+
+  _testWrapper.fireEvent.keyUp(button, {
+    key: 'Enter',
+    code: 13
+  });
+
+  expect(button).not.toHaveClass('is-pressed');
+  expect(onPress).toHaveBeenCalledTimes(1);
+});
+test('button loading hides children and shows loader', function () {
+  var textContent = "I'ma button";
+  getComponent({
+    isLoading: true,
+    children: textContent
+  });
+
+  var childWrapper = _testWrapper.screen.getByText(textContent);
+
+  expect(childWrapper).toBeInTheDocument();
+  expect(childWrapper).not.toBeVisible();
+  expect(_testWrapper.screen.getByRole('progressbar')).toBeInTheDocument();
+});
+test('button renders children when not loading', function () {
+  var textContent = "I'ma button";
+  getComponent({
+    children: textContent
+  });
+
+  var childWrapper = _testWrapper.screen.getByText(textContent);
+
+  expect(childWrapper).toBeInTheDocument();
+  expect(childWrapper).toBeVisible();
+  expect(_testWrapper.screen.queryByRole('progressbar')).not.toBeInTheDocument();
+});

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

@@ -0,0 +1,14 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.modes = void 0;
+var modes = {
+  DEFAULT: 'default',
+  ICON: 'icon'
+};
+exports.modes = modes;

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

package/lib/cjs/components/Card/Card.js

@@ -0,0 +1,35 @@
+"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 _react = _interopRequireWildcard(require("react"));
+
+var _Box = _interopRequireDefault(require("../Box"));
+
+var _react2 = require("@emotion/react");
+
+/**
+ * A Box component built for the common "Card" use case. Has default variant of card.
+ * See Box for list of props.
+ */
+var Card = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  return (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
+    variant: "boxes.card",
+    ref: ref
+  }, props));
+});
+Card.displayName = 'Card';
+var _default = Card;
+exports["default"] = _default;

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

@@ -0,0 +1,52 @@
+"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.CardRow = exports.Default = exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Card = _interopRequireDefault(require("./Card"));
+
+var _Box = _interopRequireDefault(require("../Box"));
+
+var _react2 = require("@emotion/react");
+
+var _default = {
+  title: 'Card',
+  component: _Card["default"],
+  argTypes: {
+    children: {
+      description: 'Card content.',
+      defaultValue: 'Card Children',
+      table: {
+        type: {}
+      },
+      control: {
+        type: 'text'
+      }
+    }
+  }
+};
+exports["default"] = _default;
+
+var Default = function Default(args) {
+  return (0, _react2.jsx)(_Card["default"], args);
+};
+
+exports.Default = Default;
+
+var CardRow = function CardRow() {
+  return (0, _react2.jsx)(_Box["default"], {
+    isRow: true,
+    gap: "md"
+  }, (0, _react2.jsx)(_Card["default"], null, "First"), (0, _react2.jsx)(_Card["default"], null, "Second"), (0, _react2.jsx)(_Card["default"], null, "Third"));
+};
+
+exports.CardRow = CardRow;

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

@@ -0,0 +1,48 @@
+"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 _Card = _interopRequireDefault(require("./Card"));
+
+var _Button = _interopRequireDefault(require("../Button"));
+
+var _testAxe = _interopRequireDefault(require("../../utils/testUtils/testAxe"));
+
+var _react3 = require("@emotion/react");
+
+var testId = 'test-separator';
+var defaultProps = {
+  'data-testid': testId,
+  label: 'Test Label'
+};
+
+var getComponent = function getComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return (0, _react2.render)((0, _react3.jsx)(_Card["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 Card component', function () {
+  getComponent();
+
+  var separator = _react2.screen.getByTestId(testId);
+
+  expect(separator).toBeInTheDocument();
+});
+test('renders children within Card component', function () {
+  var children = (0, _react3.jsx)(_Button["default"], null);
+  getComponent({
+    children: children
+  });
+
+  var mockedChildren = _react2.screen.getByRole('button');
+
+  expect(mockedChildren).toBeInTheDocument();
+});

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

package/lib/cjs/components/Checkbox/Checkbox.js

@@ -0,0 +1,40 @@
+"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 _react = _interopRequireWildcard(require("react"));
+
+var _themeUi = require("theme-ui");
+
+var _react2 = require("@emotion/react");
+
+/**
+ * Basic checkbox input.
+ * Built on top of the [Checkbox from Theme-UI](https://theme-ui.com/components/checkbox/).
+ *
+ * **Note: Requires a label. It's recommended to use `CheckboxField` for a complete solution.**
+ */
+var Checkbox = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  return (0, _react2.jsx)(_themeUi.Checkbox, (0, _extends2["default"])({
+    ref: ref,
+    __css: {
+      top: 0,
+      left: 0
+    }
+  }, props));
+});
+Checkbox.displayName = 'Checkbox';
+var _default = Checkbox;
+exports["default"] = _default;

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

@@ -0,0 +1,36 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _Checkbox = _interopRequireDefault(require("./Checkbox"));
+
+var _testAxe = _interopRequireDefault(require("../../utils/testUtils/testAxe"));
+
+var _react3 = require("@emotion/react");
+
+var getComponent = function getComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return (0, _react2.render)((0, _react3.jsx)(_Checkbox["default"], props));
+}; // Need to be added to each test file to test accessibility using axe.
+
+
+(0, _testAxe["default"])(getComponent, {
+  // Checkbox with label provided by CheckboxField
+  rules: {
+    'label': {
+      enabled: false
+    }
+  }
+});
+test('default checkbox', function () {
+  getComponent();
+
+  var input = _react2.screen.getByRole('checkbox');
+
+  expect(input).toBeInstanceOf(HTMLInputElement);
+  expect(input).toBeInTheDocument();
+});

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