@eeacms/volto-eea-design-system 1.33.0 → 1.34.0

package/CHANGELOG.md

@@ -4,6 +4,19 @@ 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.34.0](https://github.com/eea/volto-eea-design-system/compare/1.33.1...1.34.0) - 11 October 2024
+
+#### :hammer_and_wrench: Others
+
+- Update package.json [Ichim David - [`015ed44`](https://github.com/eea/volto-eea-design-system/commit/015ed44a8c624a5ceaedf131425ab83f9b3832a4)]
+### [1.33.1](https://github.com/eea/volto-eea-design-system/compare/1.33.0...1.33.1) - 19 September 2024
+
+#### :house: Internal changes
+
+- chore: Fix what's new link on top to open in the same window [alin - [`2e91336`](https://github.com/eea/volto-eea-design-system/commit/2e913366b629e908a27bebe6c6cb58d7ca7aa099)]
+- chore: Cleanup What's new section in docusaurus [alin - [`3e72176`](https://github.com/eea/volto-eea-design-system/commit/3e721768edf8c3ba55c6d6aea4ed04d5323472f5)]
+- chore: Add redmine links in whatsnew [valentinab25 - [`d1ef895`](https://github.com/eea/volto-eea-design-system/commit/d1ef895a2717259914ccc3667959d0398e716348)]
+
 ### [1.33.0](https://github.com/eea/volto-eea-design-system/compare/1.32.4...1.33.0) - 13 September 2024
 
 #### :bug: Bug Fixes
@@ -16,7 +29,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :hammer_and_wrench: Others
 
-- Release 1.33.0 [alin - [`41cab61`](https://github.com/eea/volto-eea-design-system/commit/41cab61685812e3d6f8ca6092910867c9359daea)]
 - test: use nodejs18 to run jobs [valentinab25 - [`779511c`](https://github.com/eea/volto-eea-design-system/commit/779511cdbf4e9a031ed3dc58ef13f3cf68372273)]
 ### [1.32.4](https://github.com/eea/volto-eea-design-system/compare/1.32.3...1.32.4) - 29 August 2024
 

package/package.json

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

package/src/ui/Banner/Banner.jsx

@@ -94,15 +94,29 @@ Banner.Action = React.forwardRef(function (
 });
 
 Banner.Content = ({ children, actions }) => {
+  // actions can be a single child or an array of children
+  // when we disable actions we get an array of false or undefined
+  const actionsWithChildren = actions
+    ? React.Children.toArray(actions.props.children).some(Boolean)
+    : false;
+
   return (
     <div className="content">
       <Grid>
-        <Grid.Column mobile={10} tablet={9} computer={9}>
-          {children}
-        </Grid.Column>
-        <Grid.Column mobile={2} tablet={3} computer={3} className="actions">
-          {actions}
-        </Grid.Column>
+        {actionsWithChildren ? (
+          <>
+            <Grid.Column mobile={10} tablet={9} computer={9}>
+              {children}
+            </Grid.Column>
+            <Grid.Column mobile={2} tablet={3} computer={3} className="actions">
+              {actions}
+            </Grid.Column>
+          </>
+        ) : (
+          <Grid.Column mobile={12} tablet={12} computer={12}>
+            {children}
+          </Grid.Column>
+        )}
       </Grid>
     </div>
   );

package/src/ui/Breadcrumbs/Breadcrumbs.jsx

@@ -15,6 +15,7 @@ const Breadcrumbs = ({
   sections = [],
   icon = 'ri-arrow-right-s-line',
   size = 'tiny',
+  linkLevels = 1,
 }) => {
   return sections.length > 0 ? (
     <Segment className="breadcrumbs" attached vertical>
@@ -31,7 +32,7 @@ const Breadcrumbs = ({
                 <Breadcrumb.Divider key={`divider-${item.href}`}>
                   <Icon className={icon}></Icon>
                 </Breadcrumb.Divider>
-                {index < items.length - 1 ? (
+                {index < items.length - linkLevels ? (
                   <Link key={item.key} to={item.href} className="section">
                     {item.title}
                   </Link>

package/templates/eea.hbs

@@ -2,33 +2,7 @@
 title: What's new
 ---
 
-### EEA Design System (1.0)
-
-#### Components ready to be used
-
-The following components are ready to be used as Volto `blocks`, `slate` integration, or via the advanced `block styler`:
-- Accordion `block`
-- Call to Action `block`
-- Callout - part of the Description `block`, `slate`
-- Card - part of the Teaser `block` and Listing `block`, it includes several variations like round card e.g., used for Avatar
-- Divider `block`
-- Headings `slate`
-- Hero `block`
-- Item `block` - used for text with an icon (remixicon or custom SVG/image) on the left/right
-- List `slate` - ordered and unordered
-- Quote `block`
-- Statistic `block`
-- Tag `block`
-- Table `block`
-- Tabs `block`
-- Timeline `block`
-
-#### Future releases
-
-Below is a non-exhaustive list of the work-in-progress which is planned for future releases:
-- Navigation Portlet (used on the left/right hand of content)
-- Spacing/padding system. We want to add the ability for editors to consistently apply various spacing/padding on certain components in order to allow a better alignment when components are used together.
-- Improve docusaurus and storybook with more components, controls, and variations in order to better reflect what is possible in Volto.
+### EEA Design System
 
 {{#unless options.hideCredit}}
   Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).

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

@@ -35,6 +35,13 @@ ul.ui.list li:before {
   font-size: @bulletSize;
 }
 
+/* Ordered list */
+
+ol.ui.list,
+.ui.ordered.list {
+  padding-left: @orderedDistance;
+}
+
 // Third layer margin fix
 .ui.ordered.list .list .list > .item:before,
 .ui.ordered.list .list .list > li:before {

package/theme/themes/eea/elements/list.variables

@@ -111,9 +111,7 @@
 @linkListItemHoverColor: @hoveredTextColor;
 @linkListItemDownColor: @pressedTextColor;
 @linkListItemActiveColor: @selectedTextColor;
-@linkListTransition:
-  @defaultDuration color @defaultEasing
-;
+@linkListTransition: @defaultDuration color @defaultEasing;
 
 /* Inverted Link List */
 @invertedLinkListItemColor: @invertedUnselectedTextColor;
@@ -129,8 +127,7 @@
 @selectionListTransition:
   @defaultDuration color @defaultEasing,
   @defaultDuration padding-left @defaultEasing,
-  @defaultDuration background-color @defaultEasing
-;
+  @defaultDuration background-color @defaultEasing;
 
 /* Selection List States */
 @selectionListBackground: transparent;
@@ -158,8 +155,7 @@
 @animatedListTransition:
   @animatedDuration color @defaultEasing @animatedDelay,
   @animatedDuration padding-left @defaultEasing @animatedDelay,
-  @animatedDuration background-color @defaultEasing @animatedDelay
-;
+  @animatedDuration background-color @defaultEasing @animatedDelay;
 @animatedListIndent: 1em;
 
 /* Bulleted */
@@ -181,12 +177,13 @@
 
 /* Ordered List */
 @orderedCountName: ordered;
-@orderedCountContent: counters(ordered, ".") " ";
+@orderedCountContent: counters(ordered, '.') ' ';
 @orderedCountColor: inherit;
 @orderedCountDistance: 1.25rem;
 @orderedCountOpacity: 1;
 @orderedCountTextAlign: right;
 @orderedCountVerticalAlign: middle;
+@orderedDistance: @bulletDistance;
 
 @orderedChildCountDistance: 1em;
 @orderedChildCountOffset: -2em;
@@ -232,4 +229,3 @@
 @veryRelaxedChildItemVerticalPadding: @relative4px;
 @veryRelaxedHeaderMargin: 0.5rem;
 @veryRelaxedHorizontalPadding: 1.5rem;
-

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

@@ -8,20 +8,25 @@
 --------------------*/
 
 .eea.banner {
+  --text-color: @white;
   position: relative;
   width: 100%;
+  max-width: @bannerMaxWidth;
   background: @bannerBackgroundColor;
-  color: @white;
+  color: @bannerTextColor;
 
   .gradient {
     background: @backgroundGradient;
     opacity: @backgroundGradientOpacity;
+    height: 100%;
 
     .content {
+      width: 100%;
       padding: @mobileContentPadding;
 
       .ui.grid {
         align-items: flex-end;
+        width: 100%;
       }
 
       .title {
@@ -107,6 +112,53 @@
   }
 }
 
+.light-header {
+  .container {
+    width: 100%;
+    max-width: 1300px !important;
+  } 
+  .eea.banner {
+    --text-color: @bannerHomepageColor;
+
+    .content-type {
+      color: @secondaryColorCSSVar;
+      font-weight: bold;
+    }
+
+    .gradient .content .subtitle {
+      margin: 0 0 0.5rem 0;
+    }
+  }
+}
+
+.homepage-header .banner {
+  --text-color: @bannerHomepageColor;
+  height: 500px;
+
+  .content-type {
+    color: @secondaryColorCSSVar;
+    font-size: @h2;
+    font-weight: bold;
+  }
+  .container {
+      display: flex;
+      height: 100%;
+      align-items: flex-end;
+    }
+
+    .content {
+      padding: 0 !important;
+      margin-bottom: 2rem;
+    }
+    .grid {
+      text-align: center;
+    }
+    .wrapper {
+      justify-content: center;
+    }
+}
+
+
 /*Share Popup*/
 
 .ui.popup.share-popup {
@@ -201,7 +253,14 @@
   }
 }
 
+.light-header .eea.banner .gradient .content {
+  padding: @computerContentPadding;
+}
+
 @media only screen and (min-width: @computerBreakpoint) {
+  .hero-header .banner {
+    height: 800px;
+  }
   .eea.banner {
     .image {
       .gradient .content {
@@ -211,6 +270,9 @@
 
     .gradient .content {
       padding: @computerContentPadding;
+      .light-header & {
+        padding: @computerContentPaddingWithImage;
+      }
 
       .title {
         margin: @computerTitleMargin;

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

@@ -3,6 +3,9 @@
 *******************************/
 
 @bannerBackgroundColor   : @secondaryColor;
+@bannerTextColor   : @textColorCSSVar;
+@bannerMaxWidth:  100% !important;
+@bannerHomepageColor    : @blue-grey-6;
 
 /* Background Image */
 @imageBackgroundRepeat   : no-repeat;

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

@@ -5,7 +5,7 @@
 
 .context-navigation {
   max-width      : @widescreenSidenavMaxWidth;
-  background     : @sidenavBackground;
+  // background     : @sidenavBackground;
   margin-right   : @sidenavMarginRight;
   padding-left   : @sidenavPaddingLeft;
   overflow       : @sidenavOverflow;
@@ -115,18 +115,27 @@
 }
 
 /*******************************
-          Side navigation
+        Side navigation
 *******************************/
 .accordion-header {
   cursor: pointer;
   justify-content: space-between;
   align-items: center;
   padding: @sidenavAccordionHeaderPadding;
+  font-weight: @sidenavItemFontWeight;
+  background-color: @sidenavAccordionHeaderBackgroundColor;
+  box-shadow: @sidenavBoxShadow;
 }
 
+.context-navigation-list {
+  width: @sidenavMaxWidth;
+  box-shadow: @sidenavBoxShadow;
+  background-color: @sidenavBackground;
+}
 .context-navigation-list .title-link {
   display: block;
   color: @sidenavItemColor; 
+  margin: 0 @sidenavItemMargin;
   font-size  : @sidenavItemFontSize;
   font-weight: @sidenavItemFontWeight;
 }
@@ -134,7 +143,6 @@
   font-weight: @sidenavLevelTwoItemFontWeight;
 }
 .context-navigation {
-  box-shadow: @sidenavBoxShadow;
 
   .current {
     color: @sidenavItemActiveColor;
@@ -151,11 +159,16 @@
     font-weight: @sidenavItemFontWeight;
     padding: @sidenavFolderItemPadding;
     text-align: left;
+    margin: @sidenavItemMargin;
     &:not([aria-expanded="true"]) {
         border-bottom: @sidenavContentBorderBottom;
       }
   }
-
+  .context-navigation-list.accordion-list {
+      max-height: @sidenavAccordionListMaxHeight;
+      overflow-y: auto;
+      -webkit-overflow-scrolling: touch;
+  }
   .accordion-list {
     margin-top: 0;
     margin-bottom: 0;

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

@@ -2,14 +2,14 @@
         Sidebar Nav
 *******************************/
 
-@sidenavMaxWidth: 350px;
-@widescreenSidenavMaxWidth: 300px;
+@sidenavMaxWidth: 315px;
+@widescreenSidenavMaxWidth: 315px;
 @mobileSidenavMaxWidth: 100%;
 @sidenavBackground: @grey-0;
-@sidenavMarginRight: @rem-space-4;
+@sidenavMarginRight: 0;
 @sidenavPaddingLeft: 0;
 @sidenavOverflow: inherit;
-@sidenavMargin: @rem-space-8 auto;
+@sidenavMargin: auto;
 @sidenavShadowColor: @grey-3;
 @sidenavBoxShadow: 0px 3px 3px @sidenavShadowColor;
 
@@ -19,6 +19,8 @@
 @sidenavHeaderFontWeight: @font-weight-7;
 @sidenavHeaderPadding: @rem-space-4;
 @sidenavAccordionHeaderPadding: @rem-space-2 @rem-space-4;
+@sidenavAccordionHeaderBackgroundColor: white;
+@sidenavAccordionListMaxHeight: 86dvh;
 @sidenavHeaderBorderBottom: @2px solid @blue-grey-5;
 @sidenavHeaderIconMarginRight: @rem-space-4;
 
@@ -38,6 +40,7 @@
 @sidenavItemHoverBackground: @blue-grey-5;
 @sidenavItemHoverColor: @grey-0;
 @sidenavLastItemMarginBottom: @rem-space-2;
+@sidenavItemMargin: 2px;
 
 /* Third level item */
 @subparItemPaddingLeft: @rem-space-12;

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

@@ -15,8 +15,13 @@
 .eea.header {
   /* So child can have position sticky */
   display: initial;
+  &:has(.eea-side-menu) {
+    margin-bottom: 3.7rem;
+  }
+
 }
 
+
 /*----------------------------------------------------------------------------
    HEADER TOP BAR
 ----------------------------------------------------------------------------*/
@@ -224,6 +229,15 @@
   content: ' ';
 }
 
+.light-header  {
+  .main.bar.transparency:before {
+    background: linear-gradient(0deg, rgba(96, 96, 96, 0.2), #3d5265 100%);
+  }
+  #page-header {
+    margin-bottom: 2rem;
+  }
+}
+
 .main.bar {
   background: @headerMainSectionBackground;
   scrollbar-gutter: stable;

package/theme/themes/eea/modules/checkbox.overrides

@@ -28,6 +28,11 @@
   }
 }
 
+.ui.checkbox.toggle label::before,
+.ui.checkbox.toggle label::after {
+  z-index: auto;
+}
+
 /* Helper text for disabled element */
 .ui.disabled.checkbox + label,
 .ui.disabled.radio.checkbox + label {

package/theme/themes/eea/tokens/fonts.less

@@ -34,6 +34,7 @@
 @font-size-8:  2.25rem;
 @font-size-9:  2.5rem;
 @font-size-10: 2.75rem;
+@font-size-11: 4.5rem;
 @font-size-fluid-0: clamp(1.125rem, 2vw, 1.25rem);
 @font-size-fluid-1: clamp(1.25rem, 4vw, 1.625rem);
 @font-size-fluid-2: clamp(1.5rem, 6vw, 2rem);