@eeacms/volto-eea-design-system 1.0.1 → 1.0.2

package/CHANGELOG.md

@@ -4,11 +4,28 @@ 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.1](https://github.com/eea/volto-eea-design-system/compare/1.0.0...1.0.1) - 12 March 2023
+### [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
 
-- Release 1.0.1 [Alin Voinea - [`e94f59c`](https://github.com/eea/volto-eea-design-system/commit/e94f59c84f573bb5fee7d4e6741b5ff4b3db86b0)]
+- 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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-design-system",
-  "version": "1.0.1",
+  "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/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/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;
-}
+}