@eeacms/volto-eea-design-system 1.0.0-alpha.1 → 1.0.0-alpha.3

package/.coverage.babel.config.js

@@ -2,11 +2,7 @@ const defaultBabel = require('@plone/volto/babel');
 
 function applyDefault(api) {
   const voltoBabel = defaultBabel(api);
-  voltoBabel.plugins.push(
-    '@babel/plugin-transform-modules-commonjs',
-    'transform-class-properties',
-    'istanbul',
-  );
+  voltoBabel.plugins.push('istanbul');
   return voltoBabel;
 }
 

package/.i18n.babel.config.js

@@ -0,0 +1 @@
+module.exports = require('@plone/volto/babel');

package/.project.eslintrc.js

@@ -1,16 +1,17 @@
 const fs = require('fs');
 const path = require('path');
 
-const projectRootPath = fs.realpathSync('./project'); // __dirname
+const projectRootPath = fs.existsSync('./project')
+  ? fs.realpathSync('./project')
+  : fs.realpathSync('./../../../');
 const packageJson = require(path.join(projectRootPath, 'package.json'));
-const jsConfig = require(path.join(projectRootPath, 'jsconfig.json'))
-  .compilerOptions;
+const jsConfig = require(path.join(projectRootPath, 'jsconfig.json')).compilerOptions;
 
 const pathsConfig = jsConfig.paths;
 
 let voltoPath = path.join(projectRootPath, 'node_modules/@plone/volto');
 
