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

package/lib/components/RadioGroupField/RadioGroupField.js

@@ -0,0 +1,145 @@
+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 _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); 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 _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+import React, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import { useRadioGroup } from '@react-aria/radio';
+import { useRadioGroupState } from '@react-stately/radio';
+import statuses from '../../utils/devUtils/constants/statuses';
+import Box from '../Box';
+import Label from '../Label';
+import { RadioContext } from '../RadioField';
+import FieldHelperText from '../FieldHelperText';
+import { useStatusClasses, usePropWarning } from '../../hooks';
+import ORIENTATION from '../../utils/devUtils/constants/orientation';
+/**
+ * Radio group component for a single-choice list of options.
+ *
+ * Utilizes [useRadioGroup](https://react-spectrum.adobe.com/react-aria/useRadioGroup.html) from
+ * React Aria and
+ * [useRadioGroupState](https://react-spectrum.adobe.com/react-stately/useRadioGroupState.html)
+ * from React Stately.
+ */
+
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var RadioGroupField = /*#__PURE__*/forwardRef(function (props, ref) {
+  var children = props.children,
+      className = props.className,
+      helperText = props.helperText,
+      isDisabled = props.isDisabled,
+      isRequired = props.isRequired,
+      hintText = props.hintText,
+      label = props.label,
+      orientation = props.orientation,
+      status = props.status;
+  var state = useRadioGroupState(props);
+
+  var _useRadioGroup = useRadioGroup(props, state),
+      radioGroupProps = _useRadioGroup.radioGroupProps,
+      labelProps = _useRadioGroup.labelProps;
+
+  var _useStatusClasses = useStatusClasses(className, {
+    'is-horizontal': orientation === ORIENTATION.HORIZONTAL
+  }),
+      classNames = _useStatusClasses.classNames;
+
+  usePropWarning(props, 'disabled', 'isDisabled');
+  return ___EmotionJSX(Box, _extends({
+    ref: ref,
+    className: classNames
+  }, radioGroupProps), ___EmotionJSX(Label, _extends({
+    isDisabled: isDisabled,
+    hintText: hintText,
+    isRequired: isRequired,
+    variant: "forms.label.radioGroup"
+  }, labelProps), label), ___EmotionJSX(Box, {
+    variant: "forms.radioGroupWrapper",
+    isRow: orientation === ORIENTATION.HORIZONTAL
+  }, ___EmotionJSX(RadioContext.Provider, {
+    value: _objectSpread({
+      isDisabled: isDisabled
+    }, state)
+  }, children)), helperText && ___EmotionJSX(FieldHelperText, {
+    status: status,
+    sx: {
+      pt: 'xs'
+    }
+  }, helperText));
+});
+RadioGroupField.propTypes = {
+  /** The name of the RadioGroupField, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name_and_radio_buttons). */
+  name: PropTypes.string,
+
+  /** The current value (controlled). */
+  value: PropTypes.string,
+
+  /** The default value (uncontrolled). */
+  defaultValue: PropTypes.string,
+
+  /** Text to display after the radio group label. Useful for errors or other info. */
+  helperText: PropTypes.node,
+
+  /** If present this prop will cause a help hint to render in the label of the field. */
+  hintText: PropTypes.string,
+
+  /** Determines the arrangement of the radios. */
+  orientation: PropTypes.oneOf(['horizontal', 'vertical']),
+
+  /** Determines the helper text styling. */
+  status: PropTypes.oneOf(_Object$values(statuses)),
+
+  /**
+   * Handler that is called when the value changes.
+   *
+   * `(newValue) => void`
+   */
+  onChange: PropTypes.func,
+
+  /** Whether the radio group is disabled. */
+  isDisabled: PropTypes.bool,
+
+  /** Whether user input is required on the input before form submission. */
+  isRequired: PropTypes.bool,
+
+  /**
+   * The content to display as the label. If not set, It is recommended to set an aria-label or
+   * aria-labelledby attribute for accessibility.
+  */
+  label: PropTypes.node,
+
+  /** The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). */
+  id: PropTypes.string,
+
+  /** Defines a string value that labels the current element. */
+  'aria-label': PropTypes.string,
+
+  /** Identifies the element (or elements) that labels the current element. */
+  'aria-labelledby': PropTypes.string,
+
+  /** Identifies the element (or elements) that describes the object. */
+  'aria-describedby': PropTypes.string,
+
+  /**
+   * Identifies the element (or elements) that provide a detailed, extended description for the
+   * object.
+  */
+  'aria-details': PropTypes.string,
+
+  /** Identifies the element that provides an error message for the object. */
+  'aria-errormessage': PropTypes.string
+};
+RadioGroupField.displayName = 'RadioGroupField';
+export default RadioGroupField;

