@eeacms/volto-eea-design-system 1.0.2 → 1.0.3

package/CHANGELOG.md

@@ -4,6 +4,40 @@ 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.3](https://github.com/eea/volto-eea-design-system/compare/1.0.2...1.0.3) - 24 March 2023
+
+#### :bug: Bug Fixes
+
+- fix: improve full-width class [Miu Razvan - [`9322259`](https://github.com/eea/volto-eea-design-system/commit/93222590a630b27f3dfccb7df0a50070c9c9901c)]
+- fix(header): Remove z-index from subsite logo #320 from eea/subsite-logo [ichim-david - [`5091100`](https://github.com/eea/volto-eea-design-system/commit/50911009918faf7d3064d97ea7b685ad71970521)]
+- fix(header): Remove z-index from subsite logo [kreafox - [`d433a97`](https://github.com/eea/volto-eea-design-system/commit/d433a9788d76db0f1c08ef6bb2313f479c2bb19b)]
+
+#### :nail_care: Enhancements
+
+- change(banner): use custom-made Popup for better accessibility [David Ichim - [`10d0fcf`](https://github.com/eea/volto-eea-design-system/commit/10d0fcfb28ca97efe9fa5c0f6c9c350b76a73140)]
+- change(popup): added also the basic property [David Ichim - [`a4497ac`](https://github.com/eea/volto-eea-design-system/commit/a4497acddde258ed31cda09f4d905e003a1e4611)]
+- change(popup): added most important popup properties from Semantic ui implementation [David Ichim - [`61f65bc`](https://github.com/eea/volto-eea-design-system/commit/61f65bc0e5806aaac33b54db36d5360fd05a48cc)]
+- change(header): Add search popup customizations from eea-website-theme [Krisztina Elekes - [`43e5a78`](https://github.com/eea/volto-eea-design-system/commit/43e5a78be8efa1098ea0fc87f43f40f2b5d482c1)]
+- change(banner): use custom-made Popup for better accessibility [David Ichim - [`9108bee`](https://github.com/eea/volto-eea-design-system/commit/9108bee5f671505be5199e72a4749bb0af0c0cb9)]
+- change(popup): create custom popup for better accessibility [David Ichim - [`036aac9`](https://github.com/eea/volto-eea-design-system/commit/036aac95509b6d78b2d3b251578a7de878e28371)]
+- change(colors): update gray-4 color value  #321 from eea/update-gray-4 [ichim-david - [`f458ff0`](https://github.com/eea/volto-eea-design-system/commit/f458ff0965debd3629cdd78362244836d0d42687)]
+- refactor(tokens): updated gray-4 [Giorgos Stamatis - [`b890df7`](https://github.com/eea/volto-eea-design-system/commit/b890df7693880fb965e41752eda64df992a1cdc4)]
+- change(banner): MetadataField now uses proper time tag when value is datetime [David Ichim - [`b4c4d34`](https://github.com/eea/volto-eea-design-system/commit/b4c4d34d5905a6771a281fc3db1174b4998c8fa8)]
+- change(footer): Fix error and empty div if no social links are present #319 from eea/footer-social [ichim-david - [`8922246`](https://github.com/eea/volto-eea-design-system/commit/89222466b76a4720af73c0d516074efec0757c34)]
+- change(footer): Fix error and empty div if no social links are present [kreafox - [`5d934a6`](https://github.com/eea/volto-eea-design-system/commit/5d934a6545ae783ff41dc9e3eda389c571d1369b)]
+
+#### :hammer_and_wrench: Others
+
+- (feat):Page Header Banner accessibility #316 from eea/accesibility-banner [ichim-david - [`e587f46`](https://github.com/eea/volto-eea-design-system/commit/e587f4657de137273053480a3536a066ab032a29)]
+- lint 3 [Dobricean Ioan Dorian - [`2e0bed1`](https://github.com/eea/volto-eea-design-system/commit/2e0bed19a24d8abfa230212cd8c09f8313dc00f2)]
+- prettier [Dobricean Ioan Dorian - [`6ed78e5`](https://github.com/eea/volto-eea-design-system/commit/6ed78e50ee68accca10b06b0790c231ddeb1a1fa)]
+- lint [Dobricean Ioan Dorian - [`646dfaa`](https://github.com/eea/volto-eea-design-system/commit/646dfaa729b51367ce7545ea928837a481a5485a)]
+- lint 1 [Dobricean Ioan Dorian - [`b4c9580`](https://github.com/eea/volto-eea-design-system/commit/b4c958034870a9861c542359144e3c56f9157994)]
+- lint [Dobricean Ioan Dorian - [`ca41def`](https://github.com/eea/volto-eea-design-system/commit/ca41def7a3743a8328f26cec868bd20395b62446)]
+- cleaning [Dobricean Ioan Dorian - [`4391aa6`](https://github.com/eea/volto-eea-design-system/commit/4391aa6c6611d1a15f5977eb150416909ad83bc1)]
+- refactor [Dobricean Ioan Dorian - [`9789201`](https://github.com/eea/volto-eea-design-system/commit/9789201c7966cd711bfa85fe448f6f6df2583eaf)]
+- storybook [Dobricean Ioan Dorian - [`c8c77de`](https://github.com/eea/volto-eea-design-system/commit/c8c77de372060328d535b190f30747797db0d23a)]
+- banner accesibility [Dobricean Ioan Dorian - [`5e2f23b`](https://github.com/eea/volto-eea-design-system/commit/5e2f23bae30b5bb14d3f607e0cfeb85d0cfe4a9f)]
 ### [1.0.2](https://github.com/eea/volto-eea-design-system/compare/1.0.1...1.0.2) - 14 March 2023
 
 #### :bug: Bug Fixes
@@ -91,6 +125,7 @@ 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)]
@@ -161,6 +196,7 @@ 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
@@ -357,6 +393,7 @@ 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
 
@@ -414,6 +451,7 @@ 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
@@ -445,6 +483,7 @@ 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)]
@@ -532,6 +571,7 @@ 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
@@ -624,6 +664,7 @@ 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)]
@@ -725,6 +766,7 @@ 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)]
@@ -759,6 +801,7 @@ 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
 
@@ -1514,6 +1557,10 @@ 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
@@ -1938,6 +1985,7 @@ 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)]
@@ -2024,6 +2072,7 @@ 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)]
@@ -2592,6 +2641,7 @@ 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.0.2",
+  "version": "1.0.3",
   "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

@@ -6,7 +6,6 @@ import config from '@plone/volto/registry';
 
 Banner.propTypes = {
   title: PropTypes.string,
-  image: PropTypes.bool,
 };
 
 const socialPlatforms = {
@@ -66,16 +65,19 @@ function Banner({ image, metadata, properties, children, ...rest }) {
   );
 }
 
-Banner.Action = function ({ id, title, icon, onClick, className, color }) {
+Banner.Action = React.forwardRef(function (
+  { id, title, titleClass, icon, onClick, className, color },
+  ref,
+) {
   return (
-    <div className="action">
+    <div className="action" ref={ref}>
       <Button className={className} basic icon inverted onClick={onClick}>
         <Icon className={icon} color={color}></Icon>
-        <span className="mobile hidden">{title}</span>
+        <span className={titleClass || 'mobile hidden'}>{title}</span>
       </Button>
     </div>
   );
-};
+});
 
 Banner.Content = ({ children, actions }) => {
   return (
@@ -98,12 +100,12 @@ Banner.Title = ({ children }) => {
 Banner.Subtitle = ({ children }) => <p className="subtitle">{children}</p>;
 Banner.Metadata = ({ children }) => <p className="metadata">{children}</p>;
 
-Banner.MetadataField = ({ hidden, type = 'text', label, value, title }) => {
+Banner.MetadataField = ({ hidden, type = 'text', label, value }) => {
   const locale = config.settings.dateLocale || 'en-gb';
   if (hidden || !value) return '';
   if (type === 'date' && value)
     return (
-      <span className={`field ${type}`} title={title?.replace('{}', value)}>
+      <time className={`field ${type}`} dateTime={value}>
         {label}{' '}
         {formatDate({
           date: value,
@@ -114,7 +116,7 @@ Banner.MetadataField = ({ hidden, type = 'text', label, value, title }) => {
           },
           locale: locale,
         })}
-      </span>
+      </time>
     );
   return (
     <span className={`field ${type}`}>

package/src/ui/Banner/Banner.stories.jsx

@@ -1,8 +1,9 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import Banner from './Banner';
 // eslint-disable-next-line import/no-unresolved
 import imgUrl from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/images/banner.png';
-import { Popup, Icon } from 'semantic-ui-react';
+import { Icon } from 'semantic-ui-react';
+import Popup from '@eeacms/volto-eea-design-system/ui/Popup/Popup';
 import Copyright from '../Copyright/Copyright';
 
 export default {
@@ -12,49 +13,49 @@ export default {
     title: {
       description: 'banner title',
       table: {
-        defaultValue: { summary: '""' },
+        defaultValue: { summary: '' },
         type: { summary: 'string' },
       },
     },
     metadata: {
       description: 'banner metadata',
       table: {
-        defaultValue: { summary: '""' },
+        defaultValue: { summary: '' },
         type: { summary: 'object' },
       },
     },
     image: {
       description: 'set or unset banner image',
       table: {
-        defaultValue: { summary: '""' },
+        defaultValue: { summary: '' },
         type: { summary: 'boolean' },
       },
     },
     hideShareButton: {
       description: 'hide/show share button',
       table: {
-        defaultValue: { summary: '""' },
+        defaultValue: { summary: '' },
         type: { summary: 'boolean' },
       },
     },
     hideDownloadButton: {
       description: 'hide/show download button',
       table: {
-        defaultValue: { summary: '""' },
+        defaultValue: { summary: '' },
         type: { summary: 'boolean' },
       },
     },
     copyright: {
       table: {
         category: 'Copyright',
-        defaultValue: { summary: '""' },
+        defaultValue: { summary: '' },
         type: { summary: 'string' },
       },
     },
     copyrightIcon: {
       table: {
         category: 'Copyright',
-        defaultValue: { summary: '""' },
+        defaultValue: { summary: '' },
         type: { summary: 'string' },
       },
     },
@@ -73,69 +74,82 @@ export default {
   },
 };
 
-const Template = (args) => (
-  <Banner {...args} image={args.image ? imgUrl : null}>
-    <Banner.Content
-      actions={
-        <>
-          {' '}
-          {!args.hideShareButton && (
-            <Popup
-              className="share-popup"
-              trigger={
-                <Banner.Action
-                  icon="ri-share-fill"
-                  title="Share"
-                  className="share"
-                />
-              }
-              content={() => (
-                <>
-                  <p>Share to:</p>
-                  <div className="actions">
-                    <Banner.Action icon="ri-facebook-fill" />
-                    <Banner.Action icon="ri-twitter-fill" />
-                    <Banner.Action icon="ri-linkedin-fill" />
-                  </div>
-                </>
-              )}
-              position="top center"
-              basic
-            />
-          )}
-          {!args.hideDownloadButton && (
-            <Banner.Action
-              icon="ri-download-2-line"
-              title="Download"
-              className="download"
-            />
-          )}
-        </>
-      }
-    >
-      <Banner.Subtitle>{args.subtitle}</Banner.Subtitle>
-      <Banner.Title>{args.title}</Banner.Title>
-      {args.metadata && (
-        <Banner.Metadata>
+const Template = (args) => {
+  const popupRef = useRef(null);
+  return (
+    <Banner {...args} image={args.image ? imgUrl : null}>
+      <Banner.Content
+        actions={
           <>
-            {args.metadata.map((meta, index) => (
-              <Banner.MetadataField
-                {...meta}
-                key={index}
-              ></Banner.MetadataField>
-            ))}
+            {!args.hideShareButton && (
+              <Popup
+                className="share-popup"
+                trigger={
+                  <Banner.Action
+                    icon="ri-share-fill"
+                    title="Share"
+                    className="share"
+                  />
+                }
+                content={
+                  <>
+                    <p>Share to:</p>
+                    <div className="actions" ref={popupRef}>
+                      <Banner.Action
+                        icon="ri-facebook-fill"
+                        title={'Share page to Facebook'}
+                        titleClass={'hiddenStructure'}
+                      />
+                      <Banner.Action
+                        icon="ri-twitter-fill"
+                        title={'Share page to Twitter'}
+                        titleClass={'hiddenStructure'}
+                      />
+                      <Banner.Action
+                        icon="ri-linkedin-fill"
+                        title={'Share page to Linkedin'}
+                        titleClass={'hiddenStructure'}
+                      />
+                    </div>
+                  </>
+                }
+                position="top center"
+              />
+            )}
+            {!args.hideDownloadButton && (
+              <Banner.Action
+                icon="ri-download-2-line"
+                title="Download"
+                className="download"
+              />
+            )}
           </>
-        </Banner.Metadata>
-      )}
-      <Copyright copyrightPosition={args.copyrightPosition}>
-        <Copyright.Icon>
-          <Icon className={args.copyrightIcon} />
-        </Copyright.Icon>
-        <Copyright.Text>{args.copyright}</Copyright.Text>
-      </Copyright>
-    </Banner.Content>
-  </Banner>
-);
+        }
+      >
+        <Banner.Subtitle>{args.subtitle}</Banner.Subtitle>
+        <Banner.Title>{args.title}</Banner.Title>
+        {args.metadata && (
+          <Banner.Metadata>
+            <>
+              {args.metadata.map((meta, index) => (
+                <Banner.MetadataField
+                  {...meta}
+                  key={index}
+                ></Banner.MetadataField>
+              ))}
+            </>
+          </Banner.Metadata>
+        )}
+        <Copyright copyrightPosition={args.copyrightPosition}>
+          <Copyright.Icon>
+            <Icon className={args.copyrightIcon} />
+          </Copyright.Icon>
+          <Copyright.Text>{args.copyright}</Copyright.Text>
+        </Copyright>
+      </Banner.Content>
+    </Banner>
+  );
+};
 
 export const Default = Template.bind({});
 Default.args = {

package/src/ui/Footer/Social.jsx

@@ -1,21 +1,23 @@
 import React from 'react';
-import { Icon } from 'semantic-ui-react';
+import { Grid, Icon } from 'semantic-ui-react';
 import PropTypes from 'prop-types';
 
 const Social = (props) => {
   if (props.children) {
-    return <div>{props.children}</div>;
+    return <div className="social">{props.children}</div>;
   }
 
-  return (
-    <div className="social">
-      {props.social?.map((item, index) => (
-        <a href={item.link} aria-label={`${item.name} link`} key={index}>
-          <Icon className={item.icon}></Icon>
-        </a>
-      ))}
-    </div>
-  );
+  return props.social && props.social.length > 0 ? (
+    <Grid.Row>
+      <div className="social">
+        {props.social?.map((item, index) => (
+          <a href={item.link} aria-label={`${item.name} link`} key={index}>
+            <Icon className={item.icon}></Icon>
+          </a>
+        ))}
+      </div>
+    </Grid.Row>
+  ) : null;
 };
 
 Social.propTypes = {

package/src/ui/Footer/SubFooter.jsx

@@ -42,9 +42,7 @@ const SubFooter = (props) => {
 
       <Footer.Description description={props.description} />
 
-      <Grid.Row>
-        <Footer.Social social={props.social} />
-      </Grid.Row>
+      <Footer.Social social={props.social} />
 
       <Grid className="mobile only">
         {props.managedBy &&

package/src/ui/Header/Header.jsx

@@ -131,6 +131,7 @@ const Main = ({
   menuItems,
   renderMenuItem,
   renderGlobalMenuItem,
+  headerSearchBox,
   pathname,
   transparency,
   inverted,
@@ -321,6 +322,7 @@ const Main = ({
           onClose={searchOnClick}
           searchInputRef={searchInputRef}
           triggerRefs={[searchButtonRef]}
+          headerSearchBox={headerSearchBox}
         />
       )}
       <HeaderMenuPopUp

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

@@ -1245,6 +1245,30 @@ const menuItems = [
   },
 ];
 
+const headerSearchBox = [
+  {
+    isDefault: true,
+    path: '/en/advanced-search',
+    placeholder: 'Search or ask your question...',
+    description: 'For more search options',
+    buttonTitle: 'Go to advanced search',
+    searchSuggestions: {
+      maxToShow: 6,
+      suggestionsTitle: 'Try our suggestions',
+      suggestions: [
+        'What is PFAS?',
+        'Which transport mode has the lowest pollution?',
+        'Which countries use most renewable energy?',
+        'How many premature deaths are attributed to PM2.5?',
+        'How many premature deaths are attributed to air pollution?',
+        'How much have new cars co2 emissions decreased?',
+        'What countries had the highest land take in the EEA-39?',
+        'How many people are exposed to air pollution?',
+      ],
+    },
+  },
+];
+
 const debounce = (func) => {
   let timer;
   return (event) => {
@@ -1394,6 +1418,7 @@ const Template = (args) => {
           pathname={pathname}
           logo={<Logo {...logoProps} inverted={args.inverted} />}
           menuItems={menuItems}
+          headerSearchBox={headerSearchBox}
           renderMenuItem={(item, options = {}, props) => {
             const { onClick } = options;
             return (

package/src/ui/Header/HeaderSearchPopUp.js

@@ -1,43 +1,132 @@
-import React from 'react';
-import { Container, Input } from 'semantic-ui-react';
-
+import React, { useEffect } from 'react';
+import { Container, Input, List } from 'semantic-ui-react';
+import { withRouter, Link } from 'react-router-dom';
 import { useClickOutside } from '@eeacms/volto-eea-design-system/helpers';
 
-function HeaderSearchPopUp({ onClose, searchInputRef, triggerRefs = [] }) {
+const getRandomItems = (arr, max) => {
+  return (
+    arr?.slice(0, max).map(function () {
+      return this.splice(Math.floor(Math.random() * this.length), 1)[0];
+    }, arr.slice()) || []
+  );
+};
+
+function HeaderSearchPopUp({
+  history,
+  location,
+  onClose,
+  searchInputRef,
+  headerSearchBox,
+  triggerRefs = [],
+}) {
   const nodeRef = React.useRef();
+  const headerSearchViews = headerSearchBox || [];
+  const defaultView = headerSearchViews.filter((v) => v.isDefault);
+  const localView = headerSearchViews.filter((v) =>
+    location.pathname.includes(v.path),
+  );
+  const activeView = localView.length > 0 ? localView[0] : defaultView[0];
+
+  const {
+    path = '',
+    buttonTitle,
+    description,
+    placeholder = 'Search',
+    searchSuggestions,
+  } = activeView || {};
+  const { suggestionsTitle, suggestions, maxToShow } = searchSuggestions || {};
+
+  const [text, setText] = React.useState('');
+  const [visibleSuggestions, setVisibileSuggestions] = React.useState(
+    getRandomItems(suggestions, maxToShow),
+  );
+
+  useEffect(() => {
+    setVisibileSuggestions(getRandomItems(suggestions, maxToShow));
+  }, [maxToShow, suggestions]);
 
   useClickOutside({ targetRefs: [nodeRef, ...triggerRefs], callback: onClose });
 
+  const onChangeText = (event, { value }) => {
+    setText(value);
+    event.preventDefault();
+  };
+
+  const onSubmit = (event) => {
+    history.push(`${path}?q=${text}`);
+
+    if (window?.searchContext?.resetSearch) {
+      window.searchContext.resetSearch({ searchTerm: text });
+    }
+
+    onClose();
+    event.preventDefault();
+  };
+
+  const onClickHandler = (suggestion) => {
+    if (window?.searchContext?.resetSearch) {
+      window.searchContext.resetSearch({ searchTerm: suggestion });
+    }
+
+    onClose();
+  };
+
   return (
     <div id="search-box" ref={nodeRef}>
       <div className="wrapper">
         <Container>
-          <form>
+          <form method="get" onSubmit={onSubmit}>
             <Input
               ref={searchInputRef}
               className="search"
-              icon={{ className: 'ri-search-line', link: true }}
-              placeholder="Search..."
+              onChange={onChangeText}
+              icon={{
+                className: 'ri-search-line',
+                link: true,
+                onClick: onSubmit,
+              }}
+              placeholder={placeholder}
               fluid
             />
           </form>
-        </Container>
+          {searchSuggestions && suggestions.length > 0 && (
+            <div className="search-suggestions">
+              {suggestionsTitle && <h4>{suggestionsTitle}</h4>}
 
-        <div className="advanced-search">
-          <Container>
-            <div>For more search options</div>
-            <a
-              href="/"
-              className="ui button white inverted"
-              title="Advanced search"
-            >
-              Go to advanced search
-            </a>
-          </Container>
-        </div>
+              <List>
+                {visibleSuggestions.map((item, i) => {
+                  return (
+                    <List.Item key={i}>
+                      <Link
+                        to={`${path}?q=${item}`}
+                        onClick={() => onClickHandler(item)}
+                      >
+                        {item}
+                      </Link>
+                    </List.Item>
+                  );
+                })}
+              </List>
+            </div>
+          )}
+        </Container>
+        {buttonTitle && (
+          <div className="advanced-search">
+            <Container>
+              <div>{description}</div>
+              <a
+                href={defaultView[0].path}
+                className="ui button white inverted"
+                title="Advanced search"
+              >
+                {buttonTitle}
+              </a>
+            </Container>
+          </div>
+        )}
       </div>
     </div>
   );
 }
 
-export default HeaderSearchPopUp;
+export default withRouter(HeaderSearchPopUp);

package/src/ui/Popup/Popup.jsx

@@ -0,0 +1,135 @@
+/* Simplified popup with several options found in the semantic ui implementation
+ * https://github.com/Semantic-Org/Semantic-UI-React/blob/master/src/modules/Popup/Popup.js
+ *  */
+import React from 'react';
+import { createPopper } from '@popperjs/core';
+import EventStack from '@semantic-ui-react/event-stack';
+import cx from 'classnames';
+
+export const positionsMapping = {
+  'top center': 'top',
+  'top left': 'top-start',
+  'top right': 'top-end',
+
+  'bottom center': 'bottom',
+  'bottom left': 'bottom-start',
+  'bottom right': 'bottom-end',
+
+  'right center': 'right',
+  'left center': 'left',
+};
+
+class Popup extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.triggerRef = React.createRef();
+    this.popupRef = React.createRef();
+
+    this.state = {
+      isOpen: false,
+    };
+
+    this.togglePopup = this.togglePopup.bind(this);
+    this.closeOnEscape = this.closeOnEscape.bind(this);
+  }
+
+  componentDidMount() {
+    this.popper = createPopper(this.triggerRef.current, this.popupRef.current, {
+      placement: positionsMapping[this.props.position] || 'bottom-end',
+      strategy: this.props.positionFixed || 'absolute',
+      modifiers: [
+        {
+          name: 'offset',
+          options: {
+            offset: this.props.offset,
+          },
+        },
+        ...this.props.popperModifiers,
+      ],
+    });
+  }
+
+  componentWillUnmount() {
+    this.popper && this.popper.destroy();
+  }
+
+  togglePopup() {
+    this.setState(
+      (state) => {
+        return {
+          isOpen: !state.isOpen,
+        };
+      },
+      () => {
+        this.popper.forceUpdate();
+      },
+    );
+  }
+  closeOnEscape(e) {
+    if (e.key === 'Escape') {
+      this.setState((state) => {
+        return {
+          isOpen: !state.isOpen,
+        };
+      });
+    }
+  }
+
+  render() {
+    const { trigger, className, size, position, basic, content } = this.props;
+    const event = this.props.on;
+    const onEvent = 'on' + event.charAt(0).toUpperCase() + event.slice(1);
+    return (
+      <React.Fragment>
+        {trigger &&
+          React.cloneElement(trigger, {
+            [onEvent]: this.togglePopup,
+            ref: this.triggerRef,
+          })}
+
+        <div className="popup-container" ref={this.popupRef}>
+          {this.state.isOpen && (
+            <EventStack name="keydown" on={this.closeOnEscape} />
+          )}
+          <React.Fragment>
+            <div
+              className={cx(
+                'ui popup transition',
+                className,
+                size,
+                position,
+                basic ? 'basic' : '',
+                this.state.isOpen ? 'visible' : '',
+              )}
+            >
+              {content}
+            </div>
+          </React.Fragment>
+        </div>
+      </React.Fragment>
+    );
+  }
+}
+
+Popup.defaultProps = {
+  position: 'bottom center',
+  basic: false,
+  size: 'small',
+  offset: [0, 0],
+  positionFixed: false,
+  className: '',
+  wide: false,
+  on: 'click',
+  popperModifiers: [],
+  // disabled,
+  // flowing,
+  // header,
+  // inverted,
+  // pinned,
+  // popper,
+  // popperDependencies,
+  // style,
+};
+
+export default Popup;

package/src/ui/Popup/Popup.stories.jsx

@@ -1,5 +1,8 @@
 import { React } from 'react';
-import { Button, Segment, Popup, Image, Icon } from 'semantic-ui-react';
+import { Button, Segment, Image, Icon } from 'semantic-ui-react';
+
+import Popup from './Popup';
+
 import EUflag from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/images/europe-flag.svg';
 
 export default {

package/theme/themes/eea/elements/container.overrides

@@ -109,20 +109,40 @@ body {
 }
 
 /* Hack for escape the blocks container in blocks full width */
+[class~="view-defaultview"] [id="page-document"] > .full-width,
+[class~="view-viewview"] [id="page-document"] > .full-width {
+  max-width: initial !important;
+}
+
 .has--size--full:not(.block-editor-columnsBlock),
 .full-width {
   position: relative;
+  width: calc(100vw - var(--scrollbar-width, @scrollbarWidth)) !important;
   right: 50%;
   left: 50%;
-  width: 100vw !important;
   max-width: initial !important;
-  margin-right: -50vw !important;
-  margin-left: -50vw !important;
+  margin-left: calc(-50vw + var(--scrollbar-width, @scrollbarWidth) / 2) !important;
+  margin-right: calc(-50vw + var(--scrollbar-width, @scrollbarWidth) / 2) !important;
 }
 
-[class~="view-defaultview"] [id="page-document"] > .full-width,
-[class~="view-viewview"] [id="page-document"] > .full-width {
-  max-width: initial !important;
+@media only screen and (min-width: @largestMobileScreen) {
+  body.has-toolbar {
+    .has--size--full:not(.block-editor-columnsBlock),
+    .full-width {
+      width: calc(100vw - @toolbarWidth - var(--scrollbar-width, @scrollbarWidth)) !important;
+      margin-left: calc(-50vw + (@toolbarWidth + var(--scrollbar-width, @scrollbarWidth)) / 2) !important;
+      margin-right: calc(-50vw + (@toolbarWidth + var(--scrollbar-width, @scrollbarWidth)) / 2) !important;
+    }
+  }
+
+  body.has-toolbar-collapsed {
+    .has--size--full:not(.block-editor-columnsBlock),
+    .full-width {
+      width: calc(100vw - @toolbarWidthMin - var(--scrollbar-width, @scrollbarWidth)) !important;
+      margin-left: calc(-50vw + (var(--scrollbar-width, @scrollbarWidth) + @toolbarWidthMin) / 2) !important;
+      margin-right: calc(-50vw + (var(--scrollbar-width, @scrollbarWidth) + @toolbarWidthMin) / 2) !important;
+    }
+  }
 }
 
 .has--size--full:not(.block-editor-columnsBlock) .ui.grid {

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

@@ -59,7 +59,7 @@
         align-items: @mobileActionsAlignItems;
         justify-content: flex-end;
 
-        .action {
+        > .action {
           .ui.basic.inverted.button {
             /* used basic inverted button for minimun overrides on box-shadow and active state background */
             box-shadow: @bannerActionButtonBoxShadow !important;
@@ -112,6 +112,8 @@
 .ui.popup.share-popup {
   padding: @sharePopupPadding;
   filter: @sharePopupFilter;
+  min-width: @sharePopupMinWidth;
+  position: initial; // without position initial popper cannot correctly place popup
 
   p {
     font-size: @sharePopupFontSize;
@@ -165,7 +167,7 @@
           flex-direction: @tabletActionsFlexDirection;
           align-items: @tabletActionsAlignItems;
 
-          .action {
+          > .action {
             min-width: @tabletActionsActionMinWidth;
 
             .ui.basic.inverted.button i.icon {
@@ -189,10 +191,12 @@
 
     .actions {
       display: flex;
-      flex-flow: row;
+      flex-flow: row !important;
+      justify-content: flex-start !important;
 
       .action {
         display: inherit;
+        min-width: 1rem !important;
       }
     }
   }

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

@@ -79,6 +79,7 @@
 
 /* Share Popup */
 @sharePopupPadding: @tinyGap;
+@sharePopupMinWidth: 80px;
 @sharePopupFilter:  drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.25));
 @tabletSharePopupMinWidth: 120px;
 // Text

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

@@ -596,7 +596,6 @@
 @media only screen and (min-width: @computerBreakpoint) {
   .eea.header .subsite-logo {
     position: absolute;
-    z-index: 1;
     top: @subsiteLogoTopPosition;
     left: calc(100% + @subsiteFlexGap);
     width: 400px;
@@ -780,6 +779,7 @@
     font-size: @megaMenuGlanceListItemFontSize;
     font-weight: @megaMenuGlanceListItemFontWeight;
   }
+
   .list.menu-list {
     margin-top: @megaMenuGlanceMenuListMarginTop;
   }

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

@@ -5,11 +5,14 @@
 @import '@eeacms/volto-eea-design-system/../theme/themes/eea/globals/utilities';
 
 // Accessibility outline on focus-visible for every component
-button:focus-visible,
 *:focus-visible {
   outline: @focusVisibleOutline;
 }
 
+button:focus-visible {
+  outline: @focusVisibleOutline !important;
+}
+
 h1, h2, h3, h4, h5, h6 {
   line-height: @font-lineheight-0;
   letter-spacing: @font-letterspacing-00;

package/theme/themes/eea/tokens/colors.less

@@ -58,6 +58,6 @@
 @grey-1: #F9F9F9;
 @grey-2: #E6E7E8;
 @grey-3: #BCBEC0;
-@grey-4: #67696b; /* 10% shade of #808285 which passed AA validation on white bg */
+@grey-4: #747678;
 @grey-5: #323232;
 @grey-6: #000000;