@pingux/astro 1.27.0-alpha.25 → 1.27.0-alpha.26

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

@@ -0,0 +1,57 @@
+"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.Password = exports.LargeInput = exports.Default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ = _interopRequireDefault(require("."));
+
+var _react2 = require("@emotion/react");
+
+var _default = {
+  title: 'Form/Base Components/Input',
+  component: _["default"],
+  argTypes: {
+    placeholder: {
+      defaultValue: 'This is a basic input'
+    },
+    type: {},
+    name: {},
+    id: {}
+  }
+};
+exports["default"] = _default;
+
+var Default = function Default(args) {
+  return (0, _react2.jsx)(_["default"], args);
+};
+
+exports.Default = Default;
+
+var Password = function Password(args) {
+  return (0, _react2.jsx)(_["default"], (0, _extends2["default"])({
+    placeholder: "This is a password input",
+    type: "password"
+  }, args));
+};
+
+exports.Password = Password;
+
+var LargeInput = function LargeInput(args) {
+  return (0, _react2.jsx)(_["default"], (0, _extends2["default"])({
+    variant: "forms.input.large",
+    placeholder: "This is a large input"
+  }, args));
+};
+
+exports.LargeInput = LargeInput;

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

@@ -0,0 +1,81 @@
+"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 _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
+
+var _ = _interopRequireDefault(require("."));
+
+var _testAxe = _interopRequireDefault(require("../../utils/testUtils/testAxe"));
+
+var _react3 = require("@emotion/react");
+
+var testId = 'test-input';
+var defaultProps = {
+  'data-testid': testId,
+  'aria-label': 'My Input'
+};
+
+var getComponent = function getComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return (0, _react2.render)((0, _react3.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 input', function () {
+  getComponent();
+
+  var input = _react2.screen.getByTestId(testId);
+
+  expect(input).toBeInstanceOf(HTMLInputElement);
+  expect(input).toBeInTheDocument();
+});
+test('input type as password', function () {
+  getComponent({
+    type: 'password'
+  });
+
+  var input = _react2.screen.getByTestId(testId);
+
+  expect(input).toHaveAttribute('type', 'password');
+});
+test('maxlength field with a set maxlength', function () {
+  getComponent({
+    maxLength: 3
+  });
+
+  var input = _react2.screen.getByTestId(testId);
+
+  _userEvent["default"].type(input, 'banana');
+
+  expect(input.value.length).toBe(3);
+});
+test('maxlength field is not set as null', function () {
+  getComponent({
+    maxLength: null
+  });
+
+  var input = _react2.screen.getByTestId(testId);
+
+  _userEvent["default"].type(input, 'banana');
+
+  expect(input.value.length).toBe(6);
+});
+test('maxlength field is not set as zero', function () {
+  getComponent({
+    maxLength: 0
+  });
+
+  var input = _react2.screen.getByTestId(testId);
+
+  _userEvent["default"].type(input, 'banana');
+
+  expect(input.value.length).toBe(6);
+});

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

package/lib/cjs/components/Label/Label.js

