@pingux/astro 2.4.0-alpha.0 → 2.4.0-alpha.2

package/lib/cjs/components/Image/Image.js

@@ -124,7 +124,7 @@ var Image = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }, props));
   var skeletonFrames = (0, _react2.keyframes)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  0% {\n    background-color: ", ";\n  }\n  100% {\n    background-color: ", ";\n  }\n"])), _colors.neutral[90], _colors.neutral[70]);
   var skeletonSx = {
-    backgroundColor: _colors.neutral[90],
+    backgroundImage: !isLoading && 'url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'150\' height=\'150\'%3E%3Crect x=\'0\' y=\'0\' width=\'150\' height=\'150\' fill=\'%23e4e6e9\' /%3E%3C/svg%3E")',
     // eslint-disable-next-line react/prop-types
     width: (sx === null || sx === void 0 ? void 0 : sx.width) || '100%',
     // eslint-disable-next-line react/prop-types
@@ -134,8 +134,11 @@ var Image = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var Skeleton = function Skeleton(_ref) {
     var children = _ref.children;
     return (0, _react2.jsx)(_index.Box, {
+      role: "img",
       sx: skeletonSx,
-      "data-testid": "skeleton-image"
+      "data-testid": "skeleton-image",
+      "aria-busy": isLoading,
+      "aria-label": isLoading ? 'Image is loading' : 'Loading of image timed out'
     }, children);
   };
   var themeUiImage = (0, _react2.jsx)(_themeUi.Image, (0, _extends2["default"])({

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

@@ -8,12 +8,11 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.WithTooltips = exports.WithList = exports.WithIcon = exports.Uncontrolled = exports.TabPanelProps = exports.DisabledSingleTab = exports.DisabledAllTabs = exports.CustomTabLine = exports.Controlled = exports.ContentSlots = exports.Centered = void 0;
+exports["default"] = exports.WithTooltips = exports.WithList = exports.Uncontrolled = exports.TabPanelProps = exports.DisabledSingleTab = exports.DisabledAllTabs = exports.CustomTabLine = exports.Controlled = exports.ContentSlots = exports.Centered = void 0;
 var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
-var _GlobeModelIcon = _interopRequireDefault(require("mdi-react/GlobeModelIcon"));
 var _LockIcon = _interopRequireDefault(require("mdi-react/LockIcon"));
 var _index = require("../../index");
 var _react2 = require("@emotion/react");
@@ -97,23 +96,6 @@ var Controlled = function Controlled() {
   });
 };
 exports.Controlled = Controlled;
-var WithIcon = function WithIcon() {
-  return (0, _react2.jsx)(_index.Tabs, {
-    items: tabs
-  }, function (item) {
-    return (0, _react2.jsx)(_index.Tab, {
-      key: item.name,
-      title: item.name,
-      icon: (0, _react2.jsx)(_index.Icon, {
-        icon: _GlobeModelIcon["default"],
-        size: 20,
-        color: "active",
-        mb: 10
-      })
-    }, item.children);
-  });
-};
-exports.WithIcon = WithIcon;
 var WithTooltips = function WithTooltips() {
   return (0, _react2.jsx)(_index.Tabs, {
     mode: "tooltip",

package/lib/components/Image/Image.js

@@ -114,7 +114,7 @@ var Image = /*#__PURE__*/forwardRef(function (props, ref) {
   }, props));
   var skeletonFrames = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  0% {\n    background-color: ", ";\n  }\n  100% {\n    background-color: ", ";\n  }\n"])), neutral[90], neutral[70]);
   var skeletonSx = {
-    backgroundColor: neutral[90],
+    backgroundImage: !isLoading && 'url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'150\' height=\'150\'%3E%3Crect x=\'0\' y=\'0\' width=\'150\' height=\'150\' fill=\'%23e4e6e9\' /%3E%3C/svg%3E")',
     // eslint-disable-next-line react/prop-types
     width: (sx === null || sx === void 0 ? void 0 : sx.width) || '100%',
     // eslint-disable-next-line react/prop-types
@@ -124,8 +124,11 @@ var Image = /*#__PURE__*/forwardRef(function (props, ref) {
   var Skeleton = function Skeleton(_ref) {
     var children = _ref.children;
     return ___EmotionJSX(Box, {
+      role: "img",
       sx: skeletonSx,
-      "data-testid": "skeleton-image"
+      "data-testid": "skeleton-image",
+      "aria-busy": isLoading,
+      "aria-label": isLoading ? 'Image is loading' : 'Loading of image timed out'
     }, children);
   };
   var themeUiImage = ___EmotionJSX(ThemeUIImage, _extends({

package/lib/components/Tabs/Tabs.stories.js

@@ -2,7 +2,6 @@ import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import React, { useState } from 'react';
-import Earth from 'mdi-react/GlobeModelIcon';
 import LockIcon from 'mdi-react/LockIcon';
 import { Badge, Icon, Tab, Tabs, Text } from '../../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -81,22 +80,6 @@ export var Controlled = function Controlled() {
     }, item.children);
   });
 };
-export var WithIcon = function WithIcon() {
-  return ___EmotionJSX(Tabs, {
-    items: tabs
-  }, function (item) {
-    return ___EmotionJSX(Tab, {
-      key: item.name,
-      title: item.name,
-      icon: ___EmotionJSX(Icon, {
-        icon: Earth,
-        size: 20,
-        color: "active",
-        mb: 10
-      })
-    }, item.children);
-  });
-};
 export var WithTooltips = function WithTooltips() {
   return ___EmotionJSX(Tabs, {
     mode: "tooltip",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.4.0-alpha.0",
+  "version": "2.4.0-alpha.2",
   "description": "PingUX themeable React component library",
   "repository": {
     "type": "git",