@pushwoosh/dumb-components 2.9.7 → 2.9.8

package/Skeleton/__tests__/Skeleton.test.d.ts

@@ -0,0 +1 @@
+export {};

package/Skeleton/__tests__/Skeleton.test.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import { CircularSkeleton, RectangularSkeleton } from '../styles';
+describe('RectangularSkeleton', () => {
+  it('keeps style props off the DOM and still paints them', () => {
+    render(_jsx(RectangularSkeleton, {
+      "data-testid": "rect",
+      width: 120,
+      height: 16,
+      color: "red",
+      borderRadius: 4
+    }));
+    const node = screen.getByTestId('rect');
+    expect(node).not.toHaveAttribute('width');
+    expect(node).not.toHaveAttribute('height');
+    expect(node).not.toHaveAttribute('color');
+    expect(node).not.toHaveAttribute('borderradius');
+    expect(getComputedStyle(node)).toMatchObject({
+      width: '120px',
+      height: '16px',
+      backgroundColor: 'rgb(255, 0, 0)',
+      borderRadius: '4px'
+    });
+  });
+  it('still forwards regular attributes', () => {
+    render(_jsx(RectangularSkeleton, {
+      "data-testid": "rect",
+      title: "loading",
+      "aria-busy": "true",
+      width: 1,
+      height: 1
+    }));
+    const node = screen.getByTestId('rect');
+    expect(node).toHaveAttribute('title', 'loading');
+    expect(node).toHaveAttribute('aria-busy', 'true');
+  });
+});
+describe('CircularSkeleton', () => {
+  it('keeps style props off the DOM and still paints them', () => {
+    render(_jsx(CircularSkeleton, {
+      "data-testid": "circle",
+      "aria-label": "avatar",
+      diameter: 32,
+      color: "red"
+    }));
+    const node = screen.getByTestId('circle');
+    expect(node).not.toHaveAttribute('diameter');
+    expect(node).not.toHaveAttribute('color');
+    expect(node).toHaveAttribute('aria-label', 'avatar');
+    expect(getComputedStyle(node)).toMatchObject({
+      width: '32px',
+      height: '32px',
+      backgroundColor: 'rgb(255, 0, 0)'
+    });
+  });
+});

package/Skeleton/styles.js

@@ -15,6 +15,8 @@ const skeletonCommonCss = css(["background-color:", ";animation:", " 1.5s ease-i
 }) => !color && accentCycleCss);
 /** Pulsing rectangular loading placeholder of a fixed `width`/`height`. */
 export const RectangularSkeleton = styled.div.withConfig({
+  shouldForwardProp: prop => !['width', 'height', 'color', 'borderRadius'].includes(prop)
+}).withConfig({
   displayName: "RectangularSkeleton",
   componentId: "sc-mdyfd6-0"
 })(["width:", ";height:", ";", " ", ""], ({
@@ -24,6 +26,8 @@ export const RectangularSkeleton = styled.div.withConfig({
 }) => toCssValue(height), skeletonCommonCss, borderRadiusCss);
 /** Pulsing circular loading placeholder of a given `diameter` (e.g. for avatars). */
 export const CircularSkeleton = styled.div.withConfig({
+  shouldForwardProp: prop => !['diameter', 'color'].includes(prop)
+}).withConfig({
   displayName: "CircularSkeleton",
   componentId: "sc-mdyfd6-1"
 })(["width:", ";height:", ";border-radius:100%;", ""], ({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pushwoosh/dumb-components",
-  "version": "2.9.7",
+  "version": "2.9.8",
   "description": "React components to build Pushwoosh products",
   "main": "index.js",
   "module": "index.js",