@pingux/astro 2.20.0-alpha.6 → 2.20.0-alpha.8

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

@@ -34,7 +34,7 @@ var _Loader = _interopRequireDefault(require("../Loader"));
 var _ListViewContext = require("./ListViewContext");
 var _ListViewItem = _interopRequireDefault(require("./ListViewItem"));
 var _react2 = require("@emotion/react");
-var _excluded = ["disabledKeys", "isHoverable", "loadingState", "onLoadMore", "onSelectionChange", "selectedKeys", "selectionMode", "selectionStyle"];
+var _excluded = ["disabledKeys", "isHoverable", "loadingState", "onLoadMore", "onSelectionChange", "selectedKeys", "selectionMode", "selectionStyle", "items"];
 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; }
 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; }
@@ -76,6 +76,7 @@ var ListView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     selectedKeys = props.selectedKeys,
     selectionMode = props.selectionMode,
     selectionStyle = props.selectionStyle,
+    items = props.items,
     others = (0, _objectWithoutProperties2["default"])(props, _excluded);
   var _useState = (0, _react.useState)(null),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
@@ -119,6 +120,9 @@ var ListView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   layout.isLoading = isLoading;
   var focusedKey = selectionManager.focusedKey;
   delete gridProps.onMouseDown;
+  if (!items) {
+    delete others['aria-label'];
+  }
   var onFocus = function onFocus(e) {
     gridProps.onFocus(e);
     if (others.onFocus) {
@@ -134,7 +138,9 @@ var ListView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     value: {
       state: state
     }
-  }, (0, _react2.jsx)(_virtualizer.Virtualizer, (0, _extends2["default"])({}, gridProps, {
+  }, (0, _react2.jsx)(_virtualizer.Virtualizer, (0, _extends2["default"])({}, items ? gridProps : {
+    role: 'presentation'
+  }, {
     onLoadMore: onLoadMore,
     ref: listViewRef,
     focusedKey: focusedKey,

package/lib/cjs/recipes/CountryPicker.stories.js

@@ -14,12 +14,15 @@ var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-sta
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _countriesList = require("countries-list");
+var _storybookAddonDesigns = require("storybook-addon-designs");
 var _index = require("../index");
+var _figmaLinks = require("../utils/designUtils/figmaLinks");
 var _react2 = require("@emotion/react");
 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 _default = {
-  title: 'Recipes/Country Picker'
+  title: 'Recipes/Country Picker',
+  decorators: [_storybookAddonDesigns.withDesign]
 };
 exports["default"] = _default;
 var validatePhoneNumber = function validatePhoneNumber(str) {
@@ -132,4 +135,10 @@ var Default = function Default() {
     value: phoneNumber
   })));
 };
-exports.Default = Default;
+exports.Default = Default;
+Default.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.countryPicker["default"]
+  }
+};

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

@@ -50,6 +50,9 @@ var FIGMA_LINKS = {
   copyText: {
     "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=218-1442&t=8Wwd3tIBh3GEjCJB-0'
   },
+  countryPicker: {
+    "default": 'https://www.figma.com/file/Oa6VYtJcUJzEJuuRp0p4ls/Astro?type=design&node-id=4568-7532&mode=design&t=eSfQYHRFNPf37J4C-0'
+  },
   helpHint: {
     "default": 'https://www.figma.com/file/Oa6VYtJcUJzEJuuRp0p4ls/Astro?type=design&node-id=0%3A4534&t=We3h7LaaFJQnxdSy-1',
     withLink: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=28958%3A40081&mode=design&t=WmSYPx1hR8kxFiXf-1'

package/lib/components/ListView/ListView.js

@@ -10,7 +10,7 @@ import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["disabledKeys", "isHoverable", "loadingState", "onLoadMore", "onSelectionChange", "selectedKeys", "selectionMode", "selectionStyle"];
+var _excluded = ["disabledKeys", "isHoverable", "loadingState", "onLoadMore", "onSelectionChange", "selectedKeys", "selectionMode", "selectionStyle", "items"];
 import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
 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; }
@@ -63,6 +63,7 @@ var ListView = /*#__PURE__*/forwardRef(function (props, ref) {
     selectedKeys = props.selectedKeys,
     selectionMode = props.selectionMode,
     selectionStyle = props.selectionStyle,
+    items = props.items,
     others = _objectWithoutProperties(props, _excluded);
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
@@ -106,6 +107,9 @@ var ListView = /*#__PURE__*/forwardRef(function (props, ref) {
   layout.isLoading = isLoading;
   var focusedKey = selectionManager.focusedKey;
   delete gridProps.onMouseDown;
+  if (!items) {
+    delete others['aria-label'];
+  }
   var onFocus = function onFocus(e) {
     gridProps.onFocus(e);
     if (others.onFocus) {
@@ -121,7 +125,9 @@ var ListView = /*#__PURE__*/forwardRef(function (props, ref) {
     value: {
       state: state
     }
-  }, ___EmotionJSX(Virtualizer, _extends({}, gridProps, {
+  }, ___EmotionJSX(Virtualizer, _extends({}, items ? gridProps : {
+    role: 'presentation'
+  }, {
     onLoadMore: onLoadMore,
     ref: listViewRef,
     focusedKey: focusedKey,

package/lib/recipes/CountryPicker.stories.js

@@ -3,10 +3,13 @@ import _Object$entries from "@babel/runtime-corejs3/core-js-stable/object/entrie
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import React, { useState } from 'react';
 import { countries as countriesObj } from 'countries-list';
+import { withDesign } from 'storybook-addon-designs';
 import { Box, ComboBoxField, Input, Item } from '../index';
+import { FIGMA_LINKS } from '../utils/designUtils/figmaLinks';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
-  title: 'Recipes/Country Picker'
+  title: 'Recipes/Country Picker',
+  decorators: [withDesign]
 };
 var validatePhoneNumber = function validatePhoneNumber(str) {
   var reg = /^$|^[\d\-(\d)\s.]+$|^\+/g;
@@ -117,4 +120,10 @@ export var Default = function Default() {
     onChange: onPhoneNumberValueChange,
     value: phoneNumber
   })));
+};
+Default.parameters = {
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.countryPicker["default"]
+  }
 };

package/lib/utils/designUtils/figmaLinks.js

@@ -43,6 +43,9 @@ export var FIGMA_LINKS = {
   copyText: {
     "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=218-1442&t=8Wwd3tIBh3GEjCJB-0'
   },
+  countryPicker: {
+    "default": 'https://www.figma.com/file/Oa6VYtJcUJzEJuuRp0p4ls/Astro?type=design&node-id=4568-7532&mode=design&t=eSfQYHRFNPf37J4C-0'
+  },
   helpHint: {
     "default": 'https://www.figma.com/file/Oa6VYtJcUJzEJuuRp0p4ls/Astro?type=design&node-id=0%3A4534&t=We3h7LaaFJQnxdSy-1',
     withLink: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=28958%3A40081&mode=design&t=WmSYPx1hR8kxFiXf-1'

package/package.json

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