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

package/CHANGELOG.md

@@ -4,6 +4,15 @@ 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.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.2",
   "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/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;