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

package/CHANGELOG.md

@@ -4,6 +4,25 @@ 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.1](https://github.com/eea/volto-eea-design-system/compare/1.32.0...1.32.1) - 27 August 2024
+
+#### :bug: Bug Fixes
+
+- fix: Update SubFooter.jsx to improve table layout - refs #265857 [dobri1408 - [`6b95d14`](https://github.com/eea/volto-eea-design-system/commit/6b95d14838bbc9423ea2d6c1f400f9a12efc898d)]
+
+### [1.32.0](https://github.com/eea/volto-eea-design-system/compare/1.31.2...1.32.0) - 26 August 2024
+
+#### :rocket: New Features
+
+- feat(context-navigation): Added styling of side navigation - refs #272384 [ichim-david - [`1b9da93`](https://github.com/eea/volto-eea-design-system/commit/1b9da934b6c9b0044764dd41cb1f83ac34572aa8)]
+
+#### :nail_care: Enhancements
+
+- refactor: Footer simplification according to the #265857 [dobri1408 - [`75ba3b6`](https://github.com/eea/volto-eea-design-system/commit/75ba3b6e02f2d06820880d3af9ddacc3a14222a7)]
+
+#### :hammer_and_wrench: Others
+
+- Release 1.32.0 [Alin Voinea - [`f8fe25f`](https://github.com/eea/volto-eea-design-system/commit/f8fe25fff59471b2b1ca974b1c311d7c348b5328)]
 ### [1.31.2](https://github.com/eea/volto-eea-design-system/compare/1.31.1...1.31.2) - 22 July 2024
 
 #### :nail_care: Enhancements

package/package.json

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

package/src/ui/Footer/Footer.jsx

@@ -11,6 +11,7 @@ import FooterActions from '@eeacms/volto-eea-design-system/ui/Footer/FooterActio
 import FooterHeader from '@eeacms/volto-eea-design-system/ui/Footer/FooterHeader';
 import SubFooter from '@eeacms/volto-eea-design-system/ui/Footer/SubFooter';
 import Social from '@eeacms/volto-eea-design-system/ui/Footer/Social';
+import FooterSitesButton from '@eeacms/volto-eea-design-system/ui/Footer/FooterSitesButton';
 import Contact from '@eeacms/volto-eea-design-system/ui/Footer/Contact';
 import { useFirstVisited } from '@eeacms/volto-eea-design-system/helpers';
 import Description from '@eeacms/volto-eea-design-system/ui/Footer/Description';
@@ -44,6 +45,7 @@ Footer.Contact = Contact;
 Footer.Header = FooterHeader;
 Footer.Sites = FooterSites;
 Footer.Social = Social;
+Footer.SitesButton = FooterSitesButton;
 Footer.SubFooter = SubFooter;
 Footer.Description = Description;
 

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

@@ -23,14 +23,16 @@ const Template = (args) => (
   <Footer>
     <Footer.SubFooter {...args} />
     <Footer.Header>{args.header}</Footer.Header>
-    <Footer.Sites sites={args.sites} />
+    <Footer.SitesButton {...args} />
+    <Footer.Social {...args} />
     <Footer.Actions actions={args.actions} copyright={args.copyright} />
   </Footer>
 );
 
 export const Default = Template.bind({});
 Default.args = {
-  header: 'Environmental information systems',
+  buttonName: 'Explore our Environmental information systems',
+  hrefButton: 'https://www.eea.europa.eu/en/information-systems',
   description: '',
   actions: [
     { url: '/privacy', title: 'Privacy' },

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

@@ -23,7 +23,7 @@ describe('Default', () => {
   });
 
   it('renders correctly', () => {
-    const { container, getByText } = render(
+    const { container } = render(
       <Router history={history}>
         <Default {...Default.args} />
       </Router>,
@@ -44,16 +44,7 @@ describe('Default', () => {
       container.querySelector('a[href="https://www.eea.europa.eu/en/login"]'),
     ).toBeInTheDocument();
     expect(container.querySelector('.actions')).toBeInTheDocument();
-
-    expect(container.querySelector('.footer-header')).toBeInTheDocument();
-    expect(getByText('Environmental information systems')).toBeInTheDocument();
-
-    expect(container.querySelector('.theme-sites')).toBeInTheDocument();
-    Default.args.sites.map((site) =>
-      expect(
-        container.querySelector(`a[href="${site.url}"] img[src="${site.src}"]`),
-      ).toBeInTheDocument(),
-    );
+    expect(container.querySelector('.theme-sites-button')).toBeInTheDocument();
   });
 
   it('renders correctly', () => {
@@ -85,10 +76,6 @@ describe('Default', () => {
       container.querySelector('a[href="https://www.eea.europa.eu/en/login"]'),
     ).toBeInTheDocument();
     expect(container.querySelector('.actions')).toBeInTheDocument();
-
-    expect(container.querySelector('.footer-header')).toBeInTheDocument();
-    expect(getByText('Environmental information systems')).toBeInTheDocument();
-
     expect(getByText('Sites test')).toBeInTheDocument();
     expect(getByText('SubFooter test')).toBeInTheDocument();
   });
@@ -116,10 +103,6 @@ describe('Default', () => {
 
     expect(container.querySelector('#footer')).toBeInTheDocument();
     expect(container.querySelector('.footer-wrapper-nobg')).toBeInTheDocument();
-
-    expect(container.querySelector('.footer-header')).toBeInTheDocument();
-    expect(getByText('Environmental information systems')).toBeInTheDocument();
-
     expect(getByText('Actions test')).toBeInTheDocument();
   });
 });

package/src/ui/Footer/FooterSitesButton.jsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { Button } from 'semantic-ui-react';
+import PropTypes from 'prop-types';
+import { isInternalURL, flattenToAppURL } from '@plone/volto/helpers';
+
+const SitesButton = (props) => {
+  if (props.children) {
+    return <div>{props.children}</div>;
+  }
+
+  //fallback to props
+  return (
+    <div className="theme-sites">
+      <Button
+        className="theme-sites-button"
+        onClick={() => {
+          if (__CLIENT__ && window) {
+            window.location.assign(
+              isInternalURL(props.hrefButton)
+                ? flattenToAppURL(props.hrefButton)
+                : props.hrefButton,
+            );
+          }
+        }}
+      >
+        {props.buttonName}
+      </Button>
+    </div>
+  );
+};
+
+SitesButton.propTypes = {
+  hrefButton: PropTypes.string,
+};
+
+export default SitesButton;

package/src/ui/Footer/Social.jsx

@@ -9,13 +9,13 @@ const Social = (props) => {
 
   return props.social && props.social.length > 0 ? (
     <Grid.Row>
-      <div className="social">
+      <span className="social">
         {props.social?.map((item, index) => (
           <a href={item.url} aria-label={`${item.name} link`} key={index}>
             <Icon className={item.icon}></Icon>
           </a>
         ))}
-      </div>
+      </span>
     </Grid.Row>
   ) : null;
 };

package/src/ui/Footer/SubFooter.jsx

@@ -10,7 +10,7 @@ const SubFooter = (props) => {
 
   return (
     <div className={'subfooter'}>
-      <Grid>
+      <Grid className="mobile">
         {props.managedBy &&
           props.managedBy.map((manager, index) => (
             <Grid.Column
@@ -18,7 +18,7 @@ const SubFooter = (props) => {
               tablet={manager.columnSize.tablet}
               computer={manager.columnSize.computer}
               key={index}
-              className="mobile hidden"
+              className="mobile"
             >
               <div className="item">
                 <div className={manager.className}>
@@ -34,40 +34,12 @@ const SubFooter = (props) => {
             </Grid.Column>
           ))}
 
-        <Grid.Column mobile={12} tablet={4} computer={4}>
+        <Grid.Column mobile={12} tablet={12} computer={4}>
           <div className="item">
             <Footer.Contact contacts={props.contacts} />
           </div>
         </Grid.Column>
       </Grid>
-
-      <Footer.Description description={props.description} />
-
-      <Footer.Social social={props.social} />
-
-      <Grid className="mobile only">
-        {props.managedBy &&
-          props.managedBy.map((manager, index) => (
-            <Grid.Column
-              mobile={manager.columnSize.mobile}
-              tablet={manager.columnSize.tablet}
-              computer={manager.columnSize.computer}
-              key={index}
-            >
-              <div className="item">
-                <div className={manager.className}>
-                  <a href={manager.url}>
-                    <Image
-                      src={manager.src}
-                      alt={manager.alt}
-                      loading="lazy"
-                    ></Image>
-                  </a>
-                </div>
-              </div>
-            </Grid.Column>
-          ))}
-      </Grid>
     </div>
   );
 };

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

@@ -17,6 +17,13 @@
   }
 }
 
+@media screen and (min-width: @mobileBreakpoint) and (max-width: @computerBreakpoint) {
+  .context-navigation {
+    max-width: @mobileSidenavMaxWidth;
+    margin: 0 auto;
+  }
+}
+
 .context-navigation .item a {
   display    : block;
   padding    : @sidenavItemPadding;
@@ -43,7 +50,7 @@
     margin-right: @sidenavHeaderIconMarginRight;
   }
 
-  &::before {
+  &::before:not(.accordion-header) {
     content: @sidenavHeaderIconContent;
     font-family: 'remixicon';
     font-weight: @sidenavHeaderIconFontWeight;
@@ -84,10 +91,14 @@
   border-bottom: none; 
 }
 
-.item.level-3 a {
+.context-navigation .item.level-2 a {
   padding-left: @subparItemPaddingLeft;
 }
 
+ .context-navigation .item.level-3 a {
+  padding-left: @subparItemPaddingLeft + 2rem;
+}
+
 // Active indicator
 .context-navigation .active.item > .content > a {
   color: @sidenavItemActiveColor;
@@ -102,4 +113,74 @@
 .content.active-indicator {
   display: none;
 }
+
+/*******************************
+          Side navigation
+*******************************/
+.accordion-header {
+  cursor: pointer;
+  justify-content: space-between;
+  align-items: center;
+  padding: @sidenavAccordionHeaderPadding;
+}
+
+.context-navigation-list .title-link {
+  display: block;
+  color: @sidenavItemColor; 
+  font-size  : @sidenavItemFontSize;
+  font-weight: @sidenavItemFontWeight;
+}
+.context-navigation-list .content .title-link {
+  font-weight: @sidenavLevelTwoItemFontWeight;
+}
+.context-navigation {
+  box-shadow: @sidenavBoxShadow;
+
+  .current {
+    color: @sidenavItemActiveColor;
+  }
+
+  .accordion {
+    display: flex;
+    flex-wrap: wrap;
+  }
+  .ui.accordion>.title {
+    --text-color: @sidenavItemColor;
+    --text-color-hover: @sidenavItemColor;
+    font-size: @sidenavItemFontSize;
+    font-weight: @sidenavItemFontWeight;
+    padding: @sidenavFolderItemPadding;
+    text-align: left;
+    &:not([aria-expanded="true"]) {
+        border-bottom: @sidenavContentBorderBottom;
+      }
+  }
+
+  .accordion-list {
+    margin-top: 0;
+    margin-bottom: 0;
+    list-style: none;
+    padding-left: 0;
+  }
+
+  .context-navigation-list>.accordion-list-title {
+    border-bottom: @sidenavContentBorderBottom;
+
+    .title-link {
+      padding: @sidenavFolderItemPadding;
+      font-size: @sidenavItemFontSize;
+      font-weight: @sidenavItemFontWeight;
+    }
+  }
+
+  .content .accordion-list .title-link {
+    padding: @sidenavLevelTwoItemPadding;
+  }
+
+  .ui.accordion .content {
+    --bg-color: transparent;
+    width: 100%;
+  }
+}
+
 .loadUIOverrides();

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

@@ -4,17 +4,21 @@
 
 @sidenavMaxWidth: 350px;
 @widescreenSidenavMaxWidth: 300px;
+@mobileSidenavMaxWidth: 100%;
 @sidenavBackground: @grey-0;
 @sidenavMarginRight: @rem-space-4;
-@sidenavPaddingLeft: @rem-space-4;
+@sidenavPaddingLeft: 0;
 @sidenavOverflow: inherit;
 @sidenavMargin: @rem-space-8 auto;
+@sidenavShadowColor: @grey-3;
+@sidenavBoxShadow: 0px 3px 3px @sidenavShadowColor;
 
 /* Header */
 @sidenavHeaderColor: @blue-grey-5;
 @sidenavHeaderFontSize: @font-size-3;
 @sidenavHeaderFontWeight: @font-weight-7;
 @sidenavHeaderPadding: @rem-space-4;
+@sidenavAccordionHeaderPadding: @rem-space-2 @rem-space-4;
 @sidenavHeaderBorderBottom: @2px solid @blue-grey-5;
 @sidenavHeaderIconMarginRight: @rem-space-4;
 
@@ -29,7 +33,7 @@
 /* Nav item */
 @sidenavItemPadding: @rem-space-2 0 @rem-space-2 @rem-space-8;
 @sidenavItemFontSize: @font-size-1;
-@sidenavItemFontWeight: @font-weight-4;
+@sidenavItemFontWeight: @font-weight-5;
 @sidenavItemColor: @blue-grey-5;
 @sidenavItemHoverBackground: @blue-grey-5;
 @sidenavItemHoverColor: @grey-0;
@@ -46,4 +50,8 @@
 /* Folders - Level 1 */
 @sidenavFolderFontSize: @font-size-2;
 @sidenavFolderFontWeight: @font-weight-7;
-@sidenavFolderItemPadding: @rem-space-4 0 @rem-space-4 @rem-space-4;
+@sidenavFolderItemPadding: @rem-space-4;
+
+/* Item - Level 2 */
+@sidenavLevelTwoItemFontWeight: @font-weight-4;
+@sidenavLevelTwoItemPadding: 0.5rem 1.5rem;

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

@@ -25,10 +25,23 @@ footer {
     width: @wrapperWidth;
     padding: @mobileWrapperPadding;
   }
+  .theme-sites-button {
+    background: @themeSitesButtonBackground !important;
+    font-size: @themeSitesButtonFontSize !important;
+    padding: @themeSitesButtonPadding !important;
+    color: @themeSitesButtonColor !important;
+    border: @themeSitesButtonBorder !important;
+  }
+  .theme-sites {
+    display: flex;
+    width: 100%;
+    justify-content: center;
+  }
 }
 
 footer .theme-sites {
   padding: @mobileThemeSitesPadding;
+  padding-top: @computerThemeSitesPaddingTop;
 
   .logos .ui.grid {
     align-items: center;
@@ -37,7 +50,6 @@ footer .theme-sites {
   .logos .logo img {
     margin: @mobileThemeSitesLogoMargin;
   }
-
 }
 footer .footer-header {
   font-size: @mobileFooterTitleFontSize;
@@ -53,6 +65,7 @@ footer .footer-header {
   height: @subFooterItemHeight;
   align-items: @subFooterItemAlignItems;
 }
+
 .subfooter .item .ui.grid {
   align-items: center;
 }
@@ -64,33 +77,46 @@ footer .footer-header {
   }
 }
 
-.subfooter .contact-wrapper {
-  margin-bottom: @tabletContactBlockMarginBottom;
-}
-
 .contact-wrapper .subcontact a {
   font-size: @computerSubContactIconFontSize;
   margin-right: @computerSubContactIconMarginRight;
   font-weight: @computerSubContactIconFontWeight;
 }
+.contact-wrapper .subcontact a {
+  font-size: @tabletSubContactIconFontSize;
+  margin-right: @tabletSubContactIconMarginRight;
+}
 
 .subfooter .contact {
-  display: block;
-  margin: @mobileContactMargin;
-  font-size: @contactFontSize;
-  gap: @contactGap;
+  display: flex;
+  font-size: @tabletContactFontSize;
+  margin: @tabletContactMargin;
+  gap: @tabletContactGap;
+}
+.contact-wrapper .subcontact {
+  display: flex;
+  gap: @tabletContactGap;
+}
+
+.subfooter .contact-wrapper {
+  margin-inline: @tabletContactBlockMarginInline;
+}
 
+.subfooter .contact {
   a {
-    color: @menuLinkColor;
-  }
+    color: @socialIconColor;
 
-  i.big.icon {
-    margin-right: @mobileContactIconMarginRight;
-    font-size: @mobileContactIconFontSize;
+    &:active,
+    &:hover {
+      color: @socialIconColor;
+    }
+
+    i.icon {
+      font-size: @mobileSocialIconSize;
+    }
   }
 }
-
-.subfooter .social {
+footer .social {
   display: flex;
   justify-content: @mobileSocialJustifyContent;
   margin: @mobileSocialIconsMargin;
@@ -148,7 +174,7 @@ footer .footer-wrapper .menu {
   }
 }
 
-@media only screen and (max-width: @largestMobileScreen) {
+@media only screen and (max-width: @tabletBreakpoint) {
   .footer-wrapper > .container {
     display: flex;
     flex-direction: column;
@@ -158,9 +184,22 @@ footer .footer-wrapper .menu {
     font-size: @mobileMenuCopyrightFontSize;
     font-weight: @mobileMenuCopyrightFontWeight;
   }
-
+  .contact-wrapper {
+    padding: @mobileContactMargin;
+  }
+  .contact-wrapper .contact {
+    gap: @mobileContactGap;
+  }
   .contact-wrapper .subcontact {
-    margin-top: @mobileSubcontactBlockMarginTop;
+    display: flex;
+    gap: @mobileContactGap;
+  }
+  .theme-sites {
+    padding-top: @mobileThemeSitesPaddingTop !important;
+    padding-bottom: @mobileThemeSitesPaddingTop !important;
+  }
+  footer .social {
+    margin: @mobileSocialIconsMargin;
   }
 }
 
@@ -181,8 +220,11 @@ footer .footer-wrapper .menu {
 
   .subfooter .contact {
     display: flex;
+
     font-size: @tabletContactFontSize;
+
     margin: @tabletContactMargin;
+
     gap: @tabletContactGap;
   }
 
@@ -192,6 +234,7 @@ footer .footer-wrapper .menu {
 
   .contact-wrapper .subcontact a {
     font-size: @tabletSubContactIconFontSize;
+
     margin-right: @tabletSubContactIconMarginRight;
   }
 
@@ -199,7 +242,7 @@ footer .footer-wrapper .menu {
     margin: @tabletFooterDescriptionMargin;
   }
 
-  .subfooter .social {
+  footer .social {
     justify-content: @tabletSocialJustifyContent;
     gap: @tabletSocialGap;
     margin: @tabletSocialIconsMargin;
@@ -223,14 +266,6 @@ footer .footer-wrapper .menu {
     }
   }
 
-  footer .theme-sites {
-    padding: @computerThemeSitesPadding;
-
-    .logos .logo img {
-      margin: @computerThemeSitesLogoMargin;
-    }
-  }
-
   .subfooter .logo-header {
     // To match the figma align
     margin-left: @computerLogoHeaderMarginLeft;
@@ -264,7 +299,8 @@ footer .footer-wrapper .menu {
       }
     }
 
-    .subfooter .social {
+    .subfooter,
+    footer .social {
       margin: @computerSocialIconsMargin;
     }
 

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

@@ -18,12 +18,19 @@
 
 /* Theme Sites */
 @mobileThemeSitesPadding            : @rem-space-3 0;
+@mobileThemeSitesPaddingTop         : @rem-space-10;
 @computerThemeSitesPadding          : @rem-space-5 0;
+@computerThemeSitesPaddingTop       : @rem-space-20;
 @mobileThemeSitesLogoMargin         : 0 auto @rem-space-8;
 @computerThemeSitesLogoMargin       : 0 auto @rem-space-10;
-@mobileFooterTitleFontSize          : @mobileH4;
-@tabletFooterTitleFontSize          : @h3;
+@mobileFooterTitleFontSize          : @font-size-1;
+@tabletFooterTitleFontSize          : @font-size-3;
 @freshwaterLogoMaxWidth             : 122px;
+@themeSitesButtonBackground         : transparent;
+@themeSitesButtonFontSize           : 1rem;
+@themeSitesButtonPadding            : 1rem 2rem;
+@themeSitesButtonColor              : white;
+@themeSitesButtonBorder             : 1px solid white;
 
 /* Sub-footer Item */
 @subFooterItemDisplay: flex;
@@ -42,16 +49,17 @@
 @tabletContactBlockMarginBottom     : @space-4;
 @mobileContactMargin                : @space-4 0;
 @tabletContactMargin                : @rem-space-050 0;
-@contactFontSize                    : @font-size-3;
-@tabletContactFontSize              : @font-size-1;
+@contactFontSize                    : @font-size-2;
+@tabletContactFontSize              : @font-size-3;
 @tabletContactGap                   : @rem-space-4;
-@contactGap                         : @rem-space-8;
+@contactGap                         : @rem-space-4;
+@mobileContactGap                   : @em-space-10;
 @mobileContactIconMarginRight       : @space-3;
 @mobileSubcontactBlockMarginTop     : @space-3;
 @mobileContactIconFontSize          : @font-size-4;
 @computerContactIconFontSize        : @font-size-9;
-@tabletSubContactIconFontSize       : @font-size-0;
-@computerSubContactIconFontSize     : @font-size-1;
+@tabletSubContactIconFontSize       : @font-size-3;
+@computerSubContactIconFontSize     : @font-size-3;
 @tabletSubContactIconMarginRight    : @rem-space-2;
 @computerSubContactIconMarginRight  : @rem-space-4;
 @computerSubContactIconFontWeight   : @font-weight-4;
@@ -65,8 +73,9 @@
 @footerDescriptionTextAlign         : center;
 
 /* Social Icons */
-@mobileSocialIconsMargin            : @rem-space-2 0 @rem-space-8;
-@tabletSocialIconsMargin            : @rem-space-7 0;
+@computerSocialIconsMargin          : @rem-space-2 0 @rem-space-8;
+@mobileSocialIconsMargin            : @rem-space-2 0 @rem-space-10;
+@tabletSocialIconsMargin            : @rem-space-13 0;
 @computerSocialIconsMargin          : @rem-space-17 0;
 @socialIconColor                    : @white;
 @mobileSocialJustifyContent         : space-around;