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

package/lib/components/FileInputField/FileInputField.test.js

@@ -0,0 +1,187 @@
+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 _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 from 'react';
+import userEvent from '@testing-library/user-event';
+import { fireEvent, render, screen } from '@testing-library/react';
+import axeTest from '../../utils/testUtils/testAxe';
+import FileInputField from './FileInputField';
+import statuses from '../../utils/devUtils/constants/statuses';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var fileInputFieldTestId = 'file-input-test-id';
+var testLabel = 'file-input-test-label';
+var fileSelectTestIdButton = 'file-input-field__file-select';
+var fileUploadedDeleteIconTestId = 'file-uploaded__delete-file-button';
+var fileUploadedFileIconErrorTestId = 'file-uploaded__file-icon--is-error';
+var fileUploadedDownloadTestId = 'file-uploaded__download-file-button';
+var fileUploadedDownloadLinkTestId = 'file-uploaded__download-link';
+var loaderTestId = 'file-input-field__loader';
+var testFileURL = 'test-file-url';
+var testFileId = 'test-file-id-1';
+var testFileName = 'chucknorris.png';
+var testFileName2 = 'chucknorris222.png';
+var testFile = new File(['(⌐□_□)'], testFileName, {
+  type: 'image/png'
+});
+var testFile2 = new File(['(⌐□_□)'], testFileName2, {
+  type: 'image/png'
+});
+var testFileObject = {
+  id: testFileId,
+  name: testFileName,
+  downloadLink: testFileURL
+};
+var originalValue = global.URL.createObjectURL;
+var defaultProps = {
+  'data-testid': fileInputFieldTestId,
+  label: testLabel
+};
+beforeAll(function () {
+  global.URL.createObjectURL = jest.fn(function () {
+    return testFileURL;
+  });
+});
+afterAll(function () {
+  global.URL.createObjectURL = originalValue;
+});
+
+var getComponent = function getComponent(props) {
+  return render(___EmotionJSX(FileInputField, _extends({}, defaultProps, props)));
+};
+
+axeTest(getComponent);
+test('should render file input field component by default', function () {
+  getComponent();
+  var fileUploadField = screen.getByTestId(fileInputFieldTestId);
+  expect(fileUploadField).toBeInstanceOf(HTMLDivElement);
+  expect(fileUploadField).toBeInTheDocument();
+});
+test('should render files if they are passed as default', function () {
+  getComponent({
+    defaultFileList: [testFileObject]
+  });
+  expect(screen.getByText(testFileName)).toBeInTheDocument();
+});
+test('should render files if they are passed as controlled prop', function () {
+  getComponent({
+    fileList: [testFileObject]
+  });
+  expect(screen.getByText(testFileName)).toBeInTheDocument();
+});
+test('should be able to display uploaded file', function () {
+  getComponent();
+  var fileUploadFieldInput = screen.getByLabelText(testLabel);
+  userEvent.click(screen.getByTestId(fileSelectTestIdButton));
+  fireEvent.change(fileUploadFieldInput, {
+    target: {
+      files: [testFile]
+    }
+  });
+  expect(screen.getByText(testFileName)).toBeInTheDocument();
+});
+test('should be able to add uploaded file if isMultiple true and file select always present', function () {
+  var testCustomButtonName = 'test Custom Button Name';
+  getComponent({
+    defaultFileList: [testFileObject],
+    defaultButtonText: testCustomButtonName,
+    isMultiple: true
+  });
+  var fileUploadFieldInput = screen.getByLabelText(testLabel);
+  userEvent.click(screen.getByTestId(fileSelectTestIdButton));
+  fireEvent.change(fileUploadFieldInput, {
+    target: {
+      files: [testFile2]
+    }
+  });
+  expect(screen.getByText(testFileName)).toBeInTheDocument();
+  expect(screen.getByText(testFileName2)).toBeInTheDocument();
+  expect(screen.getByText(testCustomButtonName)).toBeInTheDocument();
+});
+test('should call onFileSelect if file uploaded', function () {
+  var mockOnFileSelect = jest.fn();
+  getComponent({
+    onFileSelect: mockOnFileSelect
+  });
+  var fileUploadFieldInput = screen.getByLabelText(testLabel);
+  userEvent.click(screen.getByTestId(fileSelectTestIdButton));
+  fireEvent.change(fileUploadFieldInput, {
+    target: {
+      files: [testFile]
+    }
+  });
+  expect(mockOnFileSelect).toHaveBeenCalledTimes(1);
+});
+test('file should have download link as attribute', function () {
+  getComponent({
+    defaultFileList: [testFileObject]
+  });
+  userEvent.click(screen.getByTestId(fileUploadedDownloadTestId));
+  expect(screen.getByTestId(fileUploadedDownloadLinkTestId)).toHaveAttribute('href', testFileURL);
+});
+test('should remove file if trash icon clicked', function () {
+  getComponent({
+    defaultFileList: [testFileObject]
+  });
+  expect(screen.getByText(testFileName)).toBeInTheDocument();
+  userEvent.click(screen.getByTestId(fileUploadedDeleteIconTestId));
+  expect(screen.queryByText(testFileName)).not.toBeInTheDocument();
+});
+test('should call onRemove if trash icon clicked', function () {
+  var mockOnRemove = jest.fn();
+  getComponent({
+    defaultFileList: [{
+      id: testFileId,
+      name: 'test'
+    }],
+    onRemove: mockOnRemove
+  });
+  userEvent.click(screen.getByTestId(fileUploadedDeleteIconTestId));
+  expect(mockOnRemove).toHaveBeenCalledTimes(1);
+  expect(mockOnRemove).toHaveBeenCalledWith(expect.anything(), testFileId);
+});
+test('file select will have custom text if from props if provided', function () {
+  var mockTitle = 'test-title';
+  getComponent({
+    defaultButtonText: mockTitle
+  });
+  expect(screen.getByText(mockTitle)).toBeInTheDocument();
+});
+test('should render error border if appropriate state passed', function () {
+  getComponent({
+    status: statuses.ERROR
+  });
+  expect(screen.getByTestId(fileInputFieldTestId)).toHaveClass('is-error');
+});
+test('file uploaded should render red error icon', function () {
+  getComponent({
+    defaultFileList: [_objectSpread(_objectSpread({}, testFileObject), {}, {
+      status: statuses.ERROR
+    })]
+  });
+  expect(screen.getByTestId(fileUploadedFileIconErrorTestId)).toBeInTheDocument();
+});
+test('should display loader if appropriate prop is passed', function () {
+  getComponent({
+    isLoading: true
+  });
+  expect(screen.getByTestId(loaderTestId)).toBeInTheDocument();
+});
+test('should display helper text if passed', function () {
+  var testHelperText = 'testHelperText';
+  getComponent({
+    helperText: testHelperText
+  });
+  expect(screen.getByText(testHelperText)).toBeInTheDocument();
+});

