@eeacms/volto-eea-design-system 1.0.0-alpha.12 → 1.0.0-alpha.13

package/CHANGELOG.md

@@ -4,8 +4,32 @@ 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).
 
+### [1.0.0-alpha.13](https://github.com/eea/volto-eea-design-system/compare/1.0.0-alpha.12...1.0.0-alpha.13) - 27 January 2023
+
+#### :rocket: New Features
+
+- feat(utilities): added has--bg--top center and bottom utility classes [David Ichim - [`051e6d7`](https://github.com/eea/volto-eea-design-system/commit/051e6d7c33aca7947802ddaa9fe68ac41ed7fe11)]
+
+#### :bug: Bug Fixes
+
+- fix(header): update green color used in page header #284 from eea/fix-banner-background [ichim-david - [`29d54db`](https://github.com/eea/volto-eea-design-system/commit/29d54db06487d18a367202725e525ac26e5b7c58)]
+
+#### :nail_care: Enhancements
+
+- refactor(Banner): update banner background green color [Antonis Tarantilis - [`fd4a552`](https://github.com/eea/volto-eea-design-system/commit/fd4a552d9ff7a2973ebd6d18b6fbfd9bba5d98c6)]
+- change(mobile menu): changed link for a-z topics to point to in depth [David Ichim - [`721bf23`](https://github.com/eea/volto-eea-design-system/commit/721bf237d23d2a8e47fc2132912646c4ce182c9d)]
+- change(site): added fixes from customVolto.css to design package [David Ichim - [`51ba9b5`](https://github.com/eea/volto-eea-design-system/commit/51ba9b5df0186bdf075d803dea6032bac52e540f)]
+
+#### :hammer_and_wrench: Others
+
+- bump next version to alpha 13 [David Ichim - [`897e906`](https://github.com/eea/volto-eea-design-system/commit/897e9069062282f1b5cd8d86a02b8e54c40a4690)]
+- Back to dev [Alin Voinea - [`5780dc7`](https://github.com/eea/volto-eea-design-system/commit/5780dc7abeb24da5e77b043a34593ff7a44f350d)]
 ### [1.0.0-alpha.12](https://github.com/eea/volto-eea-design-system/compare/1.0.0-alpha.11...1.0.0-alpha.12) - 24 January 2023
 
+#### :rocket: New Features
+
+- feat(card, colors): visited color change and title on image option for cards #283 from eea/develop [ichim-david - [`e638ee6`](https://github.com/eea/volto-eea-design-system/commit/e638ee6b77885fd5989179aa9e6532e46e475247)]
+
 #### :bug: Bug Fixes
 
 - fix(mobile menu): sub links when an accordion section is active [David Ichim - [`bb3be81`](https://github.com/eea/volto-eea-design-system/commit/bb3be81416340ad0e3e992cd4e75642fc50f8ad3)]

package/package.json

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

package/src/ui/Header/HeaderMenuPopUp.js

@@ -237,7 +237,7 @@ const SecondLevelContent = ({ element, topics = false, renderMenuItem }) => {
         <Link
           role="listitem"
           className="item"
-          to={element.url}
+          to={atAGlance.url}
           key={element['@id']}
         >
           A-Z Topics

package/theme/theme.config

@@ -135,4 +135,5 @@
   @import (optional) "@{siteFolder}/@{addon}/@{addontype}s/@{addonelement}.overrides";
 }
 
+
 /* End Config */

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

@@ -2,7 +2,7 @@
             Page Banner
 *******************************/
 
-@bannerBackgroundColor   : @darkCyan;
+@bannerBackgroundColor   : @secondaryColor;
 
 /* Background Image */
 @imageBackgroundRepeat   : no-repeat;

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

@@ -28,6 +28,7 @@
     padding-top: @contentBoxContainerMarginTop;
     padding-bottom: @contentBoxContainerMarginBottom;
     position: relative;
+    z-index: @contentBoxContainerZIndex;
   }
 
   &.primary {

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

@@ -18,3 +18,4 @@
 /* Container */
 @contentBoxContainerMarginTop    : @bigGap;
 @contentBoxContainerMarginBottom : @bigGap;
+@contentBoxContainerZIndex : 1;

package/theme/themes/eea/extras/custom.overrides

@@ -16,6 +16,11 @@
     padding-top: 0 !important;
 }
 
+// show staging banner on homepage
+.homepage .stagingBanner {
+    display: block !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;
@@ -75,6 +80,10 @@
   font-weight: inherit;
 }
 
+// remove margin from first hero block used on the homepage
+#page-document > .styled-hero {
+  margin-top: 0;
+}
 
 // customize error class from volto-slate to our color of red
 .error {

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

@@ -394,10 +394,6 @@
   z-index: 1;
   width: 100%;
 }
-// reduce width of header when we have toolbar open for better placement
-.has-toolbar.homepage .eea.header {
-  width: 96%;
-}
 
 /*----------------------------------------------------------------------------
   Header Actions - Burger and Search Icons

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

@@ -1,76 +1,90 @@
-// Color
-h1, h2, h3, h4, h5, h6, p, span, .header {
-  &.primary { color: @primaryColorCSSVar !important; }
-  &.secondary { color: @secondaryColorCSSVar !important; }
-  &.tertiary { color: @tertiaryColorCSSVar !important; }
-  &.white { color: @white !important; }
-}
-
-.color-fg-primary { color: @primaryColor !important; }
-.color-fg-secondary { color: @secondaryColor !important; }
-.color-fg-tertiary { color: @tertiaryColor !important; }
-.color-fg-white { color: @grey-0 !important; }
-
-.color-bg-primary { background-color: @primaryColor !important; }
-.color-bg-secondary { background-color: @secondaryColor !important; }
-.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;
-}
-
-// Flexbox
-.d-flex { display: flex !important; }
-.flex-items-start { align-items: flex-start !important; }
-.flex-items-end { align-items: flex-end !important; }
-.flex-items-center { align-items: center !important; }
-
-// Text
-.text-left,
-.has--text--left { text-align: left !important; }
-.text-center,
-.has--text--center { text-align: center !important;}
-.text-right { text-align: right !important; }
-.bold { font-weight: bold !important; }
-
-.has--text--left {
-  --text-align: left;
-}
-
-.has--text--center {
-  --text-align: center;
-  --justify-content: space-evenly;
-}
-
-// Text utilities
-.bold { font-weight: @bold !important; }
-.underline { text-decoration: underline !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;
-}
-
-// Borders
-.bordered { 
-  border-bottom: @border-size-1 solid !important;
-  padding-bottom: @rem-space-2 !important;
-}
+// Color
+h1, h2, h3, h4, h5, h6, p, span, .header {
+  &.primary { color: @primaryColorCSSVar !important; }
+  &.secondary { color: @secondaryColorCSSVar !important; }
+  &.tertiary { color: @tertiaryColorCSSVar !important; }
+  &.white { color: @white !important; }
+}
+
+.color-fg-primary { color: @primaryColor !important; }
+.color-fg-secondary { color: @secondaryColor !important; }
+.color-fg-tertiary { color: @tertiaryColor !important; }
+.color-fg-white { color: @grey-0 !important; }
+
+.color-bg-primary { background-color: @primaryColor !important; }
+.color-bg-secondary { background-color: @secondaryColor !important; }
+.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;
+}
+
+// Flexbox
+.d-flex { display: flex !important; }
+.flex-items-start { align-items: flex-start !important; }
+.flex-items-end { align-items: flex-end !important; }
+.flex-items-center { align-items: center !important; }
+
+// Text
+.text-left,
+.has--text--left { text-align: left !important; }
+.text-center,
+.has--text--center { text-align: center !important;}
+.text-right { text-align: right !important; }
+.bold { font-weight: bold !important; }
+
+.has--text--left {
+  --text-align: left;
+}
+
+.has--text--center {
+  --text-align: center;
+  --justify-content: space-evenly;
+}
+
+// background position utilities
+.has--bg--top {
+  background-position: top !important;
+}
+
+.has--bg--center {
+  background-position: center !important;
+}
+
+.has--bg--bottom {
+  background-position: bottom !important;
+}
+
+
+// Text utilities
+.bold { font-weight: @bold !important; }
+.underline { text-decoration: underline !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;
+}
+
+// Borders
+.bordered {
+  border-bottom: @border-size-1 solid !important;
+  padding-bottom: @rem-space-2 !important;
+}