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

package/CHANGELOG.md

@@ -4,6 +4,47 @@ 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.16.0](https://github.com/eea/volto-eea-design-system/compare/1.15.0...1.16.0) - 17 August 2023
+
+#### :rocket: New Features
+
+- feat(banner): allow Banner.Action to be a link #254325 #378 from eea/banner_link [ichim-david - [`144f71f`](https://github.com/eea/volto-eea-design-system/commit/144f71fdbf24aec8c35ae7cbb93cd719271a4413)]
+- feat(accordion): eea design filtering support and theme refactoring #379 from eea/accordion-filter [ichim-david - [`7e82454`](https://github.com/eea/volto-eea-design-system/commit/7e82454490777a42bc032646483fee59e7236df4)]
+
+#### :bug: Bug Fixes
+
+- fix: use quanta-toolbar class as trigger #256275 [andreiggr - [`5ede47d`](https://github.com/eea/volto-eea-design-system/commit/5ede47dcc2bd9211ee963c7e881f9ee5663d9d1a)]
+- fix: ensure rule only on quanta-toolbar #256275 [andreiggr - [`4b3e0a4`](https://github.com/eea/volto-eea-design-system/commit/4b3e0a4b6414aac5a9c21686043bc293a194afbd)]
+- fix: teaserGrid controls move only on quanta-toolbar #256275 [andreiggr - [`90c9736`](https://github.com/eea/volto-eea-design-system/commit/90c973679e189587ed3d9afeb5e6a0eb84fa5852)]
+- fix(popup): handle click outside popup area to close the popup [David Ichim - [`a6da52d`](https://github.com/eea/volto-eea-design-system/commit/a6da52d8e03f28fa851b841397e0f896223144b8)]
+- fix(popup): ref error and make sure that all .popup-container .popup get their position fixed [David Ichim - [`4435c1f`](https://github.com/eea/volto-eea-design-system/commit/4435c1fd10f81c9366955567fc1bc6a2c5364ba7)]
+- fix(carousel): lower opacity of arrows when we don't use infinite option [David Ichim - [`b8964c0`](https://github.com/eea/volto-eea-design-system/commit/b8964c0b5637da266c42e3785cfdf3f38babcdae)]
+
+#### :nail_care: Enhancements
+
+- change(accordion): use real icons for active and inactive panel icons #380 from eea/accordion-filtering [ichim-david - [`bb9e20c`](https://github.com/eea/volto-eea-design-system/commit/bb9e20ca9b68890852baae4f7a06c35db6136286)]
+- change(accordion): simplify change of icon for filter icons [David Ichim - [`a1cb797`](https://github.com/eea/volto-eea-design-system/commit/a1cb797929ddda6513dcc7027f32ebad6992ee14)]
+- change(accordion): make use of css variables for text and background colors [David Ichim - [`a6cddd5`](https://github.com/eea/volto-eea-design-system/commit/a6cddd542abb3d1aba3e985107410a60b697744e)]
+- change(site): use css variable values for inputs for easier customization [David Ichim - [`7a085e2`](https://github.com/eea/volto-eea-design-system/commit/7a085e26496420a503ba5c21b3791e66af96c96c)]
+- change(accordion): use the right selector for accordion panels hovering [dana-cfc4 - [`3b041b2`](https://github.com/eea/volto-eea-design-system/commit/3b041b29a4c871a50844f1054c7c39d3a468a7ae)]
+- change(accordion): use a css variable for icon active and inactive [David Ichim - [`a11bf76`](https://github.com/eea/volto-eea-design-system/commit/a11bf76c8ba5d3f58f330a75e673a0eed7c10c7e)]
+- change(popup): use a functional component for popup component using react-popper [David Ichim - [`3fe2629`](https://github.com/eea/volto-eea-design-system/commit/3fe26294162966d3815d74384f5e53071ad80b26)]
+- change(carousel): modified setting of current dot based on parent li slick-active class [David Ichim - [`4ac957e`](https://github.com/eea/volto-eea-design-system/commit/4ac957ed7fcba588f56ba65f9405ad4e39b568b7)]
+
+#### :house: Internal changes
+
+- chore(accordion): Improve accordion filter styling -refs#254324 [dana-cfc4 - [`d3ca98e`](https://github.com/eea/volto-eea-design-system/commit/d3ca98e494a4e0a68880dd87ed0f90967c431d50)]
+- chore: Add filter to accordion story -refs #254324 [dana-cfc4 - [`fdc906a`](https://github.com/eea/volto-eea-design-system/commit/fdc906a2e065e250bda198311e4e3b20b0880169)]
+
+#### :house: Documentation changes
+
+- docs: add links to docusaurus and storybook - refs #253277 [ana-oprea - [`9f7ba84`](https://github.com/eea/volto-eea-design-system/commit/9f7ba848d2e54ea7cd9d9eb92a0171274077e307)]
+- docs: Cleanup Makefile, update DEVELOP documentation, i18n - refs #254894 [valentinab25 - [`df303a5`](https://github.com/eea/volto-eea-design-system/commit/df303a56e90581d6ed554e839343a359727bb166)]
+
+#### :hammer_and_wrench: Others
+
+- bump package release version [David Ichim - [`fff4264`](https://github.com/eea/volto-eea-design-system/commit/fff4264d5a91fbf2fc5fe52fb2cc530c77ea43b1)]
+- Refs #254325; allow setting a Banner.Action to be a link [Tiberiu Ichim - [`18b00bf`](https://github.com/eea/volto-eea-design-system/commit/18b00bf355d8180d7ed4f43810e95fb6cef0e95c)]
 ### [1.15.0](https://github.com/eea/volto-eea-design-system/compare/1.14.0...1.15.0) - 26 July 2023
 
 #### :rocket: New Features

package/DEVELOP.md

@@ -2,6 +2,28 @@
 
 ## Develop
 
+1. Make sure you have `docker` and `docker compose` installed and running on your machine:
+
+    ```Bash
+    git clone https://github.com/eea/volto-eea-design-system.git
+    cd volto-eea-design-system
+    git checkout -b bugfix-123456 develop
+    make
+    make start
+    ```
+
+1. Wait for `Volto started at 0.0.0.0:3000` meesage
+
+1. Go to http://localhost:3000
+
+1.  Happy hacking!
+
+    ```Bash
+    cd src/addons/volto-eea-design-system/
+    ```
+
+### Or add @eeacms/volto-eea-design-system to your Volto project
+
 Before starting make sure your development environment is properly set. See [Volto Developer Documentation](https://docs.voltocms.com/getting-started/install/)
 
 1.  Make sure you have installed `yo`, `@plone/generator-volto` and `mrs-developer`
@@ -49,3 +71,37 @@ Before starting make sure your development environment is properly set. See [Vol
 1.  Happy hacking!
 
         cd src/addons/volto-eea-design-system/
+
+## Cypress
+
+To run cypress locally, first make sure you don't have any Volto/Plone running on ports `8080` and `3000`.
+
+You don't have to be in a `clean-volto-project`, you can be in any Volto Frontend
+project where you added `volto-eea-design-system` to `mrs.developer.json`
+
+Go to:
+
+  ```BASH
+  cd src/addons/volto-eea-design-system/
+  ```
+
+Start:
+
+  ```Bash
+  make
+  make start
+  ```
+
+This will build and start with Docker a clean `Plone backend` and `Volto Frontend` with `volto-eea-design-system` block installed.
+
+Open Cypress Interface:
+
+  ```Bash
+  make cypress-open
+  ```
+
+Or run it:
+
+  ```Bash
+  make cypress-run
+  ```

package/README.md

@@ -27,10 +27,23 @@ This package provides the following features:
 
 ## Getting started
 
+### Try volto-eea-design-system with Docker
+
+      git clone https://github.com/eea/volto-eea-design-system.git
+      cd volto-eea-design-system
+      make
+      make start
+
+Go to http://localhost:3000
+
 ### Add volto-eea-design-system to your Volto project
 
 1. Make sure you have a [Plone backend](https://plone.org/download) up-and-running at http://localhost:8080/Plone
 
+   ```Bash
+   docker compose up backend
+   ```
+
 1. Start Volto frontend
 
 - If you already have a volto project, just update `package.json`:
@@ -76,6 +89,11 @@ Checkout the docs found within the [mockups](https://github.com/eea/volto-eea-de
 
 See [RELEASE.md](https://github.com/eea/volto-eea-design-system/blob/master/RELEASE.md).
 
+## Docusaurus and Storybook
+
+See [Docusaurus](https://eea.github.io/).
+See [Storybook](https://eea.github.io/eea-storybook/).
+
 ## How to contribute
 
 See [DEVELOP.md](https://github.com/eea/volto-eea-design-system/blob/develop/DEVELOP.md).

package/docker-compose.yml

@@ -0,0 +1,28 @@
+version: "3"
+services:
+  backend:
+    image: plone/plone-backend:${PLONE_VERSION:-6}
+    ports:
+      - "8080:8080"
+    environment:
+      SITE: "Plone"
+
+  frontend: 
+    build:
+      context: ./
+      dockerfile: ./Dockerfile
+      args:
+        ADDON_NAME: "${ADDON_NAME}"
+        ADDON_PATH: "${ADDON_PATH}"
+        VOLTO_VERSION: ${VOLTO_VERSION:-16}
+    ports:
+    - "3000:3000"
+    - "3001:3001"
+    depends_on:
+      - backend
+    volumes:
+      - ./:/app/src/addons/${ADDON_PATH}
+    environment:
+      RAZZLE_INTERNAL_API_PATH: "http://backend:8080/Plone"
+      RAZZLE_DEV_PROXY_API_PATH: "http://backend:8080/Plone"
+      HOST: "0.0.0.0"

package/locales/de/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/locales/it/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/locales/ro/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/locales/volto.pot

@@ -0,0 +1,16 @@
+msgid ""
+msgstr ""
+"Project-Id-Version: Plone\n"
+"POT-Creation-Date: 2023-06-28T10:48:22.678Z\n"
+"Last-Translator: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
+"Language-Team: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=utf-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"Plural-Forms: nplurals=1; plural=0;\n"
+"Language-Code: en\n"
+"Language-Name: English\n"
+"Preferred-Encodings: utf-8\n"
+"Domain: volto\n"
+
+

package/package.json

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

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

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Accordion, Icon, Container } from 'semantic-ui-react';
+import { Accordion, Icon, Container, Input } from 'semantic-ui-react';
 
 export default {
   title: 'Components/Accordion',
@@ -30,11 +30,20 @@ export default {
         type: { summary: 'string' },
       },
     },
+    enable_filtering: {
+      name: 'Enable filtering',
+      defaultValue: false,
+      table: {
+        defaultValue: { summary: false },
+        type: { summary: 'boolean' },
+      },
+    },
   },
 };
 
 function AccordionContainer({ ...args }) {
   const [activeIndex, setActiveIndex] = useState([0]);
+  const [filterValue, setFilterValue] = useState('');
 
   const handleClick = (e, titleProps) => {
     const { index } = titleProps;
@@ -43,33 +52,68 @@ function AccordionContainer({ ...args }) {
     setActiveIndex(newIndex);
   };
 
+  const handleFilteredValueChange = (value) => {
+    setFilterValue(value);
+  };
+
   return (
     <Container>
       <div className="accordion-block">
-        {args.panels.map((panel, index) => {
-          return (
-            <Accordion className={args.variant} key={index}>
-              <Accordion.Title
-                index={index}
-                tabIndex={0}
-                active={activeIndex === index}
-                onClick={handleClick}
-                as={args.title_size === 'no value' ? '' : args.title_size}
-                onKeyDown={(e) => {
-                  if (e.nativeEvent.keyCode === 13) {
-                    handleClick(e, { index });
-                  }
-                }}
-              >
-                <span>{panel.title}</span>
-                <Icon className="ri-arrow-down-s-line" />
-              </Accordion.Title>
-              <Accordion.Content active={activeIndex === index}>
-                {panel.content}
-              </Accordion.Content>
-            </Accordion>
-          );
-        })}
+        {args.enable_filtering && (
+          <Accordion className={args.variant}>
+            <Accordion.Title className={'filter'}>
+              <Input
+                fluid
+                className="input-accordion-title"
+                transparent
+                placeholder="Type to filter..."
+                value={filterValue}
+                onChange={(e) => handleFilteredValueChange(e.target.value)}
+              />
+              <Icon
+                className={filterValue ? 'ri-close-line' : 'ri-filter-3-line'}
+                onClick={() => handleFilteredValueChange('')}
+              />
+            </Accordion.Title>
+          </Accordion>
+        )}
+        {args.panels
+          .filter(
+            (panel) =>
+              !args.enable_filtering ||
+              filterValue === '' ||
+              (filterValue !== '' &&
+                panel.title?.toLowerCase().includes(filterValue.toLowerCase())),
+          )
+          .map((panel, index) => {
+            const active = activeIndex === index;
+            return (
+              <Accordion className={args.variant} key={index}>
+                <Accordion.Title
+                  index={index}
+                  tabIndex={0}
+                  active={active}
+                  onClick={handleClick}
+                  as={args.title_size === 'no value' ? '' : args.title_size}
+                  onKeyDown={(e) => {
+                    if (e.nativeEvent.keyCode === 13) {
+                      handleClick(e, { index });
+                    }
+                  }}
+                >
+                  <span>{panel.title}</span>
+                  <Icon
+                    className={
+                      active ? 'ri-arrow-down-s-line' : 'ri-arrow-up-s-line'
+                    }
+                  />
+                </Accordion.Title>
+                <Accordion.Content active={active}>
+                  {panel.content}
+                </Accordion.Content>
+              </Accordion>
+            );
+          })}
       </div>
     </Container>
   );
@@ -80,6 +124,7 @@ export const Default = Template.bind({});
 Default.args = {
   variant: 'secondary',
   title_size: 'no value',
+  enable_filtering: false,
   panels: [
     {
       title: 'Water and marine environment',

package/src/ui/Banner/Banner.jsx

@@ -67,12 +67,19 @@ function Banner({ image, metadata, properties, children, ...rest }) {
 }
 
 Banner.Action = React.forwardRef(function (
-  { id, title, titleClass, icon, onClick, className, color },
+  { id, title, titleClass, icon, onClick, className, color, ...rest },
   ref,
 ) {
   return (
     <div className="action" ref={ref}>
-      <Button className={className} basic icon inverted onClick={onClick}>
+      <Button
+        className={className}
+        basic
+        icon
+        inverted
+        onClick={onClick}
+        {...rest}
+      >
         <Icon className={icon} color={color}></Icon>
         <span className={titleClass || 'mobile hidden'}>{title}</span>
       </Button>

package/src/ui/Card/Card.stories.jsx

@@ -446,7 +446,10 @@ function CarouselCardsContent(args) {
         dots
           .querySelectorAll('.slider-dots-button')
           .forEach(function (el, idx) {
-            el.setAttribute('aria-current', idx === currentSlide);
+            el.setAttribute(
+              'aria-current',
+              el.parentElement.className === 'slick-active',
+            );
           });
       }
     },

package/src/ui/Header/Header.jsx

@@ -17,6 +17,7 @@ import HeaderMenuPopUp from './HeaderMenuPopUp';
 import PropTypes from 'prop-types';
 
 import { isInternalURL } from '@plone/volto/helpers';
+import config from '@plone/volto/registry';
 
 Header.propTypes = {
   transparency: PropTypes.bool,
@@ -143,6 +144,7 @@ const TopDropdownMenu = ({
 const Main = ({
   logo,
   menuItems,
+  menuItemsLayouts,
   renderMenuItem,
   renderGlobalMenuItem,
   headerSearchBox,
@@ -159,6 +161,7 @@ const Main = ({
   const [burger, setBurger] = React.useState('');
   const searchInputRef = React.useRef(null);
   const [isClient, setIsClient] = React.useState();
+  const itemsLayouts = menuItemsLayouts || config.settings?.menuItemsLayouts;
 
   React.useEffect(() => setIsClient(true), []);
 
@@ -357,6 +360,7 @@ const Main = ({
         renderMenuItem={renderMenuItem}
         activeItem={activeItem}
         menuItems={menuItems}
+        menuItemsLayouts={itemsLayouts}
         pathName={pathname}
         onClose={menuOnClickOutside}
         triggerRefs={[mobileMenuBurgerRef, desktopMenuRef]}

package/src/ui/Header/Header.stories.js

@@ -12,6 +12,7 @@ import cx from 'classnames';
 export default {
   title: 'Layout/Header',
   component: Header,
+  excludeStories: /menuItems$/,
   argTypes: {
     links: {
       table: {
@@ -98,7 +99,7 @@ const languages = [
   { name: 'Türkçe', code: 'tr' },
 ];
 
-const menuItems = [
+export const menuItems = [
   {
     '@id': 'Topics',
     items: [
@@ -483,7 +484,7 @@ const menuItems = [
     ],
     review_state: null,
     title: 'Topics',
-    url: '/#',
+    url: '/en/topics',
   },
   {
     '@id': 'Analysis-and-data',
@@ -887,7 +888,7 @@ const menuItems = [
     ],
     review_state: null,
     title: 'Countries',
-    url: '/#',
+    url: '/en/countries',
   },
   {
     '@id': 'Newsroom',
@@ -1143,7 +1144,7 @@ const menuItems = [
     ],
     review_state: null,
     title: 'About Us',
-    url: '/#',
+    url: '/en/about',
   },
 ];
 
@@ -1179,6 +1180,26 @@ const debounce = (func) => {
   };
 };
 
+const menuItemsLayouts = {
+  '/en/topics': {
+    menuItemChildrenListColumns: [1, 4],
+    menuItemColumns: [
+      'at-a-glance three wide column',
+      'topics-right-column nine wide column',
+    ],
+    hideChildrenFromNavigation: false,
+  },
+  '/en/countries': {
+    menuItemColumns: ['eight wide column', 'four wide column'],
+    menuItemChildrenListColumns: [5, 2],
+    appendExtraMenuItemsToLastColumn: true,
+    hideChildrenFromNavigation: false,
+  },
+  '/en/about': {
+    hideChildrenFromNavigation: false,
+  },
+};
+
 const handleDropdownClick = (event) => {
   event.stopPropagation();
 };
@@ -1320,6 +1341,7 @@ const Template = (args) => {
           pathname={pathname}
           logo={<Logo {...logoProps} inverted={args.inverted} />}
           menuItems={menuItems}
+          menuItemsLayouts={menuItemsLayouts}
           headerSearchBox={headerSearchBox}
           renderMenuItem={(item, options = {}, props) => {
             const { onClick } = options;