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

Makefile

@@ -149,6 +149,7 @@ clean:
 		find . -name "*debug.log" -type f -delete;
 		lerna clean --yes;
 		rm -rf ./node_modules/;
+		rm -rf ./.cache-loader/;
 		node ./scripts/init-subtrees.js;
 		lerna bootstrap;
 

babel.config.js

@@ -1,5 +1,5 @@
 module.exports = (api) => {
-  api.cache(api.env('test'));
+  api.cache(true);
 
   return {
     extends: './themes/theme-gmd/babel.config.js',

extensions/@shopgate-theme-config/frontend/package.json

@@ -7,6 +7,6 @@
     "lodash": "^4.17.4"
   },
   "peerDependencies": {
-    "@shopgate/pwa-common": "6.7.1"
+    "@shopgate/pwa-common": "^6.7.1"
   }
 }

libraries/common/components/Swiper/index.jsx

@@ -1,5 +1,5 @@
 import 'react-id-swiper/lib/styles/css/swiper.css';
-import React, { useRef, useEffect } from 'react';
+import React, { useRef } from 'react';
 import PropTypes from 'prop-types';
 import cls from 'classnames';
 import IDSwiper from 'react-id-swiper';
@@ -128,17 +128,6 @@ const Swiper = (props) => {
     allowSlideNext: !disabled,
   };
 
-  useEffect(() => {
-    if (swiperInstance.current !== null && params.rebuildOnUpdate === false) {
-      if (loop) {
-        // Recreate the loop on prop updates to avoid duplicated slides from the last slide set.
-        swiperInstance.current.loopCreate();
-      }
-
-      swiperInstance.current.update();
-    }
-  }, [children]);
-
   return (
     <div className={cls(container, className)} aria-hidden={ariaHidden}>
       <IDSwiper {...params} {...additionalParams}>

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__/__snapshots__/index.spec.jsx.snap

@@ -6,26 +6,11 @@ exports[`<Section /> should render hidden when no children rendered 1`] = `
   title="my.headline"
   titleParams={Object {}}
 >
-  <section
-    aria-labelledby="my-headline"
-    className="css-gyrv08"
-  >
-    <h1
-      hidden={true}
-      id="my-headline"
-    >
-      <Translate
-        params={Object {}}
-        string="my.headline"
-      >
-        my.headline
-      </Translate>
-    </h1>
-  </section>
+  <section />
 </Section>
 `;
 
-exports[`<Section /> should render visible 1`] = `
+exports[`<Section /> should render with a label 1`] = `
 <Section
   className={null}
   title="my.headline"
@@ -37,9 +22,8 @@ exports[`<Section /> should render visible 1`] = `
 >
   <section
     aria-labelledby="my-headline"
-    className=""
   >
-    <h1
+    <h2
       hidden={true}
       id="my-headline"
     >
@@ -53,7 +37,7 @@ exports[`<Section /> should render visible 1`] = `
       >
         my.headline
       </Translate>
-    </h1>
+    </h2>
     <div
       id="child-component"
     />

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

@@ -1,21 +1,6 @@
-/* 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();
 
@@ -36,23 +21,26 @@ describe('<Section />', () => {
     jest.clearAllMocks();
   });
 
-  it('should render visible', () => {
+  it('should render with a label', () => {
     const wrapper = mount((
       <Section title={title} titleParams={titleParams}>
         <div id="child-component" />
       </Section>
     ));
 
     expect(wrapper).toMatchSnapshot();
-    expect(wrapper.find('section').hasClass(hidden.toString())).toBe(false);
-    expect(mockTranslate).toHaveBeenCalledWith({ string: title, params: titleParams });
+    expect(wrapper.find('h2').exists()).toBe(true);
+    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(wrapper.find('h2').exists()).toBe(false);
+    expect(mockTranslate).toHaveBeenCalledTimes(0);
   });
 
   describe('MutationObserver', () => {
@@ -63,13 +51,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 +67,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-gmd/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');