@pingux/astro 1.2.1 → 1.3.0

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

@@ -0,0 +1,208 @@
+"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 _ArrayField = _interopRequireDefault(require("./ArrayField"));
+
+var _ArrayFieldDeleteButton = _interopRequireDefault(require("./ArrayFieldDeleteButton"));
+
+var _TextField = _interopRequireDefault(require("../TextField"));
+
+var _testWrapper = require("../../utils/testUtils/testWrapper");
+
+var _react2 = require("@emotion/react");
+
+jest.mock('uuid', function () {
+  return {
+    v4: function v4() {
+      return 'testid';
+    }
+  };
+});
+var defaultData = [{
+  id: '1',
+  value: 'Hello'
+}, {
+  id: '2',
+  value: 'World'
+}];
+var defaultProps = {
+  defaultValue: defaultData
+};
+
+var getComponent = function getComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return (0, _testWrapper.render)((0, _react2.jsx)(_ArrayField["default"], (0, _extends2["default"])({}, defaultProps, props)));
+};
+
+var renderField = function renderField(id, value, onFieldValueChange, onFieldDelete, otherFieldProps) {
+  return (0, _react2.jsx)(_TextField["default"], (0, _extends2["default"])({
+    label: "Text field",
+    value: value,
+    onChange: function onChange(e) {
+      return onFieldValueChange(e, id);
+    },
+    mr: "xs",
+    slots: {
+      inContainer: (0, _react2.jsx)(_ArrayFieldDeleteButton["default"], {
+        isDisabled: false,
+        onDelete: function onDelete() {
+          return onFieldDelete(id);
+        }
+      })
+    }
+  }, otherFieldProps));
+};
+
+test('displays multiple text fields', function () {
+  var onChange = jest.fn();
+  getComponent({
+    onChange: onChange,
+    renderField: renderField
+  });
+  expect(_testWrapper.screen.getAllByLabelText('Text field')).toHaveLength(2);
+});
+test('adds one text field and new empty field is added', function () {
+  getComponent({
+    renderField: renderField
+  });
+
+  _testWrapper.fireEvent.click(_testWrapper.screen.getByText('+ Add'));
+
+  expect(_testWrapper.screen.getAllByLabelText('Text field')).toHaveLength(3);
+});
+test('onAdd callback is fired when adding field', function () {
+  var onAdd = jest.fn();
+  getComponent({
+    onAdd: onAdd,
+    renderField: renderField
+  });
+
+  _testWrapper.fireEvent.click(_testWrapper.screen.getByText('+ Add'));
+
+  expect(onAdd).toHaveBeenCalled();
+});
+test('deletes one text field and only one field is left', function () {
+  getComponent({
+    renderField: renderField
+  });
+
+  _testWrapper.fireEvent.click(_testWrapper.screen.getAllByRole('button')[0]);
+
+  expect(_testWrapper.screen.getByLabelText('Text field')).toBeInTheDocument();
+});
+test('onDelete callback is fired when deleting field', function () {
+  var onDelete = jest.fn();
+  var value = defaultData;
+  var defaultValue = null;
+  getComponent({
+    value: value,
+    defaultValue: defaultValue,
+    onDelete: onDelete,
+    renderField: renderField
+  });
+
+  _testWrapper.fireEvent.click(_testWrapper.screen.getAllByRole('button')[0]);
+
+  expect(onDelete).toHaveBeenCalled();
+});
+test('Values are changed in text field', function () {
+  getComponent({
+    renderField: renderField
+  });
+
+  _testWrapper.fireEvent.change(_testWrapper.screen.getAllByLabelText('Text field')[0], {
+    target: {
+      value: '123'
+    }
+  });
+
+  expect(_testWrapper.screen.getByDisplayValue('123')).toBeInTheDocument();
+});
+test('onChange gets called when field values are changed', function () {
+  var onChange = jest.fn();
+  var value = defaultData;
+  var defaultValue = null;
+  getComponent({
+    value: value,
+    onChange: onChange,
+    renderField: renderField,
+    defaultValue: defaultValue
+  });
+
+  _testWrapper.fireEvent.change(_testWrapper.screen.getAllByLabelText('Text field')[0], {
+    target: {
+      value: '123'
+    }
+  });
+
+  expect(onChange).toHaveBeenNthCalledWith(1, [{
+    id: '1',
+    value: '123'
+  }, {
+    id: '2',
+    value: 'World'
+  }]);
+});
+test('onComponentRender displays fields correctly', function () {
+  var onChange = jest.fn();
+  var componentRenderData = [{
+    id: '1',
+    value: 'Hello',
+    onComponentRender: function onComponentRender(id, value, onFieldValueChange, onFieldDelete, otherFieldProps) {
+      return (0, _react2.jsx)(_TextField["default"], (0, _extends2["default"])({
+        label: "Text field",
+        value: value,
+        onChange: function onChange(e) {
+          return onFieldValueChange(e, id);
+        },
+        mr: "xs",
+        slots: {
+          inContainer: (0, _react2.jsx)(_ArrayFieldDeleteButton["default"], {
+            isDisabled: false,
+            onDelete: function onDelete() {
+              return onFieldDelete(id);
+            }
+          })
+        }
+      }, otherFieldProps));
+    }
+  }, {
+    id: '2',
+    value: 'World',
+    onComponentRender: function onComponentRender(id, value, onFieldValueChange, onFieldDelete, otherFieldProps) {
+      return (0, _react2.jsx)(_TextField["default"], (0, _extends2["default"])({
+        label: "Text field 2",
+        value: value,
+        onChange: function onChange(e) {
+          return onFieldValueChange(e, id);
+        },
+        mr: "xs",
+        slots: {
+          inContainer: (0, _react2.jsx)(_ArrayFieldDeleteButton["default"], {
+            isDisabled: false,
+            onDelete: function onDelete() {
+              return onFieldDelete(id);
+            }
+          })
+        }
+      }, otherFieldProps));
+    }
+  }];
+  (0, _testWrapper.render)((0, _react2.jsx)(_ArrayField["default"], {
+    defaultValue: componentRenderData,
+    onChange: onChange
+  }));
+  expect(_testWrapper.screen.getByLabelText('Text field')).toBeInTheDocument();
+  expect(_testWrapper.screen.getByLabelText('Text field 2')).toBeInTheDocument();
+});
+test('creates empty field when no data passed', function () {
+  (0, _testWrapper.render)((0, _react2.jsx)(_ArrayField["default"], {
+    renderField: renderField
+  }));
+  expect(_testWrapper.screen.getByLabelText('Text field')).toBeInTheDocument();
+});

