@eeacms/volto-eea-design-system 1.16.0 → 1.17.0

package/CHANGELOG.md

@@ -4,6 +4,37 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+### [1.17.0](https://github.com/eea/volto-eea-design-system/compare/1.16.0...1.17.0) - 29 August 2023
+
+#### :rocket: New Features
+
+- feat(accordion): improve a11n by providing open close support using space bar on header [David Ichim - [`ac04dbd`](https://github.com/eea/volto-eea-design-system/commit/ac04dbd8fa166a70d535354f6ab631709ee021b3)]
+
+#### :bug: Bug Fixes
+
+- fix(popup): Fix wrong placement of Popper refs #256765 #384 from eea/popper [ichim-david - [`ee69ca2`](https://github.com/eea/volto-eea-design-system/commit/ee69ca299348509f10ecd954ae4415aaef347104)]
+- fix(sharing): button placement and styling [David Ichim - [`15ecefc`](https://github.com/eea/volto-eea-design-system/commit/15ecefcb4e0a2fcc99d585bf0c913ea515b3f676)]
+
+#### :nail_care: Enhancements
+
+- change(accordion): removed listitem role from mobile accordion links [David Ichim - [`8b85dac`](https://github.com/eea/volto-eea-design-system/commit/8b85dac5451b10968275c9ed46a0b4cfc0ccd442)]
+- change(mega-menu): mobile accordions now have aria expanded support [David Ichim - [`e0dbb3f`](https://github.com/eea/volto-eea-design-system/commit/e0dbb3f533c9022308527d2d44d32831f66b389f)]
+
+#### :house: Internal changes
+
+- chore: Remove i18n.js script [Alin Voinea - [`701b82a`](https://github.com/eea/volto-eea-design-system/commit/701b82a67dc97f774c6250d45f159c61b9c7bfec)]
+
+#### :hammer_and_wrench: Others
+
+- i18n: Add en [Alin Voinea - [`4584295`](https://github.com/eea/volto-eea-design-system/commit/458429530d993c27cfb962ddfe2f376f3568bf01)]
+- Release 1.17.0 [Alin Voinea - [`e3c25ee`](https://github.com/eea/volto-eea-design-system/commit/e3c25eeeca5e863244faae396b5aa915d0702633)]
+- test: add unit tests for DS components - refs #254313 [ana-oprea - [`0c4d4d1`](https://github.com/eea/volto-eea-design-system/commit/0c4d4d118b8e13082c576dc5c2dce6a715f49006)]
+- chrore(mega-menu): mobile accordion accessibility enhancements  #385 from eea/accordion-improvements [ichim-david - [`9dd717d`](https://github.com/eea/volto-eea-design-system/commit/9dd717dc4c82a220463da16dba33c9a9d1633c47)]
+- fix popper [Dobricean Ioan Dorian - [`005f2be`](https://github.com/eea/volto-eea-design-system/commit/005f2be705136eebd5f8f4ae4dd5e27d9fbff15d)]
+- fix [Dobricean Ioan Dorian - [`615e67f`](https://github.com/eea/volto-eea-design-system/commit/615e67ff3c9a0fbd6cc7cadbb0c845bf09eec4f0)]
+- remove [Dobricean Ioan Dorian - [`bf3974b`](https://github.com/eea/volto-eea-design-system/commit/bf3974be18225c893fd09814cb2aca9a84ba0ece)]
+- fix popper [Dobricean Ioan Dorian - [`762f199`](https://github.com/eea/volto-eea-design-system/commit/762f199ff5725e7ad1fb788feb4f7b7548d1ee44)]
+- test: Update Makefile and docker-compose to align it with Jenkinsfile [valentinab25 - [`b7eea21`](https://github.com/eea/volto-eea-design-system/commit/b7eea21fd4e71c4f420cd061717166483082dd6e)]
 ### [1.16.0](https://github.com/eea/volto-eea-design-system/compare/1.15.0...1.16.0) - 17 August 2023
 
 #### :rocket: New Features

package/docker-compose.yml

@@ -1,11 +1,12 @@
 version: "3"
 services:
   backend:
-    image: plone/plone-backend:${PLONE_VERSION:-6}
+    image: eeacms/plone-backend
     ports:
       - "8080:8080"
     environment:
       SITE: "Plone"
+      PROFILES: "eea.kitkat:testing"
 
   frontend: 
     build:
@@ -23,6 +24,9 @@ services:
     volumes:
       - ./:/app/src/addons/${ADDON_PATH}
     environment:
+      CI: "true"
+      NODE_ENV: "development"
+      RAZZLE_JEST_CONFIG: "src/addons/${ADDON_PATH}/jest-addon.config.js"
       RAZZLE_INTERNAL_API_PATH: "http://backend:8080/Plone"
       RAZZLE_DEV_PROXY_API_PATH: "http://backend:8080/Plone"
       HOST: "0.0.0.0"

package/locales/en/LC_MESSAGES/volto.po

@@ -0,0 +1,14 @@
+msgid ""
+msgstr ""
+"Project-Id-Version: \n"
+"Report-Msgid-Bugs-To: \n"
+"POT-Creation-Date: \n"
+"PO-Revision-Date: \n"
+"Last-Translator: \n"
+"Language: \n"
+"Language-Team: \n"
+"Content-Type: \n"
+"Content-Transfer-Encoding: \n"
+"Plural-Forms: \n"
+
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-design-system",
-  "version": "1.16.0",
+  "version": "1.17.0",
   "description": "@eeacms/volto-eea-design-system: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/src/helpers/index.js

@@ -1,4 +1,4 @@
-export useClickOutside from './useClickOutside';
-export usePrevious from './usePrevious';
-export useFirstVisited from './useFirstVisited';
-export handleEnterKeyPress from './eventHandlers';
+export { default as useClickOutside } from './useClickOutside';
+export { default as usePrevious } from './usePrevious';
+export { default as useFirstVisited } from './useFirstVisited';
+export { default as handleEnterKeyPress } from './eventHandlers';

package/src/helpers/useClickOutside.test.js

@@ -0,0 +1,63 @@
+import { act, renderHook } from '@testing-library/react-hooks';
+import useClickOutside from './useClickOutside';
+import { doesNodeContainClick } from 'semantic-ui-react/dist/commonjs/lib';
+
+jest.mock('semantic-ui-react/dist/commonjs/lib', () => ({
+  doesNodeContainClick: jest.fn(),
+}));
+
+describe('useClickOutside', () => {
+  let ref;
+  let callback;
+
+  beforeEach(() => {
+    ref = { current: {} };
+    callback = jest.fn();
+  });
+
+  it('does not call callback function when clicked inside', () => {
+    doesNodeContainClick.mockImplementation(() => true);
+
+    const { rerender } = renderHook(() =>
+      useClickOutside({ targetRefs: [ref], callback }),
+    );
+
+    act(() => {
+      document.dispatchEvent(new MouseEvent('mousedown'));
+    });
+
+    rerender();
+
+    expect(callback).not.toHaveBeenCalled();
+  });
+
+  it('calls callback function when clicked outside', () => {
+    doesNodeContainClick.mockImplementation(() => false);
+
+    const { rerender } = renderHook(() =>
+      useClickOutside({ targetRefs: [ref], callback }),
+    );
+
+    act(() => {
+      document.dispatchEvent(new MouseEvent('mousedown'));
+    });
+
+    rerender();
+
+    expect(callback).toHaveBeenCalled();
+  });
+
+  it('calls callback function when clicked outside and no refs', () => {
+    doesNodeContainClick.mockImplementation(() => false);
+
+    const { rerender } = renderHook(() => useClickOutside({ callback }));
+
+    act(() => {
+      document.dispatchEvent(new MouseEvent('mousedown'));
+    });
+
+    rerender();
+
+    expect(callback).toHaveBeenCalled();
+  });
+});

package/src/helpers/useFirstVisited.test.js

@@ -0,0 +1,54 @@
+import { renderHook } from '@testing-library/react-hooks';
+import useFirstVisited from './useFirstVisited';
+
+describe('useFirstVisited', () => {
+  let observe;
+  let unobserve;
+  let callback;
+  let disconnect;
+
+  beforeEach(() => {
+    observe = jest.fn();
+    unobserve = jest.fn();
+    disconnect = jest.fn();
+
+    window.IntersectionObserver = jest.fn(function (cb) {
+      this.observe = observe;
+      this.unobserve = unobserve;
+      this.disconnect = disconnect;
+      callback = cb;
+    });
+  });
+  it('should set intersected to true when element is intersecting', async () => {
+    const ref = { current: document.createElement('div') };
+    const { result } = renderHook(() => useFirstVisited(ref));
+    const entry = { isIntersecting: true };
+
+    expect(result.current).toBe(false); // Initial state
+    callback([entry]);
+    expect(result.current).toBe(true);
+  });
+
+  it('should unobserve and disconnect when ref changes or component unmounts', () => {
+    const ref = { current: document.createElement('div') };
+    const newRef = { current: document.createElement('div') };
+    const { unmount, rerender } = renderHook(
+      ({ ref }) => useFirstVisited(ref),
+      {
+        initialProps: { ref },
+      },
+    );
+
+    expect(unobserve).not.toHaveBeenCalled();
+    expect(disconnect).not.toHaveBeenCalled();
+
+    rerender({ ref: newRef });
+    expect(unobserve).toHaveBeenCalled();
+    expect(disconnect).toHaveBeenCalled();
+
+    unmount();
+
+    expect(unobserve).toHaveBeenCalledTimes(2);
+    expect(disconnect).toHaveBeenCalledTimes(2);
+  });
+});

package/src/ui/Accordion/Accordion.stories.js

@@ -93,10 +93,12 @@ function AccordionContainer({ ...args }) {
                   index={index}
                   tabIndex={0}
                   active={active}
+                  role="button"
+                  aria-expanded={activeIndex === index}
                   onClick={handleClick}
                   as={args.title_size === 'no value' ? '' : args.title_size}
                   onKeyDown={(e) => {
-                    if (e.nativeEvent.keyCode === 13) {
+                    if (e.keyCode === 13 || e.keyCode === 32) {
                       handleClick(e, { index });
                     }
                   }}

package/src/ui/Accordion/Accordion.stories.test.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import { Default } from './Accordion.stories';
+import '@testing-library/jest-dom/extend-expect';
+
+describe('Default component', () => {
+  it('renders correctly and fires keyDown Enter events', () => {
+    const { getByText, getAllByText } = render(<Default {...Default.args} />);
+
+    Default.args.panels.forEach((panel) => {
+      expect(getByText(panel.title)).toBeInTheDocument();
+    });
+
+    expect(getAllByText(Default.args.panels[0].content)).toHaveLength(3);
+    fireEvent.keyDown(getByText(Default.args.panels[0].title), {
+      key: 'Enter',
+      code: 'Enter',
+      keyCode: 13,
+      charCode: 13,
+    });
+
+    fireEvent.keyDown(getByText(Default.args.panels[0].title), {
+      key: 'Enter',
+      code: 'Enter',
+      keyCode: 13,
+      charCode: 13,
+    });
+  });
+
+  it('renders correctly and fires keyDown A event', () => {
+    const { getByText, getAllByText } = render(
+      <Default {...Default.args} title_size={'h1'} />,
+    );
+
+    Default.args.panels.forEach((panel) => {
+      expect(getByText(panel.title)).toBeInTheDocument();
+    });
+
+    expect(getAllByText(Default.args.panels[0].content)).toHaveLength(3);
+    fireEvent.keyDown(getByText(Default.args.panels[0].title), {
+      key: 'A',
+      code: 'KeyA',
+    });
+  });
+});

package/src/ui/Banner/Banner.test.jsx

@@ -0,0 +1,292 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import Banner from './Banner';
+import { sharePage } from './Banner';
+import '@testing-library/jest-dom/extend-expect';
+
+describe('Banner', () => {
+  it('renders without errors', () => {
+    const { container } = render(<Banner />);
+    expect(container).toBeInTheDocument();
+  });
+
+  it('renders the children when image prop is not provided', () => {
+    const image = 'image-url';
+    const properties = {};
+    const { getByText } = render(
+      <Banner image={image} properties={properties}>
+        <div>Content</div>
+      </Banner>,
+    );
+    expect(getByText('Content')).toBeInTheDocument();
+  });
+
+  it('renders the image and children when image prop is provided', () => {
+    const image = 'image-url';
+    const metadata = {
+      image: {
+        scales: {
+          huge: {
+            download: 'image-url',
+          },
+        },
+      },
+    };
+    const { container, getByText } = render(
+      <Banner image={image} metadata={metadata}>
+        <div>Content</div>
+      </Banner>,
+    );
+    const imageElement = container.querySelector('.eea.banner .image');
+    expect(imageElement).toBeInTheDocument();
+    expect(imageElement.style.backgroundImage).toBe(`url(${image})`);
+    expect(getByText('Content')).toBeInTheDocument();
+  });
+
+  it('calls the onClick function when an action button is clicked', () => {
+    const onClick = jest.fn();
+    const { getByText } = render(
+      <Banner.Action title="Action" icon="icon-name" onClick={onClick} />,
+    );
+    const actionButton = getByText('Action');
+    fireEvent.click(actionButton);
+    expect(onClick).toHaveBeenCalled();
+  });
+
+  it('renders only the gradient and children when image prop is not provided', () => {
+    const { container, getByText } = render(
+      <Banner>
+        <div>Content</div>
+      </Banner>,
+    );
+    const imageElement = container.querySelector('.eea.banner .image');
+    expect(imageElement).not.toBeInTheDocument();
+    const gradientElement = container.querySelector('.eea.banner .gradient');
+    expect(gradientElement).toBeInTheDocument();
+    expect(getByText('Content')).toBeInTheDocument();
+  });
+
+  it('calls the onClick handler when the action button is clicked', () => {
+    const onClick = jest.fn();
+    const { getByText } = render(
+      <Banner.Action title="Action" icon="icon-name" onClick={onClick} />,
+    );
+    const actionButton = getByText('Action');
+    fireEvent.click(actionButton);
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('renders the content and actions correctly', () => {
+    const { getByText } = render(
+      <>
+        <Banner.Title>Test Banner Title</Banner.Title>
+        <Banner.Subtitle>Test Banner Subtitle</Banner.Subtitle>
+        <Banner.Metadata>Test Banner Metadata</Banner.Metadata>
+        <Banner.MetadataField
+          hidden={false}
+          label={'Test label'}
+          value={'02.03.2023'}
+          type={'date'}
+        >
+          Test Banner MetadataField
+        </Banner.MetadataField>
+        <Banner.Content actions={<div>Actions</div>}>
+          <div>Content</div>
+        </Banner.Content>
+      </>,
+    );
+    expect(getByText('Content')).toBeInTheDocument();
+    expect(getByText('Actions')).toBeInTheDocument();
+    expect(getByText('Test Banner Title')).toBeInTheDocument();
+    expect(getByText('Test Banner Subtitle')).toBeInTheDocument();
+    expect(getByText('Test Banner Metadata')).toBeInTheDocument();
+  });
+
+  it('renders the content and actions correctly', () => {
+    const { getByText } = render(
+      <>
+        <Banner.Title>Test Banner Title</Banner.Title>
+        <Banner.Subtitle>Test Banner Subtitle</Banner.Subtitle>
+        <Banner.Metadata>Test Banner Metadata</Banner.Metadata>
+        <Banner.MetadataField
+          hidden={false}
+          label={'Test label'}
+          value={'test'}
+          type={'text'}
+        >
+          Test Banner MetadataField
+        </Banner.MetadataField>
+        <Banner.Content actions={<div>Actions</div>}>
+          <div>Content</div>
+        </Banner.Content>
+      </>,
+    );
+    expect(getByText('Content')).toBeInTheDocument();
+    expect(getByText('Actions')).toBeInTheDocument();
+    expect(getByText('Test Banner Title')).toBeInTheDocument();
+    expect(getByText('Test Banner Subtitle')).toBeInTheDocument();
+    expect(getByText('Test Banner Metadata')).toBeInTheDocument();
+  });
+
+  it('renders the content and actions correctly', () => {
+    const { getByText } = render(
+      <>
+        <Banner.Title>Test Banner Title</Banner.Title>
+        <Banner.Subtitle>Test Banner Subtitle</Banner.Subtitle>
+        <Banner.Metadata>Test Banner Metadata</Banner.Metadata>
+        <Banner.MetadataField
+          hidden={true}
+          label={'Test label'}
+          value={undefined}
+          type={undefined}
+        >
+          Test Banner MetadataField
+        </Banner.MetadataField>
+        <Banner.Content actions={<div>Actions</div>}>
+          <div>Content</div>
+        </Banner.Content>
+      </>,
+    );
+    expect(getByText('Content')).toBeInTheDocument();
+    expect(getByText('Actions')).toBeInTheDocument();
+    expect(getByText('Test Banner Title')).toBeInTheDocument();
+    expect(getByText('Test Banner Subtitle')).toBeInTheDocument();
+    expect(getByText('Test Banner Metadata')).toBeInTheDocument();
+  });
+});
+
+describe('sharePage', () => {
+  it('should not do anything if an invalid platform is provided', () => {
+    document.createElement = jest.fn();
+    sharePage('https://example.com', 'invalidPlatform');
+    expect(document.createElement).not.toHaveBeenCalled();
+  });
+
+  it('should create an anchor element and click it for a valid platform', () => {
+    const url = 'https://example.com';
+    const platform = 'facebook';
+
+    const mockLink = {
+      setAttribute: jest.fn(),
+      click: jest.fn(),
+    };
+
+    document.createElement = jest.fn(() => mockLink);
+
+    sharePage(url, platform);
+
+    expect(document.createElement).toHaveBeenCalledWith('a');
+    expect(mockLink.setAttribute).toHaveBeenNthCalledWith(
+      1,
+      'href',
+      `https://facebook.com/sharer.php?u=${url}`,
+    );
+    expect(mockLink.setAttribute).toHaveBeenNthCalledWith(
+      2,
+      'target',
+      '_blank',
+    );
+    expect(mockLink.setAttribute).toHaveBeenNthCalledWith(
+      3,
+      'rel',
+      'noreferrer',
+    );
+    expect(mockLink.click).toHaveBeenCalled();
+  });
+
+  it('should create an anchor element and click it for a valid platform', () => {
+    const url = 'https://example.com';
+    const platform = 'twitter';
+
+    const mockLink = {
+      setAttribute: jest.fn(),
+      click: jest.fn(),
+    };
+
+    document.createElement = jest.fn(() => mockLink);
+
+    sharePage(url, platform);
+
+    expect(document.createElement).toHaveBeenCalledWith('a');
+    expect(mockLink.setAttribute).toHaveBeenNthCalledWith(
+      1,
+      'href',
+      `https://www.twitter.com/share?url=${url}`,
+    );
+    expect(mockLink.setAttribute).toHaveBeenNthCalledWith(
+      2,
+      'target',
+      '_blank',
+    );
+    expect(mockLink.setAttribute).toHaveBeenNthCalledWith(
+      3,
+      'rel',
+      'noreferrer',
+    );
+    expect(mockLink.click).toHaveBeenCalled();
+  });
+
+  it('should create an anchor element and click it for a valid platform', () => {
+    const url = 'https://example.com';
+    const platform = 'linkedin';
+
+    const mockLink = {
+      setAttribute: jest.fn(),
+      click: jest.fn(),
+    };
+
+    document.createElement = jest.fn(() => mockLink);
+
+    sharePage(url, platform);
+
+    expect(document.createElement).toHaveBeenCalledWith('a');
+    expect(mockLink.setAttribute).toHaveBeenNthCalledWith(
+      1,
+      'href',
+      `https://www.linkedin.com/sharing/share-offsite/?url=${url}`,
+    );
+    expect(mockLink.setAttribute).toHaveBeenNthCalledWith(
+      2,
+      'target',
+      '_blank',
+    );
+    expect(mockLink.setAttribute).toHaveBeenNthCalledWith(
+      3,
+      'rel',
+      'noreferrer',
+    );
+    expect(mockLink.click).toHaveBeenCalled();
+  });
+
+  it('should create an anchor element and click it for a valid platform', () => {
+    const url = 'https://example.com';
+    const platform = 'reddit';
+
+    const mockLink = {
+      setAttribute: jest.fn(),
+      click: jest.fn(),
+    };
+
+    document.createElement = jest.fn(() => mockLink);
+
+    sharePage(url, platform);
+
+    expect(document.createElement).toHaveBeenCalledWith('a');
+    expect(mockLink.setAttribute).toHaveBeenNthCalledWith(
+      1,
+      'href',
+      `https://reddit.com/submit?url=${url}`,
+    );
+    expect(mockLink.setAttribute).toHaveBeenNthCalledWith(
+      2,
+      'target',
+      '_blank',
+    );
+    expect(mockLink.setAttribute).toHaveBeenNthCalledWith(
+      3,
+      'rel',
+      'noreferrer',
+    );
+    expect(mockLink.click).toHaveBeenCalled();
+  });
+});

package/src/ui/CallToAction/CallToAction.stories.test.jsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { Default, Inverted, Link, Labeled } from './CallToAction.stories';
+import '@testing-library/jest-dom/extend-expect';
+
+describe('Link', () => {
+  it('renders correctly', () => {
+    const { container } = render(<Link {...Link.args} />);
+    expect(
+      container.querySelector(`a[href="${Link.args.href}"]`),
+    ).toBeInTheDocument();
+  });
+});
+
+describe('Labeled', () => {
+  it('renders correctly', () => {
+    const { container, getByText } = render(<Labeled {...Labeled.args} />);
+    expect(
+      container.querySelector(`a[href="${Labeled.args.href}"]`),
+    ).toBeInTheDocument();
+    expect(getByText(Labeled.args.label)).toBeInTheDocument();
+  });
+
+  it('renders correctly', () => {
+    const { container, getByText } = render(
+      <Labeled {...Labeled.args} variant={'default'} />,
+    );
+    expect(
+      container.querySelector(`a[href="${Labeled.args.href}"]`),
+    ).toBeInTheDocument();
+    expect(getByText(Labeled.args.label)).toBeInTheDocument();
+  });
+});
+
+describe('Inverted', () => {
+  it('renders correctly', () => {
+    const { container } = render(<Inverted {...Inverted.args} />);
+    expect(
+      container.querySelector(`a[href="${Inverted.args.href}"]`),
+    ).toBeInTheDocument();
+  });
+
+  it('renders correctly', () => {
+    const { container } = render(
+      <Inverted {...Inverted.args} variant={'default'} />,
+    );
+    expect(
+      container.querySelector(`a[href="${Inverted.args.href}"]`),
+    ).toBeInTheDocument();
+  });
+});
+
+describe('Default', () => {
+  it('renders correctly', () => {
+    const { container } = render(<Default {...Default.args} />);
+    expect(
+      container.querySelector(`a[href="${Default.args.href}"]`),
+    ).toBeInTheDocument();
+  });
+
+  it('renders correctly', () => {
+    const { container } = render(
+      <Default {...Default.args} variant={'default'} />,
+    );
+    expect(
+      container.querySelector(`a[href="${Default.args.href}"]`),
+    ).toBeInTheDocument();
+  });
+});