package/lib/components/FileInputField/FileItem.js

@@ -0,0 +1,101 @@
+import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import React, { useCallback, useRef } from 'react';
+import InsertDriveFileIcon from 'mdi-react/InsertDriveFileIcon';
+import ErrorIcon from 'mdi-react/ErrorIcon';
+import DeleteIcon from 'mdi-react/DeleteIcon';
+import PropTypes from 'prop-types';
+import { useVisuallyHidden } from '@react-aria/visually-hidden';
+import { Box, Button, IconButton, Icon, Text } from '../../index';
+import statuses from '../../utils/devUtils/constants/statuses';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+
+var FileItem = function FileItem(props) {
+  var downloadLink = props.downloadLink,
+      handleFileDelete = props.handleFileDelete,
+      id = props.id,
+      isDisabled = props.isDisabled,
+      name = props.name,
+      status = props.status,
+      textProps = props.textProps;
+  var handleDeleteButtonPress = useCallback(function (e) {
+    return handleFileDelete(e, id);
+  }, [id, handleFileDelete]);
+
+  var _useVisuallyHidden = useVisuallyHidden(),
+      visuallyHiddenProps = _useVisuallyHidden.visuallyHiddenProps;
+
+  var downloadRef = useRef();
+  var getFileIconProps = useCallback(function () {
+    switch (status) {
+      case statuses.ERROR:
+        return {
+          icon: ErrorIcon,
+          color: 'critical.dark',
+          'data-testid': 'file-uploaded__file-icon--is-error'
+        };
+
+      default:
+        return {
+          icon: InsertDriveFileIcon,
+          color: 'neutral.10'
+        };
+    }
+  }, [status]);
+
+  var handleDownloadPress = function handleDownloadPress() {
+    downloadRef.current.click();
+  };
+
+  return ___EmotionJSX(Box, {
+    isRow: true,
+    alignItems: "center",
+    mx: 15,
+    my: 5
+  }, ___EmotionJSX(Icon, _extends({
+    size: 15,
+    "data-testid": "file-uploaded__file-icon"
+  }, getFileIconProps(), {
+    isDisabled: isDisabled
+  })), ___EmotionJSX(Button, {
+    variant: "fileInputField",
+    mx: 5,
+    isDisabled: isDisabled,
+    "aria-label": name,
+    "data-testid": "file-uploaded__download-file-button",
+    onPress: handleDownloadPress
+  }, ___EmotionJSX(Text, _extends({
+    color: "active"
+  }, textProps), name)), ___EmotionJSX(IconButton, {
+    "aria-label": "Delete ".concat(name, " file icon"),
+    "data-testid": "file-uploaded__delete-file-button",
+    isDisabled: isDisabled,
+    onPress: handleDeleteButtonPress,
+    sx: {
+      alignSelf: 'auto'
+    }
+  }, ___EmotionJSX(Icon, {
+    icon: DeleteIcon,
+    size: 15,
+    isDisabled: isDisabled
+  })), ___EmotionJSX("a", _extends({
+    href: downloadLink
+  }, visuallyHiddenProps, {
+    download: true,
+    ref: downloadRef,
+    "aria-label": "download",
+    "data-testid": "file-uploaded__download-link",
+    tabIndex: -1
+  })));
+};
+
+export default FileItem;
+FileItem.propTypes = {
+  downloadLink: PropTypes.string,
+  handleFileDelete: PropTypes.func,
+  id: PropTypes.string,
+  isDisabled: PropTypes.bool,
+  name: PropTypes.string,
+  status: PropTypes.oneOf(_Object$values(statuses)),
+  textProps: PropTypes.shape({})
+};

