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

package/lib/components/ImageUploadField/ImageUploadFieldBase.js

@@ -0,0 +1,87 @@
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); if (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 source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; _forEachInstanceProperty(_context = ownKeys(Object(source), true)).call(_context, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { var _context2; _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+import React, { forwardRef, useMemo, useRef } from 'react';
+import PropTypes from 'prop-types';
+import { useVisuallyHidden } from '@react-aria/visually-hidden';
+import omit from 'lodash/omit';
+import { PopoverMenu } from '../../index';
+import useField from '../../hooks/useField';
+import FieldHelperText from '../FieldHelperText';
+import Input from '../Input';
+import Box from '../Box';
+import Label from '../Label';
+import statuses from '../../utils/devUtils/constants/statuses';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var ImageUploadFieldBase = /*#__PURE__*/forwardRef(function (props, inputRef) {
+  var children = props.children,
+      fileName = props.fileName,
+      fileTypes = props.fileTypes,
+      handleInputChange = props.handleInputChange,
+      handleLabelClick = props.handleLabelClick,
+      handleOpenMenuChange = props.handleOpenMenuChange,
+      helperText = props.helperText,
+      isImageType = props.isImageType,
+      isMenuOpen = props.isMenuOpen,
+      status = props.status;
+
+  var _useField = useField(_objectSpread({}, omit(props, ['onRemove']))),
+      fieldContainerProps = _useField.fieldContainerProps,
+      fieldControlProps = _useField.fieldControlProps,
+      fieldLabelProps = _useField.fieldLabelProps;
+
+  var labelRef = useRef();
+
+  var _useVisuallyHidden = useVisuallyHidden(),
+      visuallyHiddenProps = _useVisuallyHidden.visuallyHiddenProps;
+
+  var acceptableInputTypes = useMemo(function () {
+    return "".concat(fileTypes === null || fileTypes === void 0 ? void 0 : fileTypes.join('/*, '), "/*");
+  }, [fileTypes]);
+  return ___EmotionJSX(Box, _extends({
+    variant: "forms.input.wrapper"
+  }, fieldContainerProps), ___EmotionJSX(Label, _extends({}, fieldLabelProps, {
+    onClick: handleLabelClick,
+    ref: labelRef
+  })), ___EmotionJSX(PopoverMenu, {
+    isOpen: isMenuOpen,
+    onOpenChange: handleOpenMenuChange
+  }, children), ___EmotionJSX(Input, _extends({}, fieldControlProps, visuallyHiddenProps, {
+    accept: acceptableInputTypes,
+    "data-testid": "image-upload-input",
+    onChange: handleInputChange,
+    ref: inputRef,
+    type: "file",
+    value: ""
+  })), !isImageType && ___EmotionJSX(FieldHelperText, {
+    status: statuses.DEFAULT
+  }, fileName), helperText && ___EmotionJSX(FieldHelperText, {
+    status: status
+  }, helperText));
+});
+ImageUploadFieldBase.propTypes = {
+  fileName: PropTypes.string,
+  fileTypes: PropTypes.arrayOf(PropTypes.oneOf(['application', 'audio', 'example', 'application', 'image', 'model', 'text', 'video'])),
+  handleInputChange: PropTypes.func,
+  handleLabelClick: PropTypes.func,
+  handleOpenMenuChange: PropTypes.func,
+  helperText: PropTypes.node,
+  isImageType: PropTypes.bool,
+  isMenuOpen: PropTypes.bool,
+  status: PropTypes.oneOf(_Object$values(statuses))
+};
+ImageUploadFieldBase.displayName = 'ImageUploadFieldBase';
+export default ImageUploadFieldBase;

package/lib/components/ImageUploadField/index.js

@@ -0,0 +1 @@
+export { default } from './ImageUploadField';

package/lib/components/Input/Input.js

@@ -0,0 +1,59 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+import React, { forwardRef } from 'react';
+import { Input as ThemeUIInput } from 'theme-ui';
+import PropTypes from 'prop-types';
+import { useAriaLabelWarning } from '../../hooks';
+import isValidPositiveInt from '../../utils/devUtils/props/isValidPositiveInt';
+/**
+ * Base input component.
+ *
+ * Accepts relevant styling props from [styled-system](https://styled-system.com/table).
+ * Built on top of [Input from Theme-UI](https://theme-ui.com/components/input/).
+ *
+ * **Note**: It's recommended to use a more specific field component when possible.
+ */
+
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var Input = /*#__PURE__*/forwardRef(function (props, ref) {
+  var name = props.name,
+      placeholder = props.placeholder,
+      maxLength = props.maxLength,
+      others = _objectWithoutProperties(props, ["name", "placeholder", "maxLength"]);
+
+  var ariaLabel = props['aria-label'] || name;
+  useAriaLabelWarning('Input', ariaLabel || placeholder);
+
+  if (!ariaLabel && !placeholder) {
+    ariaLabel = 'Input';
+  }
+
+  return ___EmotionJSX(ThemeUIInput, _extends({
+    "aria-label": ariaLabel,
+    ref: ref,
+    name: name,
+    placeholder: placeholder,
+    maxLength: maxLength === 0 ? 'null' : maxLength
+  }, others));
+});
+Input.displayName = 'Input';
+Input.propTypes = {
+  /** Defines a string value that labels the current element. */
+  'aria-label': PropTypes.string,
+
+  /** Id of input. */
+  id: PropTypes.string,
+
+  /** Name of input. */
+  name: PropTypes.string,
+
+  /** Max length of input value */
+  maxLength: isValidPositiveInt,
+
+  /** Type of input. Accepts most [HTML input types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types) */
+  type: PropTypes.string,
+
+  /** Placeholder for the input */
+  placeholder: PropTypes.string
+};
+export default Input;

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

@@ -0,0 +1,31 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import React from 'react';
+import Input from '.';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Form/Base Components/Input',
+  component: Input,
+  argTypes: {
+    placeholder: {
+      defaultValue: 'This is a basic input'
+    },
+    type: {},
+    name: {},
+    id: {}
+  }
+};
+export var Default = function Default(args) {
+  return ___EmotionJSX(Input, args);
+};
+export var Password = function Password(args) {
+  return ___EmotionJSX(Input, _extends({
+    placeholder: "This is a password input",
+    type: "password"
+  }, args));
+};
+export var LargeInput = function LargeInput(args) {
+  return ___EmotionJSX(Input, _extends({
+    variant: "forms.input.large",
+    placeholder: "This is a large input"
+  }, args));
+};

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

@@ -0,0 +1,48 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import Input from '.';
+import axeTest from '../../utils/testUtils/testAxe';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var testId = 'test-input';
+var defaultProps = {
+  'data-testid': testId
+};
+
+var getComponent = function getComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return render(___EmotionJSX(Input, _extends({}, defaultProps, props)));
+}; // Need to be added to each test file to test accessibility using axe.
+
+
+axeTest(getComponent);
+test('default input', function () {
+  getComponent();
+  var input = screen.getByTestId(testId);
+  expect(input).toBeInstanceOf(HTMLInputElement);
+  expect(input).toBeInTheDocument();
+});
+test('input type as password', function () {
+  getComponent({
+    type: 'password'
+  });
+  var input = screen.getByTestId(testId);
+  expect(input).toHaveAttribute('type', 'password');
+});
+test('maxlength field with a set maxlength', function () {
+  getComponent({
+    maxLength: 3
+  });
+  var input = screen.getByTestId(testId);
+  userEvent.type(input, 'banana');
+  expect(input.value.length).toBe(3);
+});
+test('maxlength field set as a negative number or zero', function () {
+  getComponent({
+    maxLength: null
+  });
+  var input = screen.getByTestId(testId);
+  userEvent.type(input, 'banana');
+  expect(input.value.length).toBe(6);
+});

package/lib/components/Input/index.js

@@ -0,0 +1 @@
+export { default } from './Input';

package/lib/components/Label/Label.js

@@ -0,0 +1,86 @@
+import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+import _styled from "@emotion/styled/base";
+import { flexbox, layout } from 'styled-system';
+import React, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import { Label as ThemeUILabel } from 'theme-ui';
+import { usePropWarning, useStatusClasses } from '../../hooks';
+import { modes } from './constants';
+import Box from '../Box';
+import HelpHint from '../HelpHint';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+
+var ExtendedLabel = /*#__PURE__*/_styled(ThemeUILabel, process.env.NODE_ENV === "production" ? {
+  target: "e172msu10"
+} : {
+  target: "e172msu10",
+  label: "ExtendedLabel"
+})(layout, flexbox, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0xhYmVsL0xhYmVsLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVVzQiIsImZpbGUiOiIuLi8uLi8uLi9zcmMvY29tcG9uZW50cy9MYWJlbC9MYWJlbC5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IGZsZXhib3gsIGxheW91dCB9IGZyb20gJ3N0eWxlZC1zeXN0ZW0nO1xuaW1wb3J0IFJlYWN0LCB7IGZvcndhcmRSZWYgfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgUHJvcFR5cGVzIGZyb20gJ3Byb3AtdHlwZXMnO1xuaW1wb3J0IHsgTGFiZWwgYXMgVGhlbWVVSUxhYmVsIH0gZnJvbSAndGhlbWUtdWknO1xuaW1wb3J0IHsgdXNlUHJvcFdhcm5pbmcsIHVzZVN0YXR1c0NsYXNzZXMgfSBmcm9tICcuLi8uLi9ob29rcyc7XG5pbXBvcnQgeyBtb2RlcyB9IGZyb20gJy4vY29uc3RhbnRzJztcbmltcG9ydCBCb3ggZnJvbSAnLi4vQm94JztcbmltcG9ydCBIZWxwSGludCBmcm9tICcuLi9IZWxwSGludCc7XG5cbmNvbnN0IEV4dGVuZGVkTGFiZWwgPSBzdHlsZWQoVGhlbWVVSUxhYmVsKShsYXlvdXQsIGZsZXhib3gpO1xuXG5jb25zdCBkZWZhdWx0SW5kaWNhdG9yID0gKFxuICA8Qm94IHZhcmlhbnQ9XCJmb3Jtcy5sYWJlbC5pbmRpY2F0b3JcIj5cbiAgICAqXG4gIDwvQm94PlxuKTtcblxuLyoqXG4gKiBCYXNlIGxhYmVsIGZvciBhbiBpbnB1dC5cbiAqXG4gKiBBY2NlcHRzIG1vc3Qgb2YgdGhlIHN0eWxpbmcgcHJvcHMgZnJvbSBbc3R5bGVkLXN5c3RlbV0oaHR0cHM6Ly9zdHlsZWQtc3lzdGVtLmNvbS90YWJsZSkuXG4gKiBCdWlsdCBvbiB0b3Agb2YgdGhlIFtMYWJlbCBmcm9tIFRoZW1lLVVJXShodHRwczovL3RoZW1lLXVpLmNvbS9jb21wb25lbnRzL2xhYmVsKS5cbiAqXG4gKiAqKk5PVEUqKjogU3BlY2lhbGl6ZWQgZmllbGQgY29tcG9uZW50cyBjb250YWluIGJ1aWx0LWluIHN1cHBvcnQgZm9yIGxhYmVscy4gSXQnc1xuICogcmVjb21tZW5kZWQgdG8gdXNlIHRob3NlIGluc3RlYWQgb2YgYSBzdGFuZGFsb25lIGBMYWJlbGAuXG4gKi9cblxuY29uc3QgTGFiZWwgPSBmb3J3YXJkUmVmKChwcm9wcywgcmVmKSA9PiB7XG4gIGNvbnN0IHtcbiAgICBjaGlsZHJlbixcbiAgICBjbGFzc05hbWUsXG4gICAgaXNEaXNhYmxlZCxcbiAgICBpc1JlcXVpcmVkLFxuICAgIG1vZGUsXG4gICAgcmVxdWlyZWRJbmRpY2F0b3IsXG4gICAgaGludFRleHQsXG4gICAgaGVscEhpbnRQcm9wcyxcbiAgICAuLi5vdGhlcnNcbiAgfSA9IHByb3BzO1xuXG4gIHVzZVByb3BXYXJuaW5nKHByb3BzLCAnZGlzYWJsZWQnLCAnaXNEaXNhYmxlZCcpO1xuXG4gIGNvbnN0IHsgY2xhc3NOYW1lcyB9ID0gdXNlU3RhdHVzQ2xhc3NlcyhjbGFzc05hbWUsIHtcbiAgICBpc0Rpc2FibGVkLFxuICAgIGlzUmVxdWlyZWQsXG4gICAgaXNGbG9hdExhYmVsOiBtb2RlID09PSBtb2Rlcy5GTE9BVCxcbiAgICBpc0xlZnRMYWJlbDogbW9kZSA9PT0gbW9kZXMuTEVGVCxcbiAgfSk7XG5cbiAgcmV0dXJuIChcbiAgICA8RXh0ZW5kZWRMYWJlbFxuICAgICAgcmVmPXtyZWZ9XG4gICAgICBkaXNwbGF5PVwiZmxleFwiXG4gICAgICBjbGFzc05hbWU9e2NsYXNzTmFtZXN9XG4gICAgICB7Li4ub3RoZXJzfVxuICAgID5cbiAgICAgIHtjaGlsZHJlbn1cbiAgICAgIHtcbiAgICAgICAgaXNSZXF1aXJlZFxuICAgICAgICAmJiAocmVxdWlyZWRJbmRpY2F0b3IgfHwgZGVmYXVsdEluZGljYXRvcilcbiAgICAgIH1cbiAgICAgIHtcbiAgICAgICAgaGludFRleHRcbiAgICAgICAgJiYgPEhlbHBIaW50IHsuLi5oZWxwSGludFByb3BzfT57aGludFRleHR9PC9IZWxwSGludD5cbiAgICAgIH1cbiAgICA8L0V4dGVuZGVkTGFiZWw+XG4gICk7XG59KTtcblxuTGFiZWwucHJvcFR5cGVzID0ge1xuICAvKiogV2hldGhlciB0aGUgbGFiZWwgaGFzIGRpc2FibGVkIHN0eWxpbmcgYXBwbGllZC4gKi9cbiAgaXNEaXNhYmxlZDogUHJvcFR5cGVzLmJvb2wsXG4gIC8qKiBXaGV0aGVyIHRoZSBsYWJlbCBoYXMgcmVxdWlyZWQgaW5kaWNhdG9yIHN0eWxpbmcgYXBwbGllZC4gKi9cbiAgaXNSZXF1aXJlZDogUHJvcFR5cGVzLmJvb2wsXG4gIC8qKiBEZXRlcm1pbmVzIHRoZSBiZWhhdmlvciBwYXR0ZXJuIGZvciB0aGUgbGFiZWwuICovXG4gIG1vZGU6IFByb3BUeXBlcy5vbmVPZihPYmplY3QudmFsdWVzKG1vZGVzKSksXG4gIC8qKiBUaGUgdmlzdWFsIGNvbXBvbmVudCB1c2VkIHRvIG1hcmsgYW4gaW5wdXQgYXMgcmVxdWlyZWQgd2l0aGluIHRoZSBsYWJlbC4gKi9cbiAgcmVxdWlyZWRJbmRpY2F0b3I6IFByb3BUeXBlcy5ub2RlLFxuICAvKiogSWYgcHJlc2VudCB0aGlzIHByb3Agd2lsbCBjYXVzZSBhIGhlbHAgaGludCB0byByZW5kZXIgaW4gdGhlIGxhYmVsLiAqL1xuICBoaW50VGV4dDogUHJvcFR5cGVzLnN0cmluZyxcbiAgLyoqIFByb3BzIG9iamVjdCB0aGF0IGlzIHNwcmVhZCBkaXJlY3RseSBpbnRvIHRoZSBoZWxwaGludCBlbGVtZW50LiAqL1xuICBoZWxwSGludFByb3BzOiBQcm9wVHlwZXMuc2hhcGUoe30pLFxufTtcblxuTGFiZWwuZGVmYXVsdFByb3BzID0ge1xuICBtb2RlOiBtb2Rlcy5ERUZBVUxULFxufTtcblxuTGFiZWwuZGlzcGxheU5hbWUgPSAnTGFiZWwnO1xuZXhwb3J0IGRlZmF1bHQgTGFiZWw7XG4iXX0= */");
+
+var defaultIndicator = ___EmotionJSX(Box, {
+  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__*/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 = _objectWithoutProperties(props, ["children", "className", "isDisabled", "isRequired", "mode", "requiredIndicator", "hintText", "helpHintProps"]);
+
+  usePropWarning(props, 'disabled', 'isDisabled');
+
+  var _useStatusClasses = useStatusClasses(className, {
+    isDisabled: isDisabled,
+    isRequired: isRequired,
+    isFloatLabel: mode === modes.FLOAT,
+    isLeftLabel: mode === modes.LEFT
+  }),
+      classNames = _useStatusClasses.classNames;
+
+  return ___EmotionJSX(ExtendedLabel, _extends({
+    ref: ref,
+    display: "flex",
+    className: classNames
+  }, others), children, isRequired && (requiredIndicator || defaultIndicator), hintText && ___EmotionJSX(HelpHint, helpHintProps, hintText));
+});
+Label.propTypes = {
+  /** Whether the label has disabled styling applied. */
+  isDisabled: PropTypes.bool,
+
+  /** Whether the label has required indicator styling applied. */
+  isRequired: PropTypes.bool,
+
+  /** Determines the behavior pattern for the label. */
+  mode: PropTypes.oneOf(_Object$values(modes)),
+
+  /** The visual component used to mark an input as required within the label. */
+  requiredIndicator: PropTypes.node,
+
+  /** If present this prop will cause a help hint to render in the label. */
+  hintText: PropTypes.string,
+
+  /** Props object that is spread directly into the helphint element. */
+  helpHintProps: PropTypes.shape({})
+};
+Label.defaultProps = {
+  mode: modes.DEFAULT
+};
+Label.displayName = 'Label';
+export default Label;

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

@@ -0,0 +1,36 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import React from 'react';
+import Label from '.';
+import { modes } from './constants';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Form/Base Components/Label',
+  component: Label,
+  argTypes: {
+    mode: {
+      control: {
+        type: 'select',
+        options: modes
+      },
+      defaultValue: modes.DEFAULT
+    },
+    isDisabled: {},
+    isRequired: {},
+    requiredIndicator: {
+      control: 'none'
+    }
+  }
+};
+export var Default = function Default(args) {
+  return ___EmotionJSX(Label, args, "This is a label");
+};
+export var Float = function Float() {
+  return ___EmotionJSX(Label, {
+    mode: "float"
+  }, "This is a float label");
+};
+export var WithHelpHint = function WithHelpHint(args) {
+  return ___EmotionJSX(Label, _extends({
+    hintText: "Example Hint"
+  }, args), "This is a label");
+};

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

@@ -0,0 +1,68 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import Label from '.';
+import Input from '../Input';
+import axeTest from '../../utils/testUtils/testAxe';
+import { jsx as ___EmotionJSX } from "@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 render(___EmotionJSX(Label, _extends({}, defaultProps, props)));
+}; // Need to be added to each test file to test accessibility using axe.
+
+
+axeTest(getComponent);
+test('default label', function () {
+  getComponent();
+  var label = screen.getByTestId(testId);
+  expect(label).toBeInstanceOf(HTMLLabelElement);
+  expect(label).toBeInTheDocument();
+});
+test('required label', function () {
+  getComponent({
+    isRequired: true
+  });
+  var label = screen.getByTestId(testId);
+  expect(label).toHaveTextContent('*');
+});
+test('required label with custom indicator', function () {
+  var requiredIndicator = '>Required<';
+  getComponent({
+    isRequired: true,
+    requiredIndicator: requiredIndicator
+  });
+  var label = 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 = ___EmotionJSX(React.Fragment, null, labelText, ___EmotionJSX(Input, {
+    id: inputId
+  }));
+
+  getComponent({
+    children: children,
+    htmlFor: inputId
+  });
+  var label = screen.getByLabelText(labelText);
+  expect(label).toBeInTheDocument();
+});
+test('label with helpHint', function () {
+  var hintText = 'Hint Text';
+  getComponent({
+    hintText: hintText
+  });
+  var button = screen.getByRole('button');
+  expect(button).toBeInTheDocument();
+  fireEvent.mouseMove(button);
+  fireEvent.mouseEnter(button);
+  expect(screen.getByText(hintText)).toBeInTheDocument();
+});