package/lib/cjs/components/ArrayField/ArrayFieldDeleteButton.js

@@ -0,0 +1,61 @@
+"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
+});
+
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _TrashIcon = _interopRequireDefault(require("mdi-react/TrashIcon"));
+
+var _Icon = _interopRequireDefault(require("../Icon"));
+
+var _IconButton = _interopRequireDefault(require("../IconButton"));
+
+var _react2 = require("@emotion/react");
+
+var ArrayFieldDeleteButton = function ArrayFieldDeleteButton(_ref) {
+  var label = _ref.label,
+      isDisabled = _ref.isDisabled,
+      id = _ref.id,
+      onDelete = _ref.onDelete;
+  return (0, _react2.jsx)(_IconButton["default"], {
+    onPress: function onPress() {
+      return onDelete(id);
+    },
+    isDisabled: isDisabled,
+    sx: {
+      position: 'absolute',
+      right: -35,
+      width: 32,
+      height: 32,
+      top: 5,
+      cursor: 'pointer'
+    },
+    title: label
+  }, (0, _react2.jsx)(_Icon["default"], {
+    icon: _TrashIcon["default"],
+    size: 20,
+    color: "neutral.40"
+  }));
+};
+
+ArrayFieldDeleteButton.propTypes = {
+  label: _propTypes["default"].string,
+  id: _propTypes["default"].number,
+  isDisabled: _propTypes["default"].bool,
+  onDelete: _propTypes["default"].func
+};
+ArrayFieldDeleteButton.defaultProps = {
+  label: 'Delete field'
+};
+var _default = ArrayFieldDeleteButton;
+exports["default"] = _default;

package/lib/cjs/components/ArrayField/index.js

