Fixed a bug in the Swiper and Section components using hooks.

libraries/common/components/Swiper/index.jsx

@@ -129,15 +129,15 @@ const Swiper = (props) => {
   };
 
   useEffect(() => {
-    if (swiperInstance.current !== null && params.rebuildOnUpdate === false) {
+    if (swiperInstance.current !== null) {
       if (loop) {
         // Recreate the loop on prop updates to avoid duplicated slides from the last slide set.
         swiperInstance.current.loopCreate();
       }
 
       swiperInstance.current.update();
     }
-  }, [children]);
+  }, [children, loop, params.rebuildOnUpdate]);
 
   return (
     <div className={cls(container, className)} aria-hidden={ariaHidden}>

libraries/common/components/Swiper/styles.js

@@ -14,6 +14,7 @@ export const innerContainer = css({
     height: 'auto',
   },
   ' .swiper-pagination': {
+    transform: 'translate3d(-50%,0,0) !important',
     ' .swiper-pagination-bullet': {
       background: '#808080',
       opacity: '.5',

libraries/engage/a11y/components/Section/__tests__/index.spec.jsx

@@ -1,22 +1,8 @@
-/* eslint-disable require-jsdoc, extra-rules/potential-point-free,
-class-methods-use-this, extra-rules/no-single-line-objects */
 import React from 'react';
 import { mount } from 'enzyme';
 import Section from '../index';
 import { hidden } from '../style';
 
-const mutationConstructorSpy = jest.fn();
-const mutationObserveSpy = jest.fn();
-const mutationDisconnectSpy = jest.fn();
-
-global.MutationObserver = class {
-  constructor(callback) { mutationConstructorSpy(callback); }
-
-  observe(element, initObject) { mutationObserveSpy(element, initObject); }
-
-  disconnect() { mutationDisconnectSpy(); }
-};
-
 const mockTranslate = jest.fn();
 
 jest.mock('../../../../components', () => ({
@@ -45,14 +31,20 @@ describe('<Section />', () => {
 
     expect(wrapper).toMatchSnapshot();
     expect(wrapper.find('section').hasClass(hidden.toString())).toBe(false);
-    expect(mockTranslate).toHaveBeenCalledWith({ string: title, params: titleParams });
+    expect(mockTranslate).toHaveBeenCalledWith({
+      string: title,
+      params: titleParams,
+    });
   });
 
   it('should render hidden when no children rendered', () => {
     const wrapper = mount(<Section title={title} />);
     expect(wrapper).toMatchSnapshot();
     expect(wrapper.find('section').hasClass(hidden.toString())).toBe(true);
-    expect(mockTranslate).toHaveBeenCalledWith({ string: title, params: {} });
+    expect(mockTranslate).toHaveBeenCalledWith({
+      string: title,
+      params: {},
+    });
   });
 
   describe('MutationObserver', () => {
@@ -63,13 +55,13 @@ describe('<Section />', () => {
     });
 
     it('should create an observer instance', () => {
-      expect(mutationConstructorSpy).toHaveBeenCalledTimes(1);
-      expect(mutationConstructorSpy).toHaveBeenCalledWith(expect.any(Function));
+      expect(global.mutationConstructorSpy).toHaveBeenCalledTimes(1);
+      expect(global.mutationConstructorSpy).toHaveBeenCalledWith(expect.any(Function));
     });
 
     it('should observe with the correct initialization', () => {
-      expect(mutationObserveSpy).toHaveBeenCalledTimes(1);
-      expect(mutationObserveSpy).toHaveBeenCalledWith(
+      expect(global.mutationObserveSpy).toHaveBeenCalledTimes(1);
+      expect(global.mutationObserveSpy).toHaveBeenCalledWith(
         wrapper.find('section').instance(),
         {
           childList: true,
@@ -79,10 +71,7 @@ describe('<Section />', () => {
 
     it('should call disconnect on unmount', () => {
       wrapper.unmount();
-      expect(mutationDisconnectSpy).toHaveBeenCalledTimes(1);
+      expect(global.mutationDisconnectSpy).toHaveBeenCalledTimes(1);
     });
   });
 });
-
-/* eslint-enable require-jsdoc, extra-rules/potential-point-free,
-class-methods-use-this, extra-rules/no-single-line-objects */

libraries/engage/a11y/components/Section/index.jsx

@@ -2,10 +2,8 @@ import React, {
   useRef, useState, useMemo, useLayoutEffect,
 } from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
 import kebabCase from 'lodash/kebabCase';
 import { I18n } from '@shopgate/engage/components';
-import { hidden } from './style';
 
 /**
  * Checks the section ref has suitable child nodes.
@@ -31,22 +29,24 @@ const hasChildNodes = (ref, headlineId) => {
  * The Section component is supposed to be used to structure the content to improve a11y. It
  * renders a headline on top which is only visible for screen readers and describes the section.
  * Internally a MutationObserver maintains the visibility based on the presence of rendered content.
- * @param {string} title The section title - can be a translation placeholder.
- * @param {Object} [titleParams={}] Additional parameters for the title  translation placeholder.
- * @param {Object} [className=null] A class name for the section.
- * @param {NodeList} [children=null] Component children.
+ * @param {Object} props The component props.
+ * @param {string} props.title The section title - can be a placeholder.
+ * @param {Object} [props.titleParams={}] Additional parameters for the title placeholder.
+ * @param {Object} [props.className=null] A class name for the section.
+ * @param {NodeList} [props.children=null] Component children.
  * @returns {JSX}
  */
-const Section = ({
-  title, titleParams, children, className, ...rest
-}) => {
+function Section(props) {
+  const {
+    title, titleParams, children, className, ...rest
+  } = props;
   const contentRef = useRef(null);
   const [hasContent, setHasContent] = useState(false);
   const id = useMemo(() => kebabCase(title), [title]);
 
   const observer = useMemo(() => new MutationObserver(() => {
     setHasContent(hasChildNodes(contentRef, id));
-  }));
+  }), [contentRef, id]);
 
   useLayoutEffect(() => {
     setHasContent(hasChildNodes(contentRef, id));
@@ -57,19 +57,23 @@ const Section = ({
     };
   }, [contentRef, id, observer]);
 
-  const classes = classNames(className, {
-    [hidden]: !hasContent,
-  });
+  if (!hasContent) {
+    return (
+      <section {...rest} ref={contentRef}>
+        {children}
+      </section>
+    );
+  }
 
   return (
-    <section {...rest} ref={contentRef} className={classes} aria-labelledby={id}>
-      <h1 id={id} hidden>
+    <section {...rest} ref={contentRef} aria-labelledby={id}>
+      <h2 id={id} hidden>
         <I18n.Text string={title} params={titleParams} />
-      </h1>
+      </h2>
       {children}
     </section>
   );
-};
+}
 
 Section.propTypes = {
   title: PropTypes.string.isRequired,

themes/theme-ios11/pages/Product/components/Description/spec.jsx → libraries/engage/product/components/Description/__tests__/Description.spec.jsx

@@ -2,18 +2,18 @@ import React from 'react';
 import { mount } from 'enzyme';
 import configureStore from 'redux-mock-store';
 import mockRenderOptions from '@shopgate/pwa-common/helpers/mocks/mockRenderOptions';
-import PlaceholderParagraph from '@shopgate/pwa-ui-shared/PlaceholderParagraph';
-import ProductDescription from './index';
+import { PlaceholderParagraph } from '@shopgate/engage/components';
+import Description from '../index';
 
-jest.mock('./connector', () => obj => obj);
+jest.mock('../connector', () => obj => obj);
 
-describe('<ProductDescription />', () => {
+describe('<Description />', () => {
   const mockStore = configureStore();
   const html = '<h1>foo</h1>';
 
   it('should not render if no data is available', () => {
     const store = mockStore({});
-    const wrapper = mount(<ProductDescription store={store} html={null} />, mockRenderOptions);
+    const wrapper = mount(<Description store={store} html={null} />, mockRenderOptions);
     const foundContent = wrapper.findWhere(n =>
       typeof n.prop('dangerouslySetInnerHTML') !== 'undefined');
 
@@ -25,7 +25,7 @@ describe('<ProductDescription />', () => {
 
   it('should render description if data is available', () => {
     const store = mockStore({});
-    const wrapper = mount(<ProductDescription store={store} html={html} />, mockRenderOptions);
+    const wrapper = mount(<Description store={store} html={html} />, mockRenderOptions);
     const foundContent = wrapper.findWhere(n =>
       typeof n.prop('dangerouslySetInnerHTML') !== 'undefined');