package/lib/components/FileInputField/FileSelect.js

@@ -0,0 +1,31 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button, Text } from '../../index';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+
+var FileSelect = function FileSelect(props) {
+  var buttonText = props.buttonText,
+      handleFileSelect = props.handleFileSelect,
+      isDisabled = props.isDisabled,
+      textProps = props.textProps;
+  return ___EmotionJSX(Button, {
+    "aria-label": buttonText,
+    "data-testid": "file-input-field__file-select",
+    isDisabled: isDisabled,
+    mx: 15,
+    my: 5,
+    onPress: handleFileSelect,
+    variant: "fileInputField"
+  }, ___EmotionJSX(Text, _extends({
+    color: "active"
+  }, textProps), buttonText));
+};
+
+export default FileSelect;
+FileSelect.propTypes = {
+  buttonText: PropTypes.string,
+  handleFileSelect: PropTypes.func,
+  isDisabled: PropTypes.bool,
+  textProps: PropTypes.shape({})
+};

package/lib/components/FileInputField/index.js

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

package/lib/components/HelpHint/HelpHint.js

@@ -0,0 +1,55 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+var _excluded = ["children", "tooltipProps", "iconButtonProps"];
+import React, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import IconButton from '../IconButton';
+import TooltipTrigger, { Tooltip } from '../TooltipTrigger';
+import Icon from '../Icon';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+
+var HelpIcon = function HelpIcon() {
+  return ___EmotionJSX("svg", {
+    width: "7",
+    height: "9",
+    viewBox: "0 0 7 9",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, ___EmotionJSX("path", {
+    d: "M2.56685 7.306V9H4.29385V7.306H2.56685ZM0.795848 3.676H2.41285C2.41285 3.478 2.43485 3.29467 2.47885 3.126C2.52285 2.95 2.58885 2.79967 2.67685 2.675C2.77218 2.543 2.88951 2.44033 3.02885 2.367C3.17551 2.28633 3.34785 2.246 3.54585 2.246C3.83918 2.246 4.06651 2.32667 4.22785 2.488C4.39651 2.64933 4.48085 2.89867 4.48085 3.236C4.48818 3.434 4.45151 3.599 4.37085 3.731C4.29751 3.863 4.19851 3.984 4.07385 4.094C3.94918 4.204 3.81351 4.314 3.66685 4.424C3.52018 4.534 3.38085 4.666 3.24885 4.82C3.11685 4.96667 2.99951 5.14633 2.89685 5.359C2.80151 5.57167 2.74285 5.83567 2.72085 6.151V6.646H4.20585V6.228C4.23518 6.008 4.30485 5.82467 4.41485 5.678C4.53218 5.53133 4.66418 5.403 4.81085 5.293C4.95751 5.17567 5.11151 5.062 5.27285 4.952C5.44151 4.83467 5.59185 4.69533 5.72385 4.534C5.86318 4.37267 5.97685 4.17833 6.06485 3.951C6.16018 3.72367 6.20785 3.434 6.20785 3.082C6.20785 2.86933 6.16018 2.642 6.06485 2.4C5.97685 2.15067 5.82651 1.91967 5.61385 1.707C5.40118 1.49433 5.11885 1.31833 4.76685 1.179C4.42218 1.03233 3.98951 0.959 3.46885 0.959C3.06551 0.959 2.69885 1.02867 2.36885 1.168C2.04618 1.3 1.76751 1.487 1.53285 1.729C1.30551 1.971 1.12585 2.257 0.993848 2.587C0.869181 2.917 0.803181 3.28 0.795848 3.676Z",
+    fill: "#3B4A58"
+  }));
+};
+/**
+ * A `HelpHint` is a composed component using tooltip trigger and icon button.
+ *
+ * For customization the trigger icon,
+ * please see the [TooltipTrigger](./?path=/docs/tooltiptrigger--default) docs.
+ */
+
+
+var HelpHint = /*#__PURE__*/forwardRef(function (props, ref) {
+  var children = props.children,
+      tooltipProps = props.tooltipProps,
+      iconButtonProps = props.iconButtonProps,
+      others = _objectWithoutProperties(props, _excluded);
+
+  return ___EmotionJSX(TooltipTrigger, _extends({
+    ref: ref,
+    direction: "top"
+  }, others, tooltipProps), ___EmotionJSX(IconButton, _extends({
+    variant: "helpHint",
+    "aria-label": "label help hint",
+    "data-testid": "help-hint__button"
+  }, iconButtonProps), ___EmotionJSX(Icon, {
+    icon: HelpIcon
+  })), ___EmotionJSX(Tooltip, tooltipProps, children));
+});
+HelpHint.propTypes = {
+  /** Props object that is spread directly into the tooltip element. */
+  tooltipProps: PropTypes.shape({}),
+
+  /** Props object that is spread directly into the IconButton element. */
+  iconButtonProps: PropTypes.shape({})
+};
+export default HelpHint;

package/lib/components/HelpHint/HelpHint.stories.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import HelpHint from '.';
+import Box from '../Box';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'HelpHint',
+  component: HelpHint,
+  argTypes: {
+    children: {
+      description: 'Tooltip content',
+      defaultValue: 'Text of the tooltip right here...',
+      control: {
+        type: 'text'
+      }
+    }
+  }
+};
+export var Default = function Default(args) {
+  return ___EmotionJSX(Box, {
+    p: 50
+  }, ___EmotionJSX(HelpHint, args));
+};
+export var WithTooltipAndIconButtonProps = function WithTooltipAndIconButtonProps() {
+  return ___EmotionJSX(Box, {
+    p: 50
+  }, ___EmotionJSX(HelpHint, {
+    tooltipProps: {
+      direction: 'bottom'
+    },
+    iconButtonProps: {
+      'aria-label': 'Help hint'
+    }
+  }, "Text of the tooltip right here..."));
+};

