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

package/CHANGELOG.md

@@ -4,8 +4,65 @@ 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)
+- feat(ContentBox): Add primary, secondary, tertiary themes [`87cb2fe`](https://github.com/eea/volto-eea-design-system/commit/87cb2fe7e4cd5c2872299756f493e371abcbb05f)
+- Cleanup [`2b128df`](https://github.com/eea/volto-eea-design-system/commit/2b128dface95b560588a343f1ddf7bbaf3efb320)
+- perf(eol): change to lf [`78b2955`](https://github.com/eea/volto-eea-design-system/commit/78b2955ff73d9436134d1a6399040b2d7c7f5714)
+- refactor(contentBox): restructure the component to be more flexible [`f0d2de6`](https://github.com/eea/volto-eea-design-system/commit/f0d2de67e43fafa10052871f99ac841c83cf8157)
+- chore(contentBox) : add lint changes [`5aaf740`](https://github.com/eea/volto-eea-design-system/commit/5aaf740594f0001b1672bb6dc18d973f55c881f0)
+- feat(contentBox) : add new Content Box component [`2ebbb47`](https://github.com/eea/volto-eea-design-system/commit/2ebbb47fe685f9809aa3572263be376d9688371e)
+
+#### [0.5.1](https://github.com/eea/volto-eea-design-system/compare/0.5.0...0.5.1)
+
+> 13 June 2022
+
+- change(header): hero integration fixes [`#193`](https://github.com/eea/volto-eea-design-system/pull/193)
+- 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.3",
   "description": "@eeacms/volto-eea-design-system: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/src/semantic.less

@@ -257,6 +257,10 @@
   @import '@eeacms/volto-eea-design-system/../theme/themes/eea/extras/relatedContent';
 }
 
+& {
+  @import '@eeacms/volto-eea-design-system/../theme/themes/eea/extras/contentBox';
+}
+
 & {
   @import '@eeacms/volto-eea-design-system/../theme/themes/eea/extras/downloadLabeledIcon';
 }

package/src/ui/ContentBox/ContentBox.jsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Container } from 'semantic-ui-react';
+
+function ContentBox({ children, ...rest }) {
+  return (
+    <div className={`eea content-box ${rest.variant}`}>
+      {rest.container ? <Container>{children}</Container> : children}
+    </div>
+  );
+}
+
+export default ContentBox;

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

@@ -10,9 +10,12 @@
 }
 
 // add padding to containers on edit section so that we display add and delete buttons
-.section-edit .container {
-  width: auto !important;
-  padding: 0 3rem;
+.section-edit {
+  .container:not(.content-box-inner) {
+    width: auto !important;
+    padding-left: 3rem;
+    padding-right: 3rem;
+  }
 }
 
 .contentWidth(@offset) {

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

@@ -0,0 +1,41 @@
+@type: 'extra';
+@element: 'contentBox';
+
+@import (multiple) '../../theme.config';
+
+/*-------------------
+      CONTENT BOX
+--------------------*/
+
+.content-box {
+  width: @contentBoxWidth;
+  background-color: @contentBoxBackgroundColor;
+  color: @contentBoxColorInverted;
+  margin-bottom: @mediumGap;
+
+  position: relative;
+  margin-right: -50vw;
+  margin-left: -50vw;
+  right: 50%;
+  left: 50%;
+  
+  .ui.container {
+    padding-top: @contentBoxContainerMarginTop;
+    padding-bottom: @contentBoxContainerMarginBottom;
+  }
+
+  &.primary {
+    background-color: @contentBoxBackgroundColorPrimary;
+    color: @contentBoxColor;
+  }
+
+  &.secondary {
+    background-color: @contentBoxBackgroundColorSecondary;
+    color: @contentBoxColor;
+  }
+
+  &.tertiary {
+    background-color: @contentBoxBackgroundColorTertiary;
+    color: @contentBoxColor;
+  }
+}

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

@@ -0,0 +1,19 @@
+/*******************************
+            Content Box
+*******************************/
+
+/* Content Box */
+@contentBoxWidth : 100vw;
+@contentBoxColor : @white;
+@contentBoxBackgroundColor: @grey-1;
+@contentBoxColorInverted : inherit;
+
+/* Themes */
+@contentBoxBackgroundColorPrimary: @primaryColor;
+@contentBoxBackgroundColorSecondary: @secondaryColor;
+@contentBoxBackgroundColorTertiary: @tertiaryColor;
+
+
+/* Container */
+@contentBoxContainerMarginTop    : @bigGap;
+@contentBoxContainerMarginBottom : @bigGap;

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

@@ -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;
@@ -83,7 +88,7 @@
   gap: @dropdownMenuWrapperGap;
   white-space: @dropdownMenuContentWhiteSpace;
   margin: @dropdownMenuWrapperMargin;
-  
+
   &.language-list {
     padding-inline-start: @dropdownMenuLanguageWrapperPaddingInlineStart;
   }
@@ -117,7 +122,7 @@
         }
         a {
           font-weight: @officialUnionLinkFontWeight;
-          white-space: @dropdownMenuContentWhiteSpace; 
+          white-space: @dropdownMenuContentWhiteSpace;
           color: @officialUnionLinkColor;
         }
       }
@@ -288,10 +293,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 +380,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 +522,7 @@
   background: @megaMenuBackgroundColor;
   color: @megaMenuTextColor;
   max-height: @mobilePopUpHeight;
+  min-height: @size-11;
   padding: @mobileMegaMenuPadding;
 
   .ui.container {
@@ -531,11 +542,11 @@
     color: @megaMenuTextColor;
 
     &+ .ui.grid {
-  
+
       div.column:first-child {
         padding-left: 0;
       }
-  
+
       div.column:last-child {
         padding-right: 0;
       }
@@ -649,5 +660,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

@@ -11,49 +11,75 @@
   position: @heroBlockPosition;
 }
 
+.eea.hero-block.spaced {
+  margin: @heroBlockSpacedMargin;
+}
+
 .hero-block-inner-wrapper {
   height: 100%;
   padding-block: @heroBlockWrapperPadding;
+  position: relative;
 }
 
 .hero-block-body {
   display: flex;
+  width: 100%;
   flex-direction: column;
   gap: @mobileHeroBlockBodyGap;
 }
 
 .hero-block-image {
+  background-color: inherit;
   background-repeat: @heroBlockImageBackgroundRepeat;
   background-size: @heroBlockImageBackgroundSize;
   background-position: @heroBlockImageBackgroundPosition;
   width: 100%;
   height: 100%;
+  position: absolute;
+  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;
 }
 
 .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;
-  } 
+  }
   .hero-block-body {
     gap: @desktopHeroBlockBodyGap;
   }
-}
+}

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

@@ -3,11 +3,19 @@
 *******************************/
 
 /* Hero block */
-@mobileHeroBlockMinHeight : 417px;
-@tabletHeroBlockMinHeight : 465px;
-@desktopHeroBlockMinHeight: 665px;
+@mobileHeroBlockMinHeight : 360px;
+@tabletHeroBlockMinHeight : 500px;
+@desktopHeroBlockMinHeight: 600px;
 
 @heroBlockPosition: relative;
+@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/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: 0;
+}
+
 // 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;

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: '';