flipper-ui 0.27.2 → 0.29.0

package/core/{InputBase.d.ts → inputs/input-base/index.d.ts}

@@ -1,6 +1,7 @@
+import { InputBaseProps as MuiInputBaseProps } from '@material-ui/core';
 import { ChangeEvent, ReactNode } from 'react';
-import { DefaultProps } from './types';
-export interface InputAdornmentProps extends DefaultProps {
+import { DefaultProps } from '../../types';
+export interface InputAdornmentProps extends DefaultProps, Omit<MuiInputBaseProps, 'margin'> {
     autoComplete?: string;
     autoFocus?: boolean;
     classes?: object;
@@ -22,5 +23,5 @@ export interface InputAdornmentProps extends DefaultProps {
     type?: string;
     value?: string | number | boolean;
 }
-declare const InputAdornment: ({ margin, padding, style, autoComplete, ...otherProps }: InputAdornmentProps) => JSX.Element;
-export default InputAdornment;
+export declare const InputBase: ({ margin, padding, style, autoComplete, ...otherProps }: InputAdornmentProps) => JSX.Element;
+export default InputBase;

package/core/{InputBase.js → inputs/input-base/index.js}

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports["default"] = exports.InputBase = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
@@ -13,7 +13,7 @@ var _react = _interopRequireDefault(require("react"));
 var _excluded = ["margin", "padding", "style", "autoComplete"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var InputAdornment = function InputAdornment(_ref) {
+var InputBase = function InputBase(_ref) {
   var margin = _ref.margin,
     padding = _ref.padding,
     _ref$style = _ref.style,
@@ -30,5 +30,6 @@ var InputAdornment = function InputAdornment(_ref) {
     }, style)
   }));
 };
-var _default = InputAdornment;
+exports.InputBase = InputBase;
+var _default = InputBase;
 exports["default"] = _default;

package/core/inputs/input-base/input-base.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/core/inputs/input-base/input-base.stories.d.ts

@@ -0,0 +1,3 @@
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import(".").InputAdornmentProps>;
+export default _default;
+export declare const Default: any;

package/core/{MaskField.d.ts → inputs/mask-field/index.d.ts}

@@ -1,6 +1,7 @@
 import React from 'react';
