Merge pull request #383 from eea/develop

Release

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

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
+  ```

Dockerfile

@@ -0,0 +1,14 @@
+# syntax=docker/dockerfile:1
+ARG VOLTO_VERSION
+FROM plone/frontend-builder:${VOLTO_VERSION}
+
+ARG ADDON_NAME
+ARG ADDON_PATH
+
+COPY --chown=node:node ./ /app/src/addons/${ADDON_PATH}/
+
+RUN /setupAddon
+RUN yarn install
+
+ENTRYPOINT ["yarn"]
+CMD ["start"]

Jenkinsfile

@@ -210,6 +210,31 @@ pipeline {
     }
 
 
+    stage('SonarQube compare to master') {
+      when {
+        allOf {
+          environment name: 'CHANGE_ID', value: ''
+          branch 'develop'
+          not { changelog '.*^Automated release [0-9\\.]+$' }
+        }
+      }
+      steps {
+        node(label: 'docker') {
+          script {
+            sh '''docker pull eeacms/gitflow'''
+            sh '''echo "Error" > checkresult.txt'''
+            catchError(buildResult: 'FAILURE', stageResult: 'FAILURE') {
+               sh '''set -o pipefail; docker run -i --rm --name="$BUILD_TAG-gitflow-sn" -e GIT_BRANCH="$BRANCH_NAME" -e GIT_NAME="$GIT_NAME" eeacms/gitflow /checkSonarqubemaster.sh | grep -v "Found script" | tee checkresult.txt'''
+             }
+
+            publishChecks name: 'SonarQube', title: 'Sonarqube Code Quality Check', summary: "Quality check on the SonarQube metrics from branch develop, comparing it with the ones from master branch. No bugs are allowed",
+                          text: readFile(file: 'checkresult.txt'), conclusion: "${currentBuild.currentResult}",
+                          detailsURL: "${env.BUILD_URL}display/redirect"
+          }
+        }
+      }
+    }
+
    stage('Pull Request COMMENT') {
       when {
         not { environment name: 'CHANGE_ID', value: '' }

Makefile

@@ -1,67 +1,103 @@
-SHELL=/bin/bash
+##############################################################################
+# Run:
+#    make
+#    make start
+#
+# Go to:
+#
+#     http://localhost:3000
+#
+# Cypress:
+#
+#    make cypress-open
+#
+##############################################################################
+# SETUP MAKE
+#
+## Defensive settings for make: https://tech.davis-hansson.com/p/make/
+SHELL:=bash
+.ONESHELL:
+# for Makefile debugging purposes add -x to the .SHELLFLAGS
+.SHELLFLAGS:=-eu -o pipefail -O inherit_errexit -c
+.SILENT:
+.DELETE_ON_ERROR:
+MAKEFLAGS+=--warn-undefined-variables
+MAKEFLAGS+=--no-builtin-rules
+
+# Colors
+# OK=Green, warn=yellow, error=red
+ifeq ($(TERM),)
+# no colors if not in terminal
+        MARK_COLOR=
+        OK_COLOR=
+        WARN_COLOR=
+        ERROR_COLOR=
+        NO_COLOR=
+else
+        MARK_COLOR=`tput setaf 6`
+        OK_COLOR=`tput setaf 2`
+        WARN_COLOR=`tput setaf 3`
+        ERROR_COLOR=`tput setaf 1`
+        NO_COLOR=`tput sgr0`
+endif
 
+##############################################################################
+# SETTINGS AND VARIABLE
 DIR=$(shell basename $$(pwd))
-ADDON ?= "@eeacms/volto-eea-design-system"
-
-# We like colors
-# From: https://coderwall.com/p/izxssa/colored-makefile-for-golang-projects
-RED=`tput setaf 1`
-GREEN=`tput setaf 2`
-RESET=`tput sgr0`
-YELLOW=`tput setaf 3`
+NODE_MODULES?="../../../node_modules"
+PLONE_VERSION?=6
+VOLTO_VERSION?=16
+ADDON_PATH="${DIR}"
+ADDON_NAME="@eeacms/${ADDON_PATH}"
+DOCKER_COMPOSE=PLONE_VERSION=${PLONE_VERSION} VOLTO_VERSION=${VOLTO_VERSION} ADDON_NAME=${ADDON_NAME} ADDON_PATH=${ADDON_PATH} docker compose
+
+# Top-level targets
+.PHONY: all
+all: clean install
+
+.PHONY: clean
+clean:			## Cleanup development environment
+	${DOCKER_COMPOSE} down --volumes --remove-orphans
+
+.PHONY: install
+install:		## Build and install development environment
+	echo "Running:	${DOCKER_COMPOSE} build"
+	${DOCKER_COMPOSE} pull
+	${DOCKER_COMPOSE} build
+
+.PHONY: start
+start:			## Start development environment
+	echo "Running:	${DOCKER_COMPOSE} up"
+	${DOCKER_COMPOSE} up
 
-ifeq ($(wildcard ./project),)
-  NODE_MODULES = "../../../node_modules"
-else
-  NODE_MODULES = "./project/node_modules"
-endif
+.PHONY: cypress-open
+cypress-open:		## Open cypress integration tests
+	NODE_ENV=development  $(NODE_MODULES)/cypress/bin/cypress open
 
-project:
-	npm install -g yo
-	npm install -g @plone/generator-volto
-	npm install -g mrs-developer
-	yo @plone/volto project --addon ${ADDON} --workspace "src/addons/${DIR}" --no-interactive
-	ln -sf $$(pwd) project/src/addons/
-	cp .project.eslintrc.js .eslintrc.js
-	cd project && yarn
-	@echo "-------------------"
-	@echo "$(GREEN)Volto project is ready!$(RESET)"
-	@echo "$(RED)Now run: cd project && yarn start$(RESET)"
-
-all: project
-
-.PHONY: start-test-backend
-start-test-backend: ## Start Test Plone Backend
-	@echo "$(GREEN)==> Start Test Plone Backend$(RESET)"
-	docker run -i --rm -e ZSERVER_HOST=0.0.0.0 -e ZSERVER_PORT=55001 -p 55001:55001 -e SITE=plone -e APPLY_PROFILES=plone.app.contenttypes:plone-content,plone.restapi:default,kitconcept.volto:default-homepage -e CONFIGURE_PACKAGES=plone.app.contenttypes,plone.restapi,kitconcept.volto,kitconcept.volto.cors -e ADDONS='plone.app.robotframework plone.app.contenttypes plone.restapi kitconcept.volto' plone ./bin/robot-server plone.app.robotframework.testing.PLONE_ROBOT_TESTING
-
-.PHONY: start-backend-docker
-start-backend-docker:		## Starts a Docker-based backend
-	@echo "$(GREEN)==> Start Docker-based Plone Backend$(RESET)"
-	docker run -it --rm --name=plone -p 8080:8080 -e SITE=Plone -e ADDONS="kitconcept.volto" -e ZCML="kitconcept.volto.cors" plone
+.PHONY: cypress-run
+cypress-run:	## Run cypress integration tests
+	NODE_ENV=development  $(NODE_MODULES)/cypress/bin/cypress run
 
 .PHONY: test
 test:			## Run jest tests
-	docker pull plone/volto-addon-ci:alpha
-	docker run -it --rm -e NAMESPACE="@eeacms" -e GIT_NAME="${DIR}" -e RAZZLE_JEST_CONFIG=jest-addon.config.js -v "$$(pwd):/opt/frontend/my-volto-project/src/addons/${DIR}" -e CI="true" plone/volto-addon-ci:alpha
+	${DOCKER_COMPOSE} run -e CI=1 frontend test
 
 .PHONY: test-update
 test-update:	## Update jest tests snapshots
-	docker pull plone/volto-addon-ci:alpha
-	docker run -it --rm -e NAMESPACE="@eeacms" -e GIT_NAME="${DIR}" -e RAZZLE_JEST_CONFIG=jest-addon.config.js -v "$$(pwd):/opt/frontend/my-volto-project/src/addons/${DIR}" -e CI="true" plone/volto-addon-ci:alpha yarn test src/addons/${DIR}/src --watchAll=false -u
+	${DOCKER_COMPOSE} run -e CI=1 frontend test -u
 
 .PHONY: stylelint
 stylelint:		## Stylelint
 	$(NODE_MODULES)/stylelint/bin/stylelint.js --allow-empty-input 'src/**/*.{css,less}'
 
 .PHONY: stylelint-overrides
 stylelint-overrides:
-	$(NODE_MODULES)/.bin/stylelint --allow-empty-input 'theme/**/*.overrides' 'src/**/*.overrides'
+	$(NODE_MODULES)/.bin/stylelint --syntax less --allow-empty-input 'theme/**/*.overrides' 'src/**/*.overrides'
 
 .PHONY: stylelint-fix
 stylelint-fix:	## Fix stylelint
 	$(NODE_MODULES)/stylelint/bin/stylelint.js --allow-empty-input 'src/**/*.{css,less}' --fix
-	$(NODE_MODULES)/.bin/stylelint --allow-empty-input 'theme/**/*.overrides' 'src/**/*.overrides' --fix
+	$(NODE_MODULES)/.bin/stylelint --syntax less --allow-empty-input 'theme/**/*.overrides' 'src/**/*.overrides' --fix
 
 .PHONY: prettier
 prettier:		## Prettier
@@ -84,14 +120,7 @@ i18n:			## i18n
 	rm -rf build/messages
 	NODE_ENV=development $(NODE_MODULES)/.bin/i18n --addon
 
-.PHONY: cypress-run
-cypress-run:	## Run cypress integration tests
-	NODE_ENV=development  $(NODE_MODULES)/cypress/bin/cypress run
-
-.PHONY: cypress-open
-cypress-open:	## Open cypress integration tests
-	NODE_ENV=development  $(NODE_MODULES)/cypress/bin/cypress open
-
 .PHONY: help
-help:           ## Show this help.
+help:                   ## Show this help.
 	@echo -e "$$(grep -hE '^\S+:.*##' $(MAKEFILE_LIST) | sed -e 's/:.*##\s*/:/' -e 's/^\(.\+\):\(.*\)/\\x1b[36m\1\\x1b[m:\2/' | column -c2 -t -s :)"
+	head -n 14 Makefile

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).

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"