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

package/CHANGELOG.md

@@ -4,6 +4,53 @@ 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.4](https://github.com/eea/volto-eea-design-system/compare/1.0.3...1.0.4) - 27 March 2023
+
+#### :rocket: New Features
+
+- feat(copyright): Add copyright prefix - Image - refs #250724 [Alin Voinea - [`6a72772`](https://github.com/eea/volto-eea-design-system/commit/6a727723c15aee499ed7cedc9f364c5e2c8014bb)]
+
+#### :house: Internal changes
+
+- style(copyright): Cleanup useless min-height - refs #250724 [Alin Voinea - [`f2457df`](https://github.com/eea/volto-eea-design-system/commit/f2457df6376ac1a4d00f87eee90e61f66f7ffebb)]
+
+#### :hammer_and_wrench: Others
+
+- Back to dev [Alin Voinea - [`cfd6eba`](https://github.com/eea/volto-eea-design-system/commit/cfd6eba8b01eceff4e28ab7ab51b2457672ac172)]
+### [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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-design-system",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "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,54 +13,60 @@ 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' },
+      },
+    },
+    copyrightPrefix: {
+      table: {
+        category: 'Copyright',
+        defaultValue: { summary: '' },
         type: { summary: 'string' },
       },
     },
     copyrightIcon: {
       table: {
         category: 'Copyright',
-        defaultValue: { summary: '""' },
+        defaultValue: { summary: '' },
         type: { summary: 'string' },
       },
     },
     copyrightPosition: {
-      name: 'Position',
       control: {
         type: 'inline-radio',
         options: ['left', 'right'],
@@ -73,69 +80,83 @@ 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.Prefix>{args.copyrightPrefix}</Copyright.Prefix>
+          <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 = {
@@ -150,7 +171,8 @@ Default.args = {
   image: true,
   hideShareButton: false,
   hideDownloadButton: false,
+  copyrightPrefix: 'Image',
   copyrightPosition: 'left',
   copyrightIcon: 'ri-copyright-line',
-  copyright: 'Image copyright: Velit fusce sed sem ut.',
+  copyright: 'John Smith, Well with Nature /EEA',
 };

package/src/ui/Copyright/Copyright.jsx

@@ -13,6 +13,15 @@ function Copyright({ children, ...rest }) {
   );
 }
 
+Copyright.Prefix = ({ children, ...rest }) =>
+  children ? (
+    <span {...rest} className={'icon-prefix'}>
+      {children}
+    </span>
+  ) : (
+    ''
+  );
+
 Copyright.Icon = ({ children, ...rest }) => (
   <span {...rest} className={'icon-wrapper'}>
     {children}

package/src/ui/Copyright/Copyright.stories.jsx

@@ -7,7 +7,6 @@ export default {
   component: Copyright,
   argTypes: {
     copyrightPosition: {
-      name: 'Position',
       control: {
         type: 'inline-radio',
         options: ['left', 'right'],
@@ -24,10 +23,11 @@ export const Default = (args) => (
   <Container>
     <Segment className={'inverted'}>
       <Copyright copyrightPosition={args.copyrightPosition}>
+        <Copyright.Prefix>{args.copyrightPrefix}</Copyright.Prefix>
         <Copyright.Icon>
-          <Icon className={args.icon} />
+          <Icon className={args.copyrightIcon} />
         </Copyright.Icon>
-        <Copyright.Text>{args.text}</Copyright.Text>
+        <Copyright.Text>{args.copyright}</Copyright.Text>
       </Copyright>
     </Segment>
   </Container>
@@ -35,6 +35,7 @@ export const Default = (args) => (
 
 Default.args = {
   copyrightPosition: 'left',
-  icon: 'ri-copyright-line',
-  text: 'Image copyright: Velit fusce sed sem ut.',
+  copyrightPrefix: 'Image',
+  copyrightIcon: 'ri-copyright-line',
+  copyright: 'John Smith, Well with Nature /EEA',
 };

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/Hero/Hero.jsx

@@ -24,9 +24,9 @@ function Hero({
   alignContent,
   backgroundVariant,
   children,
-
   has_copyright,
   copyright,
+  copyrightPrefix,
   copyrightIcon,
   copyrightPosition,
 }) {
@@ -49,6 +49,7 @@ function Hero({
 
             {has_copyright && (
               <Copyright copyrightPosition={copyrightPosition}>
+                <Copyright.Prefix>{copyrightPrefix}</Copyright.Prefix>
                 <Copyright.Icon>
                   <Icon className={copyrightIcon} />
                 </Copyright.Icon>

package/src/ui/Hero/Hero.stories.jsx

@@ -63,7 +63,6 @@ export default {
       },
     },
     copyrightPosition: {
-      name: 'Position',
       control: {
         type: 'inline-radio',
         options: ['left', 'right'],
@@ -74,6 +73,13 @@ export default {
         defaultValue: { summary: '"left"' },
       },
     },
+    copyrightPrefix: {
+      table: {
+        category: 'Copyright',
+        defaultValue: { summary: '""' },
+        type: { summary: 'string' },
+      },
+    },
     copyrightIcon: {
       table: {
         category: 'Copyright',
@@ -130,8 +136,9 @@ Default.args = {
 
   has_copyright: true,
   copyrightPosition: 'left',
+  copyrightPrefix: 'Image',
   copyrightIcon: 'ri-copyright-line',
-  copyright: 'Image copyright: Velit fusce sed sem ut.',
+  copyright: 'John Smith, Well with Nature /EEA',
 };
 Default.parameters = {
   controls: {
@@ -167,8 +174,9 @@ Playground.args = {
 
   has_copyright: true,
   copyrightPosition: 'left',
+  copyrightPrefix: 'Image',
   copyrightIcon: 'ri-copyright-line',
-  copyright: 'Image copyright: Velit fusce sed sem ut.',
+  copyright: 'John Smith, Well with Nature /EEA',
 };
 Playground.argTypes = {
   fullWidth: {
@@ -253,6 +261,13 @@ Playground.argTypes = {
       type: { summary: 'string' },
     },
   },
+  copyrightPrefix: {
+    table: {
+      category: 'Copyright',
+      defaultValue: { summary: '""' },
+      type: { summary: 'string' },
+    },
+  },
   copyrightIcon: {
     table: {
       category: 'Copyright',

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/theme.config

@@ -135,4 +135,5 @@
   @import (optional) "@{siteFolder}/@{addon}/@{addontype}s/@{addonelement}.overrides";
 }
 
+
 /* End Config */

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/copyright.less

@@ -14,7 +14,6 @@
         display: flex;
         color: @copyrightContentColor;
         font-size: @copyrightContentFontSize;
-        min-height: @copyrightMinHeight;
         align-items: @copyrightAlignItems;
         line-height: @copyrightLineHeight;
         gap: @copyrightContentPaddingRight;

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

@@ -12,8 +12,7 @@
 @copyrightWrapperPaddingLeft: @rem-space-3;
 @copyrightWrapperPaddingRight: @rem-space-3;
 @copyrightWrapperBottom: @rem-space-4;
-@copyrightMinHeight: @rem-space-8;
-@copyrightAlignItems: center;
+@copyrightAlignItems: start;
 
 /* Image block */
 @floatImageLeftMaxWidth: 50%;

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;