@pingux/astro 2.104.0-alpha.4 → 2.104.0-alpha.6

package/lib/cjs/components/ImageUploadField/ImageUploadFieldBase.js

@@ -15,6 +15,8 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
@@ -50,9 +52,11 @@ var ImageUploadFieldBase = /*#__PURE__*/(0, _react.forwardRef)(function (props,
   var labelRef = (0, _react.useRef)();
   var _useVisuallyHidden = (0, _reactAria.useVisuallyHidden)(),
     visuallyHiddenProps = _useVisuallyHidden.visuallyHiddenProps;
-  var acceptableInputTypes = (0, _react.useMemo)(function () {
-    return "".concat(fileTypes === null || fileTypes === void 0 ? void 0 : fileTypes.join('/*, '), "/*");
-  }, [fileTypes]);
+  var getAcceptableInputTypes = function getAcceptableInputTypes() {
+    return (0, _map["default"])(fileTypes).call(fileTypes, function (type) {
+      return (0, _includes["default"])(type).call(type, '/') ? type : "".concat(type, "/*");
+    }).join(', ');
+  };
   return (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
     variant: "forms.input.wrapper"
   }, fieldContainerProps), (0, _react2.jsx)(_.Label, (0, _extends2["default"])({}, fieldLabelProps, {
@@ -63,7 +67,7 @@ var ImageUploadFieldBase = /*#__PURE__*/(0, _react.forwardRef)(function (props,
     isOpen: isMenuOpen,
     onOpenChange: handleOpenMenuChange
   }, popoverMenuProps), children), (0, _react2.jsx)(_.Box, fieldControlWrapperProps, (0, _react2.jsx)(_.Input, (0, _extends2["default"])({}, fieldControlInputProps, visuallyHiddenProps, {
-    accept: acceptableInputTypes,
+    accept: getAcceptableInputTypes(),
     "data-testid": "image-upload-input",
     onChange: handleInputChange,
     ref: inputRef,

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

@@ -15,6 +15,7 @@ var _AccountIcon = _interopRequireDefault(require("@pingux/mdi-react/AccountIcon
 var _FormSelectIcon = _interopRequireDefault(require("@pingux/mdi-react/FormSelectIcon"));
 var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
 var _ = require("../..");
+var _figmaLinks = require("../../utils/designUtils/figmaLinks");
 var _images = require("../../utils/devUtils/constants/images");
 var _chartData = require("./controls/chart/chartData");
 var _ListViewItem = _interopRequireDefault(require("./ListViewItem.mdx"));
@@ -59,6 +60,12 @@ var Default = function Default() {
   }));
 };
 exports.Default = Default;
+Default.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.listViewItem["default"]
+  }
+};
 var WithSubtext = function WithSubtext() {
   return (0, _react2.jsx)(Wrapper, null, (0, _react2.jsx)(_.ListViewItem, {
     data: {
@@ -69,6 +76,12 @@ var WithSubtext = function WithSubtext() {
   }));
 };
 exports.WithSubtext = WithSubtext;
+WithSubtext.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.listViewItem.withSubText
+  }
+};
 var WithImage = function WithImage() {
   return (0, _react2.jsx)(Wrapper, null, (0, _react2.jsx)(_.ListViewItem, {
     data: {
@@ -83,13 +96,18 @@ var WithImage = function WithImage() {
   }));
 };
 exports.WithImage = WithImage;
+WithImage.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.listViewItem.withImage
+  }
+};
 var WithControls = function WithControls() {
   return (0, _react2.jsx)(Wrapper, null, (0, _react2.jsx)(_.ListViewItem, {
     data: {
       icon: _FormSelectIcon["default"],
       text: 'Fons Vernall'
-    },
-    "aria-label": "Fons Vernall"
+    }
   }, (0, _react2.jsx)(_.ListViewItemEditButton, {
     "aria-label": "edit-icon"
   }), (0, _react2.jsx)(_.ListViewItemSwitchField, {
@@ -103,6 +121,12 @@ var WithControls = function WithControls() {
   }, "Delete user"))));
 };
 exports.WithControls = WithControls;
+WithControls.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.listViewItem.withControls
+  }
+};
 var WithRightOfDataSlot = function WithRightOfDataSlot() {
   var renderRightOfData = (0, _react2.jsx)(_.Box, {
     isRow: true,
@@ -132,6 +156,12 @@ var WithRightOfDataSlot = function WithRightOfDataSlot() {
   }, "Delete user"))));
 };
 exports.WithRightOfDataSlot = WithRightOfDataSlot;
