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

package/CHANGELOG.md

@@ -4,8 +4,61 @@ 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.4](https://github.com/eea/volto-eea-design-system/compare/0.5.3...0.5.4)
+
+- 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)
+- 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)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-design-system",
-  "version": "0.5.1",
+  "version": "0.5.4",
   "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,16 @@
+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 className={'content-box-inner'}>{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 {
+    width: auto !important;
+    padding-left: 3rem;
+    padding-right: 3rem;
+  }
 }
 
 .contentWidth(@offset) {

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

@@ -0,0 +1,57 @@
+@type: 'extra';
+@element: 'contentBox';
+
+@import (multiple) '../../theme.config';
+
+/*-------------------
+      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 {
+  background-color: @contentBoxBackgroundColor;
+  color: @contentBoxColorInverted;
+  margin-bottom: @mediumGap;
+  position: relative;
+
+  .content-box-inner {
+    padding-top: @contentBoxContainerMarginTop;
+    padding-bottom: @contentBoxContainerMarginBottom;
+  }
+
+  &.primary {
+    background-color: @contentBoxBackgroundColorPrimary;
+    color: @contentBoxColor;
+  }
+
+  &.secondary {
+    background-color: @contentBoxBackgroundColorSecondary;
+    color: @contentBoxColor;
+  }
+
+  &.tertiary {
+    background-color: @contentBoxBackgroundColorTertiary;
+    color: @contentBoxColor;
+  }
+}
+
+// inherit link
+
+
+[class*="content-box"] a {
+  text-decoration: underline;
+}
+.content-box[class*="ary"] a {
+  color: inherit;
+}

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

@@ -2,3 +2,53 @@
 .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;
+
+}
+
+// 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="ui fluid card"] {
+  color: #000;
+}
+
+// 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: '';