package/lib/components/HelpHint/HelpHint.test.js

@@ -0,0 +1,58 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import React from 'react';
+import userEvent from '@testing-library/user-event';
+import { fireEvent, render, screen } from '../../utils/testUtils/testWrapper';
+import axeTest from '../../utils/testUtils/testAxe';
+import HelpHint from './HelpHint';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var testId = 'help-hint__button';
+var tooltipValue = 'Some text';
+var defaultProps = {
+  children: tooltipValue
+};
+
+var getComponent = function getComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return render(___EmotionJSX(HelpHint, _extends({}, defaultProps, props)));
+}; // Need to be added to each test file to test accessibility using axe.
+
+
+axeTest(getComponent);
+test('renders HelpHint component', function () {
+  getComponent();
+  var helpHintButton = screen.getByTestId(testId);
+  expect(helpHintButton).toBeInTheDocument();
+});
+test('shows tooltip on hover', function () {
+  getComponent();
+  var helpHintButton = screen.getByTestId(testId);
+  expect(screen.queryByText(tooltipValue)).not.toBeInTheDocument();
+  fireEvent.mouseMove(helpHintButton);
+  fireEvent.mouseEnter(helpHintButton);
+  expect(screen.getByText(tooltipValue)).toBeInTheDocument();
+});
+test('shows tooltip on focus', function () {
+  getComponent();
+  var helpHintButton = screen.getByTestId(testId);
+  expect(screen.queryByText(tooltipValue)).not.toBeInTheDocument();
+  userEvent.tab();
+  expect(helpHintButton).toHaveFocus();
+  expect(screen.queryByText(tooltipValue)).toBeInTheDocument();
+});
+test('applies tooltipProps', function () {
+  getComponent({
+    tooltipProps: {
+      isOpen: true
+    }
+  });
+  expect(screen.getByText(tooltipValue)).toBeInTheDocument();
+});
+test('applies iconButtonProps', function () {
+  var newLabel = 'New label';
+  getComponent({
+    iconButtonProps: {
+      'aria-label': newLabel
+    }
+  });
+  expect(screen.getByLabelText(newLabel)).toBeInTheDocument();
+});

