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

package/CHANGELOG.md

@@ -4,8 +4,56 @@ 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.5](https://github.com/eea/volto-eea-design-system/compare/0.5.4...0.5.5)
+
+- Autobuild of docusaurus docs [`83cf8df`](https://github.com/eea/volto-eea-design-system/commit/83cf8df2a3de124b71a0641a821ae9538f3e45e3)
+- change(homepage): moved fixes of homepage to custom and colored carousel arrow [`0a226ef`](https://github.com/eea/volto-eea-design-system/commit/0a226ef3f5d328d45513764bec02d58241417db0)
+- Autobuild of docusaurus docs [`304577a`](https://github.com/eea/volto-eea-design-system/commit/304577a4b79d256bbdc50fc9c75d9d0efc0769b9)
+- fix(contentBox): color of cards when inside content-boxes [`76a4520`](https://github.com/eea/volto-eea-design-system/commit/76a452031473f43928dee1d3ee705d06101e6a21)
+
+#### [0.5.4](https://github.com/eea/volto-eea-design-system/compare/0.5.3...0.5.4)
+
+> 16 June 2022
+
+- content box and header fixes [`#200`](https://github.com/eea/volto-eea-design-system/pull/200)
+- change(content-box): content box links are now underlined [`f7976f5`](https://github.com/eea/volto-eea-design-system/commit/f7976f50f5807a884522d6dba871a2757a1c5a98)
+- Autobuild of docusaurus docs [`89a258a`](https://github.com/eea/volto-eea-design-system/commit/89a258a84ae58ffa0be79baf99d562213e8c8491)
+- fix(header): ensure transparency goes as high as the search icon [`4470e13`](https://github.com/eea/volto-eea-design-system/commit/4470e132e1e70fba3fdfb33fc63a1cc9d62700e8)
+- Autobuild of docusaurus docs [`4f7fa93`](https://github.com/eea/volto-eea-design-system/commit/4f7fa93e6fa1819946d25df9810378bc2bdd860e)
+- change(cards): fix default card color when inside content-boxes [`6fdf3aa`](https://github.com/eea/volto-eea-design-system/commit/6fdf3aabf9515289b36a5822e21edc5d282c4536)
+- Autobuild of docusaurus docs [`30d02ab`](https://github.com/eea/volto-eea-design-system/commit/30d02abaaa713c6ed13aa8ec629476e25307bccb)
+- change(container): removed override of content-box-inner container [`66fe7d4`](https://github.com/eea/volto-eea-design-system/commit/66fe7d45adc631c3ebf0e8dd11de19d7ff60b894)
+- Autobuild of docusaurus docs [`86f4dec`](https://github.com/eea/volto-eea-design-system/commit/86f4dec858e3f335834ea9f4e9ccfba9c06b25a9)
+- change(homepage): added fixes from custom [`c3e0333`](https://github.com/eea/volto-eea-design-system/commit/c3e03331d328f4fd7c6689f93bc1f1156013b8a9)
+- Autobuild of docusaurus docs [`a33eae9`](https://github.com/eea/volto-eea-design-system/commit/a33eae9062cc7bd44a09a6dc60babbde38811bca)
+- change(contentBox): add background as before element instead of using full-width [`7e0a596`](https://github.com/eea/volto-eea-design-system/commit/7e0a5962c1b9cb0d3ef9a8d7b7208eded34eb3ce)
+- Autobuild of docusaurus docs [`2558a85`](https://github.com/eea/volto-eea-design-system/commit/2558a85b2f98adf77204280909984c76e8e209c1)
+- change(hero): add margin top with the height of the top section on edit [`fefa6bb`](https://github.com/eea/volto-eea-design-system/commit/fefa6bb0f513e221ddb587f081c0e7d0c3067dfd)
+- Autobuild of docusaurus docs [`5c8d4d5`](https://github.com/eea/volto-eea-design-system/commit/5c8d4d5329a91fb177ddaaa4044410566f6651ab)
+- fix(block-style): Content box preview in sidebar [`6362766`](https://github.com/eea/volto-eea-design-system/commit/6362766f5e8dabf778e3864d2bb08966a55fc078)
+
+#### [0.5.3](https://github.com/eea/volto-eea-design-system/compare/0.5.2...0.5.3)
+
+> 16 June 2022
+
+-  fix(homepage): hero and homepage view fixes for #151156 [`#199`](https://github.com/eea/volto-eea-design-system/pull/199)
+- 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.5",
   "description": "@eeacms/volto-eea-design-system: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/src/ui/ContentBox/ContentBox.jsx

@@ -4,7 +4,11 @@ import { Container } from 'semantic-ui-react';
 function ContentBox({ children, ...rest }) {
   return (
     <div className={`eea content-box ${rest.variant}`}>
-      {rest.container ? <Container>{children}</Container> : children}
+      {rest.container ? (
+        <Container className={'content-box-inner'}>{children}</Container>
+      ) : (
+        children
+      )}
     </div>
   );
 }

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

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

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

@@ -6,20 +6,26 @@
 /*-------------------
       CONTENT BOX
 --------------------*/
+.content-box:before {
+  width: @contentBoxWidth;
+  margin-left: -50vw;
+  background-color: inherit;
+  content: " ";
+  position: absolute;
+  height: 100%;
+  z-index: -1;
+  margin-right: -50vw;
+  left: 50%;
+  right: 50%;
+}
 
 .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 {
+
+  .content-box-inner {
     padding-top: @contentBoxContainerMarginTop;
     padding-bottom: @contentBoxContainerMarginBottom;
   }
@@ -39,3 +45,20 @@
     color: @contentBoxColor;
   }
 }
+
+// inherit link
+
+
+[class*="content-box"] a {
+  text-decoration: underline;
+}
+.content-box[class*="ary"] a {
+  color: inherit;
+}
+
+// set color of default cards to black when we are inside a content-box which has the ability to set
+// color classes
+.content-box[class*="ary"] [class="ui fluid card"] {
+  color: @grey-6;
+}
+

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/custom.overrides

@@ -1,4 +1,60 @@
+/*-------------------
+      Homepage
+--------------------*/
 // hide stagingBanner on homepage
 .homepage .stagingBanner {
   display: none !important;
 }
+
+// hide breadcrumbs on homepage
+.homepage .breadcrumbs {
+    display: none !important;
+}
+
+// remove margin and padding from homepage content-area since we have the bg image over the header
+.homepage .content-area {
+    margin-top: 0 !important;
+    padding-top: 0 !important;
+
+}
+
+// use homepage text color for color of cards that are within a content-box that has a variant class
+.homepage .content-box[class*="ary"] [class="ui fluid card"] {
+  color: @blue-grey-5;
+}
+// set carousel arrow to homepage color
+.homepage .cards-carousel .ui.button.icon.slider-arrow .icon {
+  color: @blue-grey-5;
+}
+
+// remove text decoration on links that might be added by content-box a rule
+.grid-block-teaser a {
+  text-decoration: none;
+}
+
+// Block style - preset styles
+.style-select-widget {
+  .content {
+    text-align: center;
+  }
+  svg.default {
+    background-color: @grey-1;
+  }
+  svg.primary {
+    background-color: @primaryColor;
+    fill: @white !important;
+  }
+  svg.secondary {
+    background-color: @secondaryColor;
+    fill: @white !important;
+  }
+  svg.tertiary {
+    background-color: @tertiaryColor;
+    fill: @white !important;
+  }
+}
+
+// raise z-index of delete button to go above blocks
+.block .ui.basic.button.delete-button {
+  z-index: @z-index-5;
+}

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;
@@ -175,6 +180,7 @@
   background-color: @headerMainSectionTransparency;
   display: block;
   content: " ";
+  top: 0;
   z-index: 0;
   width: 100%;
   height: 100%;
@@ -372,6 +378,10 @@
     height: @tabletTopSectionHeight;
   }
 
+  .homepage .block-editor-hero {
+    margin-top: @tabletTopSectionHeight;
+  }
+
   .top.bar .ui.dropdown .menu {
     margin-top: @tabletDropdownMenuMarginTop;
   }
@@ -452,6 +462,9 @@
   .top.bar {
     height: @computerTopSectionHeight;
   }
+  .homepage .block-editor-hero {
+    margin-top: @computerTopSectionHeight;
+  }
 
   .top.bar .ui.dropdown .menu {
     margin-top: @computerDropdownMenuMarginTop;

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