@eeacms/volto-eea-design-system 0.5.2 → 0.5.3

package/CHANGELOG.md

@@ -4,8 +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).
 
+#### [0.5.3](https://github.com/eea/volto-eea-design-system/compare/0.5.2...0.5.3)
+
+- Autobuild of docusaurus docs [`084402d`](https://github.com/eea/volto-eea-design-system/commit/084402da0b1a56a5eeda970f330bcc1daf4e4cb1)
+- fix(homepage): hero and homepage fixes for #151156 #198 [`43d4efc`](https://github.com/eea/volto-eea-design-system/commit/43d4efc508750e0e9cbb93b9bffc3721be452c5a)
+- change(container): on section-edit modify only left and right padding values [`fe6e3ec`](https://github.com/eea/volto-eea-design-system/commit/fe6e3ec764643ec01e20ae9dbdde921774ef04cd)
+- change(hero): added min height to hero-block-image-wrapper [`3cc37c0`](https://github.com/eea/volto-eea-design-system/commit/3cc37c027597573281710c9db98c687057d261dd)
+- fix(header): fixed top section width on edit page [`ce5898b`](https://github.com/eea/volto-eea-design-system/commit/ce5898b5ee41ea6959a2c454b3fb98216d71feb3)
+- change(utilities): bump z-index of overlay class [`ede3209`](https://github.com/eea/volto-eea-design-system/commit/ede3209556b620d2252bb03d4c994a92b6708fd2)
+- change(hero): spaced hero block has a 3rem margin top and bottom [`c463b03`](https://github.com/eea/volto-eea-design-system/commit/c463b033dda601bfd475b282bc0003200a053d45)
+- change(hero): fixed variable reference for margin of body from homepage [`092b90b`](https://github.com/eea/volto-eea-design-system/commit/092b90b2a902b71cc96132ca3c96108edda56342)
+- change(hero): added extra top margin on hero-block-body from tablet and up within homepage [`64142c3`](https://github.com/eea/volto-eea-design-system/commit/64142c3c45f6a8ea6502842055a2341dcf16088c)
+- change(hero): tweak min height of hero block [`e1271b4`](https://github.com/eea/volto-eea-design-system/commit/e1271b4b5fdcd8205f0bec8b88ab9ae31f62251f)
+- change(card,contentBox): use inherit for text color to inherit black from body [`c1ba3b6`](https://github.com/eea/volto-eea-design-system/commit/c1ba3b6ddc16ddc7394aba8d78cad73b5a8c34cb)
+
 #### [0.5.2](https://github.com/eea/volto-eea-design-system/compare/0.5.1...0.5.2)
 
+> 14 June 2022
+
+- Release [`#194`](https://github.com/eea/volto-eea-design-system/pull/194)
 - [R3] Content box [`#125`](https://github.com/eea/volto-eea-design-system/pull/125)
 - Autobuild of docusaurus docs [`31bc68c`](https://github.com/eea/volto-eea-design-system/commit/31bc68cbfe7ba8b7fc5d02358e777f394e60c48d)
 - feat(ContentBox): Update storybook with available themes [`93b26b2`](https://github.com/eea/volto-eea-design-system/commit/93b26b2f5f1d627aa8049df61257499e4798dd79)

package/package.json

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

package/theme/themes/eea/elements/container.overrides

@@ -13,7 +13,8 @@
 .section-edit {
   .container:not(.content-box-inner) {
     width: auto !important;
-    padding: 0 3rem;
+    padding-left: 3rem;
+    padding-right: 3rem;
   }
 }
 

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

@@ -6,7 +6,7 @@
 @contentBoxWidth : 100vw;
 @contentBoxColor : @white;
 @contentBoxBackgroundColor: @grey-1;
-@contentBoxColorInverted : @black;
+@contentBoxColorInverted : inherit;
 
 /* Themes */
 @contentBoxBackgroundColorPrimary: @primaryColor;

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

@@ -35,6 +35,11 @@
   }
 }
 
+// enlarge top section on edit page due to width auto on container
+.section-edit .top .container {
+  flex: 1;
+}
+
 .top.bar .item {
   display: flex;
   align-items: center;

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

@@ -11,9 +11,14 @@
   position: @heroBlockPosition;
 }
 
+.eea.hero-block.spaced {
+  margin: @heroBlockSpacedMargin;
+}
+
 .hero-block-inner-wrapper {
   height: 100%;
   padding-block: @heroBlockWrapperPadding;
+  position: relative;
 }
 
 .hero-block-body {
@@ -24,43 +29,53 @@
 }
 
 .hero-block-image {
+  background-color: inherit;
   background-repeat: @heroBlockImageBackgroundRepeat;
   background-size: @heroBlockImageBackgroundSize;
   background-position: @heroBlockImageBackgroundPosition;
   width: 100%;
   height: 100%;
   position: absolute;
-  z-index: -1;
+  z-index: 0;
 }
 
+.hero-block-image-wrapper {
+  position: absolute;
+  min-height: @heroBlockImageWrapperMinHeight;
+}
+
+
 .hero-block-text .quoted > * {
   display: inline-block;
 }
 
 .hero-block[class*='color-bg']:not(.full-width) {
-  padding: @heroBlockHomepagePadding;
+  padding: @heroBlockHomePagePadding;
 }
 
 .eea.hero-block.full-height,
-.eea.hero-block.full-height .hero-block-image,
+.eea.hero-block.full-height .hero-block-image-wrapper,
 .eea.hero-block.full-height .hero-block-inner-wrapper {
   min-height: @mobileHeroBlockMinHeight;
 }
 
 @media only screen and (min-width: @tabletBreakpoint) {
   .eea.hero-block.full-height,
-  .eea.hero-block.full-height .hero-block-image,
+  .eea.hero-block.full-height .hero-block-image-wrapper,
   .eea.hero-block.full-height .hero-block-inner-wrapper {
     min-height: @tabletHeroBlockMinHeight;
   }
   .hero-block-body {
     gap: @tabletHeroBlockBodyGap;
   }
+  .homepage #page-document > .eea.hero-block:first-of-type .hero-block-body {
+    margin: @heroBlockHomePageBodyMargin;
+  }
 }
 
 @media only screen and (min-width: @computerBreakpoint) {
   .eea.hero-block.full-height,
-  .eea.hero-block.full-height .hero-block-image,
+  .eea.hero-block.full-height .hero-block-image-wrapper,
   .eea.hero-block.full-height .hero-block-inner-wrapper {
     min-height: @desktopHeroBlockMinHeight;
   }

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

@@ -3,12 +3,19 @@
 *******************************/
 
 /* Hero block */
-@mobileHeroBlockMinHeight : 417px;
-@tabletHeroBlockMinHeight : 465px;
-@desktopHeroBlockMinHeight: 665px;
+@mobileHeroBlockMinHeight : 360px;
+@tabletHeroBlockMinHeight : 500px;
+@desktopHeroBlockMinHeight: 600px;
 
 @heroBlockPosition: relative;
-@heroBlockHomepagePadding: 0 @rem-space-5;
+@heroBlockHomePagePadding: 0 @rem-space-5;
+@heroBlockHomePageBodyMargin: @rem-space-16 0 0 0;
+
+/* Hero block spaced */
+@heroBlockSpacedMargin: @rem-space-12 0;
+
+/* Image Wrapper */
+@heroBlockImageWrapperMinHeight: 290px; // 5rem gap plus one line text
 
 /* Background Image */
 @heroBlockImageBackgroundRepeat   : no-repeat;

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

@@ -17,7 +17,7 @@
   left: 0;
   background: #000;
   opacity: 0.4;
-  z-index: -1;
+  z-index: 0;
 }
 
 // Display utilities

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

@@ -79,7 +79,7 @@
 @headerFontWeight: @bold;
 @headerFontSize: 1.125rem;
 @headerLineHeightOffset: -(@lineHeight - 1em) / 2;
-@headerColor: @black;
+@headerColor: inherit;
 
 /* Metadata */
 @metaFontSize: @relativeMedium;
@@ -112,7 +112,7 @@
 
 /* Description */
 @descriptionDistance: 0.5em;
-@descriptionColor: @black;
+@descriptionColor: inherit;
 
 /* Content Image */
 @contentImageWidth: '';