package/lib/components/HelpHint/index.js

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

package/lib/components/Icon/Icon.js

@@ -0,0 +1,66 @@
+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 _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); 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 Box from '../Box';
+/**
+ * Basic icon component.
+ * Icons will fill the given container, which is '1em' x '1em' by default, and will maintain their
+ * aspect ratio.
+ * Use SVGR to import SVG files as React components and pass them into this component, and you can
+ * use the theme to color the icon. But ensure you pass `dimensions: false` in webpack config
+ * (see [SVGR docs](https://react-svgr.com/docs/options/#dimensions)).
+ * Otherwise icon will not be resizable by `size` prop.
+ * Icons can also be used from the [Material UI Icon Library](https://materialdesignicons.com/).
+ * Built on top of the [Box from Theme-UI](https://theme-ui.com/components/box/) and uses the
+ * available [props from Theme-UI](https://theme-ui.com/sx-prop).
+*/
+
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var Icon = /*#__PURE__*/forwardRef(function (props, ref) {
+  var color = props.color,
+      IconComponent = props.icon,
+      size = props.size,
+      sx = props.sx;
+  return ___EmotionJSX(Box, _extends({
+    as: IconComponent,
+    ref: ref
+  }, props, {
+    sx: _objectSpread({
+      fill: color,
+      size: "".concat(size, "px"),
+      minWidth: size
+    }, sx)
+  }));
+});
+Icon.propTypes = {
+  /** The icon to render. */
+  icon: PropTypes.elementType.isRequired,
+
+  /**
+   * The size of the icon container. If given a number value, it will be converted to pixels.
+   * Standard icon sizes are 15, 22, and 40.
+  */
+  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+
+  /** A theme-aware prop to set the icon's color. */
+  color: PropTypes.string
+};
+Icon.defaultProps = {
+  size: 20
+};
+Icon.displayName = 'Icon';
+export default Icon;

