@pingux/astro 1.0.0-alpha.2 → 1.0.0-alpha.20

package/lib/recipes/RadioButtonsWithLinks.stories.js

@@ -0,0 +1,120 @@
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import React, { useState } from 'react';
+import CloseIcon from 'mdi-react/CloseIcon';
+import { Box, Button, Icon, IconButton, Text } from '../index';
+import RadioField from '../components/RadioField';
+import RadioGroupField from '../components/RadioGroupField';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Recipes/RadioButtonsWithLinks'
+};
+export var Default = function Default() {
+  var roles = [{
+    name: 'Client Application Developer'
+  }, {
+    name: 'Environment Admin',
+    isDisabled: true
+  }, {
+    name: 'Identity Data Admin',
+    isDisabled: true
+  }, {
+    name: 'Organization Admin'
+  }];
+  var titleSx = {
+    fontSize: 'md',
+    color: 'neutral.20',
+    fontWeight: 2
+  };
+  var subtitleSx = {
+    fontSize: 'md',
+    color: 'neutral.10'
+  };
+
+  var RadioFieldWithButton = function RadioFieldWithButton(_ref) {
+    var fieldName = _ref.fieldName,
+        isDisabled = _ref.isDisabled;
+
+    var _useState = useState(false),
+        _useState2 = _slicedToArray(_useState, 2),
+        isOpen = _useState2[0],
+        setIsOpen = _useState2[1];
+
+    return ___EmotionJSX(Box, null, ___EmotionJSX(Box, {
+      isRow: true,
+      alignItems: "center"
+    }, ___EmotionJSX(RadioField, {
+      value: fieldName,
+      label: fieldName,
+      isDisabled: isDisabled
+    }), ___EmotionJSX(Button, {
+      variant: "text",
+      mb: "xs",
+      ml: "md",
+      onPress: function onPress() {
+        return setIsOpen(function (prev) {
+          return !prev;
+        });
+      },
+      isDisabled: isDisabled
+    }, "".concat(isOpen ? 'Hide' : 'Show', " Permissions"))), isOpen && ___EmotionJSX(PermissionsList, {
+      onPress: function onPress() {
+        return setIsOpen(false);
+      }
+    }));
+  };
+
+  var PermissionsList = function PermissionsList(_ref2) {
+    var onPress = _ref2.onPress;
+    return ___EmotionJSX(Box, {
+      p: "md",
+      bg: "neutral.95"
+    }, ___EmotionJSX(Box, {
+      isRow: true,
+      justifyContent: "space-between",
+      mb: "sm"
+    }, ___EmotionJSX(Text, {
+      sx: {
+        fontWeight: 2
+      }
+    }, "Permissions"), ___EmotionJSX(IconButton, {
+      onPress: onPress
+    }, ___EmotionJSX(Icon, {
+      icon: CloseIcon
+    }))), ___EmotionJSX(Box, null, ___EmotionJSX(Text, {
+      sx: titleSx,
+      mb: "xs"
+    }, "Resource"), ___EmotionJSX(Text, {
+      sx: subtitleSx,
+      mb: "sm"
+    }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."), ___EmotionJSX(Text, {
+      sx: titleSx,
+      mb: "xs"
+    }, "Push Credentials"), ___EmotionJSX(Text, {
+      sx: subtitleSx,
+      mb: "sm"
+    }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod"), ___EmotionJSX(Text, {
+      sx: titleSx,
+      mb: "xs"
+    }, "Organization"), ___EmotionJSX(Text, {
+      sx: subtitleSx,
+      mb: "sm"
+    }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco"), ___EmotionJSX(Text, {
+      sx: titleSx,
+      mb: "xs"
+    }, "Image"), ___EmotionJSX(Text, {
+      sx: subtitleSx,
+      mb: "sm"
+    }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod")));
+  };
+
+  return ___EmotionJSX(RadioGroupField, null, _mapInstanceProperty(roles).call(roles, function (_ref3) {
+    var name = _ref3.name,
+        isDisabled = _ref3.isDisabled;
+    return ___EmotionJSX(RadioFieldWithButton, {
+      fieldName: name,
+      isDisabled: isDisabled,
+      key: name
+    });
+  }));
+};