-import { TextFieldProps } from './TextField';
-export interface MaskFieldProps {
+import { TextFieldProps } from '@/core/inputs/text-field';
+import { NumberFormatProps } from 'react-number-format';
+export interface MaskFieldProps extends NumberFormatProps {
     mask?: string;
     type?: 'text' | 'tel' | 'password';
     decimalSeparator?: string;
@@ -10,5 +11,5 @@ export interface MaskFieldProps {
     fixedDecimalScale?: boolean;
     customInput?: React.ComponentType<TextFieldProps>;
 }
-declare const MaskField: (props: TextFieldProps & MaskFieldProps) => JSX.Element;
+export declare const MaskField: (props: TextFieldProps & MaskFieldProps) => JSX.Element;
 export default MaskField;

package/core/{MaskField.js → inputs/mask-field/index.js}

@@ -4,11 +4,11 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports["default"] = exports.MaskField = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
-var _TextField = _interopRequireDefault(require("./TextField"));
+var _textField = _interopRequireDefault(require("@/core/inputs/text-field"));
 var _reactNumberFormat = _interopRequireDefault(require("react-number-format"));
 var _excluded = ["customInput"];
 var MaskField = function MaskField(props) {
@@ -20,9 +20,10 @@ var MaskField = function MaskField(props) {
     // shows problem with some props like have been do this
     // actually on flipper-ui. (e.g. errors treatment)
     _react["default"].createElement(_reactNumberFormat["default"], (0, _extends2["default"])({}, otherProps, {
-      customInput: customInput || _TextField["default"]
+      customInput: customInput || _textField["default"]
     }))
   );
 };
+exports.MaskField = MaskField;
 var _default = MaskField;
 exports["default"] = _default;

package/core/inputs/mask-field/mask-field.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/core/inputs/mask-field/mask-field.stories.d.ts

@@ -0,0 +1,4 @@
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("../text-field").TextFieldProps & import(".").MaskFieldProps>;
+export default _default;
+export declare const Default: () => JSX.Element;
+export declare const MaskFieldWithInputAdornment: any;

package/core/{PinInput.d.ts → inputs/pin-input/index.d.ts}

@@ -1,5 +1,5 @@
 import React from 'react';
-interface PinInputGridProps {
+export interface PinInputGridProps {
     pin: Array<number | undefined>;
     setPin: (pin: Array<number | undefined>) => void;
     onPinChanged: (pinEntry: number | undefined, index: number) => void;
@@ -11,5 +11,5 @@ interface PinInputGridProps {
     inputProps?: React.CSSProperties;
     variant?: 'outlined' | 'standard';
 }
-declare const PinInput: ({ pinLength, pin, setPin, onPinChanged, validationResult, isValidating, size, style: styleProps, inputProps, variant, ...otherProps }: PinInputGridProps) => JSX.Element;
+export declare const PinInput: ({ pinLength, pin, setPin, onPinChanged, validationResult, isValidating, size, style: styleProps, inputProps, variant, ...otherProps }: PinInputGridProps) => JSX.Element;
 export default PinInput;

package/core/{PinInput.js → inputs/pin-input/index.js}

@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports["default"] = exports.PinInput = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
@@ -20,17 +20,8 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 var Container = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    width: auto;\n    justify-content: center;\n"])));
-var removeValuesFromArray = function removeValuesFromArray(valuesArray, value) {
-  var valueIndex = valuesArray.findIndex(function (entry) {
-    return entry === value;
-  });
-  if (valueIndex === -1) {
-    return;
-  }
-  valuesArray.splice(valueIndex, 1);
-};
 var PIN_MIN_VALUE = 0;
 var PIN_MAX_VALUE = 9;
 var BACKSPACE_KEY = 'Backspace';
@@ -79,9 +70,7 @@ var PinInput = function PinInput(_ref) {
     if (event.target.value.length > 1) {
       return;
     }
-    var previousValue = event.target.defaultValue;
     var valuesArray = event.target.value.split('');
-    removeValuesFromArray(valuesArray, previousValue);
     var value = valuesArray.pop();
     if (!value || value === ' ' || value === '') {
       return;
@@ -141,7 +130,8 @@ var PinInput = function PinInput(_ref) {
       error: validationResult,
       style: getStyleProps(),
       InputProps: {
-        style: getInputProps()
+        style: getInputProps(),
+        role: 'pin-input-field'
       },
       inputRef: function inputRef(el) {
         inputRefs.current[index] = el;
@@ -154,5 +144,6 @@ var PinInput = function PinInput(_ref) {
     });
   }));
 };
+exports.PinInput = PinInput;
 var _default = PinInput;
 exports["default"] = _default;

package/core/inputs/pin-input/pin-input.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/core/inputs/pin-input/pin-input.stories.d.ts

@@ -0,0 +1,4 @@
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import(".").PinInputGridProps>;
+export default _default;
+export declare const Default: () => JSX.Element;
+export declare const Large: () => JSX.Element;

package/core/inputs/radio/index.d.ts

@@ -0,0 +1,12 @@
+import { RadioProps as MuiRadioProps } from '@material-ui/core';
+import { ChangeEvent } from 'react';
+import { DefaultProps } from '../../types';
+export interface RadioProps extends DefaultProps, MuiRadioProps {
+    checked?: boolean;
+    color?: 'primary' | 'secondary' | 'default';
+    value?: string;
+    disabled?: boolean;
+    onChange?: (event: ChangeEvent<HTMLElement>) => void;
+}
+export declare const Radio: ({ padding, margin, style, ...otherProps }: RadioProps) => JSX.Element;
+export default Radio;

package/core/{Radio.js → inputs/radio/index.js}

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports["default"] = exports.Radio = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
@@ -25,5 +25,6 @@ var Radio = function Radio(_ref) {
     }, style)
   }));
 };
+exports.Radio = Radio;
 var _default = Radio;
 exports["default"] = _default;

