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

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

@@ -0,0 +1,211 @@
+"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 _trim = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/trim"));
+
+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 _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 _context5; (0, _forEach["default"])(_context5 = ownKeys(Object(source), true)).call(_context5, function (key) { (0, _defineProperty3["default"])(target, key, source[key]); }); } else if (_getOwnPropertyDescriptors["default"]) { (0, _defineProperties["default"])(target, (0, _getOwnPropertyDescriptors["default"])(source)); } else { var _context6; (0, _forEach["default"])(_context6 = ownKeys(Object(source))).call(_context6, function (key) { (0, _defineProperty2["default"])(target, key, (0, _getOwnPropertyDescriptor["default"])(source, key)); }); } } return target; }
+
+var testId = 'test-code-sample';
+
+var originalClipboard = _objectSpread({}, global.navigator.clipboard);
+
+var originalExecCommand = global.document.execCommand;
+var defaultProps = {
+  'data-testid': testId
+};
+var textValue = "\nexport const Default = args => (\n  <>\n    <Text sx={{ fontWeight: 2 }}>JSON</Text>\n    <CodeView {...args} />\n  </>\n);\n";
+
+var getComponent = function getComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return (0, _testWrapper.render)((0, _react2.jsx)(_.CodeView, (0, _extends2["default"])({}, defaultProps, props), 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 () {
+  getComponent();
+
+  var container = _testWrapper.screen.getByTestId(testId);
+
+  expect(container).toBeInstanceOf(HTMLDivElement);
+  expect(container).toBeInTheDocument();
+});
+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 button are focused via keyboard', function () {
+  getComponent();
+
+  var container = _testWrapper.screen.getByTestId(testId);
+
+  expect(container).not.toHaveFocus();
+
+  _userEvent["default"].tab();
+
+  expect(container).toHaveFocus();
+
+  var copyBtn = _testWrapper.screen.getByLabelText('copy');
+
+  expect(copyBtn).not.toHaveFocus();
+
+  _userEvent["default"].tab();
+
+  expect(copyBtn).toHaveFocus();
+  expect(copyBtn).toHaveClass('is-focused');
+});
+test('doesn\'t render copy button and tooltip with prop hasNoCopyButton', function () {
+  getComponent({
+    hasNoCopyButton: true
+  });
+
+  var container = _testWrapper.screen.getByTestId(testId);
+
+  _testWrapper.fireEvent.mouseMove(container);
+
+  _testWrapper.fireEvent.mouseEnter(container);
+
+  expect(_testWrapper.screen.queryByRole('tooltip')).not.toBeInTheDocument();
+  expect(_testWrapper.screen.queryByLabelText('copy')).not.toBeInTheDocument();
+});
+test('renders line numbers with prop hasLineNumbers', function () {
+  var linesLength = ((0, _trim["default"])(textValue).call(textValue).split('\n').length - 1).toString();
+  getComponent();
+  expect(_testWrapper.screen.queryByText('1')).not.toBeInTheDocument();
+  expect(_testWrapper.screen.queryByText(linesLength)).not.toBeInTheDocument();
+  getComponent({
+    hasLineNumbers: true
+  });
+  expect(_testWrapper.screen.queryByText('1')).toBeInTheDocument();
+  expect(_testWrapper.screen.queryByText(linesLength)).toBeInTheDocument();
+});
+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 copy button 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.getByLabelText('copy');
+          _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('after button click, the tooltip renders with the text "Copied!"', /*#__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(_testWrapper.screen.queryByRole('tooltip')).toBeInTheDocument();
+          expect(_testWrapper.screen.queryByRole('tooltip')).toHaveTextContent('Copied!');
+
+        case 6:
+        case "end":
+          return _context4.stop();
+      }
+    }
+  }, _callee4);
+})));

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

package/lib/cjs/components/ColorField/ColorField.js

@@ -0,0 +1,219 @@
+"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 _values = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/values"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+
+var _defineProperty3 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _reactColor = require("react-color");
+
+var _focus = require("@react-aria/focus");
+
+var _visuallyHidden = require("@react-aria/visually-hidden");
+
+var _color = require("@react-aria/color");
+
+var _color2 = require("@react-stately/color");
+
+var _overlays = require("@react-stately/overlays");
+
+var _overlays2 = require("@react-aria/overlays");
+
+var _index = require("../../index");
+
+var _useField2 = _interopRequireDefault(require("../../hooks/useField"));
+
+var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
+
+var _PopoverContainer = _interopRequireDefault(require("../PopoverContainer"));
+
+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 _context5; (0, _forEach["default"])(_context5 = ownKeys(Object(source), true)).call(_context5, function (key) { (0, _defineProperty3["default"])(target, key, source[key]); }); } else if (_getOwnPropertyDescriptors["default"]) { (0, _defineProperties["default"])(target, (0, _getOwnPropertyDescriptors["default"])(source)); } else { var _context6; (0, _forEach["default"])(_context6 = ownKeys(Object(source))).call(_context6, function (key) { (0, _defineProperty2["default"])(target, key, (0, _getOwnPropertyDescriptor["default"])(source, key)); }); } } return target; }
+
+/**
+ * The Color Field component allows the user to pick a color and displays the chosen color.
+ *
+ * Utilizes [useColorField](https://react-spectrum.adobe.com/react-aria/useColorField.html) from React Aria and
+ * [useColorFieldState](https://react-spectrum.adobe.com/react-stately/useColorFieldState.html) from React Stately.
+ *
+ * Using [React Color](https://casesandberg.github.io/react-color/) as a color picker.
+ */
+var ColorField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var _context;
+
+  var align = props.align,
+      buttonProps = props.buttonProps,
+      controlProps = props.controlProps,
+      direction = props.direction,
+      helperText = props.helperText,
+      label = props.label,
+      labelProps = props.labelProps,
+      imperativeOnChange = props.onChange,
+      status = props.status;
+  var colorRef = (0, _react.useRef)();
+  /* istanbul ignore next */
+
+  (0, _react.useImperativeHandle)(ref, function () {
+    return colorRef.current;
+  });
+
+  var triggerRef = _react["default"].useRef();
+
+  var overlayRef = _react["default"].useRef();
+
+  var state = (0, _color2.useColorFieldState)(props);
+  var popoverState = (0, _overlays.useOverlayTriggerState)({});
+
+  var _useOverlayTrigger = (0, _overlays2.useOverlayTrigger)({
+    type: 'dialog'
+  }, popoverState, triggerRef),
+      triggerProps = _useOverlayTrigger.triggerProps,
+      overlayProps = _useOverlayTrigger.overlayProps;
+
+  var _useColorField = (0, _color.useColorField)(props, state, colorRef),
+      raLabelProps = _useColorField.labelProps,
+      raInputProps = _useColorField.inputProps;
+
+  var _useVisuallyHidden = (0, _visuallyHidden.useVisuallyHidden)(),
+      visuallyHiddenProps = _useVisuallyHidden.visuallyHiddenProps;
+
+  var _useField = (0, _useField2["default"])(_objectSpread(_objectSpread({}, props), {}, {
+    labelProps: _objectSpread(_objectSpread({}, labelProps), raLabelProps),
+    controlProps: _objectSpread(_objectSpread({}, controlProps), raInputProps)
+  })),
+      fieldContainerProps = _useField.fieldContainerProps,
+      fieldControlProps = _useField.fieldControlProps,
+      fieldLabelProps = _useField.fieldLabelProps;
+
+  var _useOverlayPosition = (0, _overlays2.useOverlayPosition)({
+    targetRef: triggerRef,
+    overlayRef: overlayRef,
+    placement: (0, _concat["default"])(_context = "".concat(direction, " ")).call(_context, align),
+    offset: 15,
+    isOpen: popoverState.isOpen,
+    onClose: popoverState.close,
+    shouldUpdatePosition: true
+  }),
+      positionProps = _useOverlayPosition.overlayProps;
+
+  var handleButtonPress = (0, _react.useCallback)(function () {
+    return popoverState.open();
+  }, [triggerRef]);
+  var handleColorChange = (0, _react.useCallback)(function (color, event) {
+    if (imperativeOnChange) {
+      imperativeOnChange(color, event);
+    }
+  }, [imperativeOnChange]);
+  var getRgbaFromState = (0, _react.useCallback)(function (_ref) {
+    var _context2, _context3, _context4;
+
+    var colorValue = _ref.colorValue;
+    return (0, _concat["default"])(_context2 = (0, _concat["default"])(_context3 = (0, _concat["default"])(_context4 = "rgba(".concat(colorValue === null || colorValue === void 0 ? void 0 : colorValue.red, ", ")).call(_context4, colorValue === null || colorValue === void 0 ? void 0 : colorValue.green, ", ")).call(_context3, colorValue === null || colorValue === void 0 ? void 0 : colorValue.blue, ", ")).call(_context2, colorValue === null || colorValue === void 0 ? void 0 : colorValue.alpha, ")");
+  }, []);
+  return (0, _react2.jsx)(_index.Box, fieldContainerProps, label && (0, _react2.jsx)(_index.Label, fieldLabelProps), (0, _react2.jsx)(_index.Button, (0, _extends2["default"])({
+    "aria-label": "Select color",
+    bg: getRgbaFromState(state),
+    onPress: handleButtonPress,
+    ref: triggerRef,
+    variant: "colorField"
+  }, triggerProps, buttonProps)), (0, _react2.jsx)(_index.Input, (0, _extends2["default"])({}, visuallyHiddenProps, fieldControlProps, {
+    ref: colorRef
+  })), helperText && (0, _react2.jsx)(_index.FieldHelperText, {
+    status: status
+  }, helperText), (0, _react2.jsx)(_PopoverContainer["default"], (0, _extends2["default"])({}, overlayProps, positionProps, {
+    ref: overlayRef,
+    isOpen: popoverState.isOpen,
+    onClose: popoverState.close,
+    hasNoArrow: true,
+    isDismissable: true
+  }), (0, _react2.jsx)(_focus.FocusScope, {
+    restoreFocus: true,
+    contain: true,
+    autoFocus: true
+  }, (0, _react2.jsx)(_reactColor.ChromePicker, {
+    color: getRgbaFromState(state),
+    onChange: handleColorChange
+  }))));
+});
+ColorField.propTypes = {
+  /** Alignment of the popover menu relative to the trigger. */
+  align: _propTypes["default"].oneOf(['start', 'end', 'middle']),
+
+  /** Where the popover menu opens relative to its trigger. */
+  direction: _propTypes["default"].oneOf(['top', 'right', 'bottom', 'left']),
+
+  /** Text to display after the Color Field button. Useful for errors or other info. */
+  helperText: _propTypes["default"].node,
+
+  /** The content to display as the label. */
+  label: _propTypes["default"].node,
+
+  /** Pass a function to call every time the color is changed. [React Color onChange](https://casesandberg.github.io/react-color/#api-onChange)
+   *
+   * (color, event) => void;
+   */
+  onChange: _propTypes["default"].func,
+
+  /** Determines the helper text styling. */
+  status: _propTypes["default"].oneOf((0, _values["default"])(_statuses["default"])),
+
+  /** Color controls what color is active on the color picker. */
+  value: _propTypes["default"].string,
+
+  /** Props object that is spread into the Button element. */
+  buttonProps: _propTypes["default"].shape({}),
+
+  /** Props object that is spread directly into the root (top-level) Box component. */
+  containerProps: _propTypes["default"].shape({}),
+
+  /** Props object that is spread into the input element. */
+  controlProps: _propTypes["default"].shape({}),
+
+  /** Props object that is spread into the label element. */
+  labelProps: _propTypes["default"].shape({})
+};
+ColorField.defaultProps = {
+  align: 'middle',
+  direction: 'bottom'
+};
+ColorField.displayName = 'ColorField';
+var _default = ColorField;
+exports["default"] = _default;

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

