@eeacms/volto-tabs-block 2.0.2 → 2.1.0

package/CHANGELOG.md

@@ -4,9 +4,17 @@ 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.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)
 
-- Fix Icon name warning: [`0c72628`](https://github.com/eea/volto-tabs-block/commit/0c726288cd851f676c5942702118215bd4bae4ab)
+> 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)
 

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.2",
+  "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/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 {

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) => {