Merge pull request #28 from eea/develop

feat(accordion): initialize transformWidth with initial container width

CHANGELOG.md

@@ -4,8 +4,20 @@ 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 [email protected] 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)

Jenkinsfile

@@ -6,7 +6,7 @@ pipeline {
         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,circularity.eea.europa.eu"
         DEPENDENCIES = "@eeacms/volto-block-style"
-        VOLTO = "alpha"
+        VOLTO = "16.0.0-alpha.14"
     }
 
   stages {

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.json

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

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,6 +77,7 @@ const View = (props) => {
     const title = tabs[tab].title;
     const defaultTitle = `Tab ${index + 1}`;
     const active = activeTabIndex === index;
+
     return {
       title: (
         <>
@@ -98,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}

src/index.js

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