@@ -0,0 +1,27 @@
+"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 _ArrayField["default"];
+  }
+});
+
+_Object$defineProperty(exports, "ArrayFieldDeleteButton", {
+  enumerable: true,
+  get: function get() {
+    return _ArrayFieldDeleteButton["default"];
+  }
+});
+
+var _ArrayField = _interopRequireDefault(require("./ArrayField"));
+
+var _ArrayFieldDeleteButton = _interopRequireDefault(require("./ArrayFieldDeleteButton"));

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

@@ -50,12 +50,12 @@ var _utils = require("@react-aria/utils");
 
 var _prismReactRenderer = _interopRequireWildcard(require("prism-react-renderer"));
 
-var _github = _interopRequireDefault(require("prism-react-renderer/themes/github"));
-
 var _hooks = require("../../hooks");
 
 var _ = require("../..");
 
+var _codeView = _interopRequireDefault(require("../../styles/variants/codeView"));
+
 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; }
@@ -96,7 +96,7 @@ var CodeView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   };
 
   var content = (0, _react2.jsx)(_prismReactRenderer["default"], (0, _extends2["default"])({}, _prismReactRenderer.defaultProps, {
-    theme: _github["default"],
+    theme: _codeView["default"].theme,
     code: (children === null || children === void 0 ? void 0 : (0, _trim["default"])(children).call(children)) || '',
     language: language
   }), function (_ref) {

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

@@ -773,6 +773,9 @@ InfiniteLoadingList.parameters = {
     description: {
       story: 'Note: Keep in mind the maxHeight may impact when the scroll callback is triggered. If you notice it\'s being called too often, try adjusting that value or loading more objects to prevent this behavior.'
     }
+  },
+  chromatic: {
+    delay: 5000
   }
 };
 

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

@@ -8,7 +8,7 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 
-exports.LoaderWithMostCommonColor = exports.Default = exports["default"] = void 0;
+exports.CustomColor = exports.Default = exports["default"] = void 0;
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 
@@ -54,10 +54,10 @@ var Default = function Default(args) {
 
 exports.Default = Default;
 
-var LoaderWithMostCommonColor = function LoaderWithMostCommonColor() {
+var CustomColor = function CustomColor() {
   return (0, _react2.jsx)(_["default"], {
     color: "neutral.60"
   });
 };
 
-exports.LoaderWithMostCommonColor = LoaderWithMostCommonColor;
+exports.CustomColor = CustomColor;

package/lib/cjs/components/Modal/Modal.js

@@ -121,6 +121,9 @@ var Modal = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }),
       classNames = _useStatusClasses.classNames;
 
+  (0, _hooks.useDeprecationWarning)('The "dark" variant for Modal will be deprecated in Astro-UI 2.0.0.', {
+    isActive: others.variant === 'modal.dark'
+  });
   return (0, _react2.jsx)(_overlays.OverlayContainer, null, (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
     className: classNames,
     variant: "modal.container"

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

@@ -1,7 +1,5 @@
 "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");
@@ -10,13 +8,11 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 
-exports.DarkVariant = exports.Default = exports["default"] = void 0;
+exports.Default = exports["default"] = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
-
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 
 var _hooks = require("../../hooks");
 
@@ -32,7 +28,7 @@ var _default = {
       control: {
         type: 'text'
       },
-      defaultValue: 'Delete Group'
+      defaultValue: 'Continue'
     },
     role: {},
     id: {
@@ -40,7 +36,9 @@ var _default = {
         type: 'text'
       }
     },
-    hasCloseButton: {},
+    hasCloseButton: {
+      defaultValue: true
+    },
     isClosedOnBlur: {},
     isDismissable: {},
     isKeyboardDismissDisabled: {},
@@ -90,16 +88,6 @@ exports["default"] = _default;
 
 var Default = function Default(args) {
   var state = (0, _hooks.useModalState)();
-
-  var _useState = (0, _react.useState)(''),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      inputValue = _useState2[0],
-      setInputValue = _useState2[1];
-
-  var onTextFieldChange = (0, _react.useCallback)(function (_ref) {
-    var value = _ref.target.value;
-    setInputValue(value.toUpperCase());
-  }, []);
   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.Button, {
@@ -110,59 +98,16 @@ var Default = function Default(args) {
       onClose: state.close
     }), (0, _react2.jsx)(_index.Text, {
       pt: "lg"
-    }, "Deleting a group ", (0, _react2.jsx)("strong", null, "\"Marketing\""), " cannot be undone. Users will lose access to the applications."), (0, _react2.jsx)(_index.Text, {
-      pt: "lg"
-    }, "Type the word DELETE to confirm deletion of this group"), (0, _react2.jsx)(_index.TextField, {
-      value: inputValue,
-      onChange: onTextFieldChange,
-      "aria-label": "user input"
-    }), (0, _react2.jsx)(_index.Box, {
-      isRow: true,
-      pt: "lg",
-      mr: "auto"
-    }, (0, _react2.jsx)(_index.Button, {
-      variant: "critical",
-      onPress: state.close,
-      mr: "md",
-      isDisabled: Boolean(inputValue !== 'DELETE'),
-      "aria-label": "Delete"
-    }, "Delete"), (0, _react2.jsx)(_index.Button, {
-      onPress: state.close,
-      "aria-label": "Cancel"
-    }, "Cancel"))))
-  );
-};
-
-exports.Default = Default;
-
-var DarkVariant = function DarkVariant() {
-  var state = (0, _hooks.useModalState)();
-  return (// Application must be wrapped in an OverlayProvider so that it can be hidden from screen
-    // readers when a modal opens.
-    (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.Button, {
-      onPress: state.open,
-      "aria-label": "Open modal"
-    }, "Open Modal"), state.isOpen && (0, _react2.jsx)(_index.Modal, {
-      variant: "modal.dark",
-      title: "Question",
-      isOpen: state.isOpen,
-      onClose: state.close,
-      isDismissable: true,
-      hasCloseButton: true
-    }, (0, _react2.jsx)(_index.Text, {
-      variant: "subtitle",
-      color: "white",
-      pt: "lg"
-    }, "Would you ever really just click a button?"), (0, _react2.jsx)(_index.Box, {
+    }, "Do you want to continue with this action that you\u2018re performing?"), (0, _react2.jsx)(_index.Box, {
       isRow: true,
       pt: "lg",
       mr: "auto"
     }, (0, _react2.jsx)(_index.Button, {
       variant: "primary",
-      mr: "md",
       onPress: state.close,
-      "aria-label": "Yes"
-    }, "Yes"), (0, _react2.jsx)(_index.Button, {
+      mr: "md",
+      "aria-label": "Continue"
+    }, "Continue"), (0, _react2.jsx)(_index.Button, {
       variant: "link",
       onPress: state.close,
       "aria-label": "Cancel"
@@ -170,4 +115,4 @@ var DarkVariant = function DarkVariant() {
   );
 };
 
-exports.DarkVariant = DarkVariant;
+exports.Default = Default;

package/lib/cjs/components/NavBar/NavBar.js

@@ -1,5 +1,7 @@
 "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");
@@ -10,7 +12,13 @@ _Object$defineProperty(exports, "__esModule", {
 
 exports["default"] = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _NavBarContext = require("../../context/NavBarContext");
+
+var _isIterable = require("../../utils/devUtils/props/isIterable");
 
 var _Box = _interopRequireDefault(require("../Box/Box"));
 
@@ -27,12 +35,30 @@ var _react2 = require("@emotion/react");
  *
  */
 var NavBar = function NavBar(props) {
-  return (0, _react2.jsx)(_Box["default"], {
-    variant: "boxes.navBar",
+  var defaultSelectedKeys = props.defaultSelectedKeys;
+
+  var _useState = (0, _react.useState)(defaultSelectedKeys),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      selectedKeys = _useState2[0],
+      setSelectedKeys = _useState2[1];
+
+  return (0, _react2.jsx)(_NavBarContext.NavBarContext.Provider, {
+    value: {
+      selectedKeys: selectedKeys,
+      setSelectedKeys: setSelectedKeys
+    }
+  }, (0, _react2.jsx)(_Box["default"], {
+    variant: "navBar.container",
     role: "navigation",
     as: "nav"
-  }, props.children);
+  }, props.children));
 };
 
+NavBar.propTypes = {
+  defaultSelectedKeys: _isIterable.isIterableProp
+};
+NavBar.defaultProps = {
+  defaultSelectedKeys: []
+};
 var _default = NavBar;
 exports["default"] = _default;