@eeacms/volto-eea-design-system 0.6.1 → 0.6.5

package/CHANGELOG.md

@@ -4,8 +4,37 @@ 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.6.5](https://github.com/eea/volto-eea-design-system/compare/0.6.1...0.6.5)
+
+- change(package): bump package version to 0.6.5 denoting bug fixes release [`0585aeb`](https://github.com/eea/volto-eea-design-system/commit/0585aebaeb9e3483ba230110d99a1a875590ad66)
+- Autobuild of docusaurus docs [`590c55f`](https://github.com/eea/volto-eea-design-system/commit/590c55f1099d926959c2cca929ca8fab32fe41b4)
+- fix(menu): removed minHeight that enlarged the global menu [`133be1e`](https://github.com/eea/volto-eea-design-system/commit/133be1e43d9b7778fd94388629400c5f2b707ff4)
+- Autobuild of docusaurus docs [`91f0f33`](https://github.com/eea/volto-eea-design-system/commit/91f0f33cfeaf4d9aaecc870ca04a72318e8294ad)
+- fix(contentBox): removed negative z-index that hid fullwidth bg color [`bd60faf`](https://github.com/eea/volto-eea-design-system/commit/bd60faff53205da95d94930517f2ac830ec523d1)
+- Autobuild of docusaurus docs [`d337cf3`](https://github.com/eea/volto-eea-design-system/commit/d337cf3364624309727afbe25b88a5cca80ef290)
+- change(typography): updated letterspacing values and clarified values used for certain type tokens [`8a13bf8`](https://github.com/eea/volto-eea-design-system/commit/8a13bf8b3691d288209532842fb2c80962d652c0)
+- Autobuild of docusaurus docs [`416345a`](https://github.com/eea/volto-eea-design-system/commit/416345ab9f2a3dcc7a5c3cfff3847e7d71e24ae5)
+- fix(header): double click to close dropdown is no longer required [`b8a2ed0`](https://github.com/eea/volto-eea-design-system/commit/b8a2ed0d1e671d12239ecaf250e68b3187c12a53)
+- Autobuild of docusaurus docs [`596487f`](https://github.com/eea/volto-eea-design-system/commit/596487fb393bcf34a1f8258e18edae27a6e51bba)
+- change(item): enable theming for icon and text color and added tertiary option [`6d4444f`](https://github.com/eea/volto-eea-design-system/commit/6d4444feedd1cd7e6e8f8da630b4b53a19050d1b)
+- Autobuild of docusaurus docs [`886d6ac`](https://github.com/eea/volto-eea-design-system/commit/886d6acca4b91a9234eb544e96fb889d0df36956)
+- change(header): top section chevron sizes and margin as requested in enhancements document [`b307c74`](https://github.com/eea/volto-eea-design-system/commit/b307c74a671c10a5a6703dcb2126c3c36679c6f5)
+- fix(hero): image dimensions when full width and height isn't enabled [`4114f73`](https://github.com/eea/volto-eea-design-system/commit/4114f731cce63dc520bfd00cd487943181cec2ee)
+- change(item): tweak size and padding of icon when used inside item [`dbdef19`](https://github.com/eea/volto-eea-design-system/commit/dbdef191e70bf59dcfddf63c8f9f9a1343266a59)
+- Autobuild of docusaurus docs [`3551ada`](https://github.com/eea/volto-eea-design-system/commit/3551adad680c2c8da0cb345b6dd4d9f3c01e9f38)
+- change(utilities): wrap in quotes h2 and h3 of quoted-wrapper [`8aa4716`](https://github.com/eea/volto-eea-design-system/commit/8aa471604fb127cfa535373bb90a44b4204dd0f4)
+- Autobuild of docusaurus docs [`a92c31a`](https://github.com/eea/volto-eea-design-system/commit/a92c31a4e8e4473086554a1f4ab8c8d6cd2e5c85)
+- change(hero): tweaked hero block height and padding [`994b6f8`](https://github.com/eea/volto-eea-design-system/commit/994b6f8943c061657792df8adcbdee5da487ce43)
+- Autobuild of docusaurus docs [`772d55b`](https://github.com/eea/volto-eea-design-system/commit/772d55b041d0728e64cdfd19bcd0684df0312f42)
+- change(cards): add underline to links when applied to headers and use tertiary color by default [`874f956`](https://github.com/eea/volto-eea-design-system/commit/874f956c61e65ddbb6a240865f3946bb84247712)
+- Autobuild of docusaurus docs [`93ae789`](https://github.com/eea/volto-eea-design-system/commit/93ae7897286ff65be193f2c576e6472a8e883bde)
+- fix(header): menu generation when atAGlance isn't found [`d68b03c`](https://github.com/eea/volto-eea-design-system/commit/d68b03c05f7671e7ea154efe0199c29a3734fbcf)
+
 #### [0.6.1](https://github.com/eea/volto-eea-design-system/compare/0.6.0...0.6.1)
 
+> 1 July 2022
+
+- Release [`#206`](https://github.com/eea/volto-eea-design-system/pull/206)
 - Autobuild of docusaurus docs [`aa070d4`](https://github.com/eea/volto-eea-design-system/commit/aa070d4397a7369cc439d78b6355a9e6f0c5c3ff)
 - feat(headers): added underlined titles with theming support [`af67561`](https://github.com/eea/volto-eea-design-system/commit/af675616f9e002458501cf8b90742514153a298f)
 - refactor(heading): move underline story and update controls [`2c9bfd2`](https://github.com/eea/volto-eea-design-system/commit/2c9bfd279eafc44435d223be326f9496856c2154)

package/package.json

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

package/src/ui/Header/Header.jsx

@@ -134,6 +134,19 @@ const Main = ({
     }
   };
 
+  const menuOnClickOutside = () => {
+    // restore active element if nothing was selected from the menu dropdown
+    if (pathname !== activeItem) {
+      setActiveItem(pathname);
+    }
+    // close mobile navigation when clicking outside if we have value for nav
+    if (burger) {
+      setBurger('');
+    }
+    // always close the  menu
+    setMenuIsActive(false);
+  };
+
   const menuOnClick = (e, item) => {
     if (searchIsActive) setSearchIsActive(false);
     setActiveItem(item['@id'] || item.url);
@@ -226,7 +239,7 @@ const Main = ({
           renderMenuItem={renderMenuItem}
           activeItem={activeItem}
           menuItems={menuItems}
-          onClose={mobileBurgerOnClick}
+          onClose={menuOnClickOutside}
           triggerRefs={[mobileMenuBurgerRef]}
         />
       )}

package/src/ui/Header/HeaderMenuPopUp.js

@@ -150,11 +150,12 @@ const SecondLevelContent = ({ element, topics = false }) => {
     );
     content = (
       <List>
-        {atAGlance.items.map((item, index) => (
-          <Link role="listitem" className="item" to={item.url} key={index}>
-            {item.title}
-          </Link>
-        ))}
+        {atAGlance &&
+          atAGlance.items.map((item, index) => (
+            <Link role="listitem" className="item" to={item.url} key={index}>
+              {item.title}
+            </Link>
+          ))}
         <Link
           role="listitem"
           className="item"

package/theme/themes/eea/collections/menu.variables

@@ -18,7 +18,7 @@
 @border: @borderWidth solid @borderColor;
 @boxShadow: @subtleShadow;
 @borderRadius: @defaultBorderRadius;
-@minHeight: (@itemVerticalPadding * 2) + 1em;
+@minHeight: auto;//(@itemVerticalPadding * 2) + 1em;
 
 /* Menu Item */
 @itemVerticalPadding: @relativeSmall;

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

@@ -13,7 +13,6 @@
   content: " ";
   position: absolute;
   height: 100%;
-  z-index: -1;
   margin-right: -50vw;
   left: 50%;
   right: 50%;

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

@@ -96,8 +96,9 @@
 
 .top.bar .ui.dropdown i.chevron.down.icon {
   position: absolute;
-  font-size: 1.1rem;
-  top: -@rem-space-1;
+  font-size: @topSectionIconFontSize;
+  margin-left: @topSectionIconMarginLeft;
+  top: 0;
 }
 
 /* Official union dropdown */
@@ -155,6 +156,7 @@
 #language-switcher {
   img {
     width: @mobileOfficialUnionImageWidth;
+    margin-left: @topSectionIconMarginLeft;
   }
   .menu {
     .wrapper {

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

@@ -34,6 +34,8 @@
 @mobileTopSectionItemFontSize         : @font-size-00;
 @tabletTopSectionItemFontSize         : @font-size-00;
 @topSectionZindex                     : @z-index-1;
+@topSectionIconMarginLeft             : 1px;
+@topSectionIconFontSize               : 0.8rem;
 
 /* Dropdown */
 @mobileDropdownMenuMarginTop          : 0;

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

@@ -42,6 +42,8 @@
 .hero-block-image-wrapper {
   position: absolute;
   min-height: @heroBlockImageWrapperMinHeight;
+  width: 100%;
+  height: 100%;
 }
 
 
@@ -68,6 +70,9 @@
   .hero-block-body {
     gap: @tabletHeroBlockBodyGap;
   }
+  .hero-block-inner-wrapper {
+    padding-block: @tableHeroBlockWrapperPadding;
+  }
   .homepage #page-document > .eea.hero-block:first-of-type .hero-block-body {
     margin: @heroBlockHomePageBodyMargin;
   }
@@ -79,6 +84,10 @@
   .eea.hero-block.full-height .hero-block-inner-wrapper {
     min-height: @desktopHeroBlockMinHeight;
   }
+
+  .hero-block-inner-wrapper {
+    padding-block: @desktopHeroBlockWrapperPadding;
+  }
   .hero-block-body {
     gap: @desktopHeroBlockBodyGap;
   }

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

@@ -3,13 +3,13 @@
 *******************************/
 
 /* Hero block */
-@mobileHeroBlockMinHeight : 360px;
-@tabletHeroBlockMinHeight : 500px;
-@desktopHeroBlockMinHeight: 600px;
+@mobileHeroBlockMinHeight : 412px;
+@tabletHeroBlockMinHeight : 446px;
+@desktopHeroBlockMinHeight: 664px;
 
 @heroBlockPosition: relative;
 @heroBlockHomePagePadding: 0 @rem-space-5;
-@heroBlockHomePageBodyMargin: @rem-space-16 0 0 0;
+@heroBlockHomePageBodyMargin: @rem-space-20 0 0 0;
 
 /* Hero block spaced */
 @heroBlockSpacedMargin: @rem-space-12 0;
@@ -23,7 +23,9 @@
 @heroBlockImageBackgroundPosition : center;
 
 /* Wrapper */
-@heroBlockWrapperPadding : @rem-space-20;
+@heroBlockWrapperPadding : 5rem;
+@tableHeroBlockWrapperPadding: 6rem;
+@desktopHeroBlockWrapperPadding: 194px 96px;
 
 /* Body */
 @mobileHeroBlockBodyGap  : @rem-space-6;

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

@@ -39,10 +39,15 @@ h1, h2, h3, h4, h5, h6, p, span, .header {
 .text-right { text-align: right !important; }
 
 // Quotes
+.quoted-wrapper h2::before,
+.quoted-wrapper h3::before,
 .quoted::before {
   content: "\ec51";
   font-family: 'remixicon' !important;
 }
+
+.quoted-wrapper  h2::after,
+.quoted-wrapper  h3::after,
 .quoted::after {
   content: "\ec52";
   font-family: 'remixicon' !important;

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

@@ -45,6 +45,10 @@
   }
 }
 
+.card .header-link:hover {
+  text-decoration: @contentLinkTextDecoration;
+}
+
 .ui.left.card {
   margin-right: auto;
 }

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

@@ -98,8 +98,8 @@
 @likeActiveColor: #FF2733;
 
 /* Links */
-@contentLinkColor: @white;
-@contentLinkHoverColor: @white;
+@contentLinkColor: @tertiaryColor;
+@contentLinkHoverColor: @tertiaryColor;
 @contentLinkFontWeight: @bold;
 @contentLinkTransition: color @defaultDuration @defaultEasing;
 @contentLinkTextDecoration: underline;

package/theme/themes/eea/views/item.overrides

@@ -70,6 +70,17 @@
   }
 }
 
+// decrease margin when using icons instead of images
+// since the icons have themselves extra whitespace
+// and we should aim to get about 32px as seen in the figma design
+.item .icon {
+  width: auto;
+  margin-right: 0;
+}
+.ui.items > .item > .icon + .content {
+  padding-left: @tabletItemSpacing;
+}
+
 .item .tile.image,
 .block .item .tile.image {
   width: @tileImageWidth;
@@ -80,7 +91,7 @@
   margin: @mobileRowItemMargin;
 }
 
-// As semantic does for non unstacable items
+// As semantic does for non unstackable items
 // so columns does not affect margin in mobiles
 .ui.items.row > .item:last-child {
   margin-bottom: 0;
@@ -150,11 +161,18 @@
 ---------------*/
 
 .ui.items > .item {
-  &.primary > .icon {
+  &.primary,
+  > .icon.primary
+  {
     color: @primaryColor;
   }
 
-  &.secondary > .icon {
+  &.secondary,
+  > .icon.secondary {
     color: @secondaryColor;
   }
+  &.tertiary,
+  > .icon.tertiary {
+    color: @tertiaryColor;
+  }
 }