@@ -0,0 +1,120 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+
+_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 _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
+
+var _base = _interopRequireDefault(require("@emotion/styled/base"));
+
+var _styledSystem = require("styled-system");
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _themeUi = require("theme-ui");
+
+var _hooks = require("../../hooks");
+
+var _constants = require("./constants");
+
+var _Box = _interopRequireDefault(require("../Box"));
+
+var _HelpHint = _interopRequireDefault(require("../HelpHint"));
+
+var _react2 = require("@emotion/react");
+
+var _excluded = ["children", "className", "isDisabled", "isRequired", "mode", "requiredIndicator", "hintText", "helpHintProps"];
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+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; }
+
+var ExtendedLabel = ( /*#__PURE__*/0, _base["default"])(_themeUi.Label, process.env.NODE_ENV === "production" ? {
+  target: "e172msu10"
+} : {
+  target: "e172msu10",
+  label: "ExtendedLabel"
+})(_styledSystem.layout, _styledSystem.flexbox, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0xhYmVsL0xhYmVsLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVVzQiIsImZpbGUiOiIuLi8uLi8uLi8uLi9zcmMvY29tcG9uZW50cy9MYWJlbC9MYWJlbC5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IGZsZXhib3gsIGxheW91dCB9IGZyb20gJ3N0eWxlZC1zeXN0ZW0nO1xuaW1wb3J0IFJlYWN0LCB7IGZvcndhcmRSZWYgfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgUHJvcFR5cGVzIGZyb20gJ3Byb3AtdHlwZXMnO1xuaW1wb3J0IHsgTGFiZWwgYXMgVGhlbWVVSUxhYmVsIH0gZnJvbSAndGhlbWUtdWknO1xuaW1wb3J0IHsgdXNlUHJvcFdhcm5pbmcsIHVzZVN0YXR1c0NsYXNzZXMgfSBmcm9tICcuLi8uLi9ob29rcyc7XG5pbXBvcnQgeyBtb2RlcyB9IGZyb20gJy4vY29uc3RhbnRzJztcbmltcG9ydCBCb3ggZnJvbSAnLi4vQm94JztcbmltcG9ydCBIZWxwSGludCBmcm9tICcuLi9IZWxwSGludCc7XG5cbmNvbnN0IEV4dGVuZGVkTGFiZWwgPSBzdHlsZWQoVGhlbWVVSUxhYmVsKShsYXlvdXQsIGZsZXhib3gpO1xuXG5jb25zdCBkZWZhdWx0SW5kaWNhdG9yID0gKFxuICA8Qm94IHZhcmlhbnQ9XCJmb3Jtcy5sYWJlbC5pbmRpY2F0b3JcIj5cbiAgICAqXG4gIDwvQm94PlxuKTtcblxuLyoqXG4gKiBCYXNlIGxhYmVsIGZvciBhbiBpbnB1dC5cbiAqXG4gKiBBY2NlcHRzIG1vc3Qgb2YgdGhlIHN0eWxpbmcgcHJvcHMgZnJvbSBbc3R5bGVkLXN5c3RlbV0oaHR0cHM6Ly9zdHlsZWQtc3lzdGVtLmNvbS90YWJsZSkuXG4gKiBCdWlsdCBvbiB0b3Agb2YgdGhlIFtMYWJlbCBmcm9tIFRoZW1lLVVJXShodHRwczovL3RoZW1lLXVpLmNvbS9jb21wb25lbnRzL2xhYmVsKS5cbiAqXG4gKiAqKk5PVEUqKjogU3BlY2lhbGl6ZWQgZmllbGQgY29tcG9uZW50cyBjb250YWluIGJ1aWx0LWluIHN1cHBvcnQgZm9yIGxhYmVscy4gSXQnc1xuICogcmVjb21tZW5kZWQgdG8gdXNlIHRob3NlIGluc3RlYWQgb2YgYSBzdGFuZGFsb25lIGBMYWJlbGAuXG4gKi9cblxuY29uc3QgTGFiZWwgPSBmb3J3YXJkUmVmKChwcm9wcywgcmVmKSA9PiB7XG4gIGNvbnN0IHtcbiAgICBjaGlsZHJlbixcbiAgICBjbGFzc05hbWUsXG4gICAgaXNEaXNhYmxlZCxcbiAgICBpc1JlcXVpcmVkLFxuICAgIG1vZGUsXG4gICAgcmVxdWlyZWRJbmRpY2F0b3IsXG4gICAgaGludFRleHQsXG4gICAgaGVscEhpbnRQcm9wcyxcbiAgICAuLi5vdGhlcnNcbiAgfSA9IHByb3BzO1xuXG4gIHVzZVByb3BXYXJuaW5nKHByb3BzLCAnZGlzYWJsZWQnLCAnaXNEaXNhYmxlZCcpO1xuXG4gIGNvbnN0IHsgY2xhc3NOYW1lcyB9ID0gdXNlU3RhdHVzQ2xhc3NlcyhjbGFzc05hbWUsIHtcbiAgICBpc0Rpc2FibGVkLFxuICAgIGlzUmVxdWlyZWQsXG4gICAgaXNGbG9hdExhYmVsOiBtb2RlID09PSBtb2Rlcy5GTE9BVCxcbiAgICBpc0xlZnRMYWJlbDogbW9kZSA9PT0gbW9kZXMuTEVGVCxcbiAgfSk7XG5cbiAgcmV0dXJuIChcbiAgICA8RXh0ZW5kZWRMYWJlbFxuICAgICAgcmVmPXtyZWZ9XG4gICAgICBkaXNwbGF5PVwiZmxleFwiXG4gICAgICBjbGFzc05hbWU9e2NsYXNzTmFtZXN9XG4gICAgICB7Li4ub3RoZXJzfVxuICAgID5cbiAgICAgIHtjaGlsZHJlbn1cbiAgICAgIHtcbiAgICAgICAgaXNSZXF1aXJlZFxuICAgICAgICAmJiAocmVxdWlyZWRJbmRpY2F0b3IgfHwgZGVmYXVsdEluZGljYXRvcilcbiAgICAgIH1cbiAgICAgIHtcbiAgICAgICAgaGludFRleHRcbiAgICAgICAgJiYgPEhlbHBIaW50IHsuLi5oZWxwSGludFByb3BzfT57aGludFRleHR9PC9IZWxwSGludD5cbiAgICAgIH1cbiAgICA8L0V4dGVuZGVkTGFiZWw+XG4gICk7XG59KTtcblxuTGFiZWwucHJvcFR5cGVzID0ge1xuICAvKiogV2hldGhlciB0aGUgbGFiZWwgaGFzIGRpc2FibGVkIHN0eWxpbmcgYXBwbGllZC4gKi9cbiAgaXNEaXNhYmxlZDogUHJvcFR5cGVzLmJvb2wsXG4gIC8qKiBXaGV0aGVyIHRoZSBsYWJlbCBoYXMgcmVxdWlyZWQgaW5kaWNhdG9yIHN0eWxpbmcgYXBwbGllZC4gKi9cbiAgaXNSZXF1aXJlZDogUHJvcFR5cGVzLmJvb2wsXG4gIC8qKiBEZXRlcm1pbmVzIHRoZSBiZWhhdmlvciBwYXR0ZXJuIGZvciB0aGUgbGFiZWwuICovXG4gIG1vZGU6IFByb3BUeXBlcy5vbmVPZihPYmplY3QudmFsdWVzKG1vZGVzKSksXG4gIC8qKiBUaGUgdmlzdWFsIGNvbXBvbmVudCB1c2VkIHRvIG1hcmsgYW4gaW5wdXQgYXMgcmVxdWlyZWQgd2l0aGluIHRoZSBsYWJlbC4gKi9cbiAgcmVxdWlyZWRJbmRpY2F0b3I6IFByb3BUeXBlcy5ub2RlLFxuICAvKiogSWYgcHJlc2VudCB0aGlzIHByb3Agd2lsbCBjYXVzZSBhIGhlbHAgaGludCB0byByZW5kZXIgaW4gdGhlIGxhYmVsLiAqL1xuICBoaW50VGV4dDogUHJvcFR5cGVzLnN0cmluZyxcbiAgLyoqIFByb3BzIG9iamVjdCB0aGF0IGlzIHNwcmVhZCBkaXJlY3RseSBpbnRvIHRoZSBoZWxwaGludCBlbGVtZW50LiAqL1xuICBoZWxwSGludFByb3BzOiBQcm9wVHlwZXMuc2hhcGUoe30pLFxufTtcblxuTGFiZWwuZGVmYXVsdFByb3BzID0ge1xuICBtb2RlOiBtb2Rlcy5ERUZBVUxULFxufTtcblxuTGFiZWwuZGlzcGxheU5hbWUgPSAnTGFiZWwnO1xuZXhwb3J0IGRlZmF1bHQgTGFiZWw7XG4iXX0= */");
+var defaultIndicator = (0, _react2.jsx)(_Box["default"], {
+  variant: "forms.label.indicator"
+}, "*");
+/**
+ * Base label for an input.
+ *
+ * Accepts most of the styling props from [styled-system](https://styled-system.com/table).
+ * Built on top of the [Label from Theme-UI](https://theme-ui.com/components/label).
+ *
+ * **NOTE**: Specialized field components contain built-in support for labels. It's
+ * recommended to use those instead of a standalone `Label`.
+ */
+
+var Label = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var children = props.children,
+      className = props.className,
+      isDisabled = props.isDisabled,
+      isRequired = props.isRequired,
+      mode = props.mode,
+      requiredIndicator = props.requiredIndicator,
+      hintText = props.hintText,
+      helpHintProps = props.helpHintProps,
+      others = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  (0, _hooks.usePropWarning)(props, 'disabled', 'isDisabled');
+
+  var _useStatusClasses = (0, _hooks.useStatusClasses)(className, {
+    isDisabled: isDisabled,
+    isRequired: isRequired,
+    isFloatLabel: mode === _constants.modes.FLOAT,
+    isLeftLabel: mode === _constants.modes.LEFT
+  }),
+      classNames = _useStatusClasses.classNames;
+
+  return (0, _react2.jsx)(ExtendedLabel, (0, _extends2["default"])({
+    ref: ref,
+    display: "flex",
+    className: classNames
+  }, others), children, isRequired && (requiredIndicator || defaultIndicator), hintText && (0, _react2.jsx)(_HelpHint["default"], helpHintProps, hintText));
+});
+Label.propTypes = {
+  /** Whether the label has disabled styling applied. */
+  isDisabled: _propTypes["default"].bool,
+
+  /** Whether the label has required indicator styling applied. */
+  isRequired: _propTypes["default"].bool,
+
+  /** Determines the behavior pattern for the label. */
+  mode: _propTypes["default"].oneOf((0, _values["default"])(_constants.modes)),
+
+  /** The visual component used to mark an input as required within the label. */
+  requiredIndicator: _propTypes["default"].node,
+
+  /** If present this prop will cause a help hint to render in the label. */
+  hintText: _propTypes["default"].string,
+
+  /** Props object that is spread directly into the helphint element. */
+  helpHintProps: _propTypes["default"].shape({})
+};
+Label.defaultProps = {
+  mode: _constants.modes.DEFAULT
+};
+Label.displayName = 'Label';
+var _default = Label;
+exports["default"] = _default;

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

