@pingux/astro 1.30.0-alpha.5 → 1.30.0

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

@@ -93,8 +93,8 @@ var Image = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
 
   var _useState5 = (0, _react.useState)(false),
       _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
-      hasTimedOut = _useState6[0],
-      setHasTimedOut = _useState6[1]; // we need to use useRef here with useState so it will be updated in setTimeout and onload
+      shouldShowFallback = _useState6[0],
+      setShouldShowFallback = _useState6[1]; // we need to use useRef here with useState so it will be updated in setTimeout and onload
   // https://github.com/facebook/react/issues/14010#issuecomment-433788147
 
 
@@ -106,7 +106,7 @@ var Image = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   };
 
   var setImgSrc = function setImgSrc() {
-    if (!loadedSuccessfully && !(isLoadingRef !== null && isLoadingRef !== void 0 && isLoadingRef.current) || hasTimedOut) {
+    if (!loadedSuccessfully && !(isLoadingRef !== null && isLoadingRef !== void 0 && isLoadingRef.current) || shouldShowFallback) {
       return fallbackImage;
     }
 
@@ -115,7 +115,7 @@ var Image = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
 
   var imgSrc = (0, _react.useMemo)(function () {
     return setImgSrc();
-  }, [src, isLoading, hasTimedOut]);
+  }, [src, isLoading, shouldShowFallback]);
   var imgRef = (0, _react.useRef)();
   /* istanbul ignore next */
 
@@ -146,12 +146,13 @@ var Image = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
 
   var onImageError = function onImageError() {
     setIsLoadingWithRef(false);
+    setShouldShowFallback(true);
   };
 
   var onFallbackTimeout = function onFallbackTimeout() {
     if (isLoadingRef !== null && isLoadingRef !== void 0 && isLoadingRef.current) {
       setIsLoadingWithRef(false);
-      setHasTimedOut(true);
+      setShouldShowFallback(true);
     }
   };
 
@@ -179,9 +180,9 @@ var Image = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   };
 
   var themeUiImage = (0, _react2.jsx)(_themeUi.Image, (0, _extends2["default"])({
+    alt: alt,
     className: classNames,
     ref: imgRef,
-    alt: alt,
     role: "img",
     src: imgSrc,
     sx: sx

package/lib/cjs/styles/variants/codeView.js

@@ -155,11 +155,12 @@ var wrapper = {
 var lineNo = {
   display: 'table-cell',
   userSelect: 'none',
-  p: 5,
+  px: 5,
   m: '0 10px 0 0',
   bg: 'accent.30',
   minWidth: 26,
-  color: 'white'
+  color: 'white',
+  lineHeight: '20px'
 };
 var _default = {
   theme: theme,

package/lib/components/Image/Image.js

@@ -57,8 +57,8 @@ var Image = /*#__PURE__*/forwardRef(function (props, ref) {
 
   var _useState5 = useState(false),
       _useState6 = _slicedToArray(_useState5, 2),
-      hasTimedOut = _useState6[0],
-      setHasTimedOut = _useState6[1]; // we need to use useRef here with useState so it will be updated in setTimeout and onload
+      shouldShowFallback = _useState6[0],
+      setShouldShowFallback = _useState6[1]; // we need to use useRef here with useState so it will be updated in setTimeout and onload
   // https://github.com/facebook/react/issues/14010#issuecomment-433788147
 
 
@@ -70,7 +70,7 @@ var Image = /*#__PURE__*/forwardRef(function (props, ref) {
   };
 
   var setImgSrc = function setImgSrc() {
-    if (!loadedSuccessfully && !(isLoadingRef !== null && isLoadingRef !== void 0 && isLoadingRef.current) || hasTimedOut) {
+    if (!loadedSuccessfully && !(isLoadingRef !== null && isLoadingRef !== void 0 && isLoadingRef.current) || shouldShowFallback) {
       return fallbackImage;
     }
 
@@ -79,7 +79,7 @@ var Image = /*#__PURE__*/forwardRef(function (props, ref) {
 
   var imgSrc = useMemo(function () {
     return setImgSrc();
-  }, [src, isLoading, hasTimedOut]);
+  }, [src, isLoading, shouldShowFallback]);
   var imgRef = useRef();
   /* istanbul ignore next */
 
@@ -110,12 +110,13 @@ var Image = /*#__PURE__*/forwardRef(function (props, ref) {
 
   var onImageError = function onImageError() {
     setIsLoadingWithRef(false);
+    setShouldShowFallback(true);
   };
 
   var onFallbackTimeout = function onFallbackTimeout() {
     if (isLoadingRef !== null && isLoadingRef !== void 0 && isLoadingRef.current) {
       setIsLoadingWithRef(false);
-      setHasTimedOut(true);
+      setShouldShowFallback(true);
     }
   };
 
@@ -143,9 +144,9 @@ var Image = /*#__PURE__*/forwardRef(function (props, ref) {
   };
 
   var themeUiImage = ___EmotionJSX(ThemeUIImage, _extends({
+    alt: alt,
     className: classNames,
     ref: imgRef,
-    alt: alt,
     role: "img",
     src: imgSrc,
     sx: sx

package/lib/styles/variants/codeView.js

@@ -146,11 +146,12 @@ var wrapper = {
 var lineNo = {
   display: 'table-cell',
   userSelect: 'none',
-  p: 5,
+  px: 5,
   m: '0 10px 0 0',
   bg: 'accent.30',
   minWidth: 26,
-  color: 'white'
+  color: 'white',
+  lineHeight: '20px'
 };
 export default {
   theme: theme,

package/package.json

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