@pingux/astro 2.4.0-alpha.0 → 2.4.0-alpha.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -124,7 +124,7 @@ var Image = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
|
124
124
|
}, props));
|
|
125
125
|
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]);
|
|
126
126
|
var skeletonSx = {
|
|
127
|
-
|
|
127
|
+
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")',
|
|
128
128
|
// eslint-disable-next-line react/prop-types
|
|
129
129
|
width: (sx === null || sx === void 0 ? void 0 : sx.width) || '100%',
|
|
130
130
|
// eslint-disable-next-line react/prop-types
|
|
@@ -134,8 +134,11 @@ var Image = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
|
134
134
|
var Skeleton = function Skeleton(_ref) {
|
|
135
135
|
var children = _ref.children;
|
|
136
136
|
return (0, _react2.jsx)(_index.Box, {
|
|
137
|
+
role: "img",
|
|
137
138
|
sx: skeletonSx,
|
|
138
|
-
"data-testid": "skeleton-image"
|
|
139
|
+
"data-testid": "skeleton-image",
|
|
140
|
+
"aria-busy": isLoading,
|
|
141
|
+
"aria-label": isLoading ? 'Image is loading' : 'Loading of image timed out'
|
|
139
142
|
}, children);
|
|
140
143
|
};
|
|
141
144
|
var themeUiImage = (0, _react2.jsx)(_themeUi.Image, (0, _extends2["default"])({
|
|
@@ -114,7 +114,7 @@ var Image = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
|
114
114
|
}, props));
|
|
115
115
|
var skeletonFrames = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n 0% {\n background-color: ", ";\n }\n 100% {\n background-color: ", ";\n }\n"])), neutral[90], neutral[70]);
|
|
116
116
|
var skeletonSx = {
|
|
117
|
-
|
|
117
|
+
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")',
|
|
118
118
|
// eslint-disable-next-line react/prop-types
|
|
119
119
|
width: (sx === null || sx === void 0 ? void 0 : sx.width) || '100%',
|
|
120
120
|
// eslint-disable-next-line react/prop-types
|
|
@@ -124,8 +124,11 @@ var Image = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
|
124
124
|
var Skeleton = function Skeleton(_ref) {
|
|
125
125
|
var children = _ref.children;
|
|
126
126
|
return ___EmotionJSX(Box, {
|
|
127
|
+
role: "img",
|
|
127
128
|
sx: skeletonSx,
|
|
128
|
-
"data-testid": "skeleton-image"
|
|
129
|
+
"data-testid": "skeleton-image",
|
|
130
|
+
"aria-busy": isLoading,
|
|
131
|
+
"aria-label": isLoading ? 'Image is loading' : 'Loading of image timed out'
|
|
129
132
|
}, children);
|
|
130
133
|
};
|
|
131
134
|
var themeUiImage = ___EmotionJSX(ThemeUIImage, _extends({
|