@@ -0,0 +1,124 @@
+"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["default"] = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _index = require("../../index");
+
+var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
+
+var _react2 = require("@emotion/react");
+
+var _default = {
+  title: 'Form/ColorField',
+  component: _index.ColorField,
+  parameters: {
+    docs: {
+      source: {
+        type: 'code'
+      }
+    }
+  },
+  argTypes: {
+    value: {
+      control: {
+        type: 'text'
+      }
+    },
+    label: {
+      control: {
+        type: 'text'
+      },
+      defaultValue: 'Color Field'
+    },
+    helperText: {
+      control: {
+        type: 'text'
+      }
+    },
+    status: {
+      control: {
+        type: 'select',
+        options: _statuses["default"]
+      },
+      defaultValue: _statuses["default"].DEFAULT
+    },
+    buttonProps: {
+      control: {
+        type: 'none'
+      },
+      defaultValue: {
+        sx: {
+          width: 40,
+          height: 30
+        }
+      }
+    },
+    containerProps: {
+      control: {
+        type: 'none'
+      },
+      defaultValue: {
+        sx: {
+          marginLeft: 50
+        }
+      }
+    },
+    controlProps: {
+      control: {
+        type: 'none'
+      }
+    },
+    labelProps: {
+      control: {
+        type: 'none'
+      }
+    }
+  }
+};
+exports["default"] = _default;
+
+var Default = function Default(args) {
+  var _useState = (0, _react.useState)('rgba(127, 0, 127, 1)'),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      color = _useState2[0],
+      setColor = _useState2[1];
+
+  var handleChange = (0, _react.useCallback)(function (_ref) {
+    var _context, _context2, _context3;
+
+    var rgb = _ref.rgb;
+    var r = rgb.r,
+        b = rgb.b,
+        g = rgb.g,
+        a = rgb.a;
+    setColor((0, _concat["default"])(_context = (0, _concat["default"])(_context2 = (0, _concat["default"])(_context3 = "rgba(".concat(r, ", ")).call(_context3, g, ", ")).call(_context2, b, ", ")).call(_context, a, ")"));
+  }, []);
+  return (// Application must be wrapped in an OverlayProvider so that it can be hidden from screen
+    // readers when an overlay opens.
+    (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.ColorField, (0, _extends2["default"])({
+      value: color
+    }, args, {
+      onChange: handleChange
+    })))
+  );
+};
+
+exports.Default = Default;

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