@@ -0,0 +1,63 @@
+"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.WithHelpHint = exports.Float = exports.Default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ = _interopRequireDefault(require("."));
+
+var _constants = require("./constants");
+
+var _react2 = require("@emotion/react");
+
+var _default = {
+  title: 'Form/Base Components/Label',
+  component: _["default"],
+  argTypes: {
+    mode: {
+      control: {
+        type: 'select',
+        options: _constants.modes
+      },
+      defaultValue: _constants.modes.DEFAULT
+    },
+    isDisabled: {},
+    isRequired: {},
+    requiredIndicator: {
+      control: 'none'
+    }
+  }
+};
+exports["default"] = _default;
+
+var Default = function Default(args) {
+  return (0, _react2.jsx)(_["default"], args, "This is a label");
+};
+
+exports.Default = Default;
+
+var Float = function Float() {
+  return (0, _react2.jsx)(_["default"], {
+    mode: "float"
+  }, "This is a float label");
+};
+
+exports.Float = Float;
+
+var WithHelpHint = function WithHelpHint(args) {
+  return (0, _react2.jsx)(_["default"], (0, _extends2["default"])({
+    hintText: "Example Hint"
+  }, args), "This is a label");
+};
+
+exports.WithHelpHint = WithHelpHint;

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

@@ -0,0 +1,90 @@
+"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 _ = _interopRequireDefault(require("."));
+
+var _Input = _interopRequireDefault(require("../Input"));
+
+var _testAxe = _interopRequireDefault(require("../../utils/testUtils/testAxe"));
+
+var _react3 = require("@emotion/react");
+
+var testId = 'test-label';
+var defaultProps = {
+  'data-testid': testId
+};
+
+var getComponent = function getComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return (0, _react2.render)((0, _react3.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 label', function () {
+  getComponent();
+
+  var label = _react2.screen.getByTestId(testId);
+
+  expect(label).toBeInstanceOf(HTMLLabelElement);
+  expect(label).toBeInTheDocument();
+});
+test('required label', function () {
+  getComponent({
+    isRequired: true
+  });
+
+  var label = _react2.screen.getByTestId(testId);
+
+  expect(label).toHaveTextContent('*');
+});
+test('required label with custom indicator', function () {
+  var requiredIndicator = '>Required<';
+  getComponent({
+    isRequired: true,
+    requiredIndicator: requiredIndicator
+  });
+
+  var label = _react2.screen.getByTestId(testId);
+
+  expect(label).not.toHaveTextContent('*');
+  expect(label).toHaveTextContent(requiredIndicator);
+});
+test('label with an input', function () {
+  var labelText = 'This is a label';
+  var inputId = 'blah';
+  var children = (0, _react3.jsx)(_react["default"].Fragment, null, labelText, (0, _react3.jsx)(_Input["default"], {
+    id: inputId
+  }));
+  getComponent({
+    children: children,
+    htmlFor: inputId
+  });
+
+  var label = _react2.screen.getByLabelText(labelText);
+
+  expect(label).toBeInTheDocument();
+});
+test('label with helpHint', function () {
+  var hintText = 'Hint Text';
+  getComponent({
+    hintText: hintText
+  });
+
+  var button = _react2.screen.getByRole('button');
+
+  expect(button).toBeInTheDocument();
+
+  _react2.fireEvent.mouseMove(button);
+
+  _react2.fireEvent.mouseEnter(button);
+
+  expect(_react2.screen.getByText(hintText)).toBeInTheDocument();
+});

