@pushwoosh/dumb-components 2.9.6 → 2.9.8

package/Button/__tests__/Button.test.d.ts

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

package/Button/__tests__/Button.test.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import { Button } from '../Button';
+describe('Button disabled colors', () => {
+  it('keeps white text on the red background for a disabled danger button', () => {
+    render(_jsx(Button, {
+      color: "danger",
+      isDisabled: true,
+      children: "Delete"
+    }));
+    const style = getComputedStyle(screen.getByRole('button'));
+    expect(style.color).toContain('--danger-shape-base-color');
+    expect(style.backgroundColor).toContain('--danger-shape-base-bg-color');
+  });
+  it('paints background, not text color, behind a disabled link-button', () => {
+    render(_jsx(Button, {
+      as: "a",
+      color: "primary",
+      isDisabled: true,
+      children: "Open"
+    }));
+    const style = getComputedStyle(screen.getByText('Open').closest('a'));
+    expect(style.color).toContain('--primary-shape-base-color');
+    expect(style.backgroundColor).toContain('--primary-shape-disabled-bg-color');
+    expect(style.borderColor).toBe('transparent');
+  });
+});

package/Button/colors.js

@@ -64,9 +64,7 @@ export const colors = {
         color: `var(--danger-shape-base-color, ${Color.CLEAR})`,
         bgColor: `var(--danger-shape-base-bg-color, ${Color.DANGER})`
       },
-      disabled: {
-        color: `var(--danger-shape-disabled-color, ${Color.LOCKED})`
-      },
+      disabled: {},
       hover: {
         bgColor: `var(--danger-shape-hover-bg-color, ${Color.DANGER_HOVER})`
       }
@@ -115,7 +113,7 @@ export function createColors(buttonColors) {
     if ($isOpen) {
       return Color.MAIN;
     }
-    return $isDisabled ? disabled.color : base.bgColor;
+    return $isDisabled ? disabled.bgColor : base.bgColor;
   }, ({
     $isOpen,
     $isDisabled
@@ -123,7 +121,7 @@ export function createColors(buttonColors) {
     if ($isOpen) {
       return Color.MAIN;
     }
-    return $isDisabled ? disabled.color : base.borderColor;
+    return $isDisabled ? disabled.borderColor : base.borderColor;
   }, disabled.color, disabled.bgColor, disabled.borderColor, ({
     $isOpen
   }) => $isOpen ? '' : hoverCss /* sc-custom "display: none;" */, hover.color, hover.bgColor, hover.borderColor);

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.6",
+  "version": "2.9.8",
   "description": "React components to build Pushwoosh products",
   "main": "index.js",
   "module": "index.js",