@eeacms/volto-tabs-block 2.0.0 → 2.1.0

package/CHANGELOG.md

@@ -4,8 +4,31 @@ 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).
 
-#### [2.0.0](https://github.com/eea/volto-tabs-block/compare/1.3.2...2.0.0)
+#### [2.1.0](https://github.com/eea/volto-tabs-block/compare/2.0.2...2.1.0)
 
+- adjustments to tabs border [`#26`](https://github.com/eea/volto-tabs-block/pull/26)
+- Release 2.1.0 [`3cdfa30`](https://github.com/eea/volto-tabs-block/commit/3cdfa30d4d03d864be8ad63f0648b4717298734a)
+- Squashed commit of the following: [`ca241f5`](https://github.com/eea/volto-tabs-block/commit/ca241f56a96817679a1948154e2a8cc0e17b96fe)
+
+#### [2.0.2](https://github.com/eea/volto-tabs-block/compare/2.0.1...2.0.2)
+
+> 16 June 2022
+
+- Fix Icon name warning: [`#25`](https://github.com/eea/volto-tabs-block/pull/25)
+
+#### [2.0.1](https://github.com/eea/volto-tabs-block/compare/2.0.0...2.0.1)
+
+> 10 June 2022
+
+- Apply menu item style on tabs-block only [`#24`](https://github.com/eea/volto-tabs-block/pull/24)
+- stylelint [`267fbdb`](https://github.com/eea/volto-tabs-block/commit/267fbdb72f69715690d281498d1fd0837c18fc0d)
+- Prettier fix [`5ac20a8`](https://github.com/eea/volto-tabs-block/commit/5ac20a8352f00618dae1623ac200ea1779342e8d)
+
+### [2.0.0](https://github.com/eea/volto-tabs-block/compare/1.3.2...2.0.0)
+
+> 8 June 2022
+
+- Add accordion template for mobile [`#23`](https://github.com/eea/volto-tabs-block/pull/23)
 - Update [`525551e`](https://github.com/eea/volto-tabs-block/commit/525551e151d469f71e3ecbae9af994cf1dc61644)
 - Improve accordion variation [`e95977e`](https://github.com/eea/volto-tabs-block/commit/e95977e2b06178dd820ea1b1983d74b4fd3f38f5)
 - Release 2.0.0 [`1206ab1`](https://github.com/eea/volto-tabs-block/commit/1206ab1c22346761aacb9c5aba7c536e7407526e)
@@ -14,7 +37,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - stylelint [`d29ff73`](https://github.com/eea/volto-tabs-block/commit/d29ff739e17fe398373c289b01f57328543e333d)
 - stylelint [`73195f6`](https://github.com/eea/volto-tabs-block/commit/73195f60362fffe12ae13f685a9c349cbe486118)
 - prettier [`8308f52`](https://github.com/eea/volto-tabs-block/commit/8308f52c296f39da416c927d807f33741ecf66aa)
-- Add accordion template for mobile [`92e99cf`](https://github.com/eea/volto-tabs-block/commit/92e99cf538983164426ad82b0e71e5ba6532e419)
 - Remove useless  from block title [`4ab8b58`](https://github.com/eea/volto-tabs-block/commit/4ab8b58b9266d2937fd033865e52100f0a6333b2)
 
 #### [1.3.2](https://github.com/eea/volto-tabs-block/compare/1.3.1...1.3.2)

package/Jenkinsfile

@@ -4,8 +4,9 @@ pipeline {
   environment {
         GIT_NAME = "volto-tabs-block"
         NAMESPACE = "@eeacms"
-        SONARQUBE_TAGS = "volto.eea.europa.eu,climate-energy.eea.europa.eu,biodiversity.europa.eu,www.eea.europa.eu-ims,sustainability.eionet.europa.eu,forest.eea.europa.eu,clms.land.copernicus.eu,industry.eea.europa.eu,water.europa.eu-freshwater,demo-www.eea.europa.eu,clmsdemo.devel6cph.eea.europa.eu"
+        SONARQUBE_TAGS = "volto.eea.europa.eu,climate-energy.eea.europa.eu,biodiversity.europa.eu,www.eea.europa.eu-ims,sustainability.eionet.europa.eu,forest.eea.europa.eu,clms.land.copernicus.eu,industry.eea.europa.eu,water.europa.eu-freshwater,demo-www.eea.europa.eu,clmsdemo.devel6cph.eea.europa.eu,circularity.eea.europa.eu"
         DEPENDENCIES = "@eeacms/volto-block-style"
+        VOLTO = "alpha"
     }
 
   stages {
@@ -124,8 +125,8 @@ pipeline {
             node(label: 'docker') {
               script {
                 try {
-                  sh '''docker pull plone; docker run -d --rm --name="$BUILD_TAG-plone" -e SITE="Plone" -e PROFILES="profile-plone.restapi:blocks" plone fg'''
-                  sh '''docker pull plone/volto-addon-ci; docker run -i --name="$BUILD_TAG-cypress" --link $BUILD_TAG-plone:plone -e NAMESPACE="$NAMESPACE" -e GIT_NAME=$GIT_NAME -e GIT_BRANCH="$BRANCH_NAME" -e GIT_CHANGE_ID="$CHANGE_ID" -e DEPENDENCIES="$DEPENDENCIES" plone/volto-addon-ci cypress'''
+                  sh '''docker pull eeacms/plone-backend; docker run --rm -d --name="$BUILD_TAG-plone" -e SITE="Plone" -e PROFILES="eea.kitkat:testing" eeacms/plone-backend'''
+                  sh '''docker pull plone/volto-addon-ci; docker run -i --name="$BUILD_TAG-cypress" --link $BUILD_TAG-plone:plone -e NAMESPACE="$NAMESPACE" -e GIT_NAME=$GIT_NAME -e GIT_BRANCH="$BRANCH_NAME" -e GIT_CHANGE_ID="$CHANGE_ID" -e DEPENDENCIES="$DEPENDENCIES" -e NODE_ENV=development -e VOLTO="$VOLTO" plone/volto-addon-ci cypress'''
                 } finally {
                   try {
                     sh '''rm -rf cypress-reports cypress-results cypress-coverage'''

package/cypress/support/index.js

@@ -27,7 +27,7 @@ coverage-end */
 export const setupBeforeEach = () => {
   cy.autologin();
   cy.createContent({
-    contentType: 'Folder',
+    contentType: 'Document',
     contentId: 'cypress',
     contentTitle: 'Cypress',
   });

package/cypress.json

@@ -1,9 +1,14 @@
 {
   "baseUrl": "http://localhost:3000",
   "viewportWidth": 1280,
-  "defaultCommandTimeout": 15000,
+  "defaultCommandTimeout": 8888,
+  "chromeWebSecurity": false,
   "reporter": "junit",
   "video": true,
+  "retries": {
+    "runMode": 8,
+    "openMode": 0
+  },
   "reporterOptions": {
     "mochaFile": "cypress/reports/cypress-[hash].xml",
     "jenkinsMode": true,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-tabs-block",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "volto-tabs-block: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/src/components/templates/accordion/View.jsx

@@ -77,7 +77,9 @@ const View = (props) => {
       title: (
         <>
           {semanticIcon ? (
-            <Icon name={active ? semanticIcon.opened : semanticIcon.closed} />
+            <Icon
+              className={active ? semanticIcon.opened : semanticIcon.closed}
+            />
           ) : (
             <VoltoIcon
               name={active ? icons.opened : icons.closed}

package/src/components/templates/default/Edit.jsx

@@ -285,7 +285,14 @@ const Edit = (props) => {
           tabular: getDataValue('menuTabular'),
           text: getDataValue('menuText'),
           vertical: menuPosition.vertical,
-          className: cx(data.menuAlign, { container: isContainer }),
+          className: cx(
+            data.menuAlign,
+            menuPosition.direction === 'left' ? 'border-right' : '',
+            menuPosition.direction === 'right' ? 'border-left' : '',
+            menuPosition.direction === 'top' ? 'border-bottom' : '',
+            menuPosition.direction === 'bottom' ? 'border-top' : '',
+            { container: isContainer },
+          ),
         }}
         menuPosition={menuPosition.direction}
         panes={panes}

package/src/components/templates/default/View.jsx

@@ -64,7 +64,15 @@ const View = (props) => {
     hashlink = {},
     setActiveTab = () => {},
   } = props;
-  const menuPosition = getMenuPosition(data);
+
+  const [menuPosition, setMenuPosition] = React.useState({});
+
+  React.useEffect(() => {
+    if (Object.keys(menuPosition).length === 0) {
+      setMenuPosition(getMenuPosition(data));
+    }
+  }, [data, menuPosition]);
+
   const isContainer = data.align === 'full';
   const tabsTitle = data.title;
   const tabsDescription = data.description;
@@ -157,7 +165,14 @@ const View = (props) => {
           tabular: getDataValue('menuTabular'),
           text: getDataValue('menuText'),
           vertical: menuPosition.vertical,
-          className: cx(data.menuAlign, { container: isContainer }),
+          className: cx(
+            data.menuAlign,
+            menuPosition.direction === 'left' ? 'border-right' : '',
+            menuPosition.direction === 'right' ? 'border-left' : '',
+            menuPosition.direction === 'top' ? 'border-bottom' : '',
+            menuPosition.direction === 'bottom' ? 'border-top' : '',
+            { container: isContainer },
+          ),
         }}
         menuPosition={menuPosition.direction}
         panes={panes}

package/src/less/menu.less

@@ -77,6 +77,10 @@
       .menu-item-count {
         display: @menuItemCountDisplay;
       }
+
+      &.active {
+        border-width: 0.2rem;
+      }
     }
 
     .ui.fluid.input {
@@ -118,143 +122,143 @@
       }
     }
   }
-}
 
-.ui.menu:not(.RRT__accordion) {
-  .ui.item .icon {
-    display: none;
+  .ui.menu:not(.RRT__accordion) {
+    .ui.item .icon {
+      display: none;
+    }
   }
-}
 
-.RRT__container {
-  > .ui.tab .rah-animating {
-    transition: height 0ms ease 0ms !important;
+  .RRT__container {
+    > .ui.tab .rah-animating {
+      transition: height 0ms ease 0ms !important;
 
-    > div {
-      transition: opacity 0ms ease 0ms !important;
+      > div {
+        transition: opacity 0ms ease 0ms !important;
+      }
     }
   }
-}
-
-.ui.menu.RRT__accordion {
-  &::before {
-    display: none;
-  }
 
-  border-bottom: none !important;
+  .ui.menu.RRT__accordion {
+    &::before {
+      display: none;
+    }
 
-  .ui.item {
-    display: flex;
-    width: 100%;
-    padding: 0.75rem 1rem !important;
-    border-width: 0 !important;
     border-bottom: none !important;
-    margin: 0 !important;
-    background-color: @accordionMenuItemBackground;
 
-    .icon {
+    .ui.item {
+      display: flex;
+      width: 100%;
+      padding: 0.75rem 1rem !important;
+      border-width: 0 !important;
+      border-bottom: none !important;
       margin: 0 !important;
-    }
+      background-color: @accordionMenuItemBackground;
 
-    .dropdown.icon {
-      transform: rotate(-90deg);
-    }
+      .icon {
+        margin: 0 !important;
+      }
 
-    &.active {
       .dropdown.icon {
-        transform: rotate(0);
+        transform: rotate(-90deg);
+      }
+
+      &.active {
+        .dropdown.icon {
+          transform: rotate(0);
+        }
       }
     }
-  }
 
-  &.red {
-    .ui.item.active {
-      background-color: @red !important;
-      color: #fff !important;
+    &.red {
+      .ui.item.active {
+        background-color: @red !important;
+        color: #fff !important;
+      }
     }
-  }
 
-  &.orange {
-    .ui.item.active {
-      background-color: @orange !important;
-      color: #fff !important;
+    &.orange {
+      .ui.item.active {
+        background-color: @orange !important;
+        color: #fff !important;
+      }
     }
-  }
 
-  &.yellow {
-    .ui.item.active {
-      background-color: @yellow !important;
-      color: #fff !important;
+    &.yellow {
+      .ui.item.active {
+        background-color: @yellow !important;
+        color: #fff !important;
+      }
     }
-  }
 
-  &.olive {
-    .ui.item.active {
-      background-color: @olive !important;
-      color: #fff !important;
+    &.olive {
+      .ui.item.active {
+        background-color: @olive !important;
+        color: #fff !important;
+      }
     }
-  }
 
-  &.green {
-    .ui.item.active {
-      background-color: @green !important;
-      color: #fff !important;
+    &.green {
+      .ui.item.active {
+        background-color: @green !important;
+        color: #fff !important;
+      }
     }
-  }
 
-  &.teal {
-    .ui.item.active {
-      background-color: @teal !important;
-      color: #fff !important;
+    &.teal {
+      .ui.item.active {
+        background-color: @teal !important;
+        color: #fff !important;
+      }
     }
-  }
 
-  &.blue {
-    .ui.item.active {
-      background-color: @blue !important;
-      color: #fff !important;
+    &.blue {
+      .ui.item.active {
+        background-color: @blue !important;
+        color: #fff !important;
+      }
     }
-  }
 
-  &.violet {
-    .ui.item.active {
-      background-color: @violet !important;
-      color: #fff !important;
+    &.violet {
+      .ui.item.active {
+        background-color: @violet !important;
+        color: #fff !important;
+      }
     }
-  }
 
-  &.purple {
-    .ui.item.active {
-      background-color: @purple !important;
-      color: #fff !important;
+    &.purple {
+      .ui.item.active {
+        background-color: @purple !important;
+        color: #fff !important;
+      }
     }
-  }
 
-  &.brown {
-    .ui.item.active {
-      background-color: @brown !important;
-      color: #fff !important;
+    &.brown {
+      .ui.item.active {
+        background-color: @brown !important;
+        color: #fff !important;
+      }
     }
-  }
 
-  &.grey {
-    .ui.item.active {
-      background-color: @grey !important;
-      color: #fff !important;
+    &.grey {
+      .ui.item.active {
+        background-color: @grey !important;
+        color: #fff !important;
+      }
     }
-  }
 
-  &.black {
-    .ui.item.active {
-      background-color: @black !important;
-      color: #fff !important;
+    &.black {
+      .ui.item.active {
+        background-color: @black !important;
+        color: #fff !important;
+      }
     }
-  }
 
-  .ui.tab {
-    padding: 1rem;
-    margin-bottom: 0;
-    background-color: @accordionTabBackground !important;
+    .ui.tab {
+      padding: 1rem;
+      margin-bottom: 0;
+      background-color: @accordionTabBackground !important;
+    }
   }
 }
 

package/src/utils/index.js

@@ -17,9 +17,12 @@ const getMenuPosition = (data) => {
   if (['bottom'].includes(position)) {
     return {
       attached: position,
+      direction: position,
     };
   }
-  return {};
+  return {
+    direction: position,
+  };
 };
 
 const toggleItem = (container, item, hidden) => {