package/lib/cjs/components/Label/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.modes = void 0;
+var modes = {
+  DEFAULT: 'default',
+  FLOAT: 'float',
+  LEFT: 'left'
+};
+exports.modes = modes;

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

package/lib/cjs/components/Link/Link.js

@@ -0,0 +1,122 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+
+_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 _themeUi = require("theme-ui");
+
+var _link = require("@react-aria/link");
+
+var _focus = require("@react-aria/focus");
+
+var _interactions = require("@react-aria/interactions");
+
+var _utils = require("@react-aria/utils");
+
+var _hooks = require("../../hooks");
+
+var _react2 = require("@emotion/react");
+
+var _excluded = ["className", "isDisabled", "onPress"];
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+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; }
+
+/**
+ * Link uses the [Link - Theme-UI](https://theme-ui.com/components/link) component and
+ * React Aria's [useLink](https://react-spectrum.adobe.com/react-aria/useLink.html) hook.
+ *
+ */
+var Link = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var className = props.className,
+      isDisabled = props.isDisabled,
+      onPress = props.onPress,
+      others = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  var linkRef = (0, _react.useRef)();
+  (0, _hooks.usePropWarning)(props, 'disabled', 'isDisabled');
+  /* istanbul ignore next */
+
+  (0, _react.useImperativeHandle)(ref, function () {
+    return linkRef.current;
+  });
+
+  var _useFocusRing = (0, _focus.useFocusRing)(),
+      isFocusVisible = _useFocusRing.isFocusVisible,
+      focusProps = _useFocusRing.focusProps;
+
+  var _useLink = (0, _link.useLink)(props, linkRef),
+      linkProps = _useLink.linkProps;
+
+  var _useHover = (0, _interactions.useHover)(props),
+      hoverProps = _useHover.hoverProps,
+      isHovered = _useHover.isHovered;
+
+  var _usePress = (0, _interactions.usePress)({
+    ref: linkRef
+  }),
+      pressProps = _usePress.pressProps,
+      isPressed = _usePress.isPressed;
+
+  var _useStatusClasses = (0, _hooks.useStatusClasses)(className, {
+    isDisabled: isDisabled,
+    isFocused: isFocusVisible,
+    isHovered: isHovered,
+    isPressed: isPressed
+  }),
+      classNames = _useStatusClasses.classNames;
+
+  return (0, _react2.jsx)(_themeUi.Link, (0, _extends2["default"])({
+    className: classNames,
+    ref: linkRef,
+    role: "link"
+  }, others, (0, _utils.mergeProps)(hoverProps, pressProps, linkProps, focusProps)));
+});
+Link.propTypes = {
+  /** Whether the link is disabled. */
+  isDisabled: _propTypes["default"].bool,
+
+  /**  The HTML element used to render the link, e.g. 'a', or 'span'. */
+  as: _propTypes["default"].string,
+
+  /**  Handler that is called when the press is released over the target. */
+  onPress: _propTypes["default"].func,
+
+  /**  Specifies the location of the URL */
+  href: _propTypes["default"].string,
+
+  /**  Specifies the window where the linked page is loaded */
+  target: _propTypes["default"].string,
+
+  /** The styling variation of the link. */
+  variant: _propTypes["default"].string
+};
+Link.defaultProps = {
+  isDisabled: false,
+  as: 'a',
+  variant: 'app'
+};
+Link.displayName = 'Link';
+var _default = Link;
+exports["default"] = _default;

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

