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

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

@@ -0,0 +1,485 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+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 _regenerator = _interopRequireDefault(require("@babel/runtime-corejs3/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/asyncToGenerator"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _defineProperty3 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
+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 _ = require("../..");
+
+var _2 = _interopRequireDefault(require("."));
+
+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 _context17; (0, _forEach["default"])(_context17 = ownKeys(Object(source), true)).call(_context17, function (key) { (0, _defineProperty3["default"])(target, key, source[key]); }); } else if (_getOwnPropertyDescriptors["default"]) { (0, _defineProperties["default"])(target, (0, _getOwnPropertyDescriptors["default"])(source)); } else { var _context18; (0, _forEach["default"])(_context18 = ownKeys(Object(source))).call(_context18, function (key) { (0, _defineProperty2["default"])(target, key, (0, _getOwnPropertyDescriptor["default"])(source, key)); }); } } return target; }
+
+var testId = 'test-copy-text';
+
+var originalClipboard = _objectSpread({}, global.navigator.clipboard);
+
+var originalExecCommand = global.document.execCommand;
+
+var defaultTest = function defaultTest() {
+  var getComponent = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  getComponent();
+
+  var container = _testWrapper.screen.getByTestId(testId);
+
+  expect(container).toBeInstanceOf(HTMLDivElement);
+  expect(container).toBeInTheDocument();
+};
+
+describe('Text mode', function () {
+  var defaultProps = {
+    'data-testid': testId
+  };
+  var textValue = 'Here is a value';
+
+  var getComponent = function getComponent() {
+    var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    return (0, _testWrapper.render)((0, _react2.jsx)(_2["default"], (0, _extends2["default"])({}, defaultProps, props), (0, _react2.jsx)(_.Text, null, textValue)));
+  }; // Need to be added to each test file to test accessibility using axe.
+
+
+  (0, _testAxe["default"])(getComponent);
+  test('renders component in the default state', function () {
+    defaultTest(getComponent);
+  });
+  test('tooltip renders on hover', function () {
+    getComponent();
+
+    var container = _testWrapper.screen.getByTestId(testId);
+
+    _testWrapper.fireEvent.mouseMove(container);
+
+    _testWrapper.fireEvent.mouseEnter(container);
+
+    expect(_testWrapper.screen.queryByRole('tooltip')).toBeInTheDocument();
+    expect(_testWrapper.screen.queryByRole('tooltip')).toHaveTextContent('Copy to clipboard');
+  });
+  test('content and copy buttons are focused with keyboard', function () {
+    getComponent();
+
+    var contentBtn = _testWrapper.screen.getByLabelText('copy-content');
+
+    expect(contentBtn).not.toHaveFocus();
+
+    _userEvent["default"].tab();
+
+    expect(contentBtn).toHaveFocus();
+    expect(contentBtn).toHaveClass('is-focused');
+
+    var copyBtn = _testWrapper.screen.getByLabelText('copy');
+
+    expect(copyBtn).not.toHaveFocus();
+
+    _userEvent["default"].tab();
+
+    expect(copyBtn).toHaveFocus();
+    expect(copyBtn).toHaveClass('is-focused');
+  });
+  beforeEach(function () {
+    var mockClipboard = {
+      writeText: jest.fn()
+    };
+    global.navigator.clipboard = mockClipboard;
+    global.document.execCommand = jest.fn();
+    global.document.execCommand.mockReturnValue(true);
+  });
+  afterEach(function () {
+    jest.resetAllMocks();
+    global.navigator.clipboard = originalClipboard;
+    global.document.execCommand = originalExecCommand;
+  });
+  test('click on text copies data to the clipboard', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
+    var button;
+    return _regenerator["default"].wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            getComponent();
+            button = _testWrapper.screen.getByText(textValue);
+            _context2.next = 4;
+            return (0, _testWrapper.act)( /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
+              return _regenerator["default"].wrap(function _callee$(_context) {
+                while (1) {
+                  switch (_context.prev = _context.next) {
+                    case 0:
+                      return _context.abrupt("return", _userEvent["default"].click(button));
+
+                    case 1:
+                    case "end":
+                      return _context.stop();
+                  }
+                }
+              }, _callee);
+            })));
+
+          case 4:
+            expect(navigator.clipboard.writeText).toBeCalledTimes(1);
+            expect(navigator.clipboard.writeText).toHaveBeenCalledWith(textValue);
+
+          case 6:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2);
+  })));
+  test('click on copy button copies data to the clipboard', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee4() {
+    var button;
+    return _regenerator["default"].wrap(function _callee4$(_context4) {
+      while (1) {
+        switch (_context4.prev = _context4.next) {
+          case 0:
+            getComponent();
+            button = _testWrapper.screen.getByLabelText('copy');
+            _context4.next = 4;
+            return (0, _testWrapper.act)( /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee3() {
+              return _regenerator["default"].wrap(function _callee3$(_context3) {
+                while (1) {
+                  switch (_context3.prev = _context3.next) {
+                    case 0:
+                      return _context3.abrupt("return", _userEvent["default"].click(button));
+
+                    case 1:
+                    case "end":
+                      return _context3.stop();
+                  }
+                }
+              }, _callee3);
+            })));
+
+          case 4:
+            expect(navigator.clipboard.writeText).toBeCalledTimes(1);
+            expect(navigator.clipboard.writeText).toHaveBeenCalledWith(textValue);
+
+          case 6:
+          case "end":
+            return _context4.stop();
+        }
+      }
+    }, _callee4);
+  })));
+  test('if textToCopy is provided it\'s copied to clipboard instead of children text data', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee6() {
+    var textToCopy, button;
+    return _regenerator["default"].wrap(function _callee6$(_context6) {
+      while (1) {
+        switch (_context6.prev = _context6.next) {
+          case 0:
+            textToCopy = 'This text is copied';
+            getComponent({
+              textToCopy: textToCopy
+            });
+            button = _testWrapper.screen.getByLabelText('copy');
+            _context6.next = 5;
+            return (0, _testWrapper.act)( /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee5() {
+              return _regenerator["default"].wrap(function _callee5$(_context5) {
+                while (1) {
+                  switch (_context5.prev = _context5.next) {
+                    case 0:
+                      return _context5.abrupt("return", _userEvent["default"].click(button));
+
+                    case 1:
+                    case "end":
+                      return _context5.stop();
+                  }
+                }
+              }, _callee5);
+            })));
+
+          case 5:
+            expect(navigator.clipboard.writeText).toBeCalledTimes(1);
+            expect(navigator.clipboard.writeText).toHaveBeenCalledWith(textToCopy);
+
+          case 7:
+          case "end":
+            return _context6.stop();
+        }
+      }
+    }, _callee6);
+  })));
+  test('copying works in insecure origin', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee8() {
+    var button;
+    return _regenerator["default"].wrap(function _callee8$(_context8) {
+      while (1) {
+        switch (_context8.prev = _context8.next) {
+          case 0:
+            global.navigator.clipboard = undefined;
+            getComponent();
+            button = _testWrapper.screen.getByLabelText('copy');
+            _context8.next = 5;
+            return (0, _testWrapper.act)( /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee7() {
+              return _regenerator["default"].wrap(function _callee7$(_context7) {
+                while (1) {
+                  switch (_context7.prev = _context7.next) {
+                    case 0:
+                      return _context7.abrupt("return", _userEvent["default"].click(button));
+
+                    case 1:
+                    case "end":
+                      return _context7.stop();
+                  }
+                }
+              }, _callee7);
+            })));
+
+          case 5:
+            expect(document.execCommand).toBeCalledTimes(1);
+            expect(document.execCommand).toHaveBeenCalledWith('copy');
+
+          case 7:
+          case "end":
+            return _context8.stop();
+        }
+      }
+    }, _callee8);
+  })));
+  test('if copying is failed, a warning shows in the console', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee10() {
+    var spy, button;
+    return _regenerator["default"].wrap(function _callee10$(_context10) {
+      while (1) {
+        switch (_context10.prev = _context10.next) {
+          case 0:
+            global.navigator.clipboard = undefined;
+            global.document.execCommand.mockReturnValue(false);
+
+            global.console.error = function () {
+              return jest.mock();
+            }; // eslint-disable-line no-console
+
+
+            getComponent();
+            spy = jest.spyOn(console, 'error');
+            expect(spy).not.toHaveBeenCalled();
+            button = _testWrapper.screen.getByLabelText('copy');
+            _context10.next = 9;
+            return (0, _testWrapper.act)( /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee9() {
+              return _regenerator["default"].wrap(function _callee9$(_context9) {
+                while (1) {
+                  switch (_context9.prev = _context9.next) {
+                    case 0:
+                      return _context9.abrupt("return", _userEvent["default"].click(button));
+
+                    case 1:
+                    case "end":
+                      return _context9.stop();
+                  }
+                }
+              }, _callee9);
+            })));
+
+          case 9:
+            expect(document.execCommand).toBeCalledTimes(1);
+            expect(document.execCommand).toHaveBeenCalledWith('copy');
+            expect(spy).toHaveBeenCalledWith(expect.stringMatching('Failed to copy:'), expect.any(Error));
+
+          case 12:
+          case "end":
+            return _context10.stop();
+        }
+      }
+    }, _callee10);
+  })));
+  test('after button click, the tooltip renders with the text "Copied!"', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee12() {
+    var button;
+    return _regenerator["default"].wrap(function _callee12$(_context12) {
+      while (1) {
+        switch (_context12.prev = _context12.next) {
+          case 0:
+            getComponent();
+            button = _testWrapper.screen.getByLabelText('copy');
+            _context12.next = 4;
+            return (0, _testWrapper.act)( /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee11() {
+              return _regenerator["default"].wrap(function _callee11$(_context11) {
+                while (1) {
+                  switch (_context11.prev = _context11.next) {
+                    case 0:
+                      return _context11.abrupt("return", _userEvent["default"].click(button));
+
+                    case 1:
+                    case "end":
+                      return _context11.stop();
+                  }
+                }
+              }, _callee11);
+            })));
+
+          case 4:
+            expect(_testWrapper.screen.queryByRole('tooltip')).toBeInTheDocument();
+            expect(_testWrapper.screen.queryByRole('tooltip')).toHaveTextContent('Copied!');
+
+          case 6:
+          case "end":
+            return _context12.stop();
+        }
+      }
+    }, _callee12);
+  })));
+  test('tooltip renders with the text "Copied!" hides after delay', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee14() {
+    var button;
+    return _regenerator["default"].wrap(function _callee14$(_context14) {
+      while (1) {
+        switch (_context14.prev = _context14.next) {
+          case 0:
+            getComponent();
+            button = _testWrapper.screen.getByLabelText('copy');
+            _context14.next = 4;
+            return (0, _testWrapper.act)( /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee13() {
+              return _regenerator["default"].wrap(function _callee13$(_context13) {
+                while (1) {
+                  switch (_context13.prev = _context13.next) {
+                    case 0:
+                      return _context13.abrupt("return", _userEvent["default"].click(button));
+
+                    case 1:
+                    case "end":
+                      return _context13.stop();
+                  }
+                }
+              }, _callee13);
+            })));
+
+          case 4:
+            expect(_testWrapper.screen.queryByRole('tooltip')).toBeInTheDocument();
+            expect(_testWrapper.screen.queryByRole('tooltip')).toHaveTextContent('Copied!');
+            _context14.next = 8;
+            return (0, _testWrapper.waitForElementToBeRemoved)(_testWrapper.screen.queryByRole('tooltip'));
+
+          case 8:
+          case "end":
+            return _context14.stop();
+        }
+      }
+    }, _callee14);
+  })));
+});
+describe('Link mode', function () {
+  var defaultProps = {
+    'data-testid': testId,
+    mode: 'link'
+  };
+  var linkValue = 'https://a.url.com';
+
+  var getComponent = function getComponent() {
+    var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    return (0, _testWrapper.render)((0, _react2.jsx)(_2["default"], (0, _extends2["default"])({}, defaultProps, props), (0, _react2.jsx)(_.Link, {
+      href: linkValue
+    }, linkValue)));
+  }; // Need to be added to each test file to test accessibility using axe.
+
+
+  (0, _testAxe["default"])(getComponent);
+  test('renders component in the default state', function () {
+    defaultTest(getComponent);
+  });
+  test('tooltip renders only when the copy button is hovered', function () {
+    getComponent();
+
+    var container = _testWrapper.screen.getByTestId(testId);
+
+    _testWrapper.fireEvent.mouseMove(container);
+
+    _testWrapper.fireEvent.mouseEnter(container);
+
+    expect(_testWrapper.screen.queryByRole('tooltip')).not.toBeInTheDocument();
+
+    var button = _testWrapper.screen.getByLabelText('copy');
+
+    _testWrapper.fireEvent.mouseMove(button);
+
+    _testWrapper.fireEvent.mouseEnter(button);
+
+    expect(_testWrapper.screen.queryByRole('tooltip')).toBeInTheDocument();
+  });
+  test('copy button is focused with keyboard', function () {
+    getComponent();
+
+    var copyBtn = _testWrapper.screen.getByLabelText('copy');
+
+    expect(copyBtn).not.toHaveFocus();
+
+    _userEvent["default"].tab();
+
+    _userEvent["default"].tab();
+
+    expect(copyBtn).toHaveFocus();
+    expect(copyBtn).toHaveClass('is-focused');
+  });
+  beforeEach(function () {
+    var mockClipboard = {
+      writeText: jest.fn()
+    };
+    global.navigator.clipboard = mockClipboard;
+  });
+  afterEach(function () {
+    jest.resetAllMocks();
+    global.navigator.clipboard = originalClipboard;
+  });
+  test('click on copy button copies data to the clipboard', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee16() {
+    var button;
+    return _regenerator["default"].wrap(function _callee16$(_context16) {
+      while (1) {
+        switch (_context16.prev = _context16.next) {
+          case 0:
+            getComponent();
+            button = _testWrapper.screen.getByLabelText('copy');
+            _context16.next = 4;
+            return (0, _testWrapper.act)( /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee15() {
+              return _regenerator["default"].wrap(function _callee15$(_context15) {
+                while (1) {
+                  switch (_context15.prev = _context15.next) {
+                    case 0:
+                      return _context15.abrupt("return", _userEvent["default"].click(button));
+
+                    case 1:
+                    case "end":
+                      return _context15.stop();
+                  }
+                }
+              }, _callee15);
+            })));
+
+          case 4:
+            expect(navigator.clipboard.writeText).toBeCalledTimes(1);
+            expect(navigator.clipboard.writeText).toHaveBeenCalledWith(linkValue);
+
+          case 6:
+          case "end":
+            return _context16.stop();
+        }
+      }
+    }, _callee16);
+  })));
+});

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