package/core/inputs/radio/radio.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/core/inputs/radio/radio.stories.d.ts

@@ -0,0 +1,6 @@
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import(".").RadioProps>;
+export default _default;
+export declare const Default: any;
+export declare const Checked: any;
+export declare const Primary: any;
+export declare const PrimaryChecked: any;

package/core/{RadioGroup.d.ts → inputs/radio-group/index.d.ts}

@@ -1,6 +1,6 @@
 import { ChangeEvent, ReactNode } from 'react';
-import { DefaultProps } from './types';
-interface RadioGroupProps extends DefaultProps {
+import { DefaultProps } from '../../types';
+export interface RadioGroupProps extends DefaultProps {
     row?: boolean;
     title?: ReactNode;
     name: string;
@@ -15,5 +15,5 @@ interface IOption {
     label?: ReactNode;
     disabled?: boolean;
 }
-declare const RadioGroup: ({ row, options, className, padding, margin, style, title, value, spacing, name, onChange, ...otherProps }: RadioGroupProps) => JSX.Element;
+export declare const RadioGroup: ({ row, options, className, padding, margin, style, title, value, spacing, name, onChange, ...otherProps }: RadioGroupProps) => JSX.Element;
 export default RadioGroup;

package/core/{RadioGroup.js → inputs/radio-group/index.js}

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports["default"] = exports.RadioGroup = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
@@ -59,5 +59,6 @@ var RadioGroup = function RadioGroup(_ref) {
     });
   })));
 };
+exports.RadioGroup = RadioGroup;
 var _default = RadioGroup;
 exports["default"] = _default;

package/core/inputs/radio-group/radio-group.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/core/inputs/radio-group/radio-group.stories.d.ts

@@ -0,0 +1,3 @@
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import(".").RadioGroupProps>;
+export default _default;
+export declare const Default: () => JSX.Element;

package/core/inputs/select/index.d.ts

@@ -0,0 +1,16 @@
+import { SelectProps as MuiSelectProps } from '@material-ui/core';
+import React from 'react';
+import { DefaultProps } from '../../types';
+export interface SelectProps extends DefaultProps, Omit<MuiSelectProps, 'margin' | 'value' | 'event' | 'onChange'> {
+    autoWidth?: boolean;
+    value?: string | number;
+    multiple?: boolean;
+    variant?: 'standard' | 'outlined' | 'filled';
+    hasClear?: boolean;
+    children: React.ReactNode;
+    onClear?: () => void;
+    onClose?: () => void;
+    onChange: (value: string) => void;
+}
+export declare const Select: ({ children, style, margin, padding, hasClear, onClear, onChange, variant, ...otherProps }: SelectProps) => JSX.Element;
+export default Select;

package/core/{Select.js → inputs/select/index.js}

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports["default"] = exports.Select = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
@@ -14,7 +14,7 @@ var _Select = _interopRequireDefault(require("@material-ui/core/Select"));
 var _styles = require("@material-ui/core/styles");
 var _Clear = _interopRequireDefault(require("@material-ui/icons/Clear"));
 var _react = _interopRequireDefault(require("react"));