@@ -0,0 +1,71 @@
+"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 _ColorField = _interopRequireDefault(require("./ColorField"));
+
+var _react2 = require("@emotion/react");
+
+var testId = 'test-colorField';
+var testLabel = 'test-colorField-label';
+var hexLabel = 'hex';
+var testColor1 = '#ffffff';
+var testColor2 = '#fffff1';
+var defaultProps = {
+  'data-testid': testId,
+  label: testLabel,
+  helperText: 'test-helper-text'
+};
+
+var getComponent = function getComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return (0, _testWrapper.render)((0, _react2.jsx)(_ColorField["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 ColorField component', function () {
+  getComponent();
+
+  var container = _testWrapper.screen.getByLabelText(testLabel);
+
+  expect(container).toBeInTheDocument();
+});
+test('button will have provided color background', function () {
+  getComponent({
+    value: testColor1
+  });
+
+  var button = _testWrapper.screen.getByRole('button');
+
+  expect(button).toHaveStyle("background-color: ".concat(testColor1));
+});
+test('will call onChange with arguments if provided', function () {
+  var testOnChange = jest.fn();
+  getComponent({
+    onChange: testOnChange,
+    value: testColor1
+  });
+
+  var button = _testWrapper.screen.getByRole('button');
+
+  _userEvent["default"].click(button);
+
+  var hexInput = _testWrapper.screen.getByLabelText(hexLabel);
+
+  _userEvent["default"].clear(hexInput);
+
+  _userEvent["default"].type(hexInput, testColor2);
+
+  expect(testOnChange).toHaveBeenCalled();
+});

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