package/lib/cjs/components/FieldHelperText/FieldHelperText.js

@@ -0,0 +1,67 @@
+"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 _values = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/values"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _hooks = require("../../hooks");
+
+var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
+
+var _Text = _interopRequireDefault(require("../Text"));
+
+var _react2 = require("@emotion/react");
+
+/**
+ * Displays a styled message.
+ *
+ * **NOTE**: Specialized field components contain built-in support for helper text. It's
+ * recommended to use those instead of a standalone `FieldHelperText`.
+ */
+var FieldHelperText = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var className = props.className,
+      status = props.status,
+      others = (0, _objectWithoutProperties2["default"])(props, ["className", "status"]);
+
+  var _useStatusClasses = (0, _hooks.useStatusClasses)(className, (0, _defineProperty2["default"])({}, "is-".concat(status), true)),
+      classNames = _useStatusClasses.classNames;
+
+  return (0, _react2.jsx)(_Text["default"], (0, _extends2["default"])({
+    ref: ref,
+    pt: "sm",
+    variant: "fieldHelperText",
+    role: "status"
+  }, others, {
+    className: classNames
+  }));
+});
+FieldHelperText.propTypes = {
+  /** Determines the color of the field message. */
+  status: _propTypes["default"].oneOf((0, _values["default"])(_statuses["default"]))
+};
+FieldHelperText.defaultProps = {
+  status: _statuses["default"].DEFAULT
+};
+FieldHelperText.displayName = 'FieldHelperText';
+var _default = FieldHelperText;
+exports["default"] = _default;

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

@@ -0,0 +1,64 @@
+"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.Warning = exports.Success = exports.Error = exports.Default = exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ = _interopRequireDefault(require("."));
+
+var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
+
+var _react2 = require("@emotion/react");
+
+var _default = {
+  title: 'Form/Base Components/FieldHelperText',
+  component: _["default"],
+  argTypes: {
+    status: {
+      control: {
+        type: 'select',
+        options: _statuses["default"]
+      },
+      defaultValue: _statuses["default"].DEFAULT
+    }
+  }
+};
+exports["default"] = _default;
+
+var Default = function Default(args) {
+  return (0, _react2.jsx)(_["default"], args, "Look at me!");
+};
+
+exports.Default = Default;
+
+var Error = function Error() {
+  return (0, _react2.jsx)(_["default"], {
+    status: "error"
+  }, "Look at me!");
+};
+
+exports.Error = Error;
+
+var Success = function Success() {
+  return (0, _react2.jsx)(_["default"], {
+    status: "success"
+  }, "Look at me!");
+};
+
+exports.Success = Success;
+
+var Warning = function Warning() {
+  return (0, _react2.jsx)(_["default"], {
+    status: "warning"
+  }, "Look at me!");
+};
+
+exports.Warning = Warning;