@eeacms/volto-eea-design-system 0.5.0 → 0.5.1

package/CHANGELOG.md

@@ -4,8 +4,33 @@ 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).
 
+#### [0.5.1](https://github.com/eea/volto-eea-design-system/compare/0.5.0...0.5.1)
+
+- Autobuild of docusaurus docs [`ac5df8e`](https://github.com/eea/volto-eea-design-system/commit/ac5df8edab41d37e118d34c6a4b35a64428643d0)
+- change(hero): added styles for adding dark overlay to hero [`bf1d292`](https://github.com/eea/volto-eea-design-system/commit/bf1d292fecfa8a6b222558f0d93f48e19bf6b8ea)
+- Autobuild of docusaurus docs [`3192671`](https://github.com/eea/volto-eea-design-system/commit/31926711a83da6b7744249fd3c801e87ae6910d5)
+- change(homepage): hide stagingBanner on homepage [`fb6e319`](https://github.com/eea/volto-eea-design-system/commit/fb6e319dd10f4d148cc8f3b33dafc43280a0254f)
+- Autobuild of docusaurus docs [`333b2dc`](https://github.com/eea/volto-eea-design-system/commit/333b2dcf0b01bfb4afab2d9613b7cdbf331c51bb)
+- Cleanup available languages [`0c49051`](https://github.com/eea/volto-eea-design-system/commit/0c490512a6a6524efe9a37b4b61ab0061a240abb)
+- Autobuild of docusaurus docs [`fb5f811`](https://github.com/eea/volto-eea-design-system/commit/fb5f811c4723929892953e4303a6b39b85efb79d)
+- change(header): added min-height for mega menu needed for 1 items menus [`18814f4`](https://github.com/eea/volto-eea-design-system/commit/18814f48fb743c88d05554e9a1773f8d85dec86c)
+- Autobuild of docusaurus docs [`e836973`](https://github.com/eea/volto-eea-design-system/commit/e8369731a74139bbaf432d7506d27185e9240b1f)
+- change(tokens): modified grey-4 color to point to a 10% shade from original color [`b406283`](https://github.com/eea/volto-eea-design-system/commit/b406283e61c7356bec9d453567cd1ccde496880d)
+- Autobuild of docusaurus docs [`d44ccdd`](https://github.com/eea/volto-eea-design-system/commit/d44ccdd9be2edfd341a6d11bbe6105dd852a5599)
+- change(header): use variable for homepage hero-block padding [`89ff344`](https://github.com/eea/volto-eea-design-system/commit/89ff3441f269281ffb3da32cd3e5c64715b3204b)
+- Autobuild of docusaurus docs [`0a18ebd`](https://github.com/eea/volto-eea-design-system/commit/0a18ebda890c7bd24b1d4c5e0a36f977c4ab1153)
+- change(hero): hero section block integration #192 [`4ea2f40`](https://github.com/eea/volto-eea-design-system/commit/4ea2f40583951016c164c9abdf22d8e809d207fe)
+- change(header): changed homepage text color [`64ce8b6`](https://github.com/eea/volto-eea-design-system/commit/64ce8b61f8f2150513e09bf2926b48aa2ae1071c)
+- Use 1.5 rem [`1125cd7`](https://github.com/eea/volto-eea-design-system/commit/1125cd7c65332fc5961ffbbbd2d2ab6bcc8b1b5b)
+- Add padding if hero block is not full-width [`808b839`](https://github.com/eea/volto-eea-design-system/commit/808b83957d6a866cc31c928f414fa8fa5da517a1)
+- Add hero block style [`fa39656`](https://github.com/eea/volto-eea-design-system/commit/fa39656fd661d8af95f483a6f33a08e4c93c42f1)
+- Autobuild of docusaurus docs [`ca05477`](https://github.com/eea/volto-eea-design-system/commit/ca0547716cb07ca1cb29f8aee0df1d8f26633df2)
+
 #### [0.5.0](https://github.com/eea/volto-eea-design-system/compare/0.4.5...0.5.0)
 
+> 11 June 2022
+
+- refactor(header): to use mega menu v2 [`#191`](https://github.com/eea/volto-eea-design-system/pull/191)
 - fix(header-dropdown): mobile text is now visible [`#111`](https://github.com/eea/volto-eea-design-system/pull/111)
 - fix(header): Internal links in mega menu [`d8ca135`](https://github.com/eea/volto-eea-design-system/commit/d8ca13558c3e8c336800791f2fea8a8d33a2b602)
 - Update package.json [`9dc3816`](https://github.com/eea/volto-eea-design-system/commit/9dc38165a95deca1faf2dfccdc03fd6cab3d8c54)

package/package.json

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

package/theme/themes/eea/extras/custom.overrides

@@ -0,0 +1,4 @@
+// hide stagingBanner on homepage
+.homepage .stagingBanner {
+  display: none !important;
+}

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

@@ -83,7 +83,7 @@
   gap: @dropdownMenuWrapperGap;
   white-space: @dropdownMenuContentWhiteSpace;
   margin: @dropdownMenuWrapperMargin;
-  
+
   &.language-list {
     padding-inline-start: @dropdownMenuLanguageWrapperPaddingInlineStart;
   }
@@ -117,7 +117,7 @@
         }
         a {
           font-weight: @officialUnionLinkFontWeight;
-          white-space: @dropdownMenuContentWhiteSpace; 
+          white-space: @dropdownMenuContentWhiteSpace;
           color: @officialUnionLinkColor;
         }
       }
@@ -288,10 +288,15 @@
 
 @media all and (max-width: @largestMobileScreen) {
   .eea.header .top.bar .ui.container {
-    width: 100% !important; //override semantic auto to display content with space between them   
+    width: 100% !important; //override semantic auto to display content with space between them
   }
 }
-
+.homepage .eea.header {
+  position: absolute;
+  top: 0;
+  z-index: 1;
+  width: 100%;
+}
 /*----------------------------------------------------------------------------
   Header Actions - Burger and Search Icons
 ----------------------------------------------------------------------------*/
@@ -370,7 +375,7 @@
   .top.bar .ui.dropdown .menu {
     margin-top: @tabletDropdownMenuMarginTop;
   }
-  
+
   .top.bar .ui.dropdown .menu,
   .top.bar .ui.dropdown .menu .item {
     font-size: @tabletDropdownMenuFontSize;
@@ -512,6 +517,7 @@
   background: @megaMenuBackgroundColor;
   color: @megaMenuTextColor;
   max-height: @mobilePopUpHeight;
+  min-height: @size-11;
   padding: @mobileMegaMenuPadding;
 
   .ui.container {
@@ -531,11 +537,11 @@
     color: @megaMenuTextColor;
 
     &+ .ui.grid {
-  
+
       div.column:first-child {
         padding-left: 0;
       }
-  
+
       div.column:last-child {
         padding-right: 0;
       }
@@ -649,5 +655,5 @@
   }
   #mega-menu .title > a {
     color: @megaMenuTextColor;
-  } 
+  }
 }

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

@@ -90,7 +90,7 @@
 -----------------------*/
 
 /* Main Section */
-@headerMainSectionBackground          : @white;
+@headerMainSectionBackground          : transparent;
 @headerMainSectionTransparency        : rgba(255, 255, 255, 0.1);
 
 /* Logo */

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

@@ -18,6 +18,7 @@
 
 .hero-block-body {
   display: flex;
+  width: 100%;
   flex-direction: column;
   gap: @mobileHeroBlockBodyGap;
 }
@@ -28,6 +29,16 @@
   background-position: @heroBlockImageBackgroundPosition;
   width: 100%;
   height: 100%;
+  position: absolute;
+  z-index: -1;
+}
+
+.hero-block-text .quoted > * {
+  display: inline-block;
+}
+
+.hero-block[class*='color-bg']:not(.full-width) {
+  padding: @heroBlockHomepagePadding;
 }
 
 .eea.hero-block.full-height,
@@ -52,8 +63,8 @@
   .eea.hero-block.full-height .hero-block-image,
   .eea.hero-block.full-height .hero-block-inner-wrapper {
     min-height: @desktopHeroBlockMinHeight;
-  } 
+  }
   .hero-block-body {
     gap: @desktopHeroBlockBodyGap;
   }
-}
+}

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

@@ -8,6 +8,7 @@
 @desktopHeroBlockMinHeight: 665px;
 
 @heroBlockPosition: relative;
+@heroBlockHomepagePadding: 0 @rem-space-5;
 
 /* Background Image */
 @heroBlockImageBackgroundRepeat   : no-repeat;

package/theme/themes/eea/globals/site.overrides

@@ -16,3 +16,7 @@
 [class*=' ri-'] {
   fill: currentColor;
 }
+
+.homepage {
+  color: @tertiaryColor;
+}

package/theme/themes/eea/globals/utilities.less

@@ -9,6 +9,17 @@
 .color-bg-tertiary { background-color: @tertiaryColor !important; }
 .color-bg-grey { background-color: @grey-1 !important; }
 
+.dark-overlay-4 {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background: #000;
+  opacity: 0.4;
+  z-index: -1;
+}
+
 // Display utilities
 .d-flex { display: flex !important; }
 .flex-items-start { align-items: flex-start !important; }

package/theme/themes/eea/tokens/colors.less

@@ -58,6 +58,6 @@
 @grey-1: #F9F9F9;
 @grey-2: #E6E7E8;
 @grey-3: #BCBEC0;
-@grey-4: #808285;
+@grey-4: #67696b; // 10% shade of #808285 which passed AA validation on white bg
 @grey-5: #323232;
 @grey-6: #000000;