-Object.keys(pathsConfig).forEach((pkg) => {
+Object.keys(pathsConfig).forEach(pkg => {
   if (pkg === '@plone/volto') {
     voltoPath = `./${jsConfig.baseUrl}/${pathsConfig[pkg][0]}`;
   }
@@ -19,11 +20,12 @@ const AddonConfigurationRegistry = require(`${voltoPath}/addon-registry.js`);
 const reg = new AddonConfigurationRegistry(projectRootPath);
 
 // Extends ESlint configuration for adding the aliases to `src` directories in Volto addons
-const addonAliases = Object.keys(reg.packages).map((o) => [
+const addonAliases = Object.keys(reg.packages).map(o => [
   o,
   reg.packages[o].modulePath,
 ]);
 
+
 module.exports = {
   extends: `${projectRootPath}/node_modules/@plone/volto/.eslintrc`,
   settings: {
@@ -43,3 +45,4 @@ module.exports = {
     },
   },
 };
+

package/CHANGELOG.md

@@ -4,6 +4,94 @@ 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.0.0-alpha.3](https://github.com/eea/volto-eea-design-system/compare/1.0.0-alpha.2...1.0.0-alpha.3) - 16 November 2022
+
+#### :rocket: New Features
+
+- feat(Header): Add subsite section styling #263 from eea/subsite [ichim-david - [`00398b8`](https://github.com/eea/volto-eea-design-system/commit/00398b8a6c5d83241c30d0ba85d95c115edf2480)]
+
+#### :bug: Bug Fixes
+
+- fix(search): position now changed by default to absolute from relative [David Ichim - [`51b08fc`](https://github.com/eea/volto-eea-design-system/commit/51b08fc217e25c1391a2bac0b42a8c3f7ae091c7)]
+- fix(megaMenu): remove paddings for buttons added by active class [Antonis Tarantilis - [`ec33ebf`](https://github.com/eea/volto-eea-design-system/commit/ec33ebfe23a6064c88383ab465bd45edee2dba9b)]
+
+#### :nail_care: Enhancements
+
+- change(mega-menu): hide home link and accordion content from mobile menu [David Ichim - [`1a69172`](https://github.com/eea/volto-eea-design-system/commit/1a691729b6d61c0daf46c5de035c1c55b0fda0d9)]
+- change(container): width from min width 1280px to 1365px max width [David Ichim - [`66e551e`](https://github.com/eea/volto-eea-design-system/commit/66e551e532da2cc5e9716e5179f943f172663be4)]
+- change(theme): modified wide width to point to 1320px as it's perfectly divisible by 4 [David Ichim - [`8f82573`](https://github.com/eea/volto-eea-design-system/commit/8f825737d6dafd595024bb4537eab624a47a9ad0)]
+- change(theme): modified wide width to point to 1368px as it's perfectly divisible by 4 [David Ichim - [`2349fee`](https://github.com/eea/volto-eea-design-system/commit/2349fee36ee72783665a0b101d684389f1fdf834)]
+- change(container): fullwidth now take into account devices without hover [David Ichim - [`5a35a65`](https://github.com/eea/volto-eea-design-system/commit/5a35a65ce4928972027325bd01265db3f046f0e8)]
+- change(container): ensure only the top level elements behave like containers [David Ichim - [`98b85d1`](https://github.com/eea/volto-eea-design-system/commit/98b85d1fb285919a8851454fa3007131b2a0ffc3)]
+- change(container): modified column-block grid to remove margin and padding when using full width class [David Ichim - [`35c1cee`](https://github.com/eea/volto-eea-design-system/commit/35c1cee7b3b35e7c361562ab7a430240f0117cc3)]
+- change(components): load overrides files for our defined semantic files [David Ichim - [`adde7a9`](https://github.com/eea/volto-eea-design-system/commit/adde7a9519f38fa779d8d038f3b6817281f0b4a2)]
+- change(container): story to avoid adding containerwidth property to container div [David Ichim - [`c13d83c`](https://github.com/eea/volto-eea-design-system/commit/c13d83cdbc8741bf4075cdfcd884f39f3f71d73c)]
+- change(container): story to add classes that modify the max width of the containers [David Ichim - [`37948f8`](https://github.com/eea/volto-eea-design-system/commit/37948f89ee797738bd8bbb0023bc5dca018d7331)]
+- change(container): renamed content-text-width to container-text-width [David Ichim - [`6f788c2`](https://github.com/eea/volto-eea-design-system/commit/6f788c282348292dd4b5deb47ffe83ca4573e5c8)]
+- change(container): removed app extras and view setting of layout sizes [David Ichim - [`f6dc1ee`](https://github.com/eea/volto-eea-design-system/commit/f6dc1ee602634df85140f6db75e41293b72eacf1)]
+- change(homepage): removed hiding of staging banner from homepage [David Ichim - [`4ba2cd7`](https://github.com/eea/volto-eea-design-system/commit/4ba2cd7fc17cdf1bf58381aa58e05acad0ac77ba)]
+- change(site): add a 1rem margin top and bottom on all styled classes [David Ichim - [`dabf6c1`](https://github.com/eea/volto-eea-design-system/commit/dabf6c1162fe23cef61a2053eefd7e687f649a56)]
+- change(container): use important flag for left and right margin [David Ichim - [`a49c83a`](https://github.com/eea/volto-eea-design-system/commit/a49c83abe9a045d28118a680558de5416a0516a3)]
+- change(views): moved narrow style bellow the default container width styles [David Ichim - [`72fa58d`](https://github.com/eea/volto-eea-design-system/commit/72fa58dce9ea03a1e4f409a9f9aab21b01efbfc8)]
+- change(view): set container width for view-viewview class as well [David Ichim - [`29dc324`](https://github.com/eea/volto-eea-design-system/commit/29dc324319d6dc2450dd0e906c1b4c93fd65ed56)]
+- change(listing): provide ui container fallback if no class is passed to default view [David Ichim - [`af9e94d`](https://github.com/eea/volto-eea-design-system/commit/af9e94ded1e301f4c811749badbcc1f59e6d0de5)]
+- change(narrow-view): re-added container class to page-document [David Ichim - [`56b44a6`](https://github.com/eea/volto-eea-design-system/commit/56b44a6e09d45f96c106dc471bb2e1cde58ef10f)]
+- change(container): unset values of page-document on 1200+ browser width [David Ichim - [`dd5bea3`](https://github.com/eea/volto-eea-design-system/commit/dd5bea37d414e2a8689eaf6cc99c7b3a3d4b0e08)]
+- change(container): affect only left and right margin of containers [David Ichim - [`183265b`](https://github.com/eea/volto-eea-design-system/commit/183265b7dd8d20359b6c3956ea05b62df6e70f75)]
+- change(containers): modified class names after layout checks [David Ichim - [`1dc3689`](https://github.com/eea/volto-eea-design-system/commit/1dc3689509001031f0afd30422f517de5316e47a)]
+- change(listing): removed container from default view page-document area [David Ichim - [`69f3d8f`](https://github.com/eea/volto-eea-design-system/commit/69f3d8f422e3cb95e89937929aaef48b5569bcdf)]
+- change(views): rename classes names to width_view and added app extras layout component [David Ichim - [`745b772`](https://github.com/eea/volto-eea-design-system/commit/745b7720839754d1e248795cb1263f8c02f5f3c2)]
+- change(container): add variables for edit and add section of containers [David Ichim - [`f2e2c33`](https://github.com/eea/volto-eea-design-system/commit/f2e2c335dc82c120d15d4c536c400ae742f68fe7)]
+- change(columns): implement narrow, container and wide width classes [David Ichim - [`9696b54`](https://github.com/eea/volto-eea-design-system/commit/9696b5457e50ba3186406a584da16f5248c14439)]
+- change(views): customized DefaultView to pass class into page-document area [David Ichim - [`91123aa`](https://github.com/eea/volto-eea-design-system/commit/91123aad429f4bb086110b4997e43e9809a97581)]
+- change(megamenu): set children to be appended to the right of the menu title [David Ichim - [`b69c23a`](https://github.com/eea/volto-eea-design-system/commit/b69c23a20ef2ded1f0382650ff8e85d1bead6941)]
+- refactor(sidemenu): add is_in_path and is_current attributes for an active example [Antonis Tarantilis - [`a3fe7fd`](https://github.com/eea/volto-eea-design-system/commit/a3fe7fd8da93db0a065d4408ce154c9d8c26b568)]
+- refactor(sidemenu): add third level list and items & update active indication [Antonis Tarantilis - [`e2d87da`](https://github.com/eea/volto-eea-design-system/commit/e2d87da9fddca2b867f3d065a007c0b921587a61)]
+- refactor(megaMenu): update padding variables [Antonis Tarantilis - [`c5f2583`](https://github.com/eea/volto-eea-design-system/commit/c5f25838ba9ec367a58c98c929921ebf09cd8ad8)]
+- refactor(megaMenu): update sub-title paddings [Antonis Tarantilis - [`992f919`](https://github.com/eea/volto-eea-design-system/commit/992f919bb5155c8e6fc169e43adf00dcae41f400)]
+- refactor(megaMenu): style sub-title and nav-description [Antonis Tarantilis - [`b2a48fd`](https://github.com/eea/volto-eea-design-system/commit/b2a48fd3588ffdc75f61f0b8d52284d13edf2d92)]
+- refactor(megaMenu): add nav_title and nav_description attributes [Antonis Tarantilis - [`0d7a568`](https://github.com/eea/volto-eea-design-system/commit/0d7a5686daab2ecec87d78728437d8f994606448)]
+- refactor(megaMenu): mobile - use buttons for menu section titles [Antonis Tarantilis - [`a7b632f`](https://github.com/eea/volto-eea-design-system/commit/a7b632fd29a8ac815d2e590509baa51f1279e659)]
+- refactor(megaMenu): desktop - use buttons for menu section titles and readjust content [Antonis Tarantilis - [`cb9315f`](https://github.com/eea/volto-eea-design-system/commit/cb9315f2b999193b7b64cec27c49fc8dda306899)]
+
+#### :house: Internal changes
+
+- style: load header/footer overrides [Miu Razvan - [`e5b5e0f`](https://github.com/eea/volto-eea-design-system/commit/e5b5e0fc00c61d81f45c12f119bd2f06a91b1b5c)]
+- style(megaMenu): restore item description color [Antonis Tarantilis - [`8a19bbb`](https://github.com/eea/volto-eea-design-system/commit/8a19bbb4866cdeb31d87b782587c499e621055b7)]
+- style(megaMenu): restore accordion content bottom padding [Antonis Tarantilis - [`8e0c5a7`](https://github.com/eea/volto-eea-design-system/commit/8e0c5a79f06247d353511b412b0122c6f614f5ec)]
+
+#### :hammer_and_wrench: Others
+
+- Release 1.0.0-alpha.3 [Alin Voinea - [`8fc86a7`](https://github.com/eea/volto-eea-design-system/commit/8fc86a7d0bf4ad06ab339b3066ff56ea61d48878)]
+- code cleanup [David Ichim - [`2cdc3e5`](https://github.com/eea/volto-eea-design-system/commit/2cdc3e590b6d36865f16890c45ce56d32963e1d0)]
+- Add subsite styling [kreafox - [`e79c0ed`](https://github.com/eea/volto-eea-design-system/commit/e79c0ed7931d6287dbeb3bab1e9155b8707481a3)]
+- test(estlint): Fix .project.eslintrc.js [Alin Voinea - [`aaeaa07`](https://github.com/eea/volto-eea-design-system/commit/aaeaa07b27491551daba29bbfdd7cab4a54b6bec)]
+- modified left value of full width classes with toolbars [David Ichim - [`70d82d4`](https://github.com/eea/volto-eea-design-system/commit/70d82d47fbc2c00a3a709de0d5c087c8443a1eae)]
+- WIP settings column grid width when using full size class [David Ichim - [`affc7ac`](https://github.com/eea/volto-eea-design-system/commit/affc7ac99527aa92d5a192d90dc8c9ec46a66404)]
+- fix eslint [Miu Razvan - [`30c52e4`](https://github.com/eea/volto-eea-design-system/commit/30c52e4eb443555ca44c1b35df064e73d52c0a8b)]
+- fix broken variable call for contentBox.variables introduced in previous commit by mistake [David Ichim - [`d249c11`](https://github.com/eea/volto-eea-design-system/commit/d249c1160d19bedb174a2fde3fdab48d9ce297d4)]
+- clean up [Miu Razvan - [`89f3cb3`](https://github.com/eea/volto-eea-design-system/commit/89f3cb33d70a14806a953f0acd1807e94169ee5c)]
+- Feature(container): flexible container size #260 from eea/feature-flexible-container [ichim-david - [`8f84c5b`](https://github.com/eea/volto-eea-design-system/commit/8f84c5b67afe9cbe01b2a44a8f92a9a554e1036a)]
+- removed console log from code [David Ichim - [`fad86ae`](https://github.com/eea/volto-eea-design-system/commit/fad86ae581dd81d0c29fc03d8528e57cadadd3fb)]
+- jslint fix [David Ichim - [`9846159`](https://github.com/eea/volto-eea-design-system/commit/98461593605344d0b6d8cba81f91d1cafc2653cd)]
+- feature(content): added NarrowView useful for modifying the containers from content-area [David Ichim - [`d937df7`](https://github.com/eea/volto-eea-design-system/commit/d937df7c262e8d8cc6e78eebec736e28263fc657)]
+### [1.0.0-alpha.2](https://github.com/eea/volto-eea-design-system/compare/1.0.0-alpha.1...1.0.0-alpha.2) - 28 October 2022
+
+#### :nail_care: Enhancements
+
+- refactor(volto-slate): Upgrade to @plone/volto-slate - refs #153447 [Alin Voinea - [`853d9d1`](https://github.com/eea/volto-eea-design-system/commit/853d9d189dd17859e3999fbf53507df7083eefb4)]
+- change(documentation): grammarly proof-read suggestions [David Ichim - [`9f609be`](https://github.com/eea/volto-eea-design-system/commit/9f609be3758673b0d479d99baee69e7238a5b7f9)]
+
+#### :house: Internal changes
+
+- chore(docs): Back to dev [Alin Voinea - [`e33113a`](https://github.com/eea/volto-eea-design-system/commit/e33113a0541d082d93f61c7494bcce2ac5f79a8c)]
+
+#### :hammer_and_wrench: Others
+
+- test(cypress): Upgrade to Cypress 10 / Razzle 4 [Alin Voinea - [`c1c1f4b`](https://github.com/eea/volto-eea-design-system/commit/c1c1f4b280945a9f0b77eb0b59de003c1360bac9)]
+- Update dependencies [Alin Voinea - [`ee30a2b`](https://github.com/eea/volto-eea-design-system/commit/ee30a2bad3769163d3ab4d996c0a7be8fcb4bc6e)]
+- add announcement bar, showing that EEA DS is WIP [Antonio De Marinis - [`e14aeac`](https://github.com/eea/volto-eea-design-system/commit/e14aeac02cf922493aff4f83c8d80af95cc63eb9)]
+- more explanations [Antonio De Marinis - [`a8b2272`](https://github.com/eea/volto-eea-design-system/commit/a8b22728659125ba6ea6fb41f29571a8f1b9953b)]
 ### [1.0.0-alpha.1](https://github.com/eea/volto-eea-design-system/compare/0.9.5...1.0.0-alpha.1) - 20 October 2022
 
 #### :nail_care: Enhancements

package/README.md

@@ -27,39 +27,6 @@ This package provides the following features:
 
 ## Getting started
 
-### Try volto-eea-design-system with Docker
-
-1. Get the latest Docker images
-
-   ```
-   docker pull plone
-   docker pull plone/volto
-   ```
-
-2. Start Plone backend
-   ```
-   docker run -v $(pwd)/var:/data -e SITE=Plone -p 8080:8080 -e PROFILES="profile-plone.restapi:blocks" --name eea-plone -it --rm plone fg
-   ```
-3. Wait until you get the following message:
-
-   ```
-   Serving on http://0.0.0.0:8080
-   ```
-
-4. Start Volto frontend
-
-   ```
-   docker run -it --rm -p 3000:3000 --link eea-plone -e ADDONS="@eeacms/volto-eea-design-system" plone/volto
-   ```
-
-5. Wait until you get the following message:
-
-   ```
-   Volto started at http://localhost:8080
-   ```
-
-6. Go to http://localhost:3000, login with admin:admin if you need to edit the site.
-
 ### 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
@@ -107,78 +74,7 @@ Checkout the docs found within the [mockups](https://github.com/eea/volto-eea-de
 
 ## Release
 
-### Automatic release using Jenkins
-
-*  The automatic release is started by creating a [Pull Request](../../compare/master...develop) from `develop` to `master`. The pull request status checks correlated to the branch and PR Jenkins jobs need to be processed successfully. 1 review from a github user with rights is mandatory.
-* It runs on every commit on `master` branch, which is protected from direct commits, only allowing pull request merge commits.
-* The automatic release is done by [Jenkins](https://ci.eionet.europa.eu). The status of the release job can be seen both in the Readme.md badges and the green check/red cross/yellow circle near the last commit information. If you click on the icon, you will have the list of checks that were run. The `continuous-integration/jenkins/branch` link goes to the Jenkins job execution webpage.
-* Automated release scripts are located in the `eeacms/gitflow` docker image, specifically [js-release.sh](https://github.com/eea/eea.docker.gitflow/blob/master/src/js-release.sh) script. It  uses the `release-it` tool.
-* As long as a PR request is open from develop to master, the PR Jenkins job will automatically re-create the CHANGELOG.md and package.json files to be production-ready.
-* The version format must be MAJOR.MINOR.PATCH. By default, next release is set to next minor version (with patch 0).
-* You can manually change the version in `package.json`.  The new version must not be already present in the tags/releases of the repository, otherwise it will be automatically increased by the script. Any changes to the version will trigger a `CHANGELOG.md` re-generation.
-* Automated commits and commits with [JENKINS] or [YARN] in the commit log are excluded from `CHANGELOG.md` file.
-
-### Manual release from the develop branch ( beta release )
-
-#### Installation and configuration of release-it
-
-You need to first install the [release-it](https://github.com/release-it/release-it)  client.
-
-   ```
-   npm install -g release-it
-   ```
-
-Release-it uses the configuration written in the [`.release-it.json`](./.release-it.json) file located in the root of the repository.
-
-Release-it is a tool that automates 4 important steps in the release process:
-
-1. Version increase in `package.json` ( increased from the current version in `package.json`)
-2. `CHANGELOG.md` automatic generation from commit messages ( grouped by releases )
-3. GitHub release on the commit with the changelog and package.json modification on the develop branch
-4. NPM release ( by default it's disabled, but can be enabled in the configuration file )
-
-To configure the authentification, you need to export GITHUB_TOKEN for [GitHub](https://github.com/settings/tokens)
-
-   ```
-   export GITHUB_TOKEN=XXX-XXXXXXXXXXXXXXXXXXXXXX
-   ```
-
- To configure npm, you can use the `npm login` command or use a configuration file with a TOKEN :
-
-   ```
-   echo "//registry.npmjs.org/:_authToken=YYYYYYYYYYYYYYYYYYYYYYYYYYYYYY" > .npmrc
-   ```
-
-#### Using release-it tool
-
-There are 3 yarn scripts that can be run to do the release
-
-##### yarn release-beta
-
-Automatically calculates and presents 3 beta versions - patch, minor and major for you to choose ( or Other for manual input).
-
-```
-? Select increment (next version):
-❯ prepatch (0.1.1-beta.0)
-  preminor (0.2.0-beta.0)
-  premajor (1.0.0-beta.0)
-  Other, please specify...
-```
-
-##### yarn release-major-beta
-
-Same as `yarn release-beta`, but with premajor version pre-selected.
-
-##### yarn release
-
-Generic command, does not automatically add the `beta` to version, but you can still manually write it if you choose Other.
-
-#### Important notes
-
-> Do not use release-it tool on master branch, the commit on CHANGELOG.md file and the version increase in the package.json file can't be done without a PULL REQUEST.
-
-> Do not keep Pull Requests from develop to master branches open when you are doing beta releases from the develop branch. As long as a PR to master is open, an automatic script will run on every commit and will update both the version and the changelog to a production-ready state - ( MAJOR.MINOR.PATCH mandatory format for version).
-
+See [RELEASE.md](https://github.com/eea/volto-eea-design-system/blob/master/RELEASE.md).
 
 ## How to contribute
 

package/RELEASE.md

@@ -0,0 +1,74 @@
+## Release
+
+### Automatic release using Jenkins
+
+*  The automatic release is started by creating a [Pull Request](../../compare/master...develop) from `develop` to `master`. The pull request status checks correlated to the branch and PR Jenkins jobs need to be processed successfully. 1 review from a github user with rights is mandatory.
+* It runs on every commit on `master` branch, which is protected from direct commits, only allowing pull request merge commits.
+* The automatic release is done by [Jenkins](https://ci.eionet.europa.eu). The status of the release job can be seen both in the Readme.md badges and the green check/red cross/yellow circle near the last commit information. If you click on the icon, you will have the list of checks that were run. The `continuous-integration/jenkins/branch` link goes to the Jenkins job execution webpage.
+* Automated release scripts are located in the `eeacms/gitflow` docker image, specifically [js-release.sh](https://github.com/eea/eea.docker.gitflow/blob/master/src/js-release.sh) script. It  uses the `release-it` tool.
+* As long as a PR request is open from develop to master, the PR Jenkins job will automatically re-create the CHANGELOG.md and package.json files to be production-ready.
+* The version format must be MAJOR.MINOR.PATCH. By default, next release is set to next minor version (with patch 0).
+* You can manually change the version in `package.json`.  The new version must not be already present in the tags/releases of the repository, otherwise it will be automatically increased by the script. Any changes to the version will trigger a `CHANGELOG.md` re-generation.
+* Automated commits and commits with [JENKINS] or [YARN] in the commit log are excluded from `CHANGELOG.md` file.
+
+### Manual release from the develop branch ( beta release )
+
+#### Installation and configuration of release-it
+
+You need to first install the [release-it](https://github.com/release-it/release-it)  client.
+
+   ```
+   npm install -g release-it
+   ```
+   
+Release-it uses the configuration written in the [`.release-it.json`](./.release-it.json) file located in the root of the repository.
+   
+Release-it is a tool that automates 4 important steps in the release process:
+
+1. Version increase in `package.json` ( increased from the current version in `package.json`)
+2. `CHANGELOG.md` automatic generation from commit messages ( grouped by releases )
+3. GitHub release on the commit with the changelog and package.json modification on the develop branch
+4. NPM release ( by default it's disabled, but can be enabled in the configuration file )
+
+To configure the authentification, you need to export GITHUB_TOKEN for [GitHub](https://github.com/settings/tokens) 
+
+   ```
+   export GITHUB_TOKEN=XXX-XXXXXXXXXXXXXXXXXXXXXX
+   ```
+ 
+ To configure npm, you can use the `npm login` command or use a configuration file with a TOKEN :
+ 
+   ```
+   echo "//registry.npmjs.org/:_authToken=YYYYYYYYYYYYYYYYYYYYYYYYYYYYYY" > .npmrc
+   ```
+
+#### Using release-it tool
+  
+There are 3 yarn scripts that can be run to do the release
+
+##### yarn release-beta
+
+Automatically calculates and presents 3 beta versions - patch, minor and major for you to choose ( or Other for manual input). 
+
+```
+? Select increment (next version): 
+❯ prepatch (0.1.1-beta.0) 
+  preminor (0.2.0-beta.0) 
+  premajor (1.0.0-beta.0) 
+  Other, please specify... 
+```
+
+##### yarn release-major-beta
+
+Same as `yarn release-beta`, but with premajor version pre-selected.
+    
+##### yarn release
+
+Generic command, does not automatically add the `beta` to version, but you can still manually write it if you choose Other.
+
+#### Important notes
+
+> Do not use release-it tool on master branch, the commit on CHANGELOG.md file and the version increase in the package.json file can't be done without a PULL REQUEST.  
+
+> Do not keep Pull Requests from develop to master branches open when you are doing beta releases from the develop branch. As long as a PR to master is open, an automatic script will run on every commit and will update both the version and the changelog to a production-ready state - ( MAJOR.MINOR.PATCH mandatory format for version).
+

package/babel.config.js

@@ -0,0 +1,17 @@
+module.exports = function (api) {
+  api.cache(true);
+  const presets = ['razzle'];
+  const plugins = [
+    [
+      'react-intl', // React Intl extractor, required for the whole i18n infrastructure to work
+      {
+        messagesDir: './build/messages/',
+      },
+    ],
+  ];
+
+  return {
+    plugins,
+    presets,
+  };
+};

package/cypress.config.js

@@ -0,0 +1,26 @@
+const { defineConfig } = require('cypress');
+
+module.exports = defineConfig({
+  viewportWidth: 1280,
+  defaultCommandTimeout: 8888,
+  chromeWebSecurity: false,
+  reporter: 'junit',
+  video: true,
+  retries: {
+    runMode: 8,
+    openMode: 0,
+  },
+  reporterOptions: {
+    mochaFile: 'cypress/reports/cypress-[hash].xml',
+    jenkinsMode: true,
+    toConsole: true,
+  },
+  e2e: {
+    setupNodeEvents(on, config) {
+      // e2e testing node events setup code
+      require('@cypress/code-coverage/task')(on, config);
+      return config;
+    },
+    baseUrl: 'http://localhost:3000',
+  },
+});

package/jest-addon.config.js

@@ -9,18 +9,18 @@ module.exports = {
     '@plone/volto/babel': '<rootDir>/node_modules/@plone/volto/babel',
     '@plone/volto/(.*)$': '<rootDir>/node_modules/@plone/volto/src/$1',
     '@package/(.*)$': '<rootDir>/src/$1',
+    '@root/(.*)$': '<rootDir>/src/$1',
     '@plone/volto-quanta/(.*)$': '<rootDir>/src/addons/volto-quanta/src/$1',
     '@eeacms/(.*?)/(.*)$': '<rootDir>/src/addons/$1/src/$2',
-    'volto-slate/(.*)$': '<rootDir>/src/addons/volto-slate/src/$1',
+    '@plone/volto-slate':
+      '<rootDir>/node_modules/@plone/volto/packages/volto-slate/src',
     '~/(.*)$': '<rootDir>/src/$1',
     'load-volto-addons':
       '<rootDir>/node_modules/@plone/volto/jest-addons-loader.js',
+    '\\.(css|less|scss|sass)$': 'identity-obj-proxy',
   },
   transform: {
     '^.+\\.js(x)?$': 'babel-jest',
-    '^.+\\.css$': 'jest-css-modules',
-    '^.+\\.less$': 'jest-css-modules',
-    '^.+\\.scss$': 'jest-css-modules',
     '^.+\\.(png)$': 'jest-file',
     '^.+\\.(jpg)$': 'jest-file',
     '^.+\\.(svg)$': './node_modules/@plone/volto/jest-svgsystem-transform.js',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-design-system",
-  "version": "1.0.0-alpha.1",
+  "version": "1.0.0-alpha.3",
   "description": "@eeacms/volto-eea-design-system: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -26,9 +26,10 @@
     "react-countup": "^6.3.0"
   },
   "devDependencies": {
-    "md5": "^2.3.0",
-    "@cypress/code-coverage": "^3.9.5",
-    "babel-plugin-transform-class-properties": "^6.24.1"
+    "@plone/scripts": "*",
+    "@cypress/code-coverage": "^3.10.0",
+    "babel-plugin-transform-class-properties": "^6.24.1",
+    "md5": "^2.3.0"
   },
   "scripts": {
     "release": "release-it",
@@ -37,16 +38,16 @@
     "bootstrap": "npm install -g ejs; npm link ejs; node bootstrap",
     "test": "make test",
     "test:fix": "make test-update",
-    "i18n": "rm -rf build/messages && NODE_ENV=production node src/i18n.js",
     "pre-commit": "yarn stylelint:fix && yarn prettier:fix && yarn lint:fix",
-    "stylelint": "../../../node_modules/stylelint/bin/stylelint.js --allow-empty-input 'src/**/*.{css,less}'",
-    "stylelint:overrides": "../../../node_modules/.bin/stylelint  --allow-empty-input 'theme/**/*.overrides' 'src/**/*.overrides'",
-    "stylelint:fix": "yarn stylelint --fix && yarn stylelint:overrides --fix",
-    "prettier": "../../../node_modules/.bin/prettier --single-quote --check 'src/**/*.{js,jsx,json,css,less,md}'",
-    "prettier:fix": "../../../node_modules/.bin/prettier --single-quote --write 'src/**/*.{js,jsx,json,css,less,md}'",
-    "lint": "../../../node_modules/eslint/bin/eslint.js --max-warnings=0 'src/**/*.{js,jsx}'",
-    "lint:fix": "../../../node_modules/eslint/bin/eslint.js --fix 'src/**/*.{js,jsx}'; fi",
-    "cypress:run": "../../../node_modules/cypress/bin/cypress run",
-    "cypress:open": "../../../node_modules/cypress/bin/cypress open"
+    "stylelint": "make stylelint",
+    "stylelint:overrides": "make stylelint-overrides",
+    "stylelint:fix": "make stylelint-fix",
+    "prettier": "make prettier",
+    "prettier:fix": "make prettier-fix",
+    "lint": "make lint",
+    "lint:fix": "make lint-fix",
+    "i18n": "make i18n",
+    "cypress:run": "make cypress-run",
+    "cypress:open": "make cypress-open"
   }
 }

package/src/index.js

@@ -3,6 +3,7 @@ const applyConfig = (config) => {
     ...(config.settings || {}),
     navDepth: 3,
   };
+
   return config;
 };
 

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

@@ -0,0 +1,167 @@
+import React, { useState } from 'react';
+import { Accordion, Icon, Container } from 'semantic-ui-react';
+
+export default {
+  title: 'Components/Accordion',
+  component: Accordion,
+  parameters: {
+    actions: {
+      handles: ['click'],
+    },
+  },
+  argTypes: {
+    variant: {
+      name: 'Variation',
+      defaultValue: 'primary',
+      options: ['default', 'primary', 'secondary', 'tertiary'],
+      control: { type: 'select' },
+      description: 'call to action variation',
+      table: {
+        defaultValue: { summary: 'primary' },
+        type: { summary: 'string' },
+      },
+    },
+    toggle1: {
+      description: 'Text of the accordion toggler',
+      table: {
+        type: {
+          summary: 'string',
+        },
+        defaultValue: {
+          summary: '""',
+        },
+      },
+    },
+    toggle2: {
+      description: 'Text of the accordion toggler',
+      table: {
+        type: {
+          summary: 'string',
+        },
+        defaultValue: {
+          summary: '""',
+        },
+      },
+    },
+    toggle3: {
+      description: 'Text of the accordion toggler',
+      table: {
+        type: {
+          summary: 'string',
+        },
+        defaultValue: {
+          summary: '""',
+        },
+      },
+    },
+    content1: {
+      description: 'Text of the hidden content',
+      table: {
+        type: {
+          summary: 'array',
+        },
+        defaultValue: {
+          summary: '""',
+        },
+      },
+    },
+    content2: {
+      description: 'Text of the hidden content',
+      table: {
+        type: {
+          summary: 'array',
+        },
+        defaultValue: {
+          summary: '""',
+        },
+      },
+    },
+    content3: {
+      description: 'Text of the hidden content',
+      table: {
+        type: {
+          summary: 'array',
+        },
+        defaultValue: {
+          summary: '""',
+        },
+      },
+    },
+  },
+};
+
+function AccordionContainer({ ...args }) {
+  const [activeIndex, setActiveIndex] = useState();
+
+  const toggleOpenAccordion = (e, titleProps) => {
+    const { index } = titleProps;
+    const newIndex = activeIndex === index ? -1 : index;
+
+    setActiveIndex(newIndex);
+  };
+
+  return (
+    <Container>
+      <Accordion className={args.variant}>
+        <Accordion.Title
+          active={activeIndex === 0}
+          index={0}
+          onClick={toggleOpenAccordion}
+        >
+          {args.toggle1}
+          <Icon className="ri-arrow-down-s-line" />
+        </Accordion.Title>
+        <Accordion.Content active={activeIndex === 0}>
+          {args.content1.length > 0 &&
+            args.content1.map((item, index) => <p key={index}>{item}</p>)}
+        </Accordion.Content>
+
+        <Accordion.Title
+          active={activeIndex === 1}
+          index={1}
+          onClick={toggleOpenAccordion}
+        >
+          {args.toggle2}
+          <Icon className="ri-arrow-down-s-line" />
+        </Accordion.Title>
+        <Accordion.Content active={activeIndex === 1}>
+          {args.content2.length > 0 &&
+            args.content2.map((item, index) => <p key={index}>{item}</p>)}
+        </Accordion.Content>
+
+        <Accordion.Title
+          active={activeIndex === 2}
+          index={2}
+          onClick={toggleOpenAccordion}
+        >
+          {args.toggle3}
+          <Icon className="ri-arrow-down-s-line" />
+        </Accordion.Title>
+        <Accordion.Content active={activeIndex === 2}>
+          {args.content3.length > 0 &&
+            args.content3.map((item, index) => <p key={index}>{item}</p>)}
+        </Accordion.Content>
+      </Accordion>
+    </Container>
+  );
+}
+
+const Template = (args) => <AccordionContainer {...args}></AccordionContainer>;
+
+export const Default = Template.bind({});
+Default.args = {
+  variant: 'secondary',
+  toggle1: 'Water and marine environment',
+  toggle2: 'Resource efficiency and waste',
+  toggle3: 'Air pollution',
+  content1: [
+    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Urna nisi mauris enim felis eget id sed tristique. At laoreet ligula pretium, pulvinar. Accumsan egestas ultricies erat sed. Eget non quis libero, odio elementum lectus lectus ullamcorper elit. In quam pulvinar amet, habitasse mi lorem nunc. Sed sed elementum est purus elementum eget. Elementum tortor at nulla nunc, tempor rhoncus, bibendum. Massa mauris, mauris, vel elementum adipiscing.',
+  ],
+  content2: [
+    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Urna nisi mauris enim felis eget id sed tristique. At laoreet ligula pretium, pulvinar. Accumsan egestas ultricies erat sed. Eget non quis libero, odio elementum lectus lectus ullamcorper elit. In quam pulvinar amet, habitasse mi lorem nunc. Sed sed elementum est purus elementum eget. Elementum tortor at nulla nunc, tempor rhoncus, bibendum. Massa mauris, mauris, vel elementum adipiscing.',
+  ],
+  content3: [
+    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Urna nisi mauris enim felis eget id sed tristique. At laoreet ligula pretium, pulvinar. Accumsan egestas ultricies erat sed. Eget non quis libero, odio elementum lectus lectus ullamcorper elit. In quam pulvinar amet, habitasse mi lorem nunc. Sed sed elementum est purus elementum eget. Elementum tortor at nulla nunc, tempor rhoncus, bibendum. Massa mauris, mauris, vel elementum adipiscing.',
+    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Urna nisi mauris enim felis eget id sed tristique. At laoreet ligula pretium, pulvinar. Accumsan egestas ultricies erat sed. Eget non quis libero, odio elementum lectus lectus ullamcorper elit. In quam pulvinar amet, habitasse mi lorem nunc. Sed sed elementum est purus elementum eget. Elementum tortor at nulla nunc, tempor rhoncus, bibendum. Massa mauris, mauris, vel elementum adipiscing.',
+  ],
+};