-var _excluded = ["children", "style", "margin", "padding", "hasClear", "onClear", "variant"];
+var _excluded = ["children", "style", "margin", "padding", "hasClear", "onClear", "onChange", "variant"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var iconStyle = {
@@ -24,6 +24,7 @@ var renderEndAdornment = function renderEndAdornment(onClear) {
   return /*#__PURE__*/_react["default"].createElement(_InputAdornment["default"], {
     position: "end"
   }, /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+    role: "end-adornment-component",
     onClick: onClear,
     size: "small"
   }, /*#__PURE__*/_react["default"].createElement(_Clear["default"], {
@@ -40,6 +41,7 @@ var Select = function Select(_ref) {
     padding = _ref.padding,
     hasClear = _ref.hasClear,
     onClear = _ref.onClear,
+    onChange = _ref.onChange,
     _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'outlined' : _ref$variant,
     otherProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
@@ -55,11 +57,18 @@ var Select = function Select(_ref) {
     };
   });
   var classes = useStyles();
+  var handleChange = function handleChange(event) {
+    onChange(event.target.value);
+  };
   var hasValue = !!otherProps.value;
   var endAdornment = hasValue && hasClear ? {
     endAdornment: renderEndAdornment(onClear)
   } : {};
   return /*#__PURE__*/_react["default"].createElement(_Select["default"], (0, _extends2["default"])({}, endAdornment, {
+    onChange: handleChange,
+    inputProps: {
+      'data-testid': 'select-input'
+    },
     variant: variant,
     classes: {
       root: classes.root,
@@ -71,5 +80,6 @@ var Select = function Select(_ref) {
     }, style)
   }, otherProps), children);
 };
+exports.Select = Select;
 var _default = Select;
 exports["default"] = _default;

package/core/inputs/select/select.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/core/inputs/select/select.stories.d.ts

@@ -0,0 +1,4 @@
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import(".").SelectProps>;
+export default _default;
+export declare const Default: () => JSX.Element;
+export declare const WithClear: () => JSX.Element;

package/core/{Slider.d.ts → inputs/slider/index.d.ts}

@@ -1,8 +1,8 @@
 import { SliderProps } from '@material-ui/core/Slider';
-import { DefaultProps } from './types';
-interface ISliderProps {
+import { DefaultProps } from '../../types';
+export interface ISliderProps {
     defaultValue?: number | number[];
 }
 export type FlipperSliderProps = Omit<SliderProps, 'defaultValue'> & DefaultProps & ISliderProps;
-declare const Slider: ({ padding, margin, style, defaultValue, ...otherProps }: FlipperSliderProps) => JSX.Element;
+export declare const Slider: ({ padding, margin, style, defaultValue, ...otherProps }: FlipperSliderProps) => JSX.Element;
 export default Slider;

package/core/{Slider.js → inputs/slider/index.js}

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports["default"] = exports.Slider = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
@@ -28,5 +28,6 @@ var Slider = function Slider(_ref) {
     }, style)
   }));
 };
+exports.Slider = Slider;
 var _default = Slider;
 exports["default"] = _default;

package/core/inputs/slider/slider.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/core/inputs/slider/slider.stories.d.ts

@@ -0,0 +1,8 @@
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, Omit<import("@material-ui/core").SliderProps, "defaultValue"> & import("../../types").DefaultProps & import(".").ISliderProps>;
+export default _default;
+export declare const Default: () => JSX.Element;
+export declare const Primary: any;
+export declare const Secondary: any;
+export declare const Ranged: any;
+export declare const FixedLabel: any;
+export declare const WithMarks: any;

package/core/{TextField.d.ts → inputs/text-field/index.d.ts}

@@ -1,5 +1,6 @@
+import { TextFieldProps as MuiTextFieldProps } from '@material-ui/core';
 import React, { ChangeEvent, KeyboardEvent, FocusEvent, ReactNode, MouseEvent } from 'react';
