@eeacms/volto-tabs-block 2.0.1 → 2.2.0

package/CHANGELOG.md

@@ -4,11 +4,37 @@ 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.2.0](https://github.com/eea/volto-tabs-block/compare/2.1.0...2.2.0)
+
+- Update package.json [`11a0af2`](https://github.com/eea/volto-tabs-block/commit/11a0af2bd4a4f4d803a8c51da3a3403725e0c618)
+- use volto@16.0.0-alpha.14 in cypress tests [`80817ac`](https://github.com/eea/volto-tabs-block/commit/80817ac5cf880d01cc44654c1a0325438932b22f)
+- imporve accordion break point [`39a6580`](https://github.com/eea/volto-tabs-block/commit/39a6580e1073505d642693520f9e14d15cbb6270)
+- clean up [`3735cd1`](https://github.com/eea/volto-tabs-block/commit/3735cd171e57bdc02fd46281c9d50b4fba28b213)
+- feat(accordion): initialize transformWidth with initial container width [`b0bc46c`](https://github.com/eea/volto-tabs-block/commit/b0bc46c863bd8b9092523b55460a2733c55336bb)
+- update(jest): add @plone/volto-slate resolver refs- #153447 [`ea75f81`](https://github.com/eea/volto-tabs-block/commit/ea75f8160035137915ca23d9d0c990c318fff448)
+
+#### [2.1.0](https://github.com/eea/volto-tabs-block/compare/2.0.2...2.1.0)
+
+> 1 July 2022
+
+- Adjustments to tabs border [`#27`](https://github.com/eea/volto-tabs-block/pull/27)
+- 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)
-- Apply menu item style on tabs-block only [`fec62b2`](https://github.com/eea/volto-tabs-block/commit/fec62b222bcc07bc102f6d73b89369f57f49512d)
 
 ### [2.0.0](https://github.com/eea/volto-tabs-block/compare/1.3.2...2.0.0)
 

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 = "16.0.0-alpha.14"
     }
 
   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/jest-addon.config.js

@@ -11,7 +11,8 @@ module.exports = {
     '@package/(.*)$': '<rootDir>/src/$1',
     '@plone/volto-quanta/(.*)$': '<rootDir>/src/addons/volto-quanta/src/$1',
     '@eeacms/(.*?)/(.*)$': '<rootDir>/src/addons/$1/src/$2',
-    'volto-slate/(.*)$': '<rootDir>/src/addons/volto-slate/src/$1',
+    '@plone/volto-slate':
+      '<rootDir>/node_modules/@plone/volto/packages/volto-slate/src',
     '~/(.*)$': '<rootDir>/src/$1',
     'load-volto-addons':
       '<rootDir>/node_modules/@plone/volto/jest-addons-loader.js',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-tabs-block",
-  "version": "2.0.1",
+  "version": "2.2.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

@@ -47,8 +47,12 @@ const View = (props) => {
     setActiveTab = () => {},
   } = props;
   const accordionConfig =
-    config.blocks.blocksConfig.tabs_block.templates.accordion;
-  const { icons, semanticIcon } = accordionConfig;
+    config.blocks.blocksConfig[TABS_BLOCK].templates?.['accordion'] || {};
+  const { icons, semanticIcon, transformWidth = 800 } = accordionConfig;
+
+  const tabsContainer = React.useRef();
+  const [mounted, setMounted] = React.useState(false);
+  const [initialWidth, setInitialWidth] = React.useState(transformWidth);
 
   const schema = React.useMemo(
     () =>
@@ -73,11 +77,14 @@ const View = (props) => {
     const title = tabs[tab].title;
     const defaultTitle = `Tab ${index + 1}`;
     const active = activeTabIndex === index;
+
     return {
       title: (
         <>
           {semanticIcon ? (
-            <Icon name={active ? semanticIcon.opened : semanticIcon.closed} />
+            <Icon
+              className={active ? semanticIcon.opened : semanticIcon.closed}
+            />
           ) : (
             <VoltoIcon
               name={active ? icons.opened : icons.closed}
@@ -96,9 +103,23 @@ const View = (props) => {
     };
   });
 
+  React.useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  React.useEffect(() => {
+    if (!mounted) return;
+    const { blockWidth, tabsTotalWidth } = tabsContainer.current?.state || {};
+    setInitialWidth(
+      tabsTotalWidth < blockWidth ? tabsTotalWidth + 1 : blockWidth + 1,
+    );
+  }, [mounted]);
+
   return (
     <>
       <Tabs
+        ref={tabsContainer}
+        transformWidth={initialWidth}
         className="tabs aa"
         selectedTabKey={tabsList[activeTabIndex]}
         items={items}

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/index.js

@@ -49,6 +49,7 @@ export default (config) => {
         edit: AccordionEdit,
         view: AccordionView,
         schema: accordionSchema,
+        transformWidth: 800,
         icons: {
           closed: rightSVG,
           opened: downSVG,

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