package/lib/components/RadioGroupField/RadioGroupField.stories.js

@@ -0,0 +1,171 @@
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import React, { useState } from 'react';
+import RadioGroupField from '.';
+import RadioField from '../RadioField';
+import statuses from '../../utils/devUtils/constants/statuses';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Form/RadioGroupField',
+  component: RadioGroupField,
+  argTypes: {
+    label: {
+      control: {
+        type: 'text'
+      },
+      defaultValue: 'Pick one'
+    },
+    helperText: {
+      control: {
+        type: 'text'
+      }
+    },
+    hintText: {
+      control: {
+        type: 'text'
+      }
+    },
+    status: {
+      control: {
+        type: 'select',
+        options: statuses
+      },
+      defaultValue: statuses.DEFAULT
+    },
+    defaultValue: {
+      defaultValue: 'A'
+    },
+    orientation: {},
+    isDisabled: {},
+    isRequired: {},
+    name: {},
+    id: {},
+    'aria-label': {
+      control: {
+        type: 'text'
+      }
+    },
+    'aria-labelledby': {
+      control: {
+        type: 'text'
+      }
+    },
+    'aria-describedby': {
+      control: {
+        type: 'text'
+      }
+    },
+    'aria-details': {
+      control: {
+        type: 'text'
+      }
+    },
+    'aria-errormessage': {
+      control: {
+        type: 'text'
+      }
+    },
+    value: {
+      control: {
+        type: 'none'
+      }
+    }
+  }
+};
+export var Default = function Default(args) {
+  return ___EmotionJSX(RadioGroupField, args, ___EmotionJSX(RadioField, {
+    value: "A",
+    label: "A"
+  }), ___EmotionJSX(RadioField, {
+    value: "B",
+    label: "B"
+  }), ___EmotionJSX(RadioField, {
+    value: "C",
+    label: "C"
+  }));
+};
+export var Controlled = function Controlled() {
+  var _useState = useState('A'),
+      _useState2 = _slicedToArray(_useState, 2),
+      value = _useState2[0],
+      setValue = _useState2[1];
+
+  return ___EmotionJSX(RadioGroupField, {
+    label: "Pick one",
+    value: value,
+    onChange: function onChange(newValue) {
+      return setValue(newValue);
+    }
+  }, ___EmotionJSX(RadioField, {
+    value: "A",
+    label: "A"
+  }), ___EmotionJSX(RadioField, {
+    value: "B",
+    label: "B"
+  }), ___EmotionJSX(RadioField, {
+    value: "C",
+    label: "C"
+  }));
+};
+export var Required = function Required() {
+  return ___EmotionJSX(RadioGroupField, {
+    label: "Pick one",
+    isRequired: true
+  }, ___EmotionJSX(RadioField, {
+    value: "A",
+    label: "A"
+  }), ___EmotionJSX(RadioField, {
+    value: "B",
+    label: "B"
+  }), ___EmotionJSX(RadioField, {
+    value: "C",
+    label: "C"
+  }));
+};
+export var CheckedContent = function CheckedContent() {
+  return ___EmotionJSX(RadioGroupField, {
+    label: "Pick one"
+  }, ___EmotionJSX(RadioField, {
+    value: "A",
+    label: "A",
+    checkedContent: "You chose A..."
+  }), ___EmotionJSX(RadioField, {
+    value: "B",
+    label: "B",
+    checkedContent: "You chose B..."
+  }), ___EmotionJSX(RadioField, {
+    value: "C",
+    label: "C",
+    checkedContent: "You chose C..."
+  }));
+};
+export var HelperText = function HelperText() {
+  return ___EmotionJSX(RadioGroupField, {
+    label: "Pick one",
+    helperText: "Here is some helpful text...",
+    status: "error"
+  }, ___EmotionJSX(RadioField, {
+    value: "A",
+    label: "A"
+  }), ___EmotionJSX(RadioField, {
+    value: "B",
+    label: "B"
+  }), ___EmotionJSX(RadioField, {
+    value: "C",
+    label: "C"
+  }));
+};
+export var HorizontalOrientation = function HorizontalOrientation() {
+  return ___EmotionJSX(RadioGroupField, {
+    label: "Pick one",
+    orientation: "horizontal"
+  }, ___EmotionJSX(RadioField, {
+    value: "A",
+    label: "A"
+  }), ___EmotionJSX(RadioField, {
+    value: "B",
+    label: "B"
+  }), ___EmotionJSX(RadioField, {
+    value: "C",
+    label: "C"
+  }));
+};