package/lib/components/Icon/Icon.stories.js

@@ -0,0 +1,66 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import React from 'react';
+import SearchIcon from 'mdi-react/SearchIcon';
+import Icon from '.';
+import { flatColorList } from '../../styles/colors';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Icon',
+  component: Icon,
+  parameters: {
+    docs: {
+      source: {
+        type: 'code'
+      }
+    }
+  },
+  argTypes: {
+    icon: {
+      control: {
+        type: 'none'
+      },
+      defaultValue: SearchIcon,
+      description: 'The icon to render. List of icons at https://materialdesignicons.com/'
+    },
+    size: {
+      control: {
+        type: 'text'
+      },
+      description: 'The size of the icon container. If given a number value, it will be converted to pixels. ' + 'Standard icon sizes are 15, 22, and 40. ' + 'Numeric value and/or paired with a unit. https://www.w3schools.com/cssref/css_units.asp'
+    },
+    color: {
+      control: {
+        type: 'select',
+        options: _mapInstanceProperty(flatColorList).call(flatColorList, function (_ref) {
+          var _ref2 = _slicedToArray(_ref, 1),
+              colorName = _ref2[0];
+
+          return colorName;
+        })
+      },
+      defaultValue: 'active'
+    }
+  }
+};
+export var Default = function Default(args) {
+  return ___EmotionJSX(Icon, args);
+};
+export var SVGIcons = function SVGIcons() {
+  // SVGR can used to convert .svg files to components instead of doing this manually
+  var SVGComponent = function SVGComponent(props) {
+    return ___EmotionJSX("svg", _extends({
+      viewBox: "0 0 24 24"
+    }, props), ___EmotionJSX("path", {
+      fill: "currentColor",
+      d: "M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z"
+    }));
+  };
+
+  return ___EmotionJSX(Icon, {
+    icon: SVGComponent,
+    color: "active",
+    size: 40
+  });
+};

package/lib/components/Icon/Icon.test.js

@@ -0,0 +1,26 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import Earth from 'mdi-react/EarthIcon';
+import Icon from '../Icon';
+import axeTest from '../../utils/testUtils/testAxe';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var testId = 'test-icon';
+var defaultProps = {
+  'data-testid': testId,
+  icon: Earth
+};
+
+var getComponent = function getComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return render(___EmotionJSX(Icon, _extends({}, defaultProps, props)));
+}; // Need to be added to each test file to test accessibility using axe.
+
+
+axeTest(getComponent);
+test('default icon', function () {
+  getComponent();
+  var icon = screen.getByTestId(testId);
+  expect(icon).toBeInstanceOf(SVGSVGElement);
+  expect(icon).toBeInTheDocument();
+});

package/lib/components/Icon/index.js

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