package/lib/components/Label/constants.js

@@ -0,0 +1,5 @@
+export var modes = {
+  DEFAULT: 'default',
+  FLOAT: 'float',
+  LEFT: 'left'
+};

package/lib/components/Label/index.js

@@ -0,0 +1 @@
+export { default } from './Label';

package/lib/components/Link/Link.js

@@ -0,0 +1,70 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+import React, { forwardRef, useRef, useImperativeHandle } from 'react';
+import PropTypes from 'prop-types';
+import { Link as ThemeUILink } from 'theme-ui';
+import { useLink } from '@react-aria/link';
+import { useFocusRing } from '@react-aria/focus';
+import { useHover } from '@react-aria/interactions';
+import { mergeProps } from '@react-aria/utils';
+import { usePropWarning, useStatusClasses } from '../../hooks';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var Link = /*#__PURE__*/forwardRef(function (props, ref) {
+  var className = props.className,
+      isDisabled = props.isDisabled,
+      others = _objectWithoutProperties(props, ["className", "isDisabled"]);
+
+  var linkRef = useRef();
+  usePropWarning(props, 'disabled', 'isDisabled');
+  /* istanbul ignore next */
+
+  useImperativeHandle(ref, function () {
+    return linkRef.current;
+  });
+
+  var _useFocusRing = useFocusRing(),
+      isFocusVisible = _useFocusRing.isFocusVisible,
+      focusProps = _useFocusRing.focusProps;
+
+  var _useLink = useLink(props, linkRef),
+      linkProps = _useLink.linkProps;
+
+  var _useHover = useHover(props),
+      hoverProps = _useHover.hoverProps,
+      isHovered = _useHover.isHovered;
+
+  var _useStatusClasses = useStatusClasses(className, {
+    isDisabled: isDisabled,
+    isFocused: isFocusVisible,
+    isHovered: isHovered
+  }),
+      classNames = _useStatusClasses.classNames;
+
+  return ___EmotionJSX(ThemeUILink, _extends({
+    className: classNames,
+    ref: linkRef,
+    role: "link"
+  }, others, mergeProps(hoverProps, focusProps, linkProps)));
+});
+Link.propTypes = {
+  /** Whether the link is disabled. */
+  isDisabled: PropTypes.bool,
+
+  /**  The HTML element used to render the link, e.g. 'a', or 'span'. */
+  as: PropTypes.string,
+
+  /**  Handler that is called when the press is released over the target. */
+  onPress: PropTypes.func,
+
+  /**  Specifies the location of the URL */
+  href: PropTypes.string,
+
+  /**  Specifies the window where the linked page is loaded */
+  target: PropTypes.string
+};
+Link.defaultProps = {
+  isDisabled: false,
+  as: 'a'
+};
+Link.displayName = 'Link';
+export default Link;

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