package/lib/components/RadioGroupField/RadioGroupField.test.js

@@ -0,0 +1,159 @@
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
+import _asyncToGenerator from "@babel/runtime-corejs3/helpers/esm/asyncToGenerator";
+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 statuses from '../../utils/devUtils/constants/statuses';
+import RadioGroupField from '.';
+import RadioField from '../RadioField';
+import ORIENTATION from '../../utils/devUtils/constants/orientation';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var testId = 'test-radio-group';
+var testLabel = 'Test Label';
+var testValues = ['dogs', 'cats', 'dragons'];
+var defaultProps = {
+  'data-testid': testId,
+  label: testLabel
+};
+
+var getComponent = function getComponent() {
+  var groupProps = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var radioProps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  return render(___EmotionJSX(RadioGroupField, _extends({}, defaultProps, groupProps), ___EmotionJSX(RadioField, _extends({
+    value: testValues[0],
+    label: testValues[0]
+  }, radioProps[0])), ___EmotionJSX(RadioField, _extends({
+    value: testValues[1],
+    label: testValues[1]
+  }, radioProps[1])), ___EmotionJSX(RadioField, _extends({
+    value: testValues[2],
+    label: testValues[2]
+  }, radioProps[2]))));
+}; // Need to be added to each test file to test accessibility using axe.
+
+
+axeTest(getComponent);
+test('default radio group', function () {
+  getComponent();
+  var group = screen.getByLabelText(testLabel);
+  var label = screen.getByText(testLabel);
+  expect(group).toBeInstanceOf(HTMLDivElement);
+  expect(label).toBeInstanceOf(HTMLLabelElement);
+  expect(group).toBeInTheDocument();
+  expect(label).toBeInTheDocument();
+  expect(group).toHaveAttribute('aria-orientation', ORIENTATION.VERTICAL);
+});
+test('radio group onChange', function () {
+  var onChange = jest.fn();
+  getComponent({
+    onChange: onChange
+  });
+  var radios = screen.getAllByRole('radio');
+  expect(onChange).not.toHaveBeenCalled();
+  userEvent.click(radios[0]);
+  expect(onChange).toHaveBeenNthCalledWith(1, testValues[0]);
+});
+test('radio group only allows one checked option', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+  var radioA, radioB, labelA, labelB;
+  return _regeneratorRuntime.wrap(function _callee$(_context) {
+    while (1) {
+      switch (_context.prev = _context.next) {
+        case 0:
+          getComponent();
+          radioA = screen.getByLabelText(testValues[0]);
+          radioB = screen.getByLabelText(testValues[1]);
+          labelA = screen.getByText(testValues[0]);
+          labelB = screen.getByText(testValues[1]);
+          userEvent.click(radioA);
+          expect(radioA).toBeChecked();
+          expect(labelA).toHaveClass('is-checked');
+          expect(radioB).not.toBeChecked();
+          expect(labelB).not.toHaveClass('is-checked');
+          userEvent.click(radioB);
+          expect(radioA).not.toBeChecked();
+          expect(labelA).not.toHaveClass('is-checked');
+          expect(radioB).toBeChecked();
+          expect(labelB).toHaveClass('is-checked');
+          expect(screen.queryAllByRole('radio', {
+            checked: true
+          }).length).toBe(1);
+
+        case 16:
+        case "end":
+          return _context.stop();
+      }
+    }
+  }, _callee);
+})));
+test('value for controlled radio group', function () {
+  getComponent({
+    value: testValues[0]
+  });
+  var radios = screen.getAllByRole('radio');
+  expect(radios[0]).toBeChecked(); // Ensure it is controlled.
+
+  userEvent.click(radios[1]);
+  expect(radios[0]).toBeChecked();
+  expect(radios[1]).not.toBeChecked();
+  expect(screen.queryAllByRole('radio', {
+    checked: true
+  }).length).toBe(1);
+});
+test('defaultValue for uncontrolled radio group', function () {
+  getComponent({
+    defaultValue: testValues[0]
+  });
+  var radios = screen.getAllByRole('radio');
+  expect(radios[0]).toBeChecked(); // Ensure it is uncontrolled.
+
+  userEvent.click(radios[1]);
+  expect(radios[0]).not.toBeChecked();
+  expect(radios[1]).toBeChecked();
+  expect(screen.queryAllByRole('radio', {
+    checked: true
+  }).length).toBe(1);
+});
+test('disabled radio group disables all radios and the group label', function () {
+  getComponent({
+    isDisabled: true
+  });
+  var radios = screen.getAllByRole('radio');
+
+  _forEachInstanceProperty(radios).call(radios, function (radio) {
+    return expect(radio).toBeDisabled();
+  });
+});
+test('read only radio group', function () {
+  getComponent({
+    isReadOnly: true
+  });
+  var group = screen.getByRole('radiogroup');
+  expect(group).toHaveAttribute('aria-readonly', 'true');
+});
+test('required radio group', function () {
+  getComponent({
+    isRequired: true
+  });
+  var group = screen.getByRole('radiogroup');
+  expect(group).toBeRequired();
+});
+test('radio group with helper text', function () {
+  var helperText = 'some text';
+  getComponent({
+    helperText: helperText,
+    status: statuses.ERROR
+  });
+  var fieldHelperText = screen.getByText(helperText);
+  expect(fieldHelperText).toBeInTheDocument();
+  expect(fieldHelperText).toHaveClass("is-".concat(statuses.ERROR));
+});
+test('radio group with horizontal orientation', function () {
+  getComponent({
+    orientation: ORIENTATION.HORIZONTAL
+  });
+  var group = screen.getByRole('radiogroup');
+  expect(group).toHaveAttribute('aria-orientation', ORIENTATION.HORIZONTAL);
+});