@@ -0,0 +1,66 @@
+"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 _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/keys"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ = _interopRequireDefault(require("."));
+
+var _htmlElements = require("../../utils/devUtils/constants/htmlElements");
+
+var _links = _interopRequireDefault(require("../../styles/variants/links"));
+
+var _react2 = require("@emotion/react");
+
+var _default = {
+  title: 'Link',
+  component: _["default"],
+  argTypes: {
+    href: {
+      control: {
+        type: 'text'
+      },
+      defaultValue: 'https://uilibrary.ping-eng.com/'
+    },
+    isDisabled: {},
+    as: {
+      control: {
+        type: 'none',
+        options: _htmlElements.htmlElements
+      },
+      defaultValue: 'a'
+    },
+    target: {
+      control: {
+        type: 'none'
+      },
+      defaultValue: '_blank'
+    },
+    variant: {
+      control: {
+        type: 'select',
+        options: (0, _keys["default"])(_links["default"])
+      }
+    }
+  }
+};
+exports["default"] = _default;
+
+var Default = function Default(_ref) {
+  var args = (0, _extends2["default"])({}, _ref);
+  return (0, _react2.jsx)("div", null, (0, _react2.jsx)(_["default"], args, "A link"), " to your favorite website.");
+};
+
+exports.Default = Default;