@shopgate/pwa-ui-shared 7.32.0-beta.4 → 7.32.0-beta.6

package/Dialog/components/PipelineErrorDialog/index.js

@@ -33,7 +33,8 @@ const PipelineErrorDialog = ({
   params,
   message
 }) => {
-  const [devMode, setDevMode] = useState(false);
+  // May be opened directly in developer detail mode (e.g. via long-pressing an error toast).
+  const [devMode, setDevMode] = useState(!!params.openWithDetails);
   const tapTimeoutRef = useRef(null);
   const tapCounterRef = useRef(0);
   const handleTapTimeout = useCallback(() => {

package/Dialog/components/PipelineErrorDialog/spec.js

@@ -1,5 +1,7 @@
 import React from 'react';
 import { mount } from 'enzyme';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
 import PipelineErrorDialog from "./index";
 import { jsx as _jsx } from "react/jsx-runtime";
 jest.mock('@shopgate/engage/a11y/components');
@@ -51,6 +53,20 @@ describe('<PipelineErrorDialog />', () => {
     clickElement.simulate('click');
     expect(wrapper.text()).not.toContain(devMarker);
   });
+  it('should open directly in developer detail mode when params.openWithDetails is set', () => {
+    render(/*#__PURE__*/_jsx(PipelineErrorDialog, {
+      actions: [],
+      params: {
+        ...defaultParams,
+        openWithDetails: true
+      }
+    }));
+
+    // Developer detail view is shown immediately, without any tapping.
+    expect(screen.getByText('Pipeline:')).toBeInTheDocument();
+    expect(screen.getByText('Code:')).toBeInTheDocument();
+    expect(screen.getByText(/fakePipeline/)).toBeInTheDocument();
+  });
   it('should not switch modes if tapped too slow', () => {
     jest.useFakeTimers();
     const wrapper = mount(/*#__PURE__*/_jsx(PipelineErrorDialog, {

package/RatingStars/index.js

@@ -15,7 +15,7 @@ const ICON_SIZES = {
 const useStyles = makeStyles()(theme => ({
   container: {
     position: 'relative',
-    display: 'inline-block',
+    display: 'inline-flex',
     verticalAlign: 'middle',
     maxWidth: '100%'
   },
@@ -43,6 +43,11 @@ const useStyles = makeStyles()(theme => ({
     position: 'absolute',
     left: 0,
     top: 0,
+    // Purely decorative overlay: let every pointer event fall through to the
+    // empty-star buttons underneath, which span all slots and handle selection.
+    // Without this, the invisible spacers/half-stars cover the higher-index
+    // buttons and swallow clicks in selectable mode.
+    pointerEvents: 'none',
     color: theme.components.ratingStars.filled,
     display: 'inline-flex',
     alignItems: 'center',
@@ -107,10 +112,10 @@ const RatingStars = ({
     const starProps = {
       className: iconClassName,
       key: numStars + pos,
+      // Decorative duplicate of the underlying empty-star button; hidden from
+      // assistive tech and non-interactive (the empty layer handles clicks).
       ...(isSelectable && {
-        'aria-hidden': true,
-        role: 'button',
-        onClick: e => handleSelection(e, pos)
+        'aria-hidden': true
       })
     };
     return /*#__PURE__*/_jsx("div", {
@@ -124,7 +129,13 @@ const RatingStars = ({
     children: /*#__PURE__*/_jsx(StarHalfIcon, {
       size: size
     })
-  }, i + numFullStars))), [iconClassName, numFullStars, numHalfStars, size, handleSelection, isSelectable]);
+  }, i + numFullStars)), times(Math.max(numStars - numFullStars - numHalfStars, 0), i => /*#__PURE__*/_jsx("div", {
+    className: iconClassName,
+    style: {
+      width: size
+    },
+    "aria-hidden": true
+  }, `placeholder-${i}`))), [iconClassName, numFullStars, numHalfStars, size, isSelectable]);
   return /*#__PURE__*/_jsxs("div", {
     role: isSelectable ? undefined : 'img',
     className: rootClassName,

package/RatingStars/spec.js

@@ -49,34 +49,37 @@ describe('<RatingStars />', () => {
     expect(wrapper.find(StarHalfIcon).length).toBe(1);
     expect(wrapper).toMatchSnapshot();
   });
-  it('should call onSelection callback when component is selectable', () => {
-    const spy = jest.fn();
+  it('should call onSelection with the clicked rating in selectable mode', () => {
+    const selections = [];
     const wrapper = shallow(/*#__PURE__*/_jsx(RatingStars, {
-      value: 100,
+      value: 20,
       isSelectable: true,
       onSelection: e => {
+        selections.push(e.target.value);
         wrapper.setProps({
           value: e.target.value
         });
-        spy();
       }
     }), mockRenderOptions);
-    // Click on 1 filled star.
-    wrapper.find('[role="button"]').at(5).simulate('click', {
-      target: {
-        value: 10
-      }
+
+    // Only the empty-star layer is interactive: one button per position, always five.
+    // The decorative filled overlay is pointer-transparent and carries no buttons.
+    expect(wrapper.find('[role="button"]').length).toBe(numEmptyStars);
+
+    // Regression: at a low rating the higher positions used to be covered by the
+    // filled layer's invisible placeholders, which swallowed the click. Clicking the
+    // 5th star must still raise the rating to the full 5 stars.
+    wrapper.find('[role="button"]').at(4).simulate('click', {
+      target: {}
     });
-    expect(spy.mock.calls.length).toBe(1);
-    expect(wrapper.find('[role="button"]').length).toBe(6);
-    // Click on 4th empty star
-    wrapper.find('[role="button"]').at(3).simulate('click', {
-      target: {
-        value: 80
-      }
+    expect(selections).toEqual([100]);
+
+    // The interactive layer is unaffected by the rating; clicking the 1st star lowers it.
+    expect(wrapper.find('[role="button"]').length).toBe(numEmptyStars);
+    wrapper.find('[role="button"]').at(0).simulate('click', {
+      target: {}
     });
-    expect(wrapper.find('[role="button"]').length).toBe(9);
-    expect(spy.mock.calls.length).toBe(2);
+    expect(selections).toEqual([100, 20]);
   });
   it('should NOT call onSelection callback when component is NOT selectable', () => {
     const spy = jest.fn();

package/package.json

@@ -1,16 +1,16 @@
 {
   "name": "@shopgate/pwa-ui-shared",
-  "version": "7.32.0-beta.4",
+  "version": "7.32.0-beta.6",
   "description": "Shopgate's shared UI components.",
   "main": "index.js",
   "license": "Apache-2.0",
   "dependencies": {
-    "@shopgate/pwa-ui-ios": "7.32.0-beta.4",
-    "@shopgate/pwa-ui-material": "7.32.0-beta.4"
+    "@shopgate/pwa-ui-ios": "7.32.0-beta.6",
+    "@shopgate/pwa-ui-material": "7.32.0-beta.6"
   },
   "devDependencies": {
-    "@shopgate/pwa-common": "7.32.0-beta.4",
-    "@shopgate/pwa-common-commerce": "7.32.0-beta.4",
+    "@shopgate/pwa-common": "7.32.0-beta.6",
+    "@shopgate/pwa-common-commerce": "7.32.0-beta.6",
     "classnames": "2.5.1",
     "react": "^17.0.2"
   },