@eeacms/volto-eea-design-system 1.32.1 → 1.32.3

package/CHANGELOG.md

@@ -4,6 +4,21 @@ 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.32.3](https://github.com/eea/volto-eea-design-system/compare/1.32.2...1.32.3) - 29 August 2024
+
+#### :bug: Bug Fixes
+
+- fix: Update FooterSitesButton.jsx to use UniversalLink - refs #265857 [dobri1408 - [`c53fc12`](https://github.com/eea/volto-eea-design-system/commit/c53fc1297456290de0906552d873c00f8228758d)]
+
+### [1.32.2](https://github.com/eea/volto-eea-design-system/compare/1.32.1...1.32.2) - 28 August 2024
+
+#### :bug: Bug Fixes
+
+- fix: Improve tablet layout for footer - refs #265857 [dobri1408 - [`4422ca4`](https://github.com/eea/volto-eea-design-system/commit/4422ca44740b405c20d5306a4a5bcb04a0085399)]
+
+#### :hammer_and_wrench: Others
+
+- test: use node 18 to build docusaurus [valentinab25 - [`f1495bb`](https://github.com/eea/volto-eea-design-system/commit/f1495bb849e08aebba8441bd20e26e3d9c1cc808)]
 ### [1.32.1](https://github.com/eea/volto-eea-design-system/compare/1.32.0...1.32.1) - 27 August 2024
 
 #### :bug: Bug Fixes

package/package.json

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

package/src/ui/Footer/Contact.jsx

@@ -1,14 +1,19 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
-
+import cx from 'classnames';
 import { isInternalURL } from '@plone/volto/helpers/Url/Url';
 
-const Contact = ({ children, contacts }) =>
-  children?.length ? (
+const Contact = ({ children, contacts }) => {
+  return children?.length ? (
     children
   ) : (
-    <div className="contact-wrapper">
+    <div
+      className={cx(
+        'contact-wrapper',
+        contacts?.length > 5 ? 'many-contacts' : '',
+      )}
+    >
       {contacts?.map((contact, index) => (
         <div className="contact" key={index}>
           {isInternalURL(contact.url) ? (
@@ -50,6 +55,7 @@ const Contact = ({ children, contacts }) =>
       ))}
     </div>
   );
+};
 
 Contact.propTypes = {
   contacts: PropTypes.array,

package/src/ui/Footer/Footer.stories.js

@@ -31,7 +31,7 @@ const Template = (args) => (
 
 export const Default = Template.bind({});
 Default.args = {
-  buttonName: 'Explore our Environmental information systems',
+  buttonName: 'Explore our environmental information systems',
   hrefButton: 'https://www.eea.europa.eu/en/information-systems',
   description: '',
   actions: [

package/src/ui/Footer/Footer.stories.test.js

@@ -3,8 +3,10 @@ import { render } from '@testing-library/react';
 import { createMemoryHistory } from 'history';
 import { Router } from 'react-router-dom';
 import { Default } from './Footer.stories';
+import { Provider } from 'react-redux';
 import Footer from './Footer';
 import '@testing-library/jest-dom/extend-expect';
+import configureStore from 'redux-mock-store';
 
 describe('Default', () => {
   let history;
@@ -22,11 +24,21 @@ describe('Default', () => {
     });
   });
 
+  const mockStore = configureStore();
+  const store = mockStore({
+    intl: {
+      locale: 'en',
+      messages: {},
+    },
+  });
+
   it('renders correctly', () => {
     const { container } = render(
-      <Router history={history}>
-        <Default {...Default.args} />
-      </Router>,
+      <Provider store={store}>
+        <Router history={history}>
+          <Default {...Default.args} />
+        </Router>
+      </Provider>,
     );
 
     expect(container.querySelector('#footer')).toBeInTheDocument();
@@ -49,21 +61,23 @@ describe('Default', () => {
 
   it('renders correctly', () => {
     const { container, getByText } = render(
-      <Router history={history}>
-        <Footer>
-          <Footer.SubFooter {...Default.args}>
-            <div>SubFooter test</div>
-          </Footer.SubFooter>
-          <Footer.Header>{Default.args.header}</Footer.Header>
-          <Footer.Sites sites={Default.args.sites}>
-            <div>Sites test</div>
-          </Footer.Sites>
-          <Footer.Actions
-            actions={Default.args.actions}
-            copyright={Default.args.copyright}
-          />
-        </Footer>
-      </Router>,
+      <Provider store={store}>
+        <Router history={history}>
+          <Footer>
+            <Footer.SubFooter {...Default.args}>
+              <div>SubFooter test</div>
+            </Footer.SubFooter>
+            <Footer.Header>{Default.args.header}</Footer.Header>
+            <Footer.Sites sites={Default.args.sites}>
+              <div>Sites test</div>
+            </Footer.Sites>
+            <Footer.Actions
+              actions={Default.args.actions}
+              copyright={Default.args.copyright}
+            />
+          </Footer>
+        </Router>
+      </Provider>,
     );
 
     expect(container.querySelector('#footer')).toBeInTheDocument();
@@ -82,23 +96,25 @@ describe('Default', () => {
 
   it('renders correctly', () => {
     const { container, getByText } = render(
-      <Router history={history}>
-        <Footer>
-          <Footer.SubFooter
-            {...Default.args}
-            description={'test description'}
-            social={undefined}
-          />
-          <Footer.Header>{Default.args.header}</Footer.Header>
-          <Footer.Sites sites={Default.args.sites} />
-          <Footer.Actions
-            actions={Default.args.actions}
-            copyright={Default.args.copyright}
-          >
-            <div>Actions test</div>
-          </Footer.Actions>
-        </Footer>
-      </Router>,
+      <Provider store={store}>
+        <Router history={history}>
+          <Footer>
+            <Footer.SubFooter
+              {...Default.args}
+              description={'test description'}
+              social={undefined}
+            />
+            <Footer.Header>{Default.args.header}</Footer.Header>
+            <Footer.Sites sites={Default.args.sites} />
+            <Footer.Actions
+              actions={Default.args.actions}
+              copyright={Default.args.copyright}
+            >
+              <div>Actions test</div>
+            </Footer.Actions>
+          </Footer>
+        </Router>
+      </Provider>,
     );
 
     expect(container.querySelector('#footer')).toBeInTheDocument();

package/src/ui/Footer/FooterSitesButton.jsx

@@ -1,7 +1,5 @@
-import React from 'react';
-import { Button } from 'semantic-ui-react';
 import PropTypes from 'prop-types';
-import { isInternalURL, flattenToAppURL } from '@plone/volto/helpers';
+import { UniversalLink } from '@plone/volto/components';
 
 const SitesButton = (props) => {
   if (props.children) {
@@ -11,20 +9,13 @@ const SitesButton = (props) => {
   //fallback to props
   return (
     <div className="theme-sites">
-      <Button
+      <UniversalLink
+        href={props.hrefButton}
         className="theme-sites-button"
-        onClick={() => {
-          if (__CLIENT__ && window) {
-            window.location.assign(
-              isInternalURL(props.hrefButton)
-                ? flattenToAppURL(props.hrefButton)
-                : props.hrefButton,
-            );
-          }
-        }}
+        openLinkInNewTab={false}
       >
         {props.buttonName}
-      </Button>
+      </UniversalLink>
     </div>
   );
 };

package/src/ui/Footer/SubFooter.jsx

@@ -33,12 +33,13 @@ const SubFooter = (props) => {
               </div>
             </Grid.Column>
           ))}
-
-        <Grid.Column mobile={12} tablet={12} computer={4}>
-          <div className="item">
-            <Footer.Contact contacts={props.contacts} />
-          </div>
-        </Grid.Column>
+        {props.contacts?.length > 0 && (
+          <Grid.Column mobile={12} tablet={12} computer={4}>
+            <div className="item">
+              <Footer.Contact contacts={props.contacts} />
+            </div>
+          </Grid.Column>
+        )}
       </Grid>
     </div>
   );

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

@@ -211,7 +211,22 @@ footer .footer-wrapper .menu {
   footer .footer-header {
     font-size: @tabletFooterTitleFontSize;
   }
+  .contact-wrapper {
+    display: flex;
+    padding-top: @tabletContactWrapperPaddingTop;
+    gap: @tabletContactGap;
+  }
 
+  .contact-wrapper .subcontact {
+    display: block;
+  }
+  .many-contacts {
+    display: block;
+    padding-top: 0px;
+  }
+  .many-contacts .subcontact {
+    display: flex;
+  }
   .subfooter .item {
     .logo img {
       max-height: 100px;
@@ -256,6 +271,13 @@ footer .footer-wrapper .menu {
 }
 
 @media only screen and (min-width: @computerBreakpoint) {
+  .contact-wrapper {
+    display: block;
+    padding-top: 0px;
+  }
+  .contact-wrapper .subcontact {
+    display: flex;
+  }
   footer {
     .footer-wrapper {
       padding: @computerWrapperPadding;

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

@@ -49,6 +49,7 @@
 @tabletContactBlockMarginBottom     : @space-4;
 @mobileContactMargin                : @space-4 0;
 @tabletContactMargin                : @rem-space-050 0;
+@tabletContactWrapperPaddingTop     : @rem-space-8;
 @contactFontSize                    : @font-size-2;
 @tabletContactFontSize              : @font-size-3;
 @tabletContactGap                   : @rem-space-4;