@axinom/mosaic-ui 0.33.0-rc.3 → 0.33.0-rc.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axinom/mosaic-ui",
-  "version": "0.33.0-rc.3",
+  "version": "0.33.0-rc.5",
   "description": "UI components for building Axinom Mosaic applications",
   "author": "Axinom",
   "license": "PROPRIETARY",
@@ -32,7 +32,7 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
-    "@axinom/mosaic-core": "^0.4.6-rc.3",
+    "@axinom/mosaic-core": "^0.4.6-rc.5",
     "@faker-js/faker": "^7.4.0",
     "@popperjs/core": "^2.9.2",
     "clsx": "^1.1.0",
@@ -102,5 +102,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "482e74fd7ca0c3cc27879d2a7a6b9a385dec4f08"
+  "gitHead": "4bcb9bfa2545d336f1bb0a98ea881b966456d4f0"
 }

package/src/components/Loaders/ImageLoader/ImageLoader.scss

@@ -1,29 +1,35 @@
 @import '../../../styles/common.scss';
 
 .container {
-  @include boxSizing;
-
-  width: 50px;
-  height: 50px;
   display: grid;
-  grid-template-columns: 1fr;
-  grid-template-rows: 1fr;
-  place-items: center;
-}
+  grid: 1fr / 1fr;
 
-.fallback {
-  background-color: var(--fallback-image-bg-color, $fallback-image-bg-color);
-}
+  .loader {
+    @include boxSizing;
 
-.fallBackImage {
-  height: 50px;
-  width: 50px;
-  align-self: center;
-}
+    width: 50px;
+    height: 50px;
+    display: grid;
+    grid: 1fr / 1fr;
+    place-items: center;
+  }
+
+  .imageContainer {
+    display: grid;
+    grid: 1fr / 1fr;
+    place-items: center;
+
+    .fallback {
+      background-color: var(
+        --fallback-image-bg-color,
+        $fallback-image-bg-color
+      );
+    }
 
-.imageContainer {
-  position: relative;
-  display: flex;
-  height: 100%;
-  width: fit-content;
+    .fallBackImage {
+      height: 50px;
+      width: 50px;
+      align-self: center;
+    }
+  }
 }

package/src/components/Loaders/ImageLoader/ImageLoader.spec.tsx

@@ -99,7 +99,7 @@ describe('ImageLoader', () => {
 
     const loader = wrapper.find(ContentLoader);
     const imgDisplay = wrapper.find('img').prop('style')?.display;
-    const fallbackContainer = wrapper.find('.container');
+    const fallbackContainer = wrapper.find('.container').at(1);
 
     expect(loader.exists()).toBe(false);
     expect(imgDisplay).toBe('none');
@@ -116,7 +116,7 @@ describe('ImageLoader', () => {
 
     const loader = wrapper.find(ContentLoader);
     const images = wrapper.find('img');
-    const fallbackContainer = wrapper.find('.container');
+    const fallbackContainer = wrapper.find('.container').at(1);
 
     expect(loader.exists()).toBe(false);
     expect(images.at(0).prop('style')?.display).toBe('none'); // hidden failed image
@@ -198,12 +198,10 @@ describe('ImageLoader', () => {
   it(`loader dimensions defaults to '50px' by '50px'`, () => {
     const wrapper = shallow(<ImageLoader imgSrc="" />);
 
-    const container = wrapper
-      .find('.container')
-      .prop('style') as React.CSSProperties;
+    const loader = wrapper.find('.loader').prop('style') as React.CSSProperties;
 
-    expect(container.height).toBe('50px');
-    expect(container.width).toBe('50px');
+    expect(loader.height).toBe('50px');
+    expect(loader.width).toBe('50px');
   });
 
   it('sets the height and width of the loader', () => {
@@ -213,11 +211,9 @@ describe('ImageLoader', () => {
       <ImageLoader imgSrc="" height={mockHeight} width={mockWidth} />,
     );
 
-    const container = wrapper
-      .find('.container')
-      .prop('style') as React.CSSProperties;
+    const loader = wrapper.find('.loader').prop('style') as React.CSSProperties;
 
-    expect(container.height).toBe(`${mockHeight}px`);
-    expect(container.width).toBe(`${mockWidth}px`);
+    expect(loader.height).toBe(`${mockHeight}px`);
+    expect(loader.width).toBe(`${mockWidth}px`);
   });
 });

package/src/components/Loaders/ImageLoader/ImageLoader.tsx

@@ -106,9 +106,9 @@ export const ImageLoader: React.FC<ImageLoaderProps> = ({
   }, [imgSrc, onError]);
 
   return (
-    <>
+    <div className={classes.container}>
       {isLoading && (
-        <div className={classes.container} style={customStyles}>
+        <div className={classes.loader} style={customStyles}>
           <ContentLoader
             speed={speed}
             backgroundColor={backgroundColor}
@@ -153,6 +153,6 @@ export const ImageLoader: React.FC<ImageLoaderProps> = ({
           {!isLoading && !fallBack && children}
         </div>
       )}
-    </>
+    </div>
   );
 };