@eeacms/volto-eea-design-system 1.0.0-beta.3 → 1.0.0-beta.4

package/CHANGELOG.md

@@ -4,6 +4,29 @@ 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.0-beta.4](https://github.com/eea/volto-eea-design-system/compare/1.0.0-beta.3...1.0.0-beta.4) - 28 February 2023
+
+#### :rocket: New Features
+
+- feat(footer): Add footer description #306 from eea/footer-description [ichim-david - [`bf655d1`](https://github.com/eea/volto-eea-design-system/commit/bf655d133dd75b217c34b3d4303ad450a59f2c51)]
+- feat(footer): Add footer description [kreafox - [`2ad0f71`](https://github.com/eea/volto-eea-design-system/commit/2ad0f714556c5b8c2fd95a2caea5c3a1e82c75d1)]
+
+#### :bug: Bug Fixes
+
+- fix(footer): Add class for children [kreafox - [`3c50d15`](https://github.com/eea/volto-eea-design-system/commit/3c50d15cd6ed46d78ef10d48fd851ed7c4b5ddea)]
+- fix(footer): Don't show empty row if description is not present [kreafox - [`2ca7f7d`](https://github.com/eea/volto-eea-design-system/commit/2ca7f7d3247668ae8583b8cd629856aac82eb07d)]
+- fix(search): Fix search links color #307 from eea/search-accessibility [ichim-david - [`a76f48b`](https://github.com/eea/volto-eea-design-system/commit/a76f48bab3a7d3f6b748eaa85b33266401372e40)]
+- fix(search): Fix search links color [kreafox - [`69c42ef`](https://github.com/eea/volto-eea-design-system/commit/69c42effc5bdc3d31f18de74d77a3b7cc0018dc5)]
+
+#### :nail_care: Enhancements
+
+- change(carousel): tweak card width and padding for better arrow alignment [David Ichim - [`e184f70`](https://github.com/eea/volto-eea-design-system/commit/e184f70062d622e1ec53e8e1e2b012c080e62d77)]
+- change(storybook): include footer description in storybook [kreafox - [`e904aa0`](https://github.com/eea/volto-eea-design-system/commit/e904aa0850e101d736e8d045e822d9a58b75ff6a)]
+
+#### :hammer_and_wrench: Others
+
+- Release 1.0.0-beta.4 [Alin Voinea - [`8c335c5`](https://github.com/eea/volto-eea-design-system/commit/8c335c56c5a2a76ea87f9da318055770f904e649)]
+- Back to dev [Alin Voinea - [`38b0333`](https://github.com/eea/volto-eea-design-system/commit/38b03333066416915b056f8ac45da4de87ed7184)]
 ### [1.0.0-beta.3](https://github.com/eea/volto-eea-design-system/compare/1.0.0-beta.2...1.0.0-beta.3) - 21 February 2023
 
 #### :rocket: New Features

package/package.json

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

package/src/ui/Footer/Description.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Grid } from 'semantic-ui-react';
+
+const Description = (props) => {
+  if (props.children) {
+    return <div className="footer-description">{props.children}</div>;
+  }
+
+  return props.description ? (
+    <Grid.Row>
+      <div className="footer-description">
+        <p>{props.description}</p>
+      </div>
+    </Grid.Row>
+  ) : null;
+};
+
+Description.propTypes = {
+  description: PropTypes.string,
+};
+
+export default Description;

package/src/ui/Footer/Footer.jsx

@@ -12,6 +12,7 @@ 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 Contact from '@eeacms/volto-eea-design-system/ui/Footer/Contact';
+import Description from '@eeacms/volto-eea-design-system/ui/Footer/Description';
 
 /**
  * Component to display the footer.
@@ -37,6 +38,7 @@ Footer.Header = FooterHeader;
 Footer.Sites = FooterSites;
 Footer.Social = Social;
 Footer.SubFooter = SubFooter;
+Footer.Description = Description;
 
 /**
  * Property types.

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

@@ -31,6 +31,7 @@ const Template = (args) => (
 export const Default = Template.bind({});
 Default.args = {
   header: 'Thematic information platforms',
+  description: '',
   actions: [
     { link: '/#', title: 'Privacy' },
     { link: '/#', title: 'Sitemap' },

package/src/ui/Footer/SubFooter.jsx

@@ -37,6 +37,8 @@ const SubFooter = (props) => {
         </Grid.Column>
       </Grid>
 
+      <Footer.Description description={props.description} />
+
       <Grid.Row>
         <Footer.Social social={props.social} />
       </Grid.Row>

package/theme/theme.config

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

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

@@ -95,6 +95,15 @@ footer .theme-sites {
   }
 }
 
+.subfooter .footer-description {
+  margin: @mobileFooterDescriptionMargin;
+  text-align: @footerDescriptionTextAlign;
+
+  p {
+    font-size: @mobileFooterDescriptionFontSize;
+  }
+}
+
 footer .footer-wrapper .menu {
   .actions {
     display: flex;
@@ -131,7 +140,7 @@ footer .footer-wrapper .menu {
     flex-direction: column;
   }
 
- footer .footer-wrapper .menu .copyright a {
+  footer .footer-wrapper .menu .copyright a {
     font-size: @mobileMenuCopyrightFontSize;
     font-weight: @mobileMenuCopyrightFontWeight;
   }
@@ -143,7 +152,7 @@ footer .footer-wrapper .menu {
   }
 
   footer .theme-sites .header {
-    font-size: @tabletFooterTitleFontSize
+    font-size: @tabletFooterTitleFontSize;
   }
 
   .subfooter .item {
@@ -176,6 +185,10 @@ footer .footer-wrapper .menu {
     margin-right: @tabletSubContactIconMarginRight;
   }
 
+  .subfooter .footer-description {
+    margin: @tabletFooterDescriptionMargin;
+  }
+
   .subfooter .social {
     justify-content: @tabletSocialJustifyContent;
     gap: @tabletSocialGap;
@@ -187,7 +200,6 @@ footer .footer-wrapper .menu {
       }
     }
   }
-
 }
 
 @media only screen and (min-width: @computerBreakpoint) {
@@ -208,7 +220,7 @@ footer .footer-wrapper .menu {
 
   .subfooter .logo-header {
     // To match the figma align
-    margin-left: @computerLogoHeaderMarginLeft
+    margin-left: @computerLogoHeaderMarginLeft;
   }
 
   .contact-block .subcontact a {
@@ -226,12 +238,19 @@ footer .footer-wrapper .menu {
     }
   }
 
+  .subfooter .footer-description {
+    margin: @computerFooterDescriptionMargin;
+
+    p {
+      font-size: @computerFooterDescriptionFontSize;
+    }
+  }
+
   .subfooter .social {
     margin: @computerSocialIconsMargin;
   }
 
   .footer .footer-wrapper .menu {
-
     a {
       font-size: @computerMenuFontSize;
     }

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

@@ -50,6 +50,14 @@
 @computerSubContactIconMarginRight  : @rem-space-4;
 @computerSubContactIconFontWeight   : @font-weight-4;
 
+/* Description */
+@mobileFooterDescriptionMargin      : @rem-space-2 0 @rem-space-8;
+@tabletFooterDescriptionMargin      : @rem-space-7 0 0 0;
+@computerFooterDescriptionMargin    : @rem-space-17 0 0 0;
+@computerFooterDescriptionFontSize  : @font-size-1;
+@mobileFooterDescriptionFontSize    : @font-size-0;
+@footerDescriptionTextAlign         : center;
+
 /* Social Icons */
 @mobileSocialIconsMargin            : @rem-space-2 0 @rem-space-8;
 @tabletSocialIconsMargin            : @rem-space-7 0;

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

@@ -93,8 +93,7 @@
     cursor: pointer;
   }
 
-  &:hover .language-link
-   {
+  &:hover .language-link {
     color: @dropdownMenuItemColorHover;
   }
 }
@@ -371,7 +370,10 @@
       .item {
         padding: 0;
         margin: 0;
-        cursor: pointer;
+
+        a {
+          color: @searchBoxSuggestionsTextColor;
+        }
       }
     }
   }
@@ -443,8 +445,8 @@
   height: @mobileMainSectionHeight;
   align-items: center;
   justify-content: center;
-  background-color: @burgerActionBackgroundColor;
   border: none;
+  background-color: @burgerActionBackgroundColor;
   cursor: pointer;
 }
 
@@ -460,8 +462,8 @@
   height: @mobileMainSectionHeight;
   align-items: center;
   justify-content: center;
-  background-color: @secondaryColor;
   border: none;
+  background-color: @secondaryColor;
   cursor: pointer;
 }
 

package/theme/themes/eea/views/card.overrides

@@ -14,7 +14,6 @@
 
 /* Cards must have same height */
 .ui.card {
-  min-width: @minWidth;
   height: 100%;
   text-align: var(--text-align, @cardTextAlign);
   background-color: var(--card-background-color, @background);
@@ -304,7 +303,6 @@
 
   .slick-track {
     display: flex;
-    gap: @slickTrackGap;
     margin: @slickTrackMargin;
   }
 
@@ -313,6 +311,7 @@
     height: auto;
     flex: 1;
     flex-direction: column;
+    margin: @slickSlideMargin;
 
     > div {
       height: 100%;
@@ -323,6 +322,7 @@
 /* Carousel arrows */
 .cards-carousel .ui.button.icon.slider-arrow {
   padding: @carouselButtonPadding;
+  margin: @carouselButtonMargin;
 
   .active, &:focus, &:hover {
     background: transparent;

package/theme/themes/eea/views/card.variables

@@ -22,7 +22,6 @@
 @minHeight: 0px;
 @padding: 0em;
 @width: 290px;
-@minWidth: 250px;
 @borderWidth: 1px;
 @borderShadow: 0px 0px 0px @borderWidth @solidBorderColor;
 @boxShadow: @eeaGlobalShadow;
@@ -333,6 +332,7 @@
 
 /* Button */
 @carouselButtonPadding: 0;
+@carouselButtonMargin: 0;
 @carouselButtonIconColor: @tertiaryColor;
 @carouselButtonIconFontSize: 3.125rem;
 @carouselButtonIconOpacity: 1;
@@ -351,8 +351,8 @@
 
 /* Slick wrapper */
 @slickListMargin: 0 -0.75em;
-@slickTrackGap: 1.25rem;
 @slickTrackMargin: 1rem 0;
+@slickSlideMargin: 0 10px;
 
 /*******************************
         Teaser Cards