@eeacms/volto-eea-design-system 0.8.0 → 0.9.0

package/package.json

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

package/src/ui/ContextNavigation/ContextNavigation.stories.jsx

@@ -1,66 +1,144 @@
 import React from 'react';
+import { Container, Icon } from 'semantic-ui-react';
 
-const Template = (args) => (
-  <nav className="context-navigation">
-    <div className="context-navigation-header">Navigation</div>
-    <div role="list" className="ui list">
-      <div role="listitem" className="item level-1">
-        <div className="content">
-          <a title="" className="contenttype-folder" href="/api/folder1">
-            Folder1
-          </a>
+const sidenavItems = [
+  {
+    '@id': 'Gravida',
+    items: [
+      {
+        '@id': 'Lorem-ipsum-0',
+        description: '',
+        items: [],
+        review_state: null,
+        title: 'Item 1',
+        url: '/#',
+      },
+      {
+        '@id': 'item-2',
+        description: '',
+        items: [],
+        review_state: null,
+        title: 'Item 2',
+        url: '/#',
+      },
+      {
+        '@id': 'item-3',
+        description: '',
+        items: [],
+        review_state: null,
+        title: 'Item 3',
+        url: '/#',
+      },
+    ],
+    review_state: null,
+    title: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+    url: '/#',
+  },
+  {
+    '@id': 'Signals-2021',
+    description: '',
+    items: [],
+    review_state: null,
+    title: 'Signals 2021',
+    url: '/#',
+  },
+  {
+    '@id': 'Articles',
+    description: '',
+    items: [],
+    review_state: null,
+    title: 'Articles',
+    url: '/#',
+  },
+  {
+    '@id': 'Infographics',
+    items: [
+      {
+        '@id': 'Lorem-ipsum-1',
+        description: '',
+        items: [],
+        review_state: null,
+        title: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+        url: '/#',
+      },
+      {
+        '@id': 'Signals-2021-infographics',
+        description: '',
+        items: [],
+        review_state: null,
+        title: 'Signals 2021',
+        url: '/#',
+      },
+      {
+        '@id': 'Articles',
+        description: '',
+        items: [],
+        review_state: null,
+        title: 'Articles',
+        url: '/#',
+      },
+      {
+        '@id': 'Infographics-overview',
+        description: '',
+        items: [],
+        review_state: null,
+        title: 'Infographics',
+        url: '/#',
+      },
+    ],
+    review_state: null,
+    title: 'Infographics',
+    url: '/#',
+  },
+];
+
+function Template({ ...args }) {
+  return (
+    <Container>
+      <nav className="context-navigation">
+        <div className="context-navigation-header">
+          <Icon className="ri-menu-2-line" /> {args.header}
         </div>
-      </div>
-      <div role="listitem" className="item level-1">
-        <div className="content">
-          <a
-            title=""
-            className="contenttype-folder in_path"
-            href="/api/folder2/folder21"
-          >
-            Folder21
-          </a>
-          <div className="list">
-            <div role="listitem" className="item level-2">
-              <div className="content">
-                <a
-                  title=""
-                  className="contenttype-document"
-                  href="/api/folder2/folder21/doc211"
-                >
-                  Doc211
-                </a>
-              </div>
-            </div>
-            <div role="listitem" className="active item level-2">
-              <div className="content">
-                <a
-                  title=""
-                  className="contenttype-document"
-                  href="/api/folder2/folder21/doc211-copy"
-                >
-                  Doc212
-                  <div className="content active-indicator">
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      viewBox="0 0 36 36"
-                      className="icon"
+        <div role="list" className="ui list">
+          {args.sidenavItems &&
+            args.sidenavItems.map((element, index) => {
+              return (
+                <div role="listitem" className="item level-1">
+                  <div className="content">
+                    <a
+                      title={element.title}
+                      className="contenttype-folder"
+                      href={element.url}
                     >
-                      <path
-                        fill-rule="evenodd"
-                        d="M21.293 9.293L22.707 10.707 15.414 18 22.707 25.293 21.293 26.707 12.586 18z"
-                      ></path>
-                    </svg>
+                      {element.title}
+                    </a>
+                    {element.items.length > 0 &&
+                      element.items.map((subelement, index) => {
+                        return (
+                          <div className="list" role="list">
+                            <div role="listitem" className="item level-2">
+                              <div className="content">
+                                <a
+                                  title={subelement.title}
+                                  className="contenttype-document"
+                                  href={subelement.url}
+                                >
+                                  {subelement.title}
+                                </a>
+                              </div>
+                            </div>
+                          </div>
+                        );
+                      })}
                   </div>
-                </a>
-              </div>
-            </div>
-          </div>
+                </div>
+              );
+            })}
         </div>
-      </div>
-    </div>
-  </nav>
-);
+      </nav>
+    </Container>
+  );
+}
 
 export default {
   title: 'Components/Navigation portlet',
@@ -69,5 +147,6 @@ export default {
 
 export const Default = Template.bind({});
 Default.args = {
-  root: 'https://www.eea.europa.eu/',
+  header: 'Navigation',
+  sidenavItems: sidenavItems,
 };

package/src/ui/Header/Header.jsx

@@ -41,10 +41,12 @@ const TopDropdownMenu = ({
   className,
   icon,
   id,
+  tabletText,
   mobileText,
   text,
   viewportWidth,
 }) => {
+  const isTablet = viewportWidth < 991;
   const isMobile = viewportWidth < 767;
 
   const Component = ({ mobileText }) => (
@@ -55,13 +57,21 @@ const TopDropdownMenu = ({
       icon={icon || 'chevron down'}
       aria-label="dropdown"
       closeOnChange={false}
-      closeOnBlur={false}
+      closeOnBlur={true}
     >
       <Dropdown.Menu role="group">{children}</Dropdown.Menu>
     </Dropdown>
   );
   return (
-    <>{isMobile ? <Component mobileText={mobileText} /> : <Component />}</>
+    <>
+      {isMobile ? (
+        <Component mobileText={mobileText} />
+      ) : isTablet ? (
+        <Component mobileText={tabletText} />
+      ) : (
+        <Component />
+      )}
+    </>
   );
 };
 

package/theme/themes/eea/collections/message.overrides

@@ -2,33 +2,32 @@
          Theme Overrides
 *******************************/
 
-/* Text size and weight */
-.ui.message p {
-  font-size: @messageFontSize;
+/* Old custom messages | update in form refactoring
+
+.field-wrapper .ui.message p {
   font-weight: @messageFontWeight;
 }
-
-/* Text color for non state messages */
-.ui.message:not(.success):not(.error):not(.warning):not(.info):not(.negative):not(.positive) {
+.field-wrapper .ui.message:not(.success):not(.error):not(.warning):not(.info):not(.negative):not(.positive) {
   color: @messageColor;
 }
 
-/* Align icon next to header */
-.ui.icon.message {
+.field-wrapper .ui.icon.message {
   align-items: @messageItemsAlign;
 }
-
-/* Icon margin to align with header text size */
-div.ui.icon.message > .icon,
-div.ui.icon.message > .icon:not(.close) {
+.field-wrapper div.ui.icon.message > .icon,
+.field-wrapper div.ui.icon.message > .icon:not(.close) {
   margin: @iconMargin;
+  line-height: @iconLineHeight;
 }
+*/
 
-.ui.success.message,
-.ui.warning.message,
-.ui.error.message,
-.ui.info.message,
-.ui.positive.message,
-.ui.negative.message {
-  background: @background;
-}
+// No background or border for form messages
+.field-wrapper .ui.success.message,
+.field-wrapper .ui.warning.message,
+.field-wrapper .ui.error.message,
+.field-wrapper .ui.info.message,
+.field-wrapper .ui.positive.message,
+.field-wrapper .ui.negative.message {
+  background: transparent;
+  box-shadow: none;
+}

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

@@ -2,24 +2,32 @@
             Message
 *******************************/
 
+@messageFontWeight: @bold;
+@messageColor: @black;
+@messageItemsAlign: flex-start;
+@iconLineHeight: 1.29;
+@iconMargin: 0.75rem;
 
 /*-------------------
        Elements
 --------------------*/
 
 @verticalMargin: 1em;
-@verticalPadding: 0.5rem;
-@horizontalPadding: 0;
+@verticalPadding: 1.5em;
+@verticalPadding: 1em;
+@horizontalPadding: 1.5em;
 @padding: @verticalPadding @horizontalPadding;
-@background: transparent;
+@background: #F8F8F9;
 @lineHeightOffset: ((@lineHeight - 1em) / 2);
-@messageItemsAlign: flex-start;
 
-@borderRadius: @defaultBorderRadius;
-@borderWidth: 0;
+@borderRadius: 0;
+@borderWidth: 1px;
 @borderShadow: 0px 0px 0px @borderWidth @strongBorderColor inset;
 @shadowShadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
-@boxShadow: none;
+@boxShadow:
+  @borderShadow,
+  @shadowShadow
+;
 
 @transition:
   opacity @defaultDuration @defaultEasing,
@@ -29,7 +37,7 @@
 ;
 
 /* Header */
-@headerFontSize: 0.875rem;
+@headerFontSize: @relativeLarge;
 @headerFontWeight: @bold;
 @headerDisplay: block;
 @headerDistance: 0rem;
@@ -37,11 +45,8 @@
 @headerParagraphDistance: 0.15em;
 
 /* Paragraph */
-@messageTextOpacity: 1;
-@messageParagraphMargin: 0;
-@messageColor: @black;
-@messageFontSize: 0.875rem;
-@messageFontWeight: @bold;
+@messageTextOpacity: 0.85;
+@messageParagraphMargin: 0.75em;
 
 /* List */
 @listOpacity: 0.85;
@@ -51,7 +56,7 @@
 @listItemMargin: 0.3em;
 
 /* Icon */
-@iconDistance: 0.3em;
+@iconDistance: @rem-space-4;
 
 /* Close Icon */
 @closeTopDistance: @verticalPadding - @lineHeightOffset;
@@ -65,9 +70,8 @@
 --------------------*/
 
 /* Icon Message */
-@iconMargin: 0.09rem 0.6rem 0 0;
-@iconSize: 1rem;
-@iconOpacity: 1;
+@iconSize: 2em;
+@iconOpacity: 0.8;
 @iconContentDistance: 0rem;
 @iconVerticalAlign: top;
 
@@ -133,10 +137,28 @@
 ;
 
 /* Warning / Positive / Negative / Info */
-@positiveBoxShadow: none;
-@negativeBoxShadow: none;
-@infoBoxShadow: none;
-@warningBoxShadow: none;
-@errorBoxShadow: none;
-@successBoxShadow: none;
+@positiveBoxShadow:
+  0px 0px 0px @borderWidth @positiveBorderColor inset,
+  @shadowShadow
+;
+@negativeBoxShadow:
+  0px 0px 0px @borderWidth @negativeBorderColor inset,
+  @shadowShadow
+;
+@infoBoxShadow:
+  0px 0px 0px @borderWidth @infoBorderColor inset,
+  @shadowShadow
+;
+@warningBoxShadow:
+  0px 0px 0px @borderWidth @warningBorderColor inset,
+  @shadowShadow
+;
+@errorBoxShadow:
+  0px 0px 0px @borderWidth @errorBorderColor inset,
+  @shadowShadow
+;
+@successBoxShadow:
+  0px 0px 0px @borderWidth @successBorderColor inset,
+  @shadowShadow
+;
 

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

@@ -197,7 +197,7 @@ p.ui.button {
 .ui.inverted.primary.button.active,
 .ui.inverted.primary.buttons .button:active,
 .ui.inverted.primary.button:active {
-  color: @invertedHoveredTextColor;
+  color: @invertedHoveredTextColor !important;
 }
 
 .ui.inverted.primary.buttons .button:hover,
@@ -235,7 +235,7 @@ p.ui.button {
 .ui.inverted.secondary.button.active,
 .ui.inverted.secondary.buttons .button:active,
 .ui.inverted.secondary.button:active {
-  color: @invertedHoveredTextColor;
+  color: @invertedHoveredTextColor !important;
 }
 
 .ui.inverted.secondary.buttons .button:hover,
@@ -280,7 +280,7 @@ p.ui.button {
 .ui.inverted.tertiary.buttons .button:active,
 .ui.inverted.tertiary.button:active {
   box-shadow: none !important; // button.less - L:3142
-  color: @invertedHoveredTextColor;
+  color: @invertedHoveredTextColor !important;
 }
 
 .ui.tertiary.buttons .button:hover,

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

@@ -48,7 +48,7 @@
 @searchButtonIconLeft: 1.25rem;
 @searchButtonIconOpacity: 0.625rem;
 
-@verticalMargin: 0em;
+@verticalMargin: 0.25em;
 @horizontalMargin: 0.25em;
 @backgroundColor: @silverGray;
 @backgroundImage: none;

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

@@ -3,78 +3,85 @@
 
 @import (multiple) '../../theme.config';
 
-
-// default styles delete
-.list .content .list a {
-  padding-left: 2rem !important;
-}
-.in_path {
-  font-weight: bold !important;
-}
-.list .content .list {
-  padding-top: 0!important;
-  padding-bottom: 0!important;
-  border-top: 1px solid #eee;
-  border-bottom: 1px solid #eee;
-}
 .context-navigation {
-  margin-right: 1rem;
-  background     : white;
-  padding        : 0;
-  max-width      : 210px;
-  box-shadow     : 0 0 12px rgba(0, 0, 0, 0.2);
-  list-style-type: none;
-  border-radius  : 4px;
-  overflow       : hidden;
+  max-width      : @widescreenSidenavMaxWidth;
+  background     : @sidenavBackground;
+  margin-right   : @sidenavMarginRight;
+  padding-left   : @sidenavPaddingLeft;
+  overflow       : @sidenavOverflow;
 }
-@media(max-width: 1200px) {
+@media (max-width: @largeMonitorBreakpoint) {
   .context-navigation {
-    box-shadow: none;
-    max-width: 200px;
-    margin: 2rem auto;
+    max-width: @sidenavMaxWidth;
+    margin: @sidenavMargin;
   }
 }
+
 .context-navigation .item a {
-  padding    : .6rem 1rem;
-  font-size  : 1rem;
-  font-weight: 400;
   display    : block;
-  position: relative;
-  color: #444;
+  padding    : @sidenavItemPadding;
+  font-size  : @sidenavItemFontSize;
+  font-weight: @sidenavItemFontWeight;
+  color      : @sidenavItemColor;
+
+  &:hover {
+    background: @sidenavItemHoverBackground;
+    color     : @sidenavItemHoverColor;
+  }
 }
-@media (min-width: 1200px) and (max-width: 1500px) {
-  .context-navigation .item a {
-    font-size: .9rem;
+
+.context-navigation-header {
+  display    : flex;
+  color      : @sidenavHeaderColor;
+  font-size  : @sidenavHeaderFontSize;
+  font-weight: @sidenavHeaderFontWeight;
+  padding    : @sidenavHeaderPadding;
+  border-bottom: @sidenavHeaderBorderBottom;
+
+  i.icon {
+    margin-right: @sidenavHeaderIconMarginRight;
   }
 }
-.context-navigation .item a:hover {
-  background: #cc4400 !important;
-  color     : white !important;
+
+.context-navigation a.contenttype-folder {
+  font-size  : @sidenavFolderFontSize;
+  font-weight: @sidenavFolderFontWeight;
+  padding    : @sidenavFolderItemPadding;
+}
+
+.context-navigation .ui.list > .item > .content {
+  border-bottom: @sidenavContentBorderBottom;
 }
-.context-navigation-header {
-  color      : #333;
-  font-size  : 16px;
-  font-weight: 500;
-  padding    : 1rem;
-  box-shadow : 0 4px 19px rgba(0, 0, 1, 0.07);
-  border-bottom: 3px solid #cc4400;
+
+// Hide last border
+.context-navigation .ui.list > .item:last-child > .content {
+  border-bottom: none; 
 }
-.context-navigation-header a {
-  color: #444;
-  font-size: 1.3rem;
-  font-weight: 100;
+
+// Nav custom list
+.context-navigation .ui.list {
+  margin: 0;
+
+  .item,
+  .item .list {
+    padding: 0;
+  }
 }
-.context-navigation .active-indicator {
-  position: absolute;
-  right: 0;
-  top: 50%;
-  transform: translateY(-50%);
-  color: #cc4400;
-  font-weight: bold;
+
+.context-navigation .level-1 .item:last-child a {
+  margin-bottom: @sidenavLastItemMarginBottom;
 }
-.active-indicator .icon {
-  height: 30px;
+
+.context-navigation .item.level-1 .ui.divider {
+  border-bottom: none; 
 }
-.context-navigation .item a:hover .active-indicator {
-  color     : white !important;
+
+// Active indicator
+.context-navigation .item a.active {
+  color: @sidenavItemActiveColor;
+  font-weight: @sidenavItemActiveFontWeight;
 }
+
+.context-navigation .item a.active:hover {
+  color : @sidenavItemActiveColorHover;
+}

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

@@ -0,0 +1,41 @@
+/*******************************
+        Sidebar Nav
+*******************************/
+
+@sidenavMaxWidth: 350px;
+@widescreenSidenavMaxWidth: 300px;
+@sidenavBackground: @grey-0;
+@sidenavMarginRight: @rem-space-4;
+@sidenavPaddingLeft: @rem-space-4;
+@sidenavOverflow: hidden;
+@sidenavMargin: @rem-space-8 auto;
+
+/* Header */
+@sidenavHeaderColor: @blue-grey-5;
+@sidenavHeaderFontSize: @font-size-3;
+@sidenavHeaderFontWeight: @font-weight-7;
+@sidenavHeaderPadding: @rem-space-4;
+@sidenavHeaderBorderBottom: @2px solid @blue-grey-5;
+@sidenavHeaderIconMarginRight: @rem-space-4;
+
+/* Content */
+@sidenavContentBorderBottom: 1px solid @tertiaryColor;
+
+/* Nav item */
+@sidenavItemPadding: @rem-space-2 0 @rem-space-2 @rem-space-8;
+@sidenavItemFontSize: @font-size-1;
+@sidenavItemFontWeight: @font-weight-4;
+@sidenavItemColor: @blue-grey-5;
+@sidenavItemHoverBackground: @blue-grey-5;
+@sidenavItemHoverColor: @grey-0;
+@sidenavLastItemMarginBottom: @rem-space-2;
+
+/* Item active */
+@sidenavItemActiveColor: @secondaryColor;
+@sidenavItemActiveFontWeight: @font-weight-7;
+@sidenavItemActiveColorHover: @grey-0;
+
+/* Folders - Level 1 */
+@sidenavFolderFontSize: @font-size-2;
+@sidenavFolderFontWeight: @font-weight-7;
+@sidenavFolderItemPadding: @rem-space-4 0 @rem-space-4 @rem-space-4;