@eeacms/volto-eea-design-system 1.34.1 → 1.35.0

package/CHANGELOG.md

@@ -4,11 +4,13 @@ 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.34.1](https://github.com/eea/volto-eea-design-system/compare/1.34.0...1.34.1) - 14 October 2024
+### [1.35.0](https://github.com/eea/volto-eea-design-system/compare/1.34.1...1.35.0) - 11 November 2024
 
 #### :hammer_and_wrench: Others
 
-- fixed crash of datahub due to missing children on actions props on server side first render [David Ichim - [`64aafb7`](https://github.com/eea/volto-eea-design-system/commit/64aafb7451a0f08daeead1b22b0ba0676b641857)]
+- Update package.json [Ichim David - [`40ae6a7`](https://github.com/eea/volto-eea-design-system/commit/40ae6a70377c54256f7365a12bded4e25b0c322e)]
+### [1.34.1](https://github.com/eea/volto-eea-design-system/compare/1.34.0...1.34.1) - 14 October 2024
+
 ### [1.34.0](https://github.com/eea/volto-eea-design-system/compare/1.33.1...1.34.0) - 11 October 2024
 
 #### :hammer_and_wrench: Others
@@ -88,7 +90,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :hammer_and_wrench: Others
 
-- Add Sonarqube tag using marine-frontend addons list [EEA Jenkins - [`dfa1d1b`](https://github.com/eea/volto-eea-design-system/commit/dfa1d1bd53ae63b20aa0ef64c37bf71faf376290)]
 ### [1.31.0](https://github.com/eea/volto-eea-design-system/compare/1.23.8...1.31.0) - 22 May 2024
 
 #### :boom: Breaking Change
@@ -117,7 +118,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :hammer_and_wrench: Others
 
-- Add Sonarqube tag using insitu-frontend addons list [EEA Jenkins - [`2ccf437`](https://github.com/eea/volto-eea-design-system/commit/2ccf4372f93d56ce3cc8bfd66de5c9fbb2698cf4)]
 ### [1.23.5](https://github.com/eea/volto-eea-design-system/compare/1.23.4...1.23.5) - 5 April 2024
 
 #### :nail_care: Enhancements
@@ -153,8 +153,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - Update package.json version to 1.23.0 [David Ichim - [`4b2eeee`](https://github.com/eea/volto-eea-design-system/commit/4b2eeee398b771ac80111e1755f67273c8940ced)]
 - fixed merge conflict [David Ichim - [`efe0f4b`](https://github.com/eea/volto-eea-design-system/commit/efe0f4b7df1782f5143e1bee31c997801427d35c)]
 - Update react-slick version to 0.30.1 [David Ichim - [`62d4570`](https://github.com/eea/volto-eea-design-system/commit/62d457014866fc075a3203fd0f9e66354aa73fe5)]
-- Add Sonarqube tag using freshwater-frontend addons list [EEA Jenkins - [`c6c74f0`](https://github.com/eea/volto-eea-design-system/commit/c6c74f049ee787632b8ad0ec0f28531ac4d0f20f)]
-- Add Sonarqube tag using insitu-frontend addons list [EEA Jenkins - [`d3d7793`](https://github.com/eea/volto-eea-design-system/commit/d3d779363caa10f384d829a7e4242c5d54268099)]
 ### [1.23.0](https://github.com/eea/volto-eea-design-system/compare/1.22.7...1.23.0) - 19 February 2024
 
 ### [1.22.7](https://github.com/eea/volto-eea-design-system/compare/1.22.6...1.22.7) - 22 January 2024
@@ -240,11 +238,7 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - Add dropdown test case to Header component [David Ichim - [`9ea3234`](https://github.com/eea/volto-eea-design-system/commit/9ea3234c2c0f1c819c7c2b54a75c56cda7812c56)]
 - Remove unused import in Header.test.jsx [David Ichim - [`082069e`](https://github.com/eea/volto-eea-design-system/commit/082069e1f057786e0f1fb00c98d54b8e03b5d9c5)]
 - Added some tests for TopDropdownMenu mobile and dropdown interaction [David Ichim - [`9d24488`](https://github.com/eea/volto-eea-design-system/commit/9d24488c1e97b2b1b14bd9bd8cb6f5b68414794b)]
-- test: [JENKINS] Run cypress in started frontend container [valentinab25 - [`eadf018`](https://github.com/eea/volto-eea-design-system/commit/eadf018aa1f32d310619ce4ef08f9b11950a20dc)]
 - Lint fix [David Ichim - [`e29fd50`](https://github.com/eea/volto-eea-design-system/commit/e29fd50ee73477007dcf94a268596e6c11176d7b)]
-- test: [JENKINS] Add cpu limit on cypress docker [valentinab25 - [`947cb92`](https://github.com/eea/volto-eea-design-system/commit/947cb929c01ebb6f46bf124833fe1fec0f385edb)]
-- test: [JENKINS] Increase shm-size to cypress docker [valentinab25 - [`8356dfe`](https://github.com/eea/volto-eea-design-system/commit/8356dfe929039dcd165af0692cbbfc771a0f7fb4)]
-- test: [JENKINS] Improve cypress time [valentinab25 - [`e38f17e`](https://github.com/eea/volto-eea-design-system/commit/e38f17ed735e743e59df7d06ca723c1218bdb569)]
 ### [1.20.0](https://github.com/eea/volto-eea-design-system/compare/1.19.0...1.20.0) - 2 November 2023
 
 #### :rocket: New Features
@@ -277,9 +271,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :house: Internal changes
 
-- chore: [JENKINS] do not run tests on PR comments [valentinab25 - [`51b68fc`](https://github.com/eea/volto-eea-design-system/commit/51b68fc76a956996e01521b784262c67e7094d35)]
-- chore: [JENKINS] add comment step [valentinab25 - [`5022758`](https://github.com/eea/volto-eea-design-system/commit/50227587db2c72d17e26e7b66f28d4c09b760873)]
-- chore: [JENKINS] Refactor automated testing [valentinab25 - [`a70ca64`](https://github.com/eea/volto-eea-design-system/commit/a70ca642918f578d6737d975e4769bac8312f48d)]
 - chore: husky, lint-staged use fixed versions [valentinab25 - [`59ecb8e`](https://github.com/eea/volto-eea-design-system/commit/59ecb8e28b259472303324f9655b0cbbcbbf9c23)]
 
 #### :hammer_and_wrench: Others
@@ -405,7 +396,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :hammer_and_wrench: Others
 
-- test: Fix eslint and yarn i18n [Alin Voinea - [`331149f`](https://github.com/eea/volto-eea-design-system/commit/331149f5eb16a9cc6f2d996f7b793909773063c2)]
 - i18n: Add en [Alin Voinea - [`4584295`](https://github.com/eea/volto-eea-design-system/commit/458429530d993c27cfb962ddfe2f376f3568bf01)]
 - Release 1.17.0 [Alin Voinea - [`e3c25ee`](https://github.com/eea/volto-eea-design-system/commit/e3c25eeeca5e863244faae396b5aa915d0702633)]
 - test: add unit tests for DS components - refs #254313 [ana-oprea - [`0c4d4d1`](https://github.com/eea/volto-eea-design-system/commit/0c4d4d118b8e13082c576dc5c2dce6a715f49006)]
@@ -515,7 +505,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 #### :hammer_and_wrench: Others
 
 - Release 1.14.0 [Alin Voinea - [`cb9084f`](https://github.com/eea/volto-eea-design-system/commit/cb9084fb2246dc1b729e12a419a26daa12c26f7a)]
-- test: [JENKINS] set pipe fail [valentinab25 - [`1cdfc39`](https://github.com/eea/volto-eea-design-system/commit/1cdfc39d08f1ae301dea57f1e4be5265c4a4c6f9)]
 - test: try storybook upload [valentinab25 - [`6d5833d`](https://github.com/eea/volto-eea-design-system/commit/6d5833d4419d00f1ac04c9eb78a0884214f9a494)]
 - test: remove useless code [valentinab25 - [`2c14b0c`](https://github.com/eea/volto-eea-design-system/commit/2c14b0ce4596cfc11a81b9762677596d1861acfe)]
 ### [1.13.2](https://github.com/eea/volto-eea-design-system/compare/1.13.1...1.13.2) - 13 June 2023
@@ -554,7 +543,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :house: Internal changes
 
-- chore: [JENKINS] Deprecate circularity website [valentinab25 - [`fb2b166`](https://github.com/eea/volto-eea-design-system/commit/fb2b166d64f95a1c183901abfe0fe0254d1bbc7a)]
 
 #### :house: Documentation changes
 
@@ -888,7 +876,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 - Release 1.0.0-beta.5 [Alin Voinea - [`e4417e1`](https://github.com/eea/volto-eea-design-system/commit/e4417e121477511c350ae3fbe4e70aadb445ed86)]
 - better useOnScreen hook [Andrei Grigore - [`c214b6b`](https://github.com/eea/volto-eea-design-system/commit/c214b6b76443f81c795ce2f3aa457562ec088b30)]
-- Add Sonarqube tag using eea-website-frontend addons list [EEA Jenkins - [`b227cf8`](https://github.com/eea/volto-eea-design-system/commit/b227cf8a8c44b9d91e9fda8a7999fb0a42bacdca)]
 - feature(mobile): increased performance by lazy loading footer images #303 from eea/increase_performance [ichim-david - [`80d1df1`](https://github.com/eea/volto-eea-design-system/commit/80d1df1c459680331d486f9e8e6a95c9db0adbf6)]
 - prettier [David Ichim - [`a7f8384`](https://github.com/eea/volto-eea-design-system/commit/a7f838470c1bcc4e2be115d514d92a1b686a5e9b)]
 - fixed less build failure due to changes in footer.less [David Ichim - [`190bc8c`](https://github.com/eea/volto-eea-design-system/commit/190bc8cfa88191b45808f1e27c6e2737ee3d15b1)]
@@ -959,7 +946,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :house: Internal changes
 
-- chore(docusaurus): ignore website/.yarn [Giorgos Stamatis - [`0b33ffd`](https://github.com/eea/volto-eea-design-system/commit/0b33ffd1dda61b126e3cc5ff48888124d6aee41b)]
 - style(header): react syntax fix [Antonis Tarantilis - [`3add127`](https://github.com/eea/volto-eea-design-system/commit/3add1271c785a92bea0ef925d7bc562cef1e0d92)]
 
 #### :house: Documentation changes
@@ -1156,7 +1142,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 - Release 1.0.0-alpha.10 [Alin Voinea - [`7014d08`](https://github.com/eea/volto-eea-design-system/commit/7014d080ce114bd0bc039abeecbd7229333b0971)]
 - Add variable definitions [kreafox - [`293fe65`](https://github.com/eea/volto-eea-design-system/commit/293fe65e2f24e6290e1286229169a77f9be4750e)]
-- Add Sonarqube tag using advisory-board-frontend addons list [EEA Jenkins - [`ef58a6f`](https://github.com/eea/volto-eea-design-system/commit/ef58a6f5ad8deea26b1395a86778fe1159b7617b)]
 - Back to dev [Alin Voinea - [`31d4616`](https://github.com/eea/volto-eea-design-system/commit/31d461662b9184a7bbe190e86f3c47fab39229fe)]
 ### [1.0.0-alpha.9](https://github.com/eea/volto-eea-design-system/compare/1.0.0-alpha.8...1.0.0-alpha.9) - 28 December 2022
 
@@ -1214,7 +1199,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - bump package version [David Ichim - [`b4628be`](https://github.com/eea/volto-eea-design-system/commit/b4628bed134abc76e38a243d4e98143e19cef989)]
 - feature(docusaurus, storybook): logos selection for sites plus inverted options #253 from eea/doc-logo-page [ichim-david - [`dbfc90d`](https://github.com/eea/volto-eea-design-system/commit/dbfc90d035dc40e9d4054347f00fde4de486d63d)]
 - (feat): Add ability to disable the language select from website top menu  - refs #158616 [dobri1408 - [`411c8e4`](https://github.com/eea/volto-eea-design-system/commit/411c8e4afaf0b2b9edfdeeecdca22aa4cc41f329)]
-- Add Sonarqube tag using advisory-board-frontend addons list [EEA Jenkins - [`c4769e9`](https://github.com/eea/volto-eea-design-system/commit/c4769e987d525f5dcafac8e6cf8a89fd8111667d)]
 - test(Jenkins): Run tests and cypress with latest canary @plone/volto [Alin Voinea - [`92feea0`](https://github.com/eea/volto-eea-design-system/commit/92feea09796c9ef0530f65fa1d34139905133215)]
 - Proof reading page header section [ichim-david - [`230239e`](https://github.com/eea/volto-eea-design-system/commit/230239e1b22734fb8606656985bc5e513731e244)]
 ### [1.0.0-alpha.7](https://github.com/eea/volto-eea-design-system/compare/1.0.0-alpha.6...1.0.0-alpha.7) - 16 December 2022
@@ -1246,7 +1230,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 #### :hammer_and_wrench: Others
 
 - Release 1.0.0-alpha.7 [Alin Voinea - [`7e66bcc`](https://github.com/eea/volto-eea-design-system/commit/7e66bcc296b389bc55073e7f99681534977dce3a)]
-- Add Sonarqube tag using cca-frontend addons list [EEA Jenkins - [`ce47e9b`](https://github.com/eea/volto-eea-design-system/commit/ce47e9b163bcb4eda988e3a87718b54ffbd3f99f)]
 - added back descriptionDistance variable until package release [David Ichim - [`3af811a`](https://github.com/eea/volto-eea-design-system/commit/3af811a8d86a132e16de118697ba5a4302a8a4da)]
 - Back to dev [Alin Voinea - [`cb531c9`](https://github.com/eea/volto-eea-design-system/commit/cb531c933c907bdbb88c9de0f1df2eb7ce899a4c)]
 - Proper paths if the package is not installed, but in development [Tiberiu Ichim - [`7a2655f`](https://github.com/eea/volto-eea-design-system/commit/7a2655f7cf9d3c687f172eefcf2b4cff4b12f832)]
@@ -1334,7 +1317,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 #### :hammer_and_wrench: Others
 
 - feature(Docusaurus): Updates on color palette information including thematic websites #231 from eea/refactor-docusaurus [ichim-david - [`ec7843d`](https://github.com/eea/volto-eea-design-system/commit/ec7843dea07f626dc1c71ae1baa8bb5b0caa52f3)]
-- Upgrade Jenkinsfile storybook to yarn 3 [Alin Voinea - [`d20de8d`](https://github.com/eea/volto-eea-design-system/commit/d20de8d6e21a14660b7b5125a80218a8a6f19e62)]
 - Back to dev [Alin Voinea - [`563fbc5`](https://github.com/eea/volto-eea-design-system/commit/563fbc5fac0d4b0295690d0a3a4e04271753f18a)]
 - perf(docusaurus): added remixicon and roboto locally [Giorgos Stamatis - [`b67b1a7`](https://github.com/eea/volto-eea-design-system/commit/b67b1a72bc9cdc7c62a25967e81b430f8b62d558)]
 ### [1.0.0-alpha.4](https://github.com/eea/volto-eea-design-system/compare/1.0.0-alpha.3...1.0.0-alpha.4) - 22 November 2022
@@ -1427,7 +1409,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - 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)]
-- Add Sonarqube tag using circularity-frontend addons list [EEA Jenkins - [`76a41c7`](https://github.com/eea/volto-eea-design-system/commit/76a41c786995fd54afe4d1c345de939f683ffa70)]
 - 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)]
@@ -1529,7 +1510,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)]
@@ -1564,7 +1544,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
 
@@ -2320,10 +2299,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
@@ -2748,7 +2723,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)]
@@ -2835,7 +2809,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)]
@@ -3404,7 +3377,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/package.json

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

package/src/ui/Banner/Banner.jsx

@@ -53,7 +53,10 @@ function Banner({ image, metadata, properties, children, styles, ...rest }) {
     return (
       <div className="eea banner">
         <div
-          className={cx(imageUrl ? 'image' : '', styles?.bg)}
+          className={cx(
+            imageUrl ? 'image' : '',
+            ...Object.values(styles || {}),
+          )}
           style={imageUrl ? { backgroundImage: `url(${imageUrl})` } : {}}
         >
           <div className="gradient">

package/src/ui/Breadcrumbs/Breadcrumbs.jsx

@@ -15,7 +15,7 @@ const Breadcrumbs = ({
   sections = [],
   icon = 'ri-arrow-right-s-line',
   size = 'tiny',
-  linkLevels = 1,
+  contentTypesAsBreadcrumbSection = [],
 }) => {
   return sections.length > 0 ? (
     <Segment className="breadcrumbs" attached vertical>
@@ -27,22 +27,27 @@ const Breadcrumbs = ({
                 <Image src={homeIcon} alt="" />
               </Link>
             </li>
-            {sections.map((item, index, items) => [
-              <li key={index}>
-                <Breadcrumb.Divider key={`divider-${item.href}`}>
-                  <Icon className={icon}></Icon>
-                </Breadcrumb.Divider>
-                {index < items.length - linkLevels ? (
-                  <Link key={item.key} to={item.href} className="section">
-                    {item.title}
-                  </Link>
-                ) : (
-                  <Breadcrumb.Section key={item.key} active>
-                    {item.title}
-                  </Breadcrumb.Section>
-                )}
-              </li>,
-            ])}
+            {sections.map((item, index, items) => {
+              const url = item.url || item.href;
+              return (
+                <li key={index}>
+                  <Breadcrumb.Divider key={`divider-${url}`}>
+                    <Icon className={icon}></Icon>
+                  </Breadcrumb.Divider>
+                  {index < items.length - 1 &&
+                  contentTypesAsBreadcrumbSection.indexOf(item.portal_type) ===
+                    -1 ? (
+                    <Link key={item.key} to={url} className="section">
+                      {item.title}
+                    </Link>
+                  ) : (
+                    <Breadcrumb.Section key={item.key} className="section">
+                      {item.title}
+                    </Breadcrumb.Section>
+                  )}
+                </li>
+              );
+            })}
           </ol>
         </Breadcrumb>
       </Container>
@@ -58,6 +63,8 @@ Breadcrumbs.propTypes = {
     PropTypes.shape({
       title: PropTypes.string,
       href: PropTypes.string,
+      url: PropTypes.string,
+      portal_type: PropTypes.string,
       key: PropTypes.string,
     }),
   ).isRequired,

package/theme/themes/eea/extras/banner.less

@@ -112,53 +112,6 @@
   }
 }
 
-.light-header {
-  .container {
-    width: 100%;
-    max-width: 1300px !important;
-  } 
-  .eea.banner {
-    --text-color: @bannerHomepageColor;
-
-    .content-type {
-      color: @secondaryColorCSSVar;
-      font-weight: bold;
-    }
-
-    .gradient .content .subtitle {
-      margin: 0 0 0.5rem 0;
-    }
-  }
-}
-
-.homepage-header .banner {
-  --text-color: @bannerHomepageColor;
-  height: 500px;
-
-  .content-type {
-    color: @secondaryColorCSSVar;
-    font-size: @h2;
-    font-weight: bold;
-  }
-  .container {
-      display: flex;
-      height: 100%;
-      align-items: flex-end;
-    }
-
-    .content {
-      padding: 0 !important;
-      margin-bottom: 2rem;
-    }
-    .grid {
-      text-align: center;
-    }
-    .wrapper {
-      justify-content: center;
-    }
-}
-
-
 /*Share Popup*/
 
 .ui.popup.share-popup {
@@ -253,14 +206,91 @@
   }
 }
 
-.light-header .eea.banner .gradient .content {
-  padding: @computerContentPadding;
+/*******************************
+          Light & Hero Header
+*******************************/
+.light-header {
+  .container {
+    width: 100%;
+    max-width: 1300px !important;
+  }
+  .eea.banner {
+    --text-color: @bannerHomepageColor;
+
+    .content-type {
+      color: @secondaryColorCSSVar;
+      font-weight: bold;
+    }
+
+    .subtitle-light {
+      font-size: 24px !important;
+      line-height: 1.2;
+    }
+
+    .gradient .content {
+      padding: @computerContentPadding;
+      .subtitle {
+        margin: 0.5rem 0;
+        font-size: 1.25rem;
+        line-height: 1.2;
+      }
+      .metadata {
+        margin-top: 1rem;
+      }
+    }
+  }
+}
+
+.homepage-header .banner {
+  --text-color: @bannerHomepageColor;
+  height: 500px;
+
+  .content-type {
+    color: @secondaryColorCSSVar;
+    font-size: @h4;
+    font-weight: bold;
+  }
+  .container {
+    display: flex;
+    height: 100%;
+    align-items: flex-end;
+  }
+
+  .grid {
+    text-align: center;
+  }
+  .wrapper {
+    justify-content: center;
+  }
+}
+
+.hero-header {
+  .banner {
+    height: calc(100dvh - 35px);
+    min-height: 400px;
+  }
+}
+@media only screen and (min-height: 600px) {
+  .hero-header {
+    .gradient .content {
+      margin-bottom: 10dvh;
+    }
+  }
+}
+
+@media only screen and (max-width: @largestTabletScreen) {
+  .light-header .eea.banner .gradient .content {
+    padding: 16.5rem 0 1.25rem;
+  }
 }
 
 @media only screen and (min-width: @computerBreakpoint) {
-  .hero-header .banner {
-    height: 800px;
+  .hero-header {
+    .subtitle-light {
+      letter-spacing: @font-letterspacing-00;
+    }
   }
+
   .eea.banner {
     .image {
       .gradient .content {
@@ -271,24 +301,48 @@
     .gradient .content {
       padding: @computerContentPadding;
       .light-header & {
-        padding: @computerContentPaddingWithImage;
+        padding: 18.625rem 0 1.25rem;
       }
 
       .title {
         margin: @computerTitleMargin;
         font-size: @computerTitleFontSize;
         line-height: @computerTitleLineHeight;
+        .hero-header & {
+          line-height: 1.2;
+          letter-spacing: @font-letterspacing-00;
+        }
       }
 
       .subtitle {
-        margin: @computerSubtitleMargin;
         font-size: @computerSubtitleFontSize;
+        margin: @computerSubtitleMargin;
         line-height: @computerSubtitleLineHeight;
       }
     }
   }
 }
 
+@media screen and (min-width: 1280px) {
+  .hero-header .banner {
+    .title {
+      font-size: @heroTitleFontSize !important;
+    }
+
+    .content-type {
+      font-size: @h3;
+    }
+
+    .subtitle-light {
+      font-size: @h2 !important;
+      line-height: 1.2;
+    }
+  }
+}
+/*******************************
+      /Light & Hero Header
+*******************************/
+
 @media print {
   .eea.banner .gradient .content,
   .eea.banner .image .gradient .content {

package/theme/themes/eea/extras/banner.variables

@@ -35,6 +35,7 @@
 @mobileTitleFontSize       : @mobileH1;
 @tabletTitleFontSize       : @h2;
 @computerTitleFontSize     : @h1;
+@heroTitleFontSize         : 3.5rem;
 @mobileTitleLineHeight     : @headerLineHeight;
 @tabletTitleLineHeight     : @headerLineHeight;
 @computerTitleLineHeight   : @headerLineHeight;

package/theme/themes/eea/extras/contextNavigation.less

@@ -4,11 +4,11 @@
 @import (multiple) '../../theme.config';
 
 .context-navigation {
-  max-width      : @widescreenSidenavMaxWidth;
+  max-width: @widescreenSidenavMaxWidth;
   // background     : @sidenavBackground;
-  margin-right   : @sidenavMarginRight;
-  padding-left   : @sidenavPaddingLeft;
-  overflow       : @sidenavOverflow;
+  margin-right: @sidenavMarginRight;
+  padding-left: @sidenavPaddingLeft;
+  overflow: @sidenavOverflow;
 }
 @media (max-width: @largeMonitorBreakpoint) {
   .context-navigation {
@@ -25,26 +25,25 @@
 }
 
 .context-navigation .item a {
-  display    : block;
-  padding    : @sidenavItemPadding;
-  font-size  : @sidenavItemFontSize;
+  display: block;
+  padding: @sidenavItemPadding;
+  font-size: @sidenavItemFontSize;
   font-weight: @sidenavItemFontWeight;
-  color      : @sidenavItemColor;
+  color: @sidenavItemColor;
 
   &:hover,
   &:focus-visible {
     background: @sidenavItemHoverBackground;
-    color     : @sidenavItemHoverColor;
+    color: @sidenavItemHoverColor;
   }
 }
 
 .context-navigation-header {
-  display    : flex;
-  color      : @sidenavHeaderColor;
-  font-size  : @sidenavHeaderFontSize;
+  display: flex;
+  color: @sidenavHeaderColor;
+  font-size: @sidenavHeaderFontSize;
   font-weight: @sidenavHeaderFontWeight;
-  padding    : @sidenavHeaderPadding;
-  border-bottom: @sidenavHeaderBorderBottom;
+  padding: @sidenavHeaderPadding;
 
   i.icon {
     margin-right: @sidenavHeaderIconMarginRight;
@@ -59,9 +58,9 @@
 }
 
 .context-navigation a.contenttype-folder {
-  font-size  : @sidenavFolderFontSize;
+  font-size: @sidenavFolderFontSize;
   font-weight: @sidenavFolderFontWeight;
-  padding    : @sidenavFolderItemPadding;
+  padding: @sidenavFolderItemPadding;
 }
 
 .context-navigation .ui.list > .item > .content {
@@ -70,7 +69,7 @@
 
 // Hide last border
 .context-navigation .ui.list > .item:last-child > .content {
-  border-bottom: none; 
+  border-bottom: none;
 }
 
 // Nav custom list
@@ -88,14 +87,14 @@
 }
 
 .context-navigation .item.level-1 .ui.divider {
-  border-bottom: none; 
+  border-bottom: none;
 }
 
 .context-navigation .item.level-2 a {
   padding-left: @subparItemPaddingLeft;
 }
 
- .context-navigation .item.level-3 a {
+.context-navigation .item.level-3 a {
   padding-left: @subparItemPaddingLeft + 2rem;
 }
 
@@ -106,7 +105,7 @@
 }
 .context-navigation .active.item > .content > a:hover,
 .context-navigation .active.item > .content > a:focus-visible {
-  color : @sidenavItemActiveColorHover;
+  color: @sidenavItemActiveColorHover;
 }
 
 // Hide arrow
@@ -126,6 +125,13 @@
   background-color: @sidenavAccordionHeaderBackgroundColor;
   box-shadow: @sidenavBoxShadow;
 }
+@media only screen and (max-width: 991px) {
+  .view-viewview.light-header .eea-side-menu:not(.fixed) .accordion-header {
+    color: white;
+    background: transparent;
+    box-shadow: 0px 3px 6px @grey-5;
+  }
+}
 
 .context-navigation-list {
   width: @sidenavMaxWidth;
@@ -134,16 +140,15 @@
 }
 .context-navigation-list .title-link {
   display: block;
-  color: @sidenavItemColor; 
+  color: @sidenavItemColor;
   margin: 0 @sidenavItemMargin;
-  font-size  : @sidenavItemFontSize;
+  font-size: @sidenavItemFontSize;
   font-weight: @sidenavItemFontWeight;
 }
 .context-navigation-list .content .title-link {
   font-weight: @sidenavLevelTwoItemFontWeight;
 }
 .context-navigation {
-
   .current {
     color: @sidenavItemActiveColor;
   }
@@ -151,32 +156,67 @@
   .accordion {
     display: flex;
     flex-wrap: wrap;
+    margin: 0 !important;
   }
-  .ui.accordion>.title {
+  .ui.accordion > .title {
     --text-color: @sidenavItemColor;
     --text-color-hover: @sidenavItemColor;
     font-size: @sidenavItemFontSize;
     font-weight: @sidenavItemFontWeight;
     padding: @sidenavFolderItemPadding;
     text-align: left;
-    margin: @sidenavItemMargin;
-    &:not([aria-expanded="true"]) {
-        border-bottom: @sidenavContentBorderBottom;
-      }
+    line-height: @sidenavFolderItemLineHeight;
+    margin: 0;
   }
+
+  // add border-bottom only on first level titles
+  .context-navigation-list
+    > .accordion-list-item
+    > .accordion
+    > .title:not([aria-expanded='true']) {
+    border-bottom: @sidenavContentBorderBottom;
+  }
+
+  // add border-bottom to content of first level expanded accordion
+  .context-navigation-list
+    > .accordion-list-item
+    > .accordion
+    > .title[aria-expanded='true']
+    + .content {
+    border-bottom: @sidenavContentBorderBottom;
+  }
+
   .context-navigation-list.accordion-list {
-      max-height: @sidenavAccordionListMaxHeight;
-      overflow-y: auto;
-      -webkit-overflow-scrolling: touch;
+    max-height: @sidenavAccordionListMaxHeight;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
   }
   .accordion-list {
+    .accordion-list .accordion-list-item .title {
+      padding-left: @secondLevelItemPaddingLeft;
+    }
+
+    .accordion-list .accordion-list .accordion-list-item .title {
+      padding-left: @thirdLevelItemPaddingLeft;
+    }
+    .accordion-list .accordion-list-item .accordion-list-title .title-link {
+      padding-left: @thirdLevelItemPaddingLeft;
+    }
+
+    .accordion-list
+      .accordion-list
+      .accordion-list-item
+      .accordion-list-title
+      .title-link {
+      padding-left: @fourthLevelItemPaddingLeft;
+    }
     margin-top: 0;
     margin-bottom: 0;
     list-style: none;
     padding-left: 0;
   }
 
-  .context-navigation-list>.accordion-list-title {
+  .context-navigation-list > .accordion-list-title {
     border-bottom: @sidenavContentBorderBottom;
 
     .title-link {

package/theme/themes/eea/extras/contextNavigation.variables

@@ -21,11 +21,10 @@
 @sidenavAccordionHeaderPadding: @rem-space-2 @rem-space-4;
 @sidenavAccordionHeaderBackgroundColor: white;
 @sidenavAccordionListMaxHeight: 86dvh;
-@sidenavHeaderBorderBottom: @2px solid @blue-grey-5;
-@sidenavHeaderIconMarginRight: @rem-space-4;
+@sidenavHeaderIconMarginRight: 0;
 
 /* Header icon */
-@sidenavHeaderIconContent: "\ef32";
+@sidenavHeaderIconContent: '\ef32';
 @sidenavHeaderIconFontWeight: @font-weight-4;
 @sidenavHeaderIconPaddingRight: @rem-space-4;
 
@@ -42,9 +41,6 @@
 @sidenavLastItemMarginBottom: @rem-space-2;
 @sidenavItemMargin: 2px;
 
-/* Third level item */
-@subparItemPaddingLeft: @rem-space-12;
-
 /* Item active */
 @sidenavItemActiveColor: @secondaryColor;
 @sidenavItemActiveFontWeight: @font-weight-7;
@@ -54,7 +50,14 @@
 @sidenavFolderFontSize: @font-size-2;
 @sidenavFolderFontWeight: @font-weight-7;
 @sidenavFolderItemPadding: @rem-space-4;
+@sidenavFolderItemLineHeight: 1.5;
 
 /* Item - Level 2 */
 @sidenavLevelTwoItemFontWeight: @font-weight-4;
 @sidenavLevelTwoItemPadding: 0.5rem 1.5rem;
+@secondLevelItemPaddingLeft: @rem-space-6;
+
+/* Item - Level 3 */
+@subparItemPaddingLeft: @rem-space-12;
+@thirdLevelItemPaddingLeft: @rem-space-8;
+@fourthLevelItemPaddingLeft: @rem-space-10;

package/theme/themes/eea/extras/copyright.less

@@ -17,12 +17,16 @@
         align-items: @copyrightAlignItems;
         line-height: @copyrightLineHeight;
         gap: @copyrightContentPaddingRight;
+        justify-content: var(--justify-content, flex-start);
     }
-    &.left .wrapper {
-      justify-content: flex-start;
-    }
+  &.left .wrapper {
+    --justify-content: flex-start;
+  }
+  &.center .wrapper {
+    --justify-content: center;
+  }
   &.right .wrapper {
-    justify-content: flex-end;
+    --justify-content: flex-end;
   }
   .icon {
     margin: 0; // override default

package/theme/themes/eea/extras/custom.overrides

@@ -105,6 +105,12 @@
   --text-color: @textColor;
 }
 
+/* Removed z-index .block.align .right & .left from pastanaga blocks.less */
+.block.align.left,
+.block.align.right {
+  z-index: initial;
+}
+
 .blocks-chooser {
   .searchbox {
     height: auto !important;

package/theme/themes/eea/extras/header.less

@@ -16,12 +16,11 @@
   /* So child can have position sticky */
   display: initial;
   &:has(.eea-side-menu) {
-    margin-bottom: 3.7rem;
+    margin-bottom: 1rem;
+    position: relative;
   }
-
 }
 
-
 /*----------------------------------------------------------------------------
    HEADER TOP BAR
 ----------------------------------------------------------------------------*/
@@ -229,15 +228,6 @@
   content: ' ';
 }
 
-.light-header  {
-  .main.bar.transparency:before {
-    background: linear-gradient(0deg, rgba(96, 96, 96, 0.2), #3d5265 100%);
-  }
-  #page-header {
-    margin-bottom: 2rem;
-  }
-}
-
 .main.bar {
   background: @headerMainSectionBackground;
   scrollbar-gutter: stable;
@@ -934,4 +924,101 @@
   }
 }
 
+/*******************************
+          Light Header
+*******************************/
+// Styles that turn the header into a transparent white header such as on the homepage
+.light-header {
+  .main.bar.transparency:before {
+    background: linear-gradient(0deg, rgba(96, 96, 96, 0.2), #3d5265 100%);
+  }
+}
+
+/* fix size of visualization that enlarge content are of web reports resulting in a scrollbar */
+.light-header #view .ui.grid {
+  max-width: 900px;
+}
+
+//Gradient styles for web report
+.light-header .gradient {
+  // background: linear-gradient(
+  //   0deg,
+  //   #ffffff,
+  //   rgba(255, 255, 255, 0.9) 30%,
+  //   rgba(46, 82, 114, 0.7) 70%,
+  //   rgba(14, 21, 26, 0.8) 100%
+  // ) !important;
+  background: linear-gradient(
+    0deg,
+    #fff,
+    rgba(255, 255, 255, 0.8) 30%,
+    rgba(31, 31, 31, 0.1) 50%,
+    rgba(58, 58, 58, 0.8) 100%
+  ) !important;
+}
+
+.view-viewview.light-header .main.bar {
+  position: relative;
+  z-index: 1;
+  width: 100%;
+  margin-bottom: -160px;
+}
+
+@media all and (max-width: @largestMobileScreen) {
+  // avoid overlap of gradient of top.bar
+  .view-viewview.light-header .main.bar {
+    margin-bottom: -65px;
+  }
+
+  .view-viewview.light-header .eea-side-menu.mobile:not(.fixed) {
+    top: 111px;
+  }
+}
+
+@media only screen and (min-width: 768px) and (max-width: 991px) {
+  .view-viewview.light-header {
+    .main.bar {
+      margin-bottom: -115px;
+    }
+
+    .eea-side-menu:not(.fixed) {
+      top: 160px;
+    }
+
+    #page-document {
+      padding: 0 1.25rem;
+    }
+  }
+}
+
+@media only screen and (max-width: 991px) {
+  .view-viewview.light-header
+    .eea.header:has(#search-box, .visible)
+    .eea-side-menu {
+    z-index: 0;
+  }
+}
+
+@media only screen and (min-width: @computerBreakpoint) {
+  .light-header #page-header:empty + .breadcrumbs + .content-area {
+    padding-top: 0 !important;
+    margin-top: 0 !important;
+  }
+}
+
+@media screen and (min-width: 768px) and (max-width: 991px) {
+  .view-viewview.light-header .main.bar {
+    margin-bottom: -115px;
+  }
+}
+
+@media only screen and (min-width: 768px) and (max-width: 1365px) {
+  .view-viewview.light-header .ui.container {
+    padding: 0 1.25rem;
+  }
+}
+/*******************************
+          /Light Header
+*******************************/
+
 .loadUIOverrides();

package/theme/themes/eea/extras/header.variables

@@ -3,17 +3,23 @@
 --------------------*/
 
 /* Heights */
-@mobileTopSectionHeight      : 42px; //delete
-@tabletTopSectionHeight      : 42px;
-@computerTopSectionHeight    : 34px;
-
-@mobileMainSectionHeight     : 69px;
-@tabletMainSectionHeight     : 117px;
-@computerMainSectionHeight   : 160px;
-
-@mobilePopUpHeight           : calc(100vh - (@mobileTopSectionHeight + @mobileMainSectionHeight));
-@tabletPopUpHeight           : calc(100vh - (@tabletTopSectionHeight + @tabletMainSectionHeight));
-@computerPopUpHeight         : calc(100vh - (@computerTopSectionHeight + @computerMainSectionHeight));
+@mobileTopSectionHeight: 42px; //delete
+@tabletTopSectionHeight: 42px;
+@computerTopSectionHeight: 34px;
+
+@mobileMainSectionHeight: 69px;
+@tabletMainSectionHeight: 117px;
+@computerMainSectionHeight: 160px;
+
+@mobilePopUpHeight: calc(
+  100vh - (@mobileTopSectionHeight + @mobileMainSectionHeight)
+);
+@tabletPopUpHeight: calc(
+  100vh - (@tabletTopSectionHeight + @tabletMainSectionHeight)
+);
+@computerPopUpHeight: calc(
+  100vh - (@computerTopSectionHeight + @computerMainSectionHeight)
+);
 
 /* Header font sizes */
 @headerMinyFontSize: 0.5rem;
@@ -22,128 +28,128 @@
 @headerMediumFontSize: 0.875rem;
 @headerLargeFontSize: 1.125rem;
 
-
 /*-------------------
    HEADER TOP BAR
 --------------------*/
 
-@topSectionBackground                 : @grey-2;
-@topSectionItemColor                  : @blue-grey-6;
-@topSectionItemFontWeight             : @bold;
-@topSectionItemFontSize               : @font-size-00;
-@mobileTopSectionItemFontSize         : @font-size-00;
-@tabletTopSectionItemFontSize         : @font-size-00;
-@topSectionZIndex                     : @z-index-3;
-@dropdownColor                        : @blue-grey-6;
-@mobileDropdownFontSize               : @font-size-00;
-@tabletDropdownFontSize               : @font-size-00;
-@dropdownFontWeight                   : @bold;
+@topSectionBackground: @grey-2;
+@topSectionItemColor: @blue-grey-6;
+@topSectionItemFontWeight: @bold;
+@topSectionItemFontSize: @font-size-00;
+@mobileTopSectionItemFontSize: @font-size-00;
+@tabletTopSectionItemFontSize: @font-size-00;
+@topSectionZIndex: @z-index-2;
+@dropdownColor: @blue-grey-6;
+@mobileDropdownFontSize: @font-size-00;
+@tabletDropdownFontSize: @font-size-00;
+@dropdownFontWeight: @bold;
 
 /* Icon */
-@topSectionIconMarginLeft             : @rem-space-1;
-@topSectionIconMarginRight            : @rem-space-1;
-@topSectionIconFontSize               : @font-size-0;
-@topSectionIconLineHeight             : @font-lineheight-00;
-@mobileTopSectionIconTop              : 14px;
-@computerTopSectionIconTop            : 10px;
+@topSectionIconMarginLeft: @rem-space-1;
+@topSectionIconMarginRight: @rem-space-1;
+@topSectionIconFontSize: @font-size-0;
+@topSectionIconLineHeight: @font-lineheight-00;
+@mobileTopSectionIconTop: 14px;
+@computerTopSectionIconTop: 10px;
 
 /* Dropdown Menu */
-@mobileDropdownPadding                : @rem-space-3 @rem-space-6 @rem-space-3 @rem-space-2;
-@computerDropdownPadding              : @rem-space-2 @rem-space-6 @rem-space-2 @rem-space-2;
-@dropdownMaxWidth                     : 410px;
-@dropdownMenuLeft                     : auto;
-@dropdownMenuRight                    : 0;
-@dropdownMenuWrapperGap               : @rem-space-1;
-@dropdownMenuWrapperMargin            : @rem-space-1 0;
-@dropdownMenuLanguageWrapperPaddingInlineStart : 0;
-@dropdownMenuContentWhiteSpace        : pre-wrap;
-@mobileDropdownMenuContentFontSize    : @font-size-00;
-@desktopDropdownMenuContentFontSize   : @font-size-00;
-@dropdownMenuItemColorHover           : @white;
-@dropdownMenuItemBackgroundColorHover : @blue-grey-6;
-@dropdownMenuItemPadding              : @rem-space-050 @rem-space-5;
-@dropdownMenuFontSize                 : @font-size-00;
+@mobileDropdownPadding: @rem-space-3 @rem-space-6 @rem-space-3 @rem-space-2;
+@computerDropdownPadding: @rem-space-2 @rem-space-6 @rem-space-2 @rem-space-2;
+@dropdownMaxWidth: 410px;
+@dropdownMenuLeft: auto;
+@dropdownMenuRight: 0;
+@dropdownMenuWrapperGap: @rem-space-1;
+@dropdownMenuWrapperMargin: @rem-space-1 0;
+@dropdownMenuLanguageWrapperPaddingInlineStart: 0;
+@dropdownMenuContentWhiteSpace: pre-wrap;
+@mobileDropdownMenuContentFontSize: @font-size-00;
+@desktopDropdownMenuContentFontSize: @font-size-00;
+@dropdownMenuItemColorHover: @white;
+@dropdownMenuItemBackgroundColorHover: @blue-grey-6;
+@dropdownMenuItemPadding: @rem-space-050 @rem-space-5;
+@dropdownMenuFontSize: @font-size-00;
 
 // Official Union
-@mobileOfficialUnionGap               : 0;
-@tabletOfficialUnionGap               : 0;
-@officialUnionLinkFontWeight          : @bold;
-@officialUnionPadding                 : @rem-space-3;
-@mobileOfficialUnionMaxWidth          : 108px;
-@tabletOfficialUnionMaxWidth          : 272px;
-@computerOfficialUnionMaxWidth        : 380px;
-@mobileOfficialUnionImageWidth        : 25px;
-@tabletOfficialUnionImageWidth        : 44px;
-@mobileOfficialUnionMenuLeft          : 0;
-@tabletOfficialUnionMenuLeft          : 0;
-@mobileOfficialUnionPadding           : @rem-space-3 @rem-space-6;
-@tabletOfficialUnionPadding           : @rem-space-3 @rem-space-6 @rem-space-3 @rem-space-12;
-@computerOfficialUnionPadding         : @rem-space-2 @rem-space-6 @rem-space-2 @rem-space-12;
+@mobileOfficialUnionGap: 0;
+@tabletOfficialUnionGap: 0;
+@officialUnionLinkFontWeight: @bold;
+@officialUnionPadding: @rem-space-3;
+@mobileOfficialUnionMaxWidth: 108px;
+@tabletOfficialUnionMaxWidth: 272px;
+@computerOfficialUnionMaxWidth: 380px;
+@mobileOfficialUnionImageWidth: 25px;
+@tabletOfficialUnionImageWidth: 44px;
+@mobileOfficialUnionMenuLeft: 0;
+@tabletOfficialUnionMenuLeft: 0;
+@mobileOfficialUnionPadding: @rem-space-3 @rem-space-6;
+@tabletOfficialUnionPadding: @rem-space-3 @rem-space-6 @rem-space-3
+  @rem-space-12;
+@computerOfficialUnionPadding: @rem-space-2 @rem-space-6 @rem-space-2
+  @rem-space-12;
 
 // Theme Sites
-@themeSitesMenuWidth                  : 224px;
-@themeSitesMenuSiteLinkColor          : @blue-grey-6;
-@themeSitesMenuSiteLinkFontWeight     : @normal;
-@mobileThemeSitesMenuLeft             : 0px;
+@themeSitesMenuWidth: 224px;
+@themeSitesMenuSiteLinkColor: @blue-grey-6;
+@themeSitesMenuSiteLinkFontWeight: @normal;
+@mobileThemeSitesMenuLeft: 0px;
 
 // Language
-@mobileLanguageMenuPadding            : @rem-space-3 @rem-space-2;
-@computerLanguageMenuPadding          : @rem-space-2;
-@languageMenuItemFontWeight           : @normal;
-@mobileLanguageCountryCodeMarginLeft  : 3px;
-@mobileLanguageCountryCodeFontWeight  : @bold;
-@mobileLanguageFontSize               : @font-size-0;
-@computerLanguageFontSize             : @font-size-1;
-@mobileLanguageImageWidth             : 17px;
-@tabletLanguageImageWidth             : 18px;
+@mobileLanguageMenuPadding: @rem-space-3 @rem-space-2;
+@computerLanguageMenuPadding: @rem-space-2;
+@languageMenuItemFontWeight: @normal;
+@mobileLanguageCountryCodeMarginLeft: 3px;
+@mobileLanguageCountryCodeFontWeight: @bold;
+@mobileLanguageFontSize: @font-size-0;
+@computerLanguageFontSize: @font-size-1;
+@mobileLanguageImageWidth: 17px;
+@tabletLanguageImageWidth: 18px;
 
 /*-----------------------
    HEADER MAIN SECTION
 -----------------------*/
 
 /* Main Section */
-@headerMainSectionBackground          : transparent;
-@headerMainSectionTransparency        : rgba(255, 255, 255, 0.1);
+@headerMainSectionBackground: transparent;
+@headerMainSectionTransparency: rgba(255, 255, 255, 0.1);
 
 /* Logo */
-@logoWidth                            : 100%;
-@mobileLogoMaxWidth                   : 142px;
-@tabletLogoMaxWidth                   : 252px;
-@computerLogoMaxWidth                 : 347px; //348 rendered fuzzy :(
-@mobileLogoMarginTop                  : @rem-space-2;
-@tabletLogoMarginTop                  : @rem-space-3-5;
-@computerLogoMarginTop                : @rem-space-5;
+@logoWidth: 100%;
+@mobileLogoMaxWidth: 142px;
+@tabletLogoMaxWidth: 252px;
+@computerLogoMaxWidth: 347px; //348 rendered fuzzy :(
+@mobileLogoMarginTop: @rem-space-2;
+@tabletLogoMarginTop: @rem-space-3-5;
+@computerLogoMarginTop: @rem-space-5;
 
 /* Main menu */
-@mainMenuGap                          : @component-padding;
-@mainMenuItemColor                    : @primaryColor;
-@mainMenuItemInvertedColor            : @white;
-@mainMenuItemFontSize                 : ~"min(max(0.875rem, 1.5vw), 1.125rem)";
-@mainMenuItemFontWeight               : @font-weight-5;
-@mainMenuItemPadding                  : @rem-space-050 @rem-space-2;
-@mainMenuItemActiveColor              : @secondaryColor;
-@mainMenuItemBorder                   : 4px solid transparent;
-@mainMenuItemActiveBorder             : 4px solid @secondaryColor;
-@mainMenuInvertedItemActiveBorder     : 4px solid @white;
-@mainMenuItemAlignSelf                : flex-end;
-
+@mainMenuGap: @component-padding;
+@mainMenuItemColor: @primaryColor;
+@mainMenuItemInvertedColor: @white;
+@mainMenuItemFontSize: ~'min(max(0.875rem, 1.5vw), 1.125rem)';
+@mainMenuItemFontWeight: @font-weight-5;
+@mainMenuItemPadding: @rem-space-050 @rem-space-2;
+@mainMenuItemActiveColor: @secondaryColor;
+@mainMenuItemBorder: 4px solid transparent;
+@mainMenuItemActiveBorder: 4px solid @secondaryColor;
+@mainMenuInvertedItemActiveBorder: 4px solid @white;
+@mainMenuItemAlignSelf: flex-end;
 
 /* Subsite */
-@subsitePosition                      : relative;
-@subsiteZIndex                        : 1;
-@subsiteFontFamily                    : @headerFont;
-@subsiteFontWeight                    : @headerFontWeight;
-@subsiteColor                         : @linkColor;
-@subsiteLineHeight                    : 1.1;
-@subsiteFlexGap                       : 30px;
-@subsiteLogoTopPosition               : 50%;
-@subsiteDividerHeight                 : 110%;
-@subsiteDividerWidth                  : 1px;
-@subsiteDividerTopPosition            : 50%;
-@subsiteDividerColor                  : @secondaryColorCSSVar;
-@mobileSubsiteFontSize                : unit(@h6, em);
-@tabletSubsiteFontSize                : unit(@h4, em);
-@computerSubsiteFontSize              : unit(@h2, em);
+@subsitePosition: relative;
+@subsiteZIndex: 1;
+@subsiteFontFamily: @headerFont;
+@subsiteFontWeight: @headerFontWeight;
+@subsiteColor: @linkColor;
+@subsiteLineHeight: 1.1;
+@subsiteFlexGap: 30px;
+@subsiteLogoTopPosition: 50%;
+@subsiteDividerHeight: 110%;
+@subsiteDividerWidth: 1px;
+@subsiteDividerTopPosition: 50%;
+@subsiteDividerColor: @secondaryColorCSSVar;
+@mobileSubsiteFontSize: unit(@h6, em);
+@tabletSubsiteFontSize: unit(@h4, em);
+@computerSubsiteFontSize: unit(@h2, em);
 
 /*-----------------
    HEADER ACTIONS
@@ -156,9 +162,9 @@
 @burgerActionBackgroundColor: @darkMidnightBlue;
 
 /* Mega menu and Search popup */
-@mobilePopupMarginTop   : 5vh;
-@tabletPopupMarginTop   : 10vh;
-@computerPopupMarginTop : 18vh;
+@mobilePopupMarginTop: 5vh;
+@tabletPopupMarginTop: 10vh;
+@computerPopupMarginTop: 18vh;
 
 /* Mega menu */
 @mobileMegaMenuWidth: 94%;
@@ -187,7 +193,7 @@
 @megaMenuListItemFontSize: @font-size-1;
 @megaMenuListItemFontWeight: @font-weight-4;
 @megaMenuListItemPadding: @rem-space-2 0;
-@megaMenuListItemActiveBorder: 4px solid #FFF;
+@megaMenuListItemActiveBorder: 4px solid #fff;
 @megaMenuListItemActivePadding: 8px;
 
 /* Topics */
@@ -221,8 +227,12 @@
 
 /* Search box */
 @searchBoxPosition: absolute;
-@searchBoxBackgroundGradient : linear-gradient(13.69deg, @blue-5 1.17%, @secondaryColor 80%);
-@searchBoxWrapperGap : 75px;
+@searchBoxBackgroundGradient: linear-gradient(
+  13.69deg,
+  @blue-5 1.17%,
+  @secondaryColor 80%
+);
+@searchBoxWrapperGap: 75px;
 @searchBoxAlignItems: center;
 @searchBoxFullSearchBackground: rgba(255, 255, 255, 0.1);
 @searchBoxFullSearchBoxShadow: 0 0 6px 0 rgba(0, 0, 0, 0.25);
@@ -245,7 +255,8 @@
 @searchBoxComputerPopupMarginTop: @em-space-8;
 
 /* Custom shadows for dropdowns */
-@shadow-topbar-dropdown: 2px 0 2px -5px hsla(@shadow-color, calc(@shadow-strength + 6%));
+@shadow-topbar-dropdown: 2px 0 2px -5px hsla(@shadow-color, calc(@shadow-strength +
+        6%));
 @shadow-4-no-top:
   0 0 0 0 hsla(@shadow-color, calc(@shadow-strength + 2%)),
   0 1px 1px -2px hsla(@shadow-color, calc(@shadow-strength + 3%)),

package/theme/themes/eea/extras/inpageNavigation.less

@@ -38,6 +38,25 @@
   }
 }
 
+@media only screen and (max-width: (@mobileDefaultBreakpoint - @1px)) {
+  #inpage-navigation {
+    bottom: 0;
+  }
+}
+
+@media only screen and (max-width: @largestMobileScreen) {
+  // avoid overlap with web report mobile menu
+  #inpage-navigation {
+    right: 0;
+  }
+
+  // better centering of the inpage navigation icon
+  #inpage-navigation > div > i.icon,
+  #inpage-navigation i.icons {
+    line-height: 2rem;
+  }
+}
+
 @media only screen and (min-width: @computerBreakpoint) {
   #inpage-navigation {
     width: @computerNavWidth;

package/theme/themes/eea/globals/site.variables

@@ -324,6 +324,7 @@
 --------------------*/
 
 @mobileBreakpoint            : 320px;
+@mobileDefaultBreakpoint     : 360px;  
 @mobileLandscapeBreakpoint   : 480px;  // introduced for the design system
 @tabletBreakpoint            : 768px;
 @contentBreakpoint           : 835px; // introduced for the design system

package/theme/themes/eea/globals/utilities.less

@@ -69,7 +69,7 @@ each(range(2, 6), {
 .has--text--center {
   text-align: center !important;
   --text-align: center;
-  --justify-content: space-evenly;
+  --justify-content: center;
 }
 
 /*******************************