package/lib/styles/forms/input.js

@@ -49,6 +49,17 @@ export var input = _objectSpread(_objectSpread({}, text.inputValue), {}, {
   '&::placeholder': text.placeholder,
   '&::-ms-expand': {
     display: 'none'
+  },
+  '&::-webkit-contacts-auto-fill-button, &::-webkit-credentials-auto-fill-button': {
+    visibility: 'hidden',
+    display: 'none !important',
+    pointerEvents: 'none',
+    height: 0,
+    width: 0,
+    margin: 0
+  },
+  '&::-ms-reveal, &::-ms-clear': {
+    display: 'none'
   }
 }); // Example variant input
 
@@ -117,6 +128,10 @@ input.container = (_input$container = {
       backgroundColor: 'accent.95',
       border: 'none'
     },
+    '> textarea': {
+      backgroundColor: 'accent.95',
+      border: 'none'
+    },
     '&:after': {
       display: 'none'
     }

package/lib/styles/theme.js

@@ -42,9 +42,6 @@ export default {
     row: "0 0 9px ".concat(accent[95]),
     focus: "0 0 5px ".concat(focus)
   },
-  transitions: {
-    panel: 'margin 0.25s'
-  },
   forms: forms,
   text: text,
   images: images,

package/lib/styles/variants/accordion.js

@@ -14,12 +14,12 @@ var accordionTitle = {
 var accordion = {
   display: 'flex',
   mt: '5px',
-  mb: '5px',
+  mb: '20px',
   alignItems: 'flex-start'
 };
 var accordionBody = {
   display: 'none !important',
-  p: 'md',
+  pt: 'md',
   width: '100%',
   '.is-open &': {
     display: 'flex !important'
@@ -28,10 +28,10 @@ var accordionBody = {
 var accordionGridHeader = {
   cursor: 'pointer',
   lineHeight: '30px',
-  px: 'md',
+  pl: 'sm',
   outline: 'none',
   display: 'flex',
-  justifyContent: 'flex-start',
+  justifyContent: 'center',
   flexShrink: 0,
   wordBreak: 'inherit',
   whiteSpace: 'nowrap',
@@ -45,12 +45,9 @@ var accordionGridHeader = {
     WebkitBoxShadow: 'focus',
     MozBoxShadow: 'focus'
   },
-  padding: '0px',
+  minHeight: '64px',
   '&.is-hovered': {
-    color: 'active',
-    '& div > div > div > span': {
-      color: 'active'
-    }
+    backgroundColor: 'accent.99'
   },
   '&.is-pressed': {
     color: 'accent.20',
@@ -61,6 +58,7 @@ var accordionGridHeader = {
 };
 var accordionGridBody = {
   display: 'none !important',
+  pl: 'sm',
   width: '100%',
   '&.is-selected': {
     display: 'flex !important'

package/lib/styles/variants/boxes.js

@@ -16,20 +16,6 @@ import { text } from './text';
 var base = {
   display: 'flex'
 };
-var panel = {
-  outline: 'none',
-  position: 'relative',
-  bg: 'white',
-  borderLeft: 'separator',
-  transition: 'margin 0.25s ease-in',
-  visibility: 'hidden',
-  '&.is-focused': {
-    boxShadow: 'focus'
-  },
-  '&.is-visible': {
-    visibility: 'visible'
-  }
-};
 var card = {
   boxShadow: 'standard',
   p: 'lg',
@@ -85,6 +71,10 @@ var listViewItem = _objectSpread(_objectSpread({}, base), {}, {
   },
   '&.is-focused': {
     boxShadow: 'inset 0 0 5px #5873bdbf'
+  },
+  '&.has-separator': {
+    borderBottom: '1px solid',
+    borderBottomColor: 'line.hairline'
   }
 });
 
@@ -98,14 +88,27 @@ var listBoxSectionTitle = {
 };
 var chip = {
   cursor: 'pointer',
-  height: '15px',
-  p: '10px',
+  p: '3px 5px 4px 5px',
   alignItems: 'center',
   justifyContent: 'center',
   minWidth: '50px',
   alignSelf: 'flex-start',
   display: 'inline-flex !important',
-  borderRadius: '5px'
+  borderRadius: '5px',
+  fontWeight: 1,
+  '& button': {
+    backgroundColor: 'transparent',
+    marginLeft: 'xs',
+    marginTop: '1px',
+    padding: '0',
+    '&.is-hovered': {
+      backgroundColor: 'white'
+    },
+    '& .mdi-icon': {
+      marginLeft: '0',
+      padding: '2px'
+    }
+  }
 };
 var inputInContainerSlot = {
   position: 'absolute',
@@ -229,6 +232,28 @@ var datePicker = {
     }
   }
 };
+var fileInputFieldWrapper = {
+  display: 'flex',
+  border: '1px dashed',
+  borderColor: 'active',
+  padding: '10px 0',
+  '&.is-drag-active': {
+    backgroundColor: 'accent.95'
+  },
+  '&.is-error': {
+    borderColor: 'critical.dark'
+  },
+  '&.is-success': {
+    borderColor: 'success.dark'
+  },
+  '&.is-warning': {
+    borderColor: 'warning.dark'
+  },
+  '&.is-loading': {
+    justifyContent: 'center',
+    alignItems: 'center'
+  }
+};
 export default {
   base: base,
   card: card,
@@ -237,10 +262,10 @@ export default {
   datePicker: datePicker,
   expandableRow: expandableRow,
   inputInContainerSlot: inputInContainerSlot,
+  fileInputFieldWrapper: fileInputFieldWrapper,
   listItem: listItem,
   listBoxSectionTitle: listBoxSectionTitle,
   listViewItem: listViewItem,
-  panel: panel,
   radioCheckedContent: radioCheckedContent,
   radioContainer: radioContainer,
   scrollbox: scrollbox,

package/lib/styles/variants/buttons.js

@@ -158,32 +158,7 @@ var accordionHeader = _objectSpread(_objectSpread({}, base), {}, {
     color: 'accent.20'
   },
   '&.is-focused': _objectSpread({}, defaultFocus)
-}); // TODO: Remove this variant in Astro-UI 1.0.0
-
-
-var icon = {
-  p: '3px',
-  alignSelf: 'flex-start',
-  flexGrow: 0,
-  borderRadius: '100%',
-  cursor: 'pointer',
-  bg: 'transparent',
-  'path': {
-    fill: 'text.secondary'
-  },
-  outline: 'none',
-  color: 'white',
-  '&.is-hovered': {
-    bg: 'accent.90'
-  },
-  '&.is-pressed': {
-    'path': {
-      fill: 'white'
-    },
-    bg: 'active'
-  },
-  '&.is-focused': _objectSpread({}, defaultFocus)
-};
+});
 
 var primary = _objectSpread(_objectSpread({}, base), {}, {
   display: 'inline-flex',
@@ -309,7 +284,7 @@ var inline = _objectSpread(_objectSpread({}, base), {}, {
   bg: 'white',
   height: '22px',
   lineHeight: 1,
-  fontSize: '14px',
+  fontSize: 'sm',
   borderRadius: '15px',
   border: '1px solid',
   borderColor: 'active',
@@ -452,6 +427,25 @@ var expandableRow = {
     }
   }
 };
+var fileInputField = {
+  background: 'none',
+  cursor: 'pointer',
+  '& span': {
+    textAlign: 'initial'
+  },
+  '&:focus-visible': {
+    outline: 'none'
+  },
+  '&.is-hovered, &.is-pressed': {
+    cursor: 'pointer',
+    '& span': {
+      textDecoration: 'underline'
+    }
+  },
+  '&.is-focused': {
+    boxShadow: 'focus'
+  }
+};
 export default {
   accordionHeader: accordionHeader,
   chipDeleteButton: chipDeleteButton,
@@ -470,8 +464,8 @@ export default {
     '&.is-focused': _objectSpread({}, defaultFocus)
   }),
   expandableRow: expandableRow,
+  fileInputField: fileInputField,
   iconButton: iconButton,
-  icon: icon,
   imageUpload: imageUpload,
   inline: inline,
   inverted: inverted,

package/lib/styles/variants/tabs.js

@@ -5,6 +5,7 @@ export var tab = {
   display: 'inline-flex',
   outline: 'none',
   transform: 'translateY(1px)',
+  width: '100%',
   '&.is-focused': {
     boxShadow: 'focus'
   },

package/lib/styles/variants/variants.js

@@ -24,7 +24,6 @@ import menu from './menu';
 import menuItem from './menuItem';
 import messages from './messages';
 import numberField from './numberField';
-import popover from './popover';
 import overlayPanel from './overlayPanel';
 import popoverMenu from './popoverMenu';
 import rockerbutton from './rockerbutton';
@@ -47,7 +46,6 @@ export default _objectSpread(_objectSpread({
   modal: modal,
   numberField: numberField,
   overlayPanel: overlayPanel,
-  popover: popover,
   popoverMenu: popoverMenu,
   rockerbutton: rockerbutton,
   separator: separator,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "1.0.0-alpha.2",
+  "version": "1.0.0-alpha.20",
   "description": "PingUX themeable React component library",
   "author": "uxdev@pingidentity.com",
   "license": "Apache-2.0",
@@ -129,12 +129,13 @@
     "chroma-js": "^2.1.0",
     "classnames": "^2.2.6",
     "emotion-normalize": "^11.0.1",
-    "lodash": "^4.17.20",
+    "lodash": "^4.17.21",
     "mdi-react": "^7.4.0",
     "moment": "^2.29.1",
     "prop-types": "^15.7.2",
     "react-calendar": "^3.4.0",
     "react-color": "^2.19.3",
+    "react-dropzone": "^11.4.2",
     "rebass": "^4.0.7",
     "recharts": "^2.1.4",
     "regenerator-runtime": "^0.13.7",

package/lib/cjs/components/Dropdown/Dropdown.js

@@ -1,112 +0,0 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime-corejs3/helpers/interopRequireWildcard");
-
-var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-
-var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
-
-_Object$defineProperty(exports, "__esModule", {
-  value: true
-});
-
-exports["default"] = void 0;
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
-
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _forms = require("@rebass/forms");
-
-var _focus = require("@react-aria/focus");
-
-var _hooks = require("../../hooks");
-
-var _react2 = require("@emotion/react");
-
-/**
- * Basic dropdown menu input.
- * Accepts most styling props from [styled-system](https://styled-system.com/table).
- * Built on top of the [Select component from Rebass Forms](https://rebassjs.org/forms/select).
- */
-var Dropdown = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
-  var className = props.className,
-      children = props.children,
-      hasNoneOption = props.hasNoneOption,
-      hasDisabledFirstOption = props.hasDisabledFirstOption,
-      firstLabel = props.firstLabel,
-      noneLabel = props.noneLabel,
-      defaultValue = props.defaultValue,
-      value = props.value,
-      others = (0, _objectWithoutProperties2["default"])(props, ["className", "children", "hasNoneOption", "hasDisabledFirstOption", "firstLabel", "noneLabel", "defaultValue", "value"]);
-  var dropdownRef = (0, _react.useRef)();
-  /* istanbul ignore next */
-
-  (0, _react.useImperativeHandle)(ref, function () {
-    return dropdownRef.current;
-  });
-
-  var _useFocusRing = (0, _focus.useFocusRing)(),
-      isFocusVisible = _useFocusRing.isFocusVisible,
-      focusProps = _useFocusRing.focusProps;
-
-  var _useStatusClasses = (0, _hooks.useStatusClasses)(className, {
-    isFocused: isFocusVisible
-  }),
-      classNames = _useStatusClasses.classNames;
-
-  return (0, _react2.jsx)(_forms.Select, (0, _extends2["default"])({
-    ref: dropdownRef,
-    className: classNames,
-    defaultValue: value ? undefined : defaultValue || '',
-    value: value
-  }, others, focusProps), !hasNoneOption && (0, _react2.jsx)("option", {
-    key: "__empty",
-    value: "",
-    disabled: hasDisabledFirstOption
-  }, firstLabel), hasNoneOption && (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)("option", {
-    key: "__empty",
-    value: "",
-    disabled: hasDisabledFirstOption
-  }, noneLabel || firstLabel), (0, _react2.jsx)("option", {
-    key: "__spacer",
-    disabled: true
-  }, "--------")), children);
-});
-
-Dropdown.propTypes = {
-  /** Displays a none option within the dropdown options */
-  hasNoneOption: _propTypes["default"].bool,
-
-  /** Whether the first option is disabled. Useful to prevent reselection of the first option. */
-  hasDisabledFirstOption: _propTypes["default"].bool,
-
-  /** Id of the selected element */
-  id: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
-
-  /** Label for first option. */
-  firstLabel: _propTypes["default"].string,
-
-  /** Label for none option. `firstLabel` prop can also be used. */
-  noneLabel: _propTypes["default"].string,
-
-  /** Value of the select (controlled). */
-  value: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
-
-  /** Default value of the select (uncontrolled). */
-  defaultValue: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
-
-  /** Handler that is called when the element's selection state changes. */
-  onChange: _propTypes["default"].func
-};
-Dropdown.defaultProps = {
-  hasNoneOption: false,
-  firstLabel: 'Select an option'
-};
-Dropdown.displayName = 'Dropdown';
-var _default = Dropdown;
-exports["default"] = _default;

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

@@ -1,80 +0,0 @@
-"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 _testAxe = _interopRequireDefault(require("../../utils/testUtils/testAxe"));
-
-var _testWrapper = require("../../utils/testUtils/testWrapper");
-
-var _ = _interopRequireDefault(require("."));
-
-var _react2 = require("@emotion/react");
-
-var testId = 'test-box';
-var defaultProps = {
-  'data-testid': testId
-};
-
-var getComponent = function getComponent() {
-  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  var children = props.children;
-  return (0, _testWrapper.render)((0, _react2.jsx)(_["default"], (0, _extends2["default"])({}, defaultProps, props), children));
-}; // Need to be added to each test file to test accessibility using axe.
-
-
-(0, _testAxe["default"])(getComponent, {
-  // Dropdown with label provided by DropdownField
-  rules: {
-    'select-name': {
-      enabled: false
-    }
-  }
-});
-test('dropdown renders', function () {
-  getComponent();
-
-  var dropdown = _testWrapper.screen.getByTestId(testId);
-
-  expect(dropdown).toBeInstanceOf(HTMLSelectElement);
-  expect(dropdown).toBeInTheDocument();
-});
-test('hasNoneOption prop renders none option', function () {
-  getComponent({
-    hasNoneOption: true,
-    noneLabel: 'None'
-  });
-  expect((0, _testWrapper.within)(document).getByText('None')).toBeInTheDocument();
-});
-test('default option is first one', function () {
-  getComponent();
-
-  var firstOption = _testWrapper.screen.getByRole('option');
-
-  expect(firstOption.value).toEqual('');
-  expect(firstOption).toHaveAttribute('selected', '');
-  expect(firstOption).toBeEnabled();
-});
-test('default option is disabled when hasDisabledFirstOption is passed in', function () {
-  getComponent({
-    hasDisabledFirstOption: true
-  });
-
-  var firstOption = _testWrapper.screen.getByRole('option');
-
-  expect(firstOption.value).toEqual('');
-  expect(firstOption).toHaveAttribute('selected', '');
-  expect(firstOption).toBeDisabled();
-});
-test('default option is not first one when custom defaultValue is passed in', function () {
-  getComponent({
-    defaultValue: '1'
-  });
-
-  var firstOption = _testWrapper.screen.getByRole('option');
-
-  expect(firstOption).not.toHaveAttribute('selected', '');
-});