@eeacms/volto-eea-design-system 1.0.0-beta.6 → 1.0.2

package/CHANGELOG.md

@@ -4,6 +4,38 @@ 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.2](https://github.com/eea/volto-eea-design-system/compare/1.0.1...1.0.2) - 14 March 2023
+
+#### :bug: Bug Fixes
+
+- fix(megamenu): topic menu title is now placed before content [David Ichim - [`6004bcb`](https://github.com/eea/volto-eea-design-system/commit/6004bcb2683dedf6d6e18e61f33fde84a54c38d5)]
+- fix(megamenu): removed in depth nav_title renaming that set title wrongly to a-z topics [David Ichim - [`899ca0e`](https://github.com/eea/volto-eea-design-system/commit/899ca0e2ba5f8f9eb61e4280d786f74a17c186b7)]
+
+#### :nail_care: Enhancements
+
+- change(megamenu): removed special styling from at a glance mega menu section [David Ichim - [`fd0c4c8`](https://github.com/eea/volto-eea-design-system/commit/fd0c4c8a06bb4c4aa26f57c453132d13d30bc691)]
+- change(docusaurus): updated static image of footer sections [David Ichim - [`4ff3185`](https://github.com/eea/volto-eea-design-system/commit/4ff3185edf9257c790d2a124d3f937f61d84e147)]
+- change(footer): renamed thematic information platforms to environmental information systems [David Ichim - [`e7004a7`](https://github.com/eea/volto-eea-design-system/commit/e7004a7ea39451dbf97e1faed222b0cc5a12d6ce)]
+
+#### :house: Documentation changes
+
+- docs(What's new): Update 'What's new' [Alin Voinea - [`d7ed9d6`](https://github.com/eea/volto-eea-design-system/commit/d7ed9d619aa60d087c3821a972ebe5bf5766521a)]
+
+#### :hammer_and_wrench: Others
+
+- fixed accordion selector typo [David Ichim - [`f4cabc8`](https://github.com/eea/volto-eea-design-system/commit/f4cabc8f2222cf587af9e04b0ea196799b84202f)]
+### [1.0.1](https://github.com/eea/volto-eea-design-system/compare/1.0.0...1.0.1) - 13 March 2023
+
+### [1.0.0](https://github.com/eea/volto-eea-design-system/compare/1.0.0-beta.6...1.0.0) - 13 March 2023
+
+#### :bug: Bug Fixes
+
+- fix(Footer): Open internal links within the same page [Alin Voinea - [`5b3e409`](https://github.com/eea/volto-eea-design-system/commit/5b3e409c71281800bb0fd137a1bac256efaca2b5)]
+
+#### :nail_care: Enhancements
+
+- change(banner): use huge scale instead of full image for better performance [David Ichim - [`381c58e`](https://github.com/eea/volto-eea-design-system/commit/381c58e3521436f562d9e1727428a18435e2c0f3)]
+
 ### [1.0.0-beta.6](https://github.com/eea/volto-eea-design-system/compare/1.0.0-beta.5...1.0.0-beta.6) - 10 March 2023
 
 #### :rocket: New Features

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-design-system",
-  "version": "1.0.0-beta.6",
+  "version": "1.0.2",
   "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

@@ -26,9 +26,7 @@ const socialPlatforms = {
 };
 
 export const getImageSource = (image) => {
-  if (image?.download) return image.download;
-  if (image?.encoding)
-    return `data:${image['content-type']};${image['encoding']},${image['data']}`;
+  if (image?.scales?.huge) return image.scales.huge.download;
   return null;
 };
 

package/src/ui/Footer/Footer.stories.js

@@ -30,7 +30,7 @@ const Template = (args) => (
 
 export const Default = Template.bind({});
 Default.args = {
-  header: 'Thematic information platforms',
+  header: 'Environmental information systems',
   description: '',
   actions: [
     { link: '/#', title: 'Privacy' },

package/src/ui/Footer/FooterActions.jsx

@@ -1,5 +1,7 @@
 import React from 'react';
+import { Link } from 'react-router-dom';
 import { Grid } from 'semantic-ui-react';
+import { isInternalURL } from '@plone/volto/helpers';
 
 const FooterActions = (props) => {
   if (props.children) {
@@ -12,24 +14,34 @@ const FooterActions = (props) => {
         <Grid.Column mobile={12} tablet={6} computer={6}>
           <div className="actions">
             {props.actions &&
-              props.actions.map((action, index) => (
-                <a
-                  href={action.link}
-                  key={index}
-                  target={'_blank'}
-                  rel={'noreferrer'}
-                >
-                  {action.title}
-                </a>
-              ))}
+              props.actions.map((action, index) =>
+                isInternalURL(action.link) ? (
+                  <Link to={action.link} key={index}>
+                    {action.title}
+                  </Link>
+                ) : (
+                  <a
+                    href={action.link}
+                    key={index}
+                    target={'_blank'}
+                    rel={'noreferrer'}
+                  >
+                    {action.title}
+                  </a>
+                ),
+              )}
           </div>
         </Grid.Column>
 
         <Grid.Column mobile={12} tablet={6} computer={6}>
           <div className="copyright">
             {props.copyright &&
-              props.copyright.map((copyright, index) => (
-                <React.Fragment key={index}>
+              props.copyright.map((copyright, index) =>
+                isInternalURL(copyright.link) ? (
+                  <Link to={copyright.link} key={index}>
+                    {copyright.title}
+                  </Link>
+                ) : (
                   <a
                     href={copyright.link}
                     key={index}
@@ -38,8 +50,8 @@ const FooterActions = (props) => {
                   >
                     {copyright.title}
                   </a>
-                </React.Fragment>
-              ))}
+                ),
+              )}
           </div>
         </Grid.Column>
       </Grid>

package/src/ui/Header/HeaderMenuPopUp.js

@@ -70,24 +70,6 @@ const Topics = ({ menuItem, renderMenuItem }) => (
       <React.Fragment key={index}>
         {section.title === 'At a glance' ? (
           <Grid.Column width={3} id="at-a-glance">
-            <div className="mega-menu-title">
-              {/* Inverted right labeled button as a category title,
-                    for topics the button goes inside the grid */}
-              {renderMenuItem(
-                menuItem,
-                { className: 'ui button inverted icon right labeled' },
-                {
-                  iconPosition: 'right',
-                  children: (
-                    <>
-                      {/* Add word overview to titles */}
-                      <span> overview</span>
-                      <Icon className={'arrow right icon'} alt={'Title icon'} />
-                    </>
-                  ),
-                },
-              )}
-            </div>
             <Item item={section} key={index} renderMenuItem={renderMenuItem} />
           </Grid.Column>
         ) : (
@@ -224,8 +206,6 @@ const SecondLevelContent = ({ element, topics = false, renderMenuItem }) => {
     const inDepth = element.items.find(
       (element) => element.url.indexOf('in-depth') !== -1,
     );
-    // eslint-disable-next-line no-unused-expressions
-    inDepth ? (inDepth.nav_title = 'A-Z Topics') : '';
     content = (
       <List>
         {atAGlance &&
@@ -341,7 +321,7 @@ function HeaderMenuPopUp({
             <div className="menu-content tablet hidden mobile hidden">
               {/* Inverted right labeled button as a category title,
                   for topics the button goes inside the grid */}
-              {menuItem.title !== 'Topics' && (
+              {menuItem.title && (
                 <div className="mega-menu-title">
                   {renderMenuItem(
                     menuItem,

package/templates/eea.hbs

@@ -2,7 +2,7 @@
 title: What's new
 ---
 
-### EEA Design System (1.0.0)
+### EEA Design System (1.0)
 
 #### Components ready to be used
 
@@ -26,12 +26,8 @@ The following components are ready to be used as Volto `blocks`, `slate` integra
 #### 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) is still WIP and should not be used
-- When using the Table `block`, please be aware of enabling the responsive design manually (it should be on by default in later releases)
-- Description list (dt, dd) is still missing from slate editor
-- Slate enhancements, e.g. the inclusion of various font weights and text alignment (left, centered, right)
-- Spacing/padding system via the `block styler`. We do have design-tokens; however, these are not exposed to the volto block styler. 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.
-- Harmonize component naming across docusarurus, storybook, code, and Volto.
+- 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.
 
 {{#unless options.hideCredit}}

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

@@ -27,7 +27,7 @@
   background: @topSectionBackground;
 
   .ui.container {
-    z-index: @topSectionZindex;
+    z-index: @topSectionZIndex;
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -775,19 +775,17 @@
 }
 
 #at-a-glance {
-  padding: @megaMenuGlancePadding !important;
-  margin-bottom: @megaMenuGlanceMarginBottom !important;
-  background-color: @megaMenuGlanceBackgroundColor;
-
   .item {
     margin: @megaMenuGlanceListItemMargin;
     font-size: @megaMenuGlanceListItemFontSize;
     font-weight: @megaMenuGlanceListItemFontWeight;
   }
+  .list.menu-list {
+    margin-top: @megaMenuGlanceMenuListMarginTop;
+  }
 }
 
 #topics-right-column {
-  padding-top: @topicsRightColumnPaddingTop;
   padding-left: @topicsRightColumnPaddingLeft;
 }
 

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

@@ -33,7 +33,7 @@
 @topSectionItemFontSize               : @font-size-00;
 @mobileTopSectionItemFontSize         : @font-size-00;
 @tabletTopSectionItemFontSize         : @font-size-00;
-@topSectionZindex                     : @z-index-1;
+@topSectionZIndex                     : @z-index-1;
 @dropdownColor                        : @blue-grey-6;
 @mobileDropdownFontSize               : @font-size-00;
 @tabletDropdownFontSize               : @font-size-00;
@@ -187,16 +187,13 @@
 @megaMenuListItemActivePadding: 8px;
 
 /* Topics */
-@topicsRightColumnPaddingTop: calc(31 * @spacer); // 124px;
 @topicsRightColumnPaddingLeft: @rem-space-4;
 
 /* At a glance */
-@megaMenuGlanceBackgroundColor: @secondaryColor;
-@megaMenuGlancePadding: @rem-space-4 @rem-space-6;
-@megaMenuGlanceMarginBottom: -@rem-space-4;
-@megaMenuGlanceListItemFontSize: @font-size-2;
+@megaMenuGlanceListItemFontSize: @font-size-1;
 @megaMenuGlanceListItemFontWeight: @font-weight-4;
-@megaMenuGlanceListItemMargin: @rem-space-4 0;
+@megaMenuGlanceListItemMargin: 0;
+@megaMenuGlanceMenuListMarginTop: @rem-space-4;
 
 /* Accordion */
 @megaMenuAccordionTitleFontSize: @font-size-3;
@@ -237,7 +234,7 @@
 @tabletSearchBoxFullSearchTextAlign: center;
 @searchBoxSuggestionsMarginTop: 2em;
 @searchBoxSuggestionsTextColor: @white;
-@searchBoxSuggestionsColumnGap: 2em; 
+@searchBoxSuggestionsColumnGap: 2em;
 @searchBoxSuggestionsRowGap: 1em;
 @searchBoxMobilePopupMarginTop: 0.5em;
 @searchBoxTabletPopupMarginTop: 1em;

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

@@ -155,6 +155,6 @@
 .ui.accordion.tertiary .title:not(.active):hover,
 .ui.accordion.tertiary .title:not(.active):focus-visible,
 .ui.accordion.tertiary .title:not(.active):hover i,
-.ui.accordion.tertiary .title:not(.active):focus-visble i {
+.ui.accordion.tertiary .title:not(.active):focus-visible i {
   color: @tertiaryColorCSSVar;
-}
+}