package/lib/components/RadioGroupField/index.js

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

package/lib/components/RequirementsList/RequirementsList.js

@@ -0,0 +1,95 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+var _excluded = ["requirements"];
+import React, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import SuccessCircle from 'mdi-react/CheckCircleIcon';
+import ErrorCircle from 'mdi-react/AlertCircleIcon';
+import WarningCircle from 'mdi-react/AlertCircleOutlineIcon';
+import DefaultCircle from 'mdi-react/CheckboxBlankCircleOutlineIcon';
+import Box from '../Box';
+import Text from '../Text';
+import Icon from '../Icon';
+/**
+ * List of requirements for a password, with indicators that can change to show when
+ * requirements are satisfied.
+ */
+
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var RequirementsList = /*#__PURE__*/forwardRef(function (props, ref) {
+  var requirements = props.requirements,
+      others = _objectWithoutProperties(props, _excluded);
+
+  var statusIconRender = function statusIconRender(status) {
+    switch (status) {
+      case 'success':
+        return ___EmotionJSX(Icon, {
+          icon: SuccessCircle,
+          color: "success.bright",
+          mr: "sm",
+          size: 18,
+          "data-testid": "status-icon__".concat(status)
+        });
+
+      case 'warning':
+        return ___EmotionJSX(Icon, {
+          icon: WarningCircle,
+          color: "warning.bright",
+          mr: "sm",
+          size: 18,
+          "data-testid": "status-icon__".concat(status)
+        });
+
+      case 'error':
+        return ___EmotionJSX(Icon, {
+          icon: ErrorCircle,
+          color: "critical.bright",
+          mr: "sm",
+          size: 18,
+          "data-testid": "status-icon__".concat(status)
+        });
+
+      default:
+        return ___EmotionJSX(Icon, {
+          icon: DefaultCircle,
+          color: "neutral.40",
+          mr: "sm",
+          size: 18,
+          "data-testid": "status-icon__".concat(status)
+        });
+    }
+  };
+
+  var buildRequirementsLine = function buildRequirementsLine(req) {
+    return ___EmotionJSX(Box, {
+      isRow: true,
+      key: req.name,
+      alignItems: "center",
+      width: "100%"
+    }, statusIconRender(req.status), ___EmotionJSX(Text, {
+      variant: "bodyWeak"
+    }, req.name));
+  };
+
+  return ___EmotionJSX(Box, _extends({
+    p: "lg",
+    gap: "md",
+    ref: ref
+  }, others), _mapInstanceProperty(requirements).call(requirements, function (req) {
+    return buildRequirementsLine(req);
+  }));
+});
+RequirementsList.propTypes = {
+  /**
+   * Requirements and their status.
+   */
+  requirements: PropTypes.arrayOf(PropTypes.shape({
+    name: PropTypes.string.isRequired,
+    status: PropTypes.oneOf(['default', 'success', 'warning', 'error'])
+  }))
+};
+RequirementsList.defaultProps = {
+  requirements: []
+};
+export default RequirementsList;