@@ -0,0 +1,36 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import React from 'react';
+import Link from '.';
+import { htmlElements } from '../../utils/devUtils/constants/htmlElements';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Link',
+  component: Link,
+  argTypes: {
+    href: {
+      control: {
+        type: 'text'
+      },
+      defaultValue: 'https://uilibrary.ping-eng.com/'
+    },
+    isDisabled: {},
+    as: {
+      control: {
+        type: 'none',
+        options: htmlElements
+      },
+      defaultValue: 'a'
+    },
+    target: {
+      control: {
+        type: 'none'
+      },
+      defaultValue: '_blank'
+    }
+  }
+};
+export var Default = function Default(_ref) {
+  var args = _extends({}, _ref);
+
+  return ___EmotionJSX("div", null, ___EmotionJSX(Link, args, "A link"), " to your favorite website.");
+};

package/lib/components/Link/Link.test.js

@@ -0,0 +1,55 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import React from 'react';
+import userEvent from '@testing-library/user-event';
+import axeTest from '../../utils/testUtils/testAxe';
+import { render, screen } from '../../utils/testUtils/testWrapper';
+import Link from '.';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var testId = 'test-link';
+var defaultProps = {
+  'data-testid': testId,
+  children: 'This is a link'
+};
+
+var getComponent = function getComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return render(___EmotionJSX(Link, _extends({}, defaultProps, props)));
+}; // Need to be added to each test file to test accessibility using axe.
+
+
+axeTest(getComponent);
+test('a link is rendered', function () {
+  getComponent();
+  var link = screen.getByTestId(testId);
+  expect(link).toBeInstanceOf(HTMLAnchorElement);
+  expect(link).toBeInTheDocument();
+});
+test('link shows hover status', function () {
+  // Needs href to have a tabindex
+  getComponent();
+  var link = screen.getByTestId(testId);
+  expect(link).not.toHaveClass('is-hovered');
+  userEvent.hover(link);
+  expect(link).toHaveClass('is-hovered');
+  userEvent.unhover(link);
+});
+test('link shows focus status', function () {
+  // Needs href to have a tabindex
+  getComponent({
+    href: 'blah'
+  });
+  var link = screen.getByTestId(testId);
+  expect(link).not.toHaveFocus();
+  userEvent.tab();
+  expect(link).toHaveFocus();
+  expect(link).toHaveClass('is-focused');
+});
+test('link shows disabled status', function () {
+  // Needs href to have a tabindex
+  getComponent({
+    href: 'blah',
+    isDisabled: true
+  });
+  var link = screen.getByTestId(testId);
+  expect(link).toHaveClass('is-disabled');
+});

package/lib/components/Link/index.js

@@ -0,0 +1 @@
+export { default } from './Link';