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

package/lib/components/FileInputField/FileItem.js

@@ -0,0 +1,100 @@
+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
+        };
+    }
+  }, [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/index.js

@@ -36,6 +36,7 @@ export { default as DropdownField } from './components/DropdownField';
 export * from './components/DropdownField';
 export { default as FieldHelperText } from './components/FieldHelperText';
 export * from './components/FieldHelperText';
+export { default as FileInputField } from './components/FileInputField';
 export { default as HelpHint } from './components/HelpHint';
 export * from './components/HelpHint';
 export { default as Icon } from './components/Icon';

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
 

package/lib/styles/variants/boxes.js

@@ -229,6 +229,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,6 +259,7 @@ export default {
   datePicker: datePicker,
   expandableRow: expandableRow,
   inputInContainerSlot: inputInContainerSlot,
+  fileInputFieldWrapper: fileInputFieldWrapper,
   listItem: listItem,
   listBoxSectionTitle: listBoxSectionTitle,
   listViewItem: listViewItem,

package/lib/styles/variants/buttons.js

@@ -452,6 +452,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,6 +489,7 @@ export default {
     '&.is-focused': _objectSpread({}, defaultFocus)
   }),
   expandableRow: expandableRow,
+  fileInputField: fileInputField,
   iconButton: iconButton,
   icon: icon,
   imageUpload: imageUpload,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "1.0.0-alpha.2",
+  "version": "1.0.0-alpha.6",
   "description": "PingUX themeable React component library",
   "author": "uxdev@pingidentity.com",
   "license": "Apache-2.0",
@@ -135,6 +135,7 @@
     "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",