-import { DefaultProps, HTMLElementWithDataCy } from './types';
+import { DefaultProps } from '../../types';
 export interface TextFieldProps extends DefaultProps {
     autoComplete?: string;
     autoFocus?: boolean;
@@ -43,13 +44,13 @@ interface IEditProps extends Pick<TextFieldProps, 'showEdit' | 'style'> {
     editing: boolean;
     onEditClick: (event: MouseEvent<HTMLButtonElement>) => void;
     onSaveClick: (event: MouseEvent<HTMLButtonElement>) => void;
-    editButtonProps?: Partial<Omit<HTMLElementWithDataCy<HTMLButtonElement>, 'color'>>;
-    saveButtonProps?: Partial<Omit<HTMLElementWithDataCy<HTMLButtonElement>, 'color'>>;
+    editButtonProps?: Partial<Omit<React.HTMLAttributes<HTMLButtonElement>, 'color'>>;
+    saveButtonProps?: Partial<Omit<React.HTMLAttributes<HTMLButtonElement>, 'color'>>;
 }
 export declare const TextFieldWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StaticTextFieldWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const useStyles: (props?: any) => import("@material-ui/styles").ClassNameMap<"input" | "outlinedInput" | "outlinedLabel" | "outlinedMultiline" | "iconOutlined">;
 export declare const HelperBox: (props: IHelperProps) => JSX.Element;
 export declare const EditBox: (props: IEditProps) => JSX.Element;
-declare const TextField: ({ margin, padding, style, error, variant, InputLabelProps, InputProps, SelectProps, autoComplete, onHelperClick, helperIcon, fullWidth, hasClear, onClear, ...otherProps }: TextFieldProps) => JSX.Element;
+export declare const TextField: ({ margin, padding, style, error, variant, InputLabelProps, InputProps, SelectProps, autoComplete, onHelperClick, helperIcon, fullWidth, hasClear, onClear, ...otherProps }: TextFieldProps & Omit<MuiTextFieldProps, 'margin' | 'variant'>) => JSX.Element;
 export default TextField;

package/core/{TextField.js → inputs/text-field/index.js}

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useStyles = exports["default"] = exports.TextFieldWrapper = exports.StaticTextFieldWrapper = exports.HelperBox = exports.EditBox = void 0;
+exports.useStyles = exports["default"] = exports.TextFieldWrapper = exports.TextField = exports.StaticTextFieldWrapper = exports.HelperBox = exports.EditBox = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
@@ -18,7 +18,7 @@ var _Clear = _interopRequireDefault(require("@material-ui/icons/Clear"));
 var _Help = _interopRequireDefault(require("@material-ui/icons/Help"));
 var _Edit = _interopRequireDefault(require("@material-ui/icons/Edit"));
 var _Save = _interopRequireDefault(require("@material-ui/icons/Save"));
-var _IconButton2 = _interopRequireDefault(require("./IconButton"));
+var _iconButton = _interopRequireDefault(require("../icon-button"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _excluded = ["margin", "padding", "style", "error", "variant", "InputLabelProps", "InputProps", "SelectProps", "autoComplete", "onHelperClick", "helperIcon", "fullWidth", "hasClear", "onClear"];
 var _templateObject, _templateObject2, _templateObject3;
@@ -53,7 +53,9 @@ var useStyles = (0, _styles.makeStyles)({
 });
 exports.useStyles = useStyles;
 var HelperBox = function HelperBox(props) {
-  return /*#__PURE__*/_react["default"].createElement(Helper, null, /*#__PURE__*/_react["default"].createElement(_IconButton2["default"], {
+  return /*#__PURE__*/_react["default"].createElement(Helper, {
+    role: "helper-box"
+  }, /*#__PURE__*/_react["default"].createElement(_iconButton["default"], {
     padding: "6px 2px",
     onClick: props.onHelperClick
   }, props.helperIcon || /*#__PURE__*/_react["default"].createElement(_Help["default"], {
@@ -62,27 +64,26 @@ var HelperBox = function HelperBox(props) {
 };
 exports.HelperBox = HelperBox;
 var EditBox = function EditBox(props) {
-  if (props.editing) {
-    return /*#__PURE__*/_react["default"].createElement(_IconButton2["default"], (0, _extends2["default"])({}, props.saveButtonProps, {
-      padding: "6px 2px",
-      onClick: props.onSaveClick
-    }), /*#__PURE__*/_react["default"].createElement(_Save["default"], {
-      fontSize: "small"
-    }));
-  } else {
-    return /*#__PURE__*/_react["default"].createElement(_IconButton2["default"], (0, _extends2["default"])({}, props.editButtonProps, {
-      padding: "6px 2px",
-      onClick: props.onEditClick
-    }), /*#__PURE__*/_react["default"].createElement(_Edit["default"], {
-      fontSize: "small"
-    }));
-  }
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    role: "edit-box"
+  }, props.editing ? /*#__PURE__*/_react["default"].createElement(_iconButton["default"], (0, _extends2["default"])({}, props.saveButtonProps, {
+    padding: "6px 2px",
+    onClick: props.onSaveClick
+  }), /*#__PURE__*/_react["default"].createElement(_Save["default"], {
+    fontSize: "small"
+  })) : /*#__PURE__*/_react["default"].createElement(_iconButton["default"], (0, _extends2["default"])({}, props.editButtonProps, {
+    padding: "6px 2px",
+    onClick: props.onEditClick
+  }), /*#__PURE__*/_react["default"].createElement(_Edit["default"], {
+    fontSize: "small"
+  })));
 };
 exports.EditBox = EditBox;
 var renderEndAdornment = function renderEndAdornment(onClear) {
   return /*#__PURE__*/_react["default"].createElement(_InputAdornment["default"], {
     position: "end"
   }, /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+    role: "clear-button",
     onClick: onClear,
     size: "small"
   }, /*#__PURE__*/_react["default"].createElement(_Clear["default"], {
@@ -147,6 +148,9 @@ var TextField = function TextField(_ref) {
       }
     }, InputLabelProps),
     InputProps: _objectSpread({
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      'data-testid': 'text-field',
       classes: {
         input: variant === 'outlined' ? classes.outlinedInput : '',
         multiline: variant === 'outlined' ? classes.outlinedMultiline : ''
@@ -162,5 +166,6 @@ var TextField = function TextField(_ref) {
     onHelperClick: handleClick
   }));
 };
+exports.TextField = TextField;
 var _default = TextField;
 exports["default"] = _default;

package/core/inputs/text-field/text-field.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/core/inputs/text-field/text-field.stories.d.ts

@@ -0,0 +1,7 @@
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import(".").TextFieldProps & Omit<import("@material-ui/core").TextFieldProps, "margin" | "variant">>;
+export default _default;
+export declare const Default: () => JSX.Element;
+export declare const withInputAdornment: any;
+export declare const withHelperButton: any;
+export declare const withSelect: () => JSX.Element;
+export declare const useWithSelectAndClear: () => JSX.Element;

package/core/navigation/breadcrumb/breadcrumb.stories.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, {
+    children?: React.ReactNode;
+    expandText?: string | undefined;
+    itemsAfterCollapse?: number | undefined;
+    itemsBeforeCollapse?: number | undefined;
+    maxItems?: number | undefined;
+    separator?: React.ReactNode;
+} & import("@material-ui/core/OverridableComponent").CommonProps<import("@material-ui/core").BreadcrumbsTypeMap<{}, "nav">> & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "key" | keyof React.HTMLAttributes<HTMLElement>> & {
+    ref?: ((instance: HTMLElement | null) => void) | React.RefObject<HTMLElement> | null | undefined;
+}, "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "placeholder" | "slot" | "spellCheck" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "ref" | "key">>;
+export default _default;
+export declare const Default: any;

package/core/navigation/breadcrumb/index.d.ts

@@ -0,0 +1,3 @@
+import { BreadcrumbsProps } from '@material-ui/core/Breadcrumbs';
+export declare const Breadcrumbs: (props: BreadcrumbsProps) => JSX.Element;
+export default Breadcrumbs;

package/core/navigation/breadcrumb/index.js

@@ -0,0 +1,18 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Breadcrumbs = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _Breadcrumbs = _interopRequireDefault(require("@material-ui/core/Breadcrumbs"));
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var Breadcrumbs = function Breadcrumbs(props) {
+  return /*#__PURE__*/React.createElement(_Breadcrumbs["default"], props);
+};
+exports.Breadcrumbs = Breadcrumbs;
+var _default = Breadcrumbs;
+exports["default"] = _default;

package/core/navigation/drawer/drawer.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/core/navigation/drawer/drawer.stories.d.ts

@@ -0,0 +1,3 @@
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import(".").DrawerProps>;
+export default _default;
+export declare const Default: () => JSX.Element;

package/core/navigation/drawer/index.d.ts

@@ -0,0 +1,8 @@
+import { DrawerProps as MuiDrawerProps } from '@material-ui/core/Drawer';
+import { DefaultProps } from '../../types';
+export interface DrawerProps extends MuiDrawerProps, DefaultProps {
+    top?: number;
+    width?: number;
+}
+export declare const Drawer: (props: DrawerProps) => JSX.Element;
+export default Drawer;