package/lib/components/RequirementsList/RequirementsList.stories.js

@@ -0,0 +1,57 @@
+import React from 'react';
+import RequirementsList from '.';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'RequirementsList',
+  component: RequirementsList,
+  argTypes: {
+    requirements: {
+      control: {
+        type: 'object'
+      },
+      defaultValue: [{
+        'name': 'requirement 1',
+        'status': 'default'
+      }, {
+        'name': 'requirement 2',
+        'status': 'warning'
+      }, {
+        'name': 'requirement 3',
+        'status': 'error'
+      }, {
+        'name': 'requirement 4',
+        'status': 'success'
+      }],
+      description: 'Requirements and their status.'
+    }
+  }
+};
+export var Default = function Default(_ref) {
+  var label = _ref.label,
+      requirements = _ref.requirements;
+  return ___EmotionJSX(RequirementsList, {
+    label: label,
+    requirements: requirements
+  });
+};
+export var Password = function Password() {
+  return ___EmotionJSX(RequirementsList, {
+    label: "Password Requirements",
+    requirements: [{
+      name: '6 characters',
+      status: 'default'
+    }, {
+      name: '1 UPPERCASE letter',
+      status: 'success'
+    }, {
+      name: '1 lowercase letter',
+      status: 'success'
+    }, {
+      name: '1 number',
+      status: 'error'
+    }, {
+      name: 'Password Strength',
+      status: 'warning'
+    }]
+  });
+};