@eeacms/volto-eea-design-system 0.9.5 → 1.0.0-alpha.2

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,15 @@
 const fs = require('fs');
 const path = require('path');
 
-const projectRootPath = fs.realpathSync('./project'); // __dirname
+const projectRootPath = fs.realpathSync('./project');    // __dirname
 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,7 +18,7 @@ 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,
 ]);

package/CHANGELOG.md

@@ -4,6 +4,44 @@ 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.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
+
+- change(blockquote): renamed to Callout reflecting the correct naming from Storybook [David Ichim - [`61a518c`](https://github.com/eea/volto-eea-design-system/commit/61a518c84f08b03d29b99aafce3d9108ae56b3a7)]
+- change(footer): Shadow removed from logo & tablet updates #252 from eea/fix-footer [ichim-david - [`6df783d`](https://github.com/eea/volto-eea-design-system/commit/6df783d6571cb1b477202bf1d503763d98db66bf)]
+- change(colors): updated theme classes for text to use css variable colors [David Ichim - [`cb089fd`](https://github.com/eea/volto-eea-design-system/commit/cb089fd9a40b67430e0d4efaa2cb51902a46de4f)]
+- refactor(footer): update svg and tablet contact link sizes [Antonis Tarantilis - [`6aba061`](https://github.com/eea/volto-eea-design-system/commit/6aba061a5d37e84da706e94a2ce1140ffca81d43)]
+
+#### :house: Internal changes
+
+- style(footer): reduce social icons margin [Antonis Tarantilis - [`f6a9cf7`](https://github.com/eea/volto-eea-design-system/commit/f6a9cf7a6da4a46d9b85a63fbdfc8d421ae4c0d8)]
+
+#### :house: Documentation changes
+
+- docs(callout): Rename Blockqoute to Callout in docusaurus - refs #154387 [Alin Voinea - [`8d733ac`](https://github.com/eea/volto-eea-design-system/commit/8d733ac7b00273581575ceddd1a4480ba67fa498)]
+- docs(alpha): Update included components in 1.0 alpha version - refs #154387 [Alin Voinea - [`fcc5af9`](https://github.com/eea/volto-eea-design-system/commit/fcc5af9bb9163d158ccd6ce452d7f80ac26f7ac0)]
+
+#### :hammer_and_wrench: Others
+
+- Release 1.0.0-alpha.1 [Alin Voinea - [`70e4d97`](https://github.com/eea/volto-eea-design-system/commit/70e4d97c6a2b13f3b98efe1e2ba93174be2df476)]
 ### [0.9.5](https://github.com/eea/volto-eea-design-system/compare/0.9.4...0.9.5) - 20 October 2022
 
 #### :bug: Bug Fixes
@@ -54,7 +92,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :nail_care: Enhancements
 
-- change(jenkins): added yarn policy for storybook building [ichim-david - [`3d1b844`](https://github.com/eea/volto-eea-design-system/commit/3d1b844efeea40b99c00c9aa97089e0a0be58a57)]
 - change(docusaurus): typography updates [ichim-david - [`60a93a4`](https://github.com/eea/volto-eea-design-system/commit/60a93a4aece4e478ae13c2dfe697fd3703aa178a)]
 - change(accordion): allow customization of accordion title with css variables [David Ichim - [`15e7d27`](https://github.com/eea/volto-eea-design-system/commit/15e7d27f02c640df582f51a51ef36e645723f842)]
 - change(content-box): added css variables that will set text color and background for children [David Ichim - [`86cac53`](https://github.com/eea/volto-eea-design-system/commit/86cac531cc94386b6022e1be80dba826b39f2443)]
@@ -89,7 +126,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 #### :hammer_and_wrench: Others
 
 - Merge pull request #243 from eea/develop [ichim-david - [`576564c`](https://github.com/eea/volto-eea-design-system/commit/576564ce395ee6ac9e74bcb19d5c4f0b4cd3c33b)]
-- Add Sonarqube tag using eea-website-frontend addons list [EEA Jenkins - [`4a5be6e`](https://github.com/eea/volto-eea-design-system/commit/4a5be6eec78dae230626e61ea2c77e7f3c62510d)]
 - Back to dev [Alin Voinea - [`b251255`](https://github.com/eea/volto-eea-design-system/commit/b251255a7ed14d8290717726d86eaf54b87aa2d4)]
 ### [0.9.0](https://github.com/eea/volto-eea-design-system/compare/0.8.1...0.9.0) - 19 September 2022
 
@@ -845,10 +881,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 #### :hammer_and_wrench: Others
 
 - prettier changes [David Ichim - [`134da52`](https://github.com/eea/volto-eea-design-system/commit/134da52549b9d5eac5a12b7ad3005073500ac2c4)]
-- [JENKINSFILE] remove debug, add error per stage [valentinab25 - [`903eecd`](https://github.com/eea/volto-eea-design-system/commit/903eecdb6bcbb8d73cff5e447d80c85e2a2c906d)]
-- [JENKINSFILE] mention comment author in comment [valentinab25 - [`39a26aa`](https://github.com/eea/volto-eea-design-system/commit/39a26aa1ff0f35e93e8df9f442c29c5ab79ff493)]
-- [JENKINSFILE] format PR comments [valentinab25 - [`739438c`](https://github.com/eea/volto-eea-design-system/commit/739438c64950c745d630d1998314a2bed595b23a)]
-- [JENKINSFILE] Add failure comment, no jenkins fail [valentinab25 - [`c325bf1`](https://github.com/eea/volto-eea-design-system/commit/c325bf14f3fb0da150f2a56cda0a9f03d8d8a628)]
 ### [0.2.3](https://github.com/eea/volto-eea-design-system/compare/0.2.2...0.2.3) - 29 April 2022
 
 #### :rocket: New Features
@@ -1273,7 +1305,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - set profile section overflow to auto [nileshgulia1 - [`71ab47f`](https://github.com/eea/volto-eea-design-system/commit/71ab47f89a433233c14b394c3824e607dd18a393)]
 - remove segment custom width [nileshgulia1 - [`1d3ea40`](https://github.com/eea/volto-eea-design-system/commit/1d3ea40f98bbdc1eab95b4da739a659b5e29ec16)]
 - fix profile section css overflow [nileshgulia1 - [`db5126f`](https://github.com/eea/volto-eea-design-system/commit/db5126fc902e191d1e18fb7e4c54877c8d8786e6)]
-- Add Sonarqube tag using eea-website-frontend addons list [EEA Jenkins - [`647a6e3`](https://github.com/eea/volto-eea-design-system/commit/647a6e3e2093f2c4884c356eb148453551c8f33f)]
 - fix warning related to proptype [nileshgulia1 - [`946c6c6`](https://github.com/eea/volto-eea-design-system/commit/946c6c6bc9dece0985ae4b9f9cad6ece2be0ff2c)]
 - removed override already present in card.less [ichim-david - [`50d2ab2`](https://github.com/eea/volto-eea-design-system/commit/50d2ab26f85c8f409da02ec128cc1df34848ca69)]
 - update [Miu Razvan - [`bbcab87`](https://github.com/eea/volto-eea-design-system/commit/bbcab87ef4c8475f347f0daf4ab7e428e69c2316)]
@@ -1360,7 +1391,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - remove segment custom width [nileshgulia1 - [`4a60d84`](https://github.com/eea/volto-eea-design-system/commit/4a60d84d5fe76578b7760aa1dad6eef9a20916a7)]
 - Reformat header.less [Tiberiu Ichim - [`1f99dfc`](https://github.com/eea/volto-eea-design-system/commit/1f99dfc82c165304ca5600ce5138c1233615ab69)]
 - fix profile section css overflow [nileshgulia1 - [`8fd2654`](https://github.com/eea/volto-eea-design-system/commit/8fd265413149f1b5e033dffa0fbcb5ef5ecad15f)]
-- Add Sonarqube tag using eea-website-frontend addons list [EEA Jenkins - [`6051724`](https://github.com/eea/volto-eea-design-system/commit/6051724437a38675e659c797bb5586ef81286ec0)]
 - fix warning related to proptype [nileshgulia1 - [`824b9be`](https://github.com/eea/volto-eea-design-system/commit/824b9beff77aae139882cd50a1d670a02ec6f723)]
 - refactor breadcrumbs component, make it functional and customizable [nileshgulia1 - [`4ec374e`](https://github.com/eea/volto-eea-design-system/commit/4ec374e20565eb0a5aed0ff67a02cd6f77eba1f0)]
 - removed override already present in card.less [ichim-david - [`93c4e5a`](https://github.com/eea/volto-eea-design-system/commit/93c4e5aac9cc85ff2cc6c04180f6655d5f5616dc)]
@@ -1929,7 +1959,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - Refs #142010 - Optimize Volto-addons gitflow pipelines [valentinab25 - [`3af46d2`](https://github.com/eea/volto-eea-design-system/commit/3af46d2b14fa0b1ef44736f25b0f9ac93b23d18d)]
 - Refs #140454  updated eea-design-system readme with extra info on package contents [David Ichim - [`d2efc3d`](https://github.com/eea/volto-eea-design-system/commit/d2efc3ddae7b91efc82cf3bce8fb8e42d696a780)]
 - Refs #140454 add h1 to the list of elements that are max 800px and centered [David Ichim - [`7d3c30f`](https://github.com/eea/volto-eea-design-system/commit/7d3c30f409aa4cb43810839f8960589456cc1b2e)]
-- Add Sonarqube tag using ims-frontend addons list [EEA Jenkins - [`8d657d0`](https://github.com/eea/volto-eea-design-system/commit/8d657d056cde5163cfe90ac66bc973f55d82e5e9)]
 ### [0.1.0](https://github.com/eea/volto-eea-design-system/compare/0.0.1...0.1.0) - 17 November 2021
 
 #### :hammer_and_wrench: Others

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": "0.9.5",
+  "version": "1.0.0-alpha.2",
   "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/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.',
+  ],
+};