+WithRightOfDataSlot.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.listViewItem.withRightOfDataSlot
+  }
+};
 var WithLeftOfDataSlot = function WithLeftOfDataSlot() {
   var renderLeftOfData = (0, _react2.jsx)(_.Box, {
     mx: "sm",
@@ -161,6 +191,12 @@ var WithLeftOfDataSlot = function WithLeftOfDataSlot() {
   }, "Delete user"))));
 };
 exports.WithLeftOfDataSlot = WithLeftOfDataSlot;
+WithLeftOfDataSlot.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.listViewItem.withLeftOfDataSlot
+  }
+};
 var WithCharts = function WithCharts() {
   var containerRef = (0, _react.useRef)();
   return (0, _react2.jsx)(Wrapper, null, (0, _react2.jsx)(_.ListViewItem, {
@@ -190,6 +226,12 @@ var WithCharts = function WithCharts() {
   }, "Delete user"))));
 };
 exports.WithCharts = WithCharts;
+WithCharts.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.listViewItem.withCharts
+  }
+};
 var WithExtraLongText = function WithExtraLongText() {
   var renderRightOfData = (0, _react2.jsx)(_.Box, {
     isRow: true,
@@ -219,4 +261,10 @@ var WithExtraLongText = function WithExtraLongText() {
     key: "delete"
   }, "Delete user"))));
 };
-exports.WithExtraLongText = WithExtraLongText;
+exports.WithExtraLongText = WithExtraLongText;
+WithExtraLongText.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.listViewItem.withExtraLongText
+  }
+};

package/lib/cjs/components/ListViewItem/controls/ListViewItemEditButton.js

@@ -24,10 +24,11 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * to ListItemEditButton.
 */var ListViewItemEditButton = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   return (0, _react2.jsx)(_.Box, {
-    ref: ref
+    ref: ref,
+    ml: "sm"
   }, (0, _react2.jsx)(_.IconButton, props, (0, _react2.jsx)(_.Icon, {
     icon: _CreateIcon["default"],
-    size: "sm"
+    size: "md"
   })));
 });
 ListViewItemEditButton.propTypes = _iconButtonAttributes.iconButtonPropTypes;

package/lib/cjs/utils/designUtils/figmaLinks.d.ts

@@ -209,4 +209,14 @@ export declare const FIGMA_LINKS: {
     editButton: {
         default: string;
     };
+    listViewItem: {
+        default: string;
+        withSubText: string;
+        withImage: string;
+        withControls: string;
+        withRightOfDataSlot: string;
+        withLeftOfDataSlot: string;
+        withCharts: string;
+        withExtraLongText: string;
+    };
 };

package/lib/cjs/utils/designUtils/figmaLinks.js

@@ -215,6 +215,16 @@ var FIGMA_LINKS = {
   },
   editButton: {
     "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=58623-6267&t=pXTSE3YlGbL0X49N-4'
+  },
+  listViewItem: {
+    "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=44688-39754&t=r7CoWppWfQQ6G2t8-4',
+    withSubText: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=44688-39756&t=r7CoWppWfQQ6G2t8-4',
+    withImage: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=44691-39794&t=r7CoWppWfQQ6G2t8-4',
+    withControls: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=44691-39816&t=r7CoWppWfQQ6G2t8-4',
+    withRightOfDataSlot: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=44693-39854&t=r7CoWppWfQQ6G2t8-4',
+    withLeftOfDataSlot: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=44693-39909&t=r7CoWppWfQQ6G2t8-4',
+    withCharts: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=44694-39944&t=r7CoWppWfQQ6G2t8-4',
+    withExtraLongText: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=44694-40069&t=r7CoWppWfQQ6G2t8-4'
   }
 };
 exports.FIGMA_LINKS = FIGMA_LINKS;

package/lib/components/ImageUploadField/ImageUploadFieldBase.js

@@ -8,9 +8,11 @@ import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/obje
 import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
 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, useMemo, useRef } from 'react';
+import React, { forwardRef, useRef } from 'react';
 import { useVisuallyHidden } from 'react-aria';
 import omit from 'lodash/omit';
 import PropTypes from 'prop-types';
@@ -39,9 +41,11 @@ var ImageUploadFieldBase = /*#__PURE__*/forwardRef(function (props, inputRef) {
   var labelRef = useRef();
   var _useVisuallyHidden = useVisuallyHidden(),
     visuallyHiddenProps = _useVisuallyHidden.visuallyHiddenProps;
-  var acceptableInputTypes = useMemo(function () {
-    return "".concat(fileTypes === null || fileTypes === void 0 ? void 0 : fileTypes.join('/*, '), "/*");
-  }, [fileTypes]);
+  var getAcceptableInputTypes = function getAcceptableInputTypes() {
+    return _mapInstanceProperty(fileTypes).call(fileTypes, function (type) {
+      return _includesInstanceProperty(type).call(type, '/') ? type : "".concat(type, "/*");
+    }).join(', ');
+  };
   return ___EmotionJSX(Box, _extends({
     variant: "forms.input.wrapper"
   }, fieldContainerProps), ___EmotionJSX(Label, _extends({}, fieldLabelProps, {
@@ -52,7 +56,7 @@ var ImageUploadFieldBase = /*#__PURE__*/forwardRef(function (props, inputRef) {
     isOpen: isMenuOpen,
     onOpenChange: handleOpenMenuChange
   }, popoverMenuProps), children), ___EmotionJSX(Box, fieldControlWrapperProps, ___EmotionJSX(Input, _extends({}, fieldControlInputProps, visuallyHiddenProps, {
-    accept: acceptableInputTypes,
+    accept: getAcceptableInputTypes(),
     "data-testid": "image-upload-input",
     onChange: handleInputChange,
     ref: inputRef,

package/lib/components/ListViewItem/ListViewItem.stories.js

@@ -4,6 +4,7 @@ import AccountIcon from '@pingux/mdi-react/AccountIcon';
 import FormSelectIcon from '@pingux/mdi-react/FormSelectIcon';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import { Badge, Box, ListViewItem, ListViewItemChart, ListViewItemEditButton, ListViewItemMenu, ListViewItemSwitchField, Separator, Text } from '../..';
+import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks';
 import { pingImg } from '../../utils/devUtils/constants/images';
 import { chartData } from './controls/chart/chartData';
 import ListViewItemReadMe from './ListViewItem.mdx';
@@ -44,6 +45,12 @@ export var Default = function Default() {
     }
   }));
 };
+Default.parameters = {
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.listViewItem["default"]
+  }
+};
 export var WithSubtext = function WithSubtext() {
   return ___EmotionJSX(Wrapper, null, ___EmotionJSX(ListViewItem, {
     data: {
@@ -53,6 +60,12 @@ export var WithSubtext = function WithSubtext() {
     }
   }));
 };
+WithSubtext.parameters = {
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.listViewItem.withSubText
+  }
+};
 export var WithImage = function WithImage() {
   return ___EmotionJSX(Wrapper, null, ___EmotionJSX(ListViewItem, {
     data: {
@@ -66,13 +79,18 @@ export var WithImage = function WithImage() {
     }
   }));
 };
+WithImage.parameters = {
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.listViewItem.withImage
+  }
+};
 export var WithControls = function WithControls() {
   return ___EmotionJSX(Wrapper, null, ___EmotionJSX(ListViewItem, {
     data: {
       icon: FormSelectIcon,
       text: 'Fons Vernall'
-    },
-    "aria-label": "Fons Vernall"
+    }
   }, ___EmotionJSX(ListViewItemEditButton, {
     "aria-label": "edit-icon"
   }), ___EmotionJSX(ListViewItemSwitchField, {
@@ -85,6 +103,12 @@ export var WithControls = function WithControls() {
     key: "delete"
   }, "Delete user"))));
 };
+WithControls.parameters = {
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.listViewItem.withControls
+  }
+};
 export var WithRightOfDataSlot = function WithRightOfDataSlot() {
   var renderRightOfData = ___EmotionJSX(Box, {
     isRow: true,
@@ -113,6 +137,12 @@ export var WithRightOfDataSlot = function WithRightOfDataSlot() {
     key: "delete"
   }, "Delete user"))));
 };
+WithRightOfDataSlot.parameters = {
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.listViewItem.withRightOfDataSlot
+  }
+};
 export var WithLeftOfDataSlot = function WithLeftOfDataSlot() {
   var renderLeftOfData = ___EmotionJSX(Box, {
     mx: "sm",
@@ -141,6 +171,12 @@ export var WithLeftOfDataSlot = function WithLeftOfDataSlot() {
     key: "delete"
   }, "Delete user"))));
 };
+WithLeftOfDataSlot.parameters = {
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.listViewItem.withLeftOfDataSlot
+  }
+};
 export var WithCharts = function WithCharts() {
   var containerRef = useRef();
   return ___EmotionJSX(Wrapper, null, ___EmotionJSX(ListViewItem, {
@@ -169,6 +205,12 @@ export var WithCharts = function WithCharts() {
     key: "delete"
   }, "Delete user"))));
 };
+WithCharts.parameters = {
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.listViewItem.withCharts
+  }
+};
 export var WithExtraLongText = function WithExtraLongText() {
   var renderRightOfData = ___EmotionJSX(Box, {
     isRow: true,
@@ -197,4 +239,10 @@ export var WithExtraLongText = function WithExtraLongText() {
   }, "Disable user"), ___EmotionJSX(Item, {
     key: "delete"
   }, "Delete user"))));
+};
+WithExtraLongText.parameters = {
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.listViewItem.withExtraLongText
+  }
 };

package/lib/components/ListViewItem/controls/ListViewItemEditButton.js

@@ -13,10 +13,11 @@ import { iconButtonPropTypes } from '../../IconButton/iconButtonAttributes';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var ListViewItemEditButton = /*#__PURE__*/forwardRef(function (props, ref) {
   return ___EmotionJSX(Box, {
-    ref: ref
+    ref: ref,
+    ml: "sm"
   }, ___EmotionJSX(IconButton, props, ___EmotionJSX(Icon, {
     icon: CreateIcon,
-    size: "sm"
+    size: "md"
   })));
 });
 ListViewItemEditButton.propTypes = iconButtonPropTypes;

package/lib/utils/designUtils/figmaLinks.js

@@ -208,5 +208,15 @@ export var FIGMA_LINKS = {
   },
   editButton: {
     "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=58623-6267&t=pXTSE3YlGbL0X49N-4'
+  },
+  listViewItem: {
+    "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=44688-39754&t=r7CoWppWfQQ6G2t8-4',
+    withSubText: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=44688-39756&t=r7CoWppWfQQ6G2t8-4',
+    withImage: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=44691-39794&t=r7CoWppWfQQ6G2t8-4',
+    withControls: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=44691-39816&t=r7CoWppWfQQ6G2t8-4',
+    withRightOfDataSlot: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=44693-39854&t=r7CoWppWfQQ6G2t8-4',
+    withLeftOfDataSlot: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=44693-39909&t=r7CoWppWfQQ6G2t8-4',
+    withCharts: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=44694-39944&t=r7CoWppWfQQ6G2t8-4',
+    withExtraLongText: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=44694-40069&t=r7CoWppWfQQ6G2t8-4'
   }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.104.0-alpha.4",
+  "version": "2.104.0-alpha.6",
   "description": "React component library for Ping Identity's design system",
   "repository": {
     "type": "git",