@eeacms/volto-tabs-block 7.0.4 → 7.5.0

package/CHANGELOG.md

@@ -4,6 +4,48 @@ 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).
 
+### [7.5.0](https://github.com/eea/volto-tabs-block/compare/7.0.5...7.5.0) - 7 March 2024
+
+#### :boom: Breaking Change
+
+- breaking(tabs): menu-item-text markup is now span instead of p tag [David Ichim - [`5aa7981`](https://github.com/eea/volto-tabs-block/commit/5aa798140654b4b6e3487c082483640432eddd65)]
+
+#### :bug: Bug Fixes
+
+- fix(tests): after change from p tag to reference the .menu-item-text class [David Ichim - [`9a45825`](https://github.com/eea/volto-tabs-block/commit/9a45825f80162f734872786fd0fe9359dd57ad9f)]
+- fix: update 'Add Tabs default template' cypress test - Default tabs text to be inside a span within the tab link instead of a p tag [Claudia Ifrim - [`4209573`](https://github.com/eea/volto-tabs-block/commit/4209573f6ab25019814902ec38685f908958f6a7)]
+- fix: remove AccordionEdit import form index [Claudia Ifrim - [`24323cc`](https://github.com/eea/volto-tabs-block/commit/24323cc0e0c674697fddac62df22c646785ec41b)]
+
+#### :nail_care: Enhancements
+
+- change(tabs): use default edit for accordion tab edit [David Ichim - [`7ed5f4e`](https://github.com/eea/volto-tabs-block/commit/7ed5f4e61ab1747ede5641138119c47d8b3dd6c1)]
+
+#### :house: Internal changes
+
+- style: Automated code fix [eea-jenkins - [`e37f2d4`](https://github.com/eea/volto-tabs-block/commit/e37f2d4c26a9ff72ffb09263caa96c55e3161551)]
+- style: Automated code fix [eea-jenkins - [`0520da7`](https://github.com/eea/volto-tabs-block/commit/0520da7ad50e7be1d62d574308d4acc5a858a401)]
+
+#### :hammer_and_wrench: Others
+
+- Bump package version to 7.5 from 7.0.5 [David Ichim - [`a675429`](https://github.com/eea/volto-tabs-block/commit/a675429308f6d9a2b39e101396e7a5b195982f30)]
+- Prettier and stylelint [David Ichim - [`f6182d1`](https://github.com/eea/volto-tabs-block/commit/f6182d142b790b2256e24ad7ed49e8904ec73aa8)]
+- Fixed call to stylelint within MakeFile [David Ichim - [`dd53ee8`](https://github.com/eea/volto-tabs-block/commit/dd53ee84f4bb97b55d5d26e0447cff2f07268afc)]
+- Revert "update" [David Ichim - [`ceb8ab7`](https://github.com/eea/volto-tabs-block/commit/ceb8ab7fd216d369ed487a7fe63aec876e2c4624)]
+- fix cypress [Razvan - [`6fe2bb4`](https://github.com/eea/volto-tabs-block/commit/6fe2bb46de04c9c2c0115d3fc97caf9ea5952b6e)]
+- Update react-slick version to 0.30.1 [David Ichim - [`3369176`](https://github.com/eea/volto-tabs-block/commit/33691768899e7f91d2cd15319dbe3ebe66cf1513)]
+- update [Razvan - [`61b19e8`](https://github.com/eea/volto-tabs-block/commit/61b19e8584ff6023320b3671414392ea11449ff0)]
+- use DefaultEdit variation for responsive accordion, refs #266327 [Razvan - [`11acf6c`](https://github.com/eea/volto-tabs-block/commit/11acf6ce5afe022ddd30bff42c9a3321d1284da6)]
+### [7.0.5](https://github.com/eea/volto-tabs-block/compare/7.0.4...7.0.5) - 10 December 2023
+
+#### :rocket: New Features
+
+- feat: add more tests for view/edit component [hazigabriel - [`72d0467`](https://github.com/eea/volto-tabs-block/commit/72d0467e74042b103630aacb8cffafb7c7a4a83f)]
+- feat: refactor custom useQuery hook to avoid uncessary rerender [hazigabriel - [`6f28052`](https://github.com/eea/volto-tabs-block/commit/6f28052336db391ef9c918b2b329da4ae1639850)]
+
+#### :bug: Bug Fixes
+
+- fix: add jest config to fix jenkins error [hazigabriel - [`63fa962`](https://github.com/eea/volto-tabs-block/commit/63fa962f7f49ac8986ff250db57f544292aa951c)]
+
 ### [7.0.4](https://github.com/eea/volto-tabs-block/compare/7.0.3...7.0.4) - 4 December 2023
 
 #### :bug: Bug Fixes
@@ -24,8 +66,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :hammer_and_wrench: Others
 
-- test: [JENKINS] Use java17 for sonarqube scanner [valentinab25 - [`3b87d12`](https://github.com/eea/volto-tabs-block/commit/3b87d12df4d01031231b15eb4196f6ff6937706b)]
-- test: [JENKINS] Run cypress in started frontend container [valentinab25 - [`f5f3430`](https://github.com/eea/volto-tabs-block/commit/f5f343024b45bb0206e0169cce6dd0e8472b6795)]
 ### [7.0.1](https://github.com/eea/volto-tabs-block/compare/7.0.0...7.0.1) - 9 November 2023
 
 #### :bug: Bug Fixes
@@ -35,14 +75,10 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :hammer_and_wrench: Others
 
-- test: [JENKINS] Add cpu limit on cypress docker [valentinab25 - [`bd6ffd4`](https://github.com/eea/volto-tabs-block/commit/bd6ffd42a00a2d77ff59545d9adaab7a45361446)]
-- test: [JENKINS] Increase shm-size to cypress docker [valentinab25 - [`d481e25`](https://github.com/eea/volto-tabs-block/commit/d481e25c4d61d7ff6ea11ff75c99fbdd730ecd82)]
-- test: [JENKINS] Improve cypress time [valentinab25 - [`6c39efc`](https://github.com/eea/volto-tabs-block/commit/6c39efcc30bddfebb6c61f8a8cd714f61828ec69)]
 ## [7.0.0](https://github.com/eea/volto-tabs-block/compare/6.0.3...7.0.0) - 31 October 2023
 
 #### :house: Internal changes
 
-- chore: [JENKINS] Refactor automated testing [valentinab25 - [`f2e3d39`](https://github.com/eea/volto-tabs-block/commit/f2e3d3973c026f0331b82e0f691ec9bdc5899672)]
 
 #### :hammer_and_wrench: Others
 
@@ -255,7 +291,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :house: Internal changes
 
-- chore: [JENKINS] Deprecate circularity website [valentinab25 - [`820aaa9`](https://github.com/eea/volto-tabs-block/commit/820aaa963e978a893a23b77f694bb011f3d768c1)]
 
 #### :hammer_and_wrench: Others
 
@@ -346,7 +381,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :hammer_and_wrench: Others
 
-- Add Sonarqube tag using eea-website-frontend addons list [EEA Jenkins - [`52bc1b0`](https://github.com/eea/volto-tabs-block/commit/52bc1b0fbd4611173b8ca9dc2cf4033b31474420)]
 ## [4.0.0](https://github.com/eea/volto-tabs-block/compare/3.0.1...4.0.0) - 10 March 2023
 
 #### :house: Internal changes
@@ -357,13 +391,7 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 #### :hammer_and_wrench: Others
 
 - Release 4.0.0 [Alin Voinea - [`8fc4cc9`](https://github.com/eea/volto-tabs-block/commit/8fc4cc9d8dc71e623e6586b95871cb3b98dc385f)]
-- Add Sonarqube tag using eea-website-frontend addons list [EEA Jenkins - [`22d5bdc`](https://github.com/eea/volto-tabs-block/commit/22d5bdc1b3579cc46c73ce855041ca09154eb502)]
-- Add Sonarqube tag using advisory-board-frontend addons list [EEA Jenkins - [`fde4324`](https://github.com/eea/volto-tabs-block/commit/fde4324f962cde8e8de0d76a44bee4b67d216bf8)]
-- Add Sonarqube tag using advisory-board-frontend addons list [EEA Jenkins - [`9175e47`](https://github.com/eea/volto-tabs-block/commit/9175e470d793edc63b62a99940aed25dd45f3713)]
 - test(Jenkins): Run tests and cypress with latest canary @plone/volto [Alin Voinea - [`3348950`](https://github.com/eea/volto-tabs-block/commit/334895036f8e367281abb35a20879c32dfbfc292)]
-- Add Sonarqube tag using cca-frontend addons list [EEA Jenkins - [`39bfb39`](https://github.com/eea/volto-tabs-block/commit/39bfb39fa6e8483e639491ff998293e758ac6384)]
-- yarn 3 [Alin Voinea - [`7e98df5`](https://github.com/eea/volto-tabs-block/commit/7e98df59669d71945be461e86e282b913538b805)]
-- Add Sonarqube tag using demo-kitkat-frontend addons list [EEA Jenkins - [`079d7a4`](https://github.com/eea/volto-tabs-block/commit/079d7a43480e92fe280a9372399ff2d4d28537ae)]
 ### [3.0.1](https://github.com/eea/volto-tabs-block/compare/3.0.0...3.0.1) - 16 November 2022
 
 #### :hammer_and_wrench: Others
@@ -387,9 +415,7 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :hammer_and_wrench: Others
 
-- Add Sonarqube tag using marine-frontend addons list [EEA Jenkins - [`a00e419`](https://github.com/eea/volto-tabs-block/commit/a00e419aef4c82a25f277f5e25e3d512c7838264)]
 - lint fix [David Ichim - [`c0a898c`](https://github.com/eea/volto-tabs-block/commit/c0a898c54461478baed2ac2f149ae580d4c89aeb)]
-- Add Sonarqube tag using eea-website-frontend addons list [EEA Jenkins - [`3b284e6`](https://github.com/eea/volto-tabs-block/commit/3b284e65e0eafa9b5ad8c92b4cb77628ffcc8103)]
 ### [2.2.0](https://github.com/eea/volto-tabs-block/compare/2.1.0...2.2.0) - 25 August 2022
 
 #### :hammer_and_wrench: Others
@@ -405,7 +431,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 - Release 2.1.0 [Alin Voinea - [`3cdfa30`](https://github.com/eea/volto-tabs-block/commit/3cdfa30d4d03d864be8ad63f0648b4717298734a)]
 - Squashed commit of the following: [Alin Voinea - [`ca241f5`](https://github.com/eea/volto-tabs-block/commit/ca241f56a96817679a1948154e2a8cc0e17b96fe)]
-- Add Sonarqube tag using circularity-frontend addons list [EEA Jenkins - [`68ea5a6`](https://github.com/eea/volto-tabs-block/commit/68ea5a6b971fc36840cf5716a04f68316b229b2b)]
 ### [2.0.2](https://github.com/eea/volto-tabs-block/compare/2.0.1...2.0.2) - 16 June 2022
 
 ### [2.0.1](https://github.com/eea/volto-tabs-block/compare/2.0.0...2.0.1) - 10 June 2022
@@ -449,8 +474,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - Let theme addon to set default values for default template schema [Miu Razvan - [`55f148d`](https://github.com/eea/volto-tabs-block/commit/55f148d1a95417f8a0b55681ce250acde8463c1c)]
 - Render pane as container if tabs-block has full-width class [Miu Razvan - [`bbffb96`](https://github.com/eea/volto-tabs-block/commit/bbffb96b908476ddee447af3ce79bafb1a12f9a8)]
 - Refactor default template [Miu Razvan - [`58eff52`](https://github.com/eea/volto-tabs-block/commit/58eff5281adb08a5f8fe6d21fd43330252012277)]
-- Add Sonarqube tag using clms-frontend addons list [EEA Jenkins - [`72a6735`](https://github.com/eea/volto-tabs-block/commit/72a6735cbbc0e7d57b4bb7ea83fea9becc317018)]
-- Add Sonarqube tag using eea-website-frontend addons list [EEA Jenkins - [`e928da1`](https://github.com/eea/volto-tabs-block/commit/e928da1df7e4680bd4be9b5d46406800d721b8c5)]
 ### [1.2.12](https://github.com/eea/volto-tabs-block/compare/1.2.11...1.2.12) - 21 January 2022
 
 ### [1.2.11](https://github.com/eea/volto-tabs-block/compare/1.2.10...1.2.11) - 4 January 2022
@@ -465,17 +488,11 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :hammer_and_wrench: Others
 
-- Add Sonarqube tag using freshwater-frontend addons list [EEA Jenkins - [`cd2e2ac`](https://github.com/eea/volto-tabs-block/commit/cd2e2ac1d127bfc688ecf16e17734603ab727a34)]
 ### [1.2.8](https://github.com/eea/volto-tabs-block/compare/1.2.7...1.2.8) - 10 December 2021
 
 #### :hammer_and_wrench: Others
 
 - Refs #142010 - Optimize Volto-addons gitflow pipelines [valentinab25 - [`d10c0b3`](https://github.com/eea/volto-tabs-block/commit/d10c0b3d35d25c530d19eebde38dfe5da8fda01b)]
-- Add Sonarqube tag using industry-frontend addons list [EEA Jenkins - [`1a7187f`](https://github.com/eea/volto-tabs-block/commit/1a7187f10b2bd9e1307dabf51823f63ccd766864)]
-- Add Sonarqube tag using clms-frontend addons list [EEA Jenkins - [`72a7550`](https://github.com/eea/volto-tabs-block/commit/72a755025b38e1d8dd7fe206273a70585e4b9ac8)]
-- Add Sonarqube tag using forests-frontend addons list [EEA Jenkins - [`022b277`](https://github.com/eea/volto-tabs-block/commit/022b2779a5d7fd7217c2d8a559eafab0bd86ce23)]
-- Add Sonarqube tag using sustainability-frontend addons list [EEA Jenkins - [`84c9bea`](https://github.com/eea/volto-tabs-block/commit/84c9bea7a0aba2fe9ef9713e7131de6da6e0bcce)]
-- Add Sonarqube tag using ims-frontend addons list [EEA Jenkins - [`020aa97`](https://github.com/eea/volto-tabs-block/commit/020aa97bc70a643ea3857566c5a1dc3a5200c2be)]
 ### [1.2.7](https://github.com/eea/volto-tabs-block/compare/1.2.6...1.2.7) - 27 August 2021
 
 #### :hammer_and_wrench: Others
@@ -492,8 +509,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 - Move less import in View instead of Edit [Tiberiu Ichim - [`84aeff0`](https://github.com/eea/volto-tabs-block/commit/84aeff04a980076f54687c546691d37b6e790478)]
 - gitignore tweaks [Tiberiu Ichim - [`f4c993d`](https://github.com/eea/volto-tabs-block/commit/f4c993d004b126f08f16651ab9460546fa9e9cad)]
-- Add Sonarqube tag using frontend addons list [EEA Jenkins - [`865906a`](https://github.com/eea/volto-tabs-block/commit/865906a0deb261d44cc23e26bfd2d1dd0e319640)]
-- Add Sonarqube tag using frontend addons list [EEA Jenkins - [`5383861`](https://github.com/eea/volto-tabs-block/commit/538386100adbc868e693c1c2a5ba13461307ffee)]
 - Style update [razvanMiu - [`323aaaf`](https://github.com/eea/volto-tabs-block/commit/323aaafcad01d8fdf0e713a1fc254ae9fe319f43)]
 - Fix 'scroll to' feature on carousel [razvanMiu - [`16c6a08`](https://github.com/eea/volto-tabs-block/commit/16c6a08f6db687542ea38e07a92b265e592f6173)]
 - Better accesibility [razvanMiu - [`3511611`](https://github.com/eea/volto-tabs-block/commit/351161197270a4807f01d85a7055cbaadae72f8e)]

package/jest-addon.config.js

@@ -19,6 +19,7 @@ module.exports = {
     'load-volto-addons':
       '<rootDir>/node_modules/@plone/volto/jest-addons-loader.js',
   },
+  transformIgnorePatterns: ['node_modules/(?!@eeacms)/volto-anchors/helpers'],
   transform: {
     '^.+\\.js(x)?$': 'babel-jest',
     '^.+\\.(png)$': 'jest-file',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-tabs-block",
-  "version": "7.0.4",
+  "version": "7.5.0",
   "description": "volto-tabs-block: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -24,7 +24,7 @@
     "@eeacms/volto-anchors": "*",
     "@eeacms/volto-block-style": "*",
     "react-responsive-tabs": "4.4.3",
-    "react-slick": "^0.24.0",
+    "react-slick": "^0.30.1",
     "slick-carousel": "^1.8.1"
   },
   "devDependencies": {

package/src/components/View.jsx

@@ -33,12 +33,11 @@ const View = (props) => {
 
   const TabsView = activeTemplate?.[0]?.view || DefaultView;
 
-  const useQuery = () => {
+  const query = React.useMemo(() => {
     const { search } = location;
-    return React.useMemo(() => new URLSearchParams(search), [search]);
-  };
 
-  const query = useQuery();
+    return new URLSearchParams(search);
+  }, [location]);
   const activeTabId = query.get('activeTab');
 
   const addQueryParam = (key, value) => {

package/src/components/View.test.jsx

@@ -0,0 +1,109 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import { BrowserRouter as Router } from 'react-router-dom';
+import View from './View';
+import config from '@plone/volto/registry';
+import configureStore from 'redux-mock-store';
+import { Provider } from 'react-intl-redux';
+import '@testing-library/jest-dom/extend-expect';
+
+config.blocks.blocksConfig = {
+  tabs_block: {
+    variations: [{ id: 'default' }, { id: 'accordion' }],
+  },
+};
+config.settings = {
+  integratesBlockStyles: [],
+};
+jest.mock('react-router', () => ({
+  withRouter: (WrapperComponent) => (props) => {
+    return (
+      <WrapperComponent
+        {...props}
+        location={{
+          pathname: '/',
+          search: '?activeTab=tab1',
+          hash: '',
+          key: 'qruhb8',
+        }}
+        history={{
+          push: jest.fn(),
+        }}
+      />
+    );
+  },
+}));
+
+jest.mock('@eeacms/volto-block-style/StyleWrapper', () => ({
+  StyleWrapperView: (props) => {
+    return <div className="mocked-style-wrapper">{props.children}</div>;
+  },
+}));
+const mockStore = configureStore();
+const store = mockStore({
+  intl: {
+    locale: 'en',
+    messages: {},
+  },
+});
+
+describe('View Component', () => {
+  it('Should render and switch Tabs', () => {
+    const customTabsData = {
+      blocks_layout: {
+        items: ['tab1', 'tab2', 'tab3'],
+      },
+      blocks: {
+        tab1: {
+          title: 'Tab 1 Title',
+          content: 'Tab 1 Content',
+        },
+        tab2: {
+          title: 'Tab 2 Title',
+          content: 'Tab 2 Content',
+        },
+        tab3: {
+          title: 'Tab 3 Title',
+          content: 'Tab 3 Content',
+        },
+      },
+    };
+
+    const { container, getByText } = render(
+      <Provider store={store}>
+        <Router>
+          <View data={{ variation: 'default', data: customTabsData }} />
+        </Router>
+      </Provider>,
+    );
+    const tabItemsMenu = container.querySelectorAll(
+      '.ui.tabs-secondary-variant.menu a',
+    );
+
+    expect(
+      container.querySelector('.tabs-block.default.light.flex-start'),
+    ).toBeInTheDocument();
+    expect(
+      container.querySelector('.default.tabs.tabs-accessibility'),
+    ).toBeInTheDocument();
+    expect(
+      container.querySelector('.ui.tabs-secondary-variant.menu'),
+    ).toBeInTheDocument();
+    expect(
+      container.getElementsByClassName('mocked-style-wrapper'),
+    ).toHaveLength(2);
+    expect(getByText('Tab 1 Title')).toBeInTheDocument();
+
+    fireEvent.click(getByText('Tab 2 Title'));
+    expect(tabItemsMenu).toHaveLength(3);
+    expect(tabItemsMenu[0].classList.contains('item'));
+    expect(tabItemsMenu[0].classList).not.toContain('active');
+    expect(tabItemsMenu[1].classList.contains('active'));
+
+    fireEvent.click(getByText('Tab 1 Title'));
+    expect(tabItemsMenu).toHaveLength(3);
+    expect(tabItemsMenu[1].classList.contains('item'));
+    expect(tabItemsMenu[1].classList).not.toContain('active');
+    expect(tabItemsMenu[0].classList.contains('active'));
+  });
+});

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

@@ -1,214 +1,25 @@
-import React from 'react';
-import cx from 'classnames';
-import { isEmpty } from 'lodash';
-import { useIntl } from 'react-intl';
-import Tabs from 'react-responsive-tabs';
-import EditBlockWrapper from '@eeacms/volto-tabs-block/components/EditBlockWrapper';
-import { MenuItem } from '@eeacms/volto-tabs-block/components/templates/default/Edit';
-import { emptyBlocksForm } from '@plone/volto/helpers';
-import { Icon } from 'semantic-ui-react';
-import { Icon as VoltoIcon, BlocksForm } from '@plone/volto/components';
-import config from '@plone/volto/registry';
-import { TABS_BLOCK } from '@eeacms/volto-tabs-block/constants';
-import { getParentTabFromHash } from '@eeacms/volto-tabs-block/helpers';
-import noop from 'lodash/noop';
-
-import '@eeacms/volto-tabs-block/less/menu.less';
+import Edit from '@eeacms/volto-tabs-block/components/templates/default/Edit';
 import { accordionSchemaEnhancer } from '@eeacms/volto-tabs-block/components/templates/accordion/schema';
+import cx from 'classnames';
 
-class Tab extends React.Component {
-  render() {
-    return this.props.children;
-  }
-}
-
-const Edit = (props) => {
-  const intl = useIntl();
-  const {
-    data = {},
-    tabsList = [],
-    tabs = {},
-    activeTabIndex = 0,
-    setActiveTab = noop,
-    editingTab = null,
-    activeBlock = null,
-    activeTab = null,
-    block = null,
-    setEditingTab = noop,
-    multiSelected = [],
-    manage = false,
-    metadata = null,
-    selected = false,
-    onChangeBlock = noop,
-    onChangeTabData = noop,
-    onSelectBlock = noop,
-    emptyTab = noop,
-    tabsData = {},
-    schema,
-  } = props;
-
-  const { menuInverted, menuSecondary, menuPointing } = data;
-  const accordionConfig = config.blocks.blocksConfig[
-    TABS_BLOCK
-  ].variations.filter((v, _i) => v.id === data.variation);
-  const { icons, semanticIcon, transformWidth = 800 } =
-    accordionConfig?.[0] || {};
-
-  const tabsContainer = React.useRef();
-  const [mounted, setMounted] = React.useState(false);
-  const [hashTab, setHashTab] = React.useState(false);
-  const [initialWidth, setInitialWidth] = React.useState(transformWidth);
-
-  const items = tabsList.map((tab, index) => {
-    const active = activeTabIndex === index;
-
-    return {
-      title: (
-        <>
-          {semanticIcon ? (
-            <div className="tabs-icon">
-              <Icon
-                className={active ? semanticIcon.opened : semanticIcon.closed}
-              />
-            </div>
-          ) : (
-            <div className="tabs-icon">
-              <VoltoIcon
-                name={active ? icons.opened : icons.closed}
-                size={icons.size}
-                className="tabs-icon"
-              />
-            </div>
-          )}
-          <MenuItem
-            {...props}
-            key={tab}
-            editingTab={editingTab}
-            index={index}
-            setEditingTab={setEditingTab}
-            tab={tab}
-            schema={schema}
-          />
-        </>
-      ),
-      content: (
-        <Tab {...props} tab={tab} content={tabs[tab]} aria-hidden={false}>
-          <BlocksForm
-            allowedBlocks={data?.allowedBlocks}
-            description={data?.instructions?.data}
-            manage={manage}
-            metadata={metadata}
-            pathname={props.pathname}
-            properties={isEmpty(tabs[tab]) ? emptyBlocksForm() : tabs[tab]}
-            selected={selected && activeTab === tab && activeBlock}
-            selectedBlock={
-              selected && activeTab === tab && activeBlock ? activeBlock : null
-            }
-            title={data?.placeholder}
-            onChangeField={onChangeTabData}
-            onChangeFormData={(newFormData) => {
-              onChangeBlock(block, {
-                ...data,
-                data: {
-                  ...tabsData,
-                  blocks: {
-                    ...tabsData.blocks,
-                    [activeTab]: {
-                      ...(newFormData.blocks_layout.items.length > 0
-                        ? newFormData
-                        : emptyTab({
-                            schema: schema?.properties?.data?.schema || {},
-                            intl,
-                          })),
-                    },
-                  },
-                },
-              });
-            }}
-            onSelectBlock={(id, selected, e) => {
-              const isMultipleSelection = e
-                ? e.shiftKey || e.ctrlKey || e.metaKey
-                : false;
-              onSelectBlock(
-                id,
-                activeBlock === id ? false : isMultipleSelection,
-                e,
-              );
-              setEditingTab(null);
-            }}
-          >
-            {({ draginfo }, editBlock, blockProps) => {
-              return (
-                <EditBlockWrapper
-                  blockProps={blockProps}
-                  draginfo={draginfo}
-                  multiSelected={multiSelected.includes(blockProps.block)}
-                >
-                  {editBlock}
-                </EditBlockWrapper>
-              );
-            }}
-          </BlocksForm>
-        </Tab>
-      ),
-      key: tab,
-      tabClassName: cx('ui button item title', { active }, 'remove-menu'),
-      panelClassName: cx('ui bottom attached segment tab', {
-        active,
-      }),
-    };
-  });
-
-  React.useEffect(() => {
-    setMounted(true);
-  }, []);
-  React.useEffect(() => {
-    if (!mounted) return;
-    const { blockWidth, tabsTotalWidth } = tabsContainer.current?.state || {};
-    setInitialWidth(
-      tabsTotalWidth < blockWidth ? tabsTotalWidth + 1 : blockWidth + 1,
-    );
-  }, [mounted]);
-
+const AccordionEdit = (props) => {
   return (
-    <Tabs
-      ref={tabsContainer}
-      transformWidth={initialWidth}
-      selectedTabKey={tabsList[activeTabIndex]}
-      unmountOnExit={false}
-      items={items}
-      onChange={() => {
-        const { blockWidth } = tabsContainer.current?.state || {};
-        const tabWithHash = getParentTabFromHash(
-          data,
-          props?.location?.hash.substring(1),
-        );
-        if (tabWithHash === tabsList[activeTabIndex] && !hashTab) {
-          setHashTab(true);
-        } else if (blockWidth <= initialWidth) {
-          setActiveTab(null);
-        }
+    <Edit
+      skipColorOption={true}
+      {...props}
+      addTabsOptions={(data) => {
+        return cx(data?.theme ? `${data?.theme}` : '', {
+          RRT__tabs: true,
+          'tabs-accordion-icon-right': data.accordionIconRight,
+          'tabs-accessibility': true,
+          inverted: data.menuInverted,
+          pointing: data.menuPointing,
+        });
       }}
-      tabsWrapperClass={cx(
-        props?.data?.accordionIconRight ? 'tabs-accordion-icon-right' : '',
-        'ui fluid menu tabs-secondary-variant',
-        'tabs-accessibility',
-        data?.theme ? `${data?.theme}` : '',
-        {
-          inverted: menuInverted,
-        },
-        {
-          pointing: menuPointing,
-        },
-        {
-          secondary: menuSecondary,
-        },
-      )}
-      showMore={false}
     />
   );
 };
 
-Edit.schemaEnhancer = accordionSchemaEnhancer;
+AccordionEdit.schemaEnhancer = accordionSchemaEnhancer;
 
-export default Edit;
+export default AccordionEdit;

package/src/components/templates/accordion/index.js

@@ -1,4 +1,4 @@
-import AccordionEdit from './Edit';
 import AccordionView from './View';
+import AccordionEdit from './Edit';
 
-export { AccordionEdit, AccordionView };
+export { AccordionView, AccordionEdit };

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

@@ -170,7 +170,7 @@ export const MenuItem = (props) => {
             }}
             className="remove-margin addition-button"
           >
-            <p className="menu-item-text">+</p>
+            <span className="menu-item-text">+</span>
           </Menu.Item>
         </>
       ) : (
@@ -202,6 +202,8 @@ const Edit = (props) => {
     onSelectBlock = noop,
     setEditingTab = noop,
     schema,
+    skipColorOption = false,
+    customTabsClass = '',
   } = props;
   const menuPosition = getMenuPosition(data);
   const {
@@ -304,16 +306,15 @@ const Edit = (props) => {
       },
     };
   });
-
   return (
     <>
       <Tab
         activeIndex={activeTabIndex}
-        className="default tabs"
+        className={cx('default tabs', customTabsClass)}
         menu={{
           attached: menuPosition.attached,
           borderless: menuBorderless,
-          color: menuColor,
+          color: !skipColorOption && menuColor,
           compact: menuCompact,
           fluid: menuFluid,
           inverted: menuInverted,
@@ -333,6 +334,7 @@ const Edit = (props) => {
             menuPosition.direction === 'top' ? 'border-bottom' : '',
             menuPosition.direction === 'bottom' ? 'border-top' : '',
             { container: isContainer },
+            props.addTabsOptions ? props.addTabsOptions(data) : '',
           ),
         }}
         menuPosition={menuPosition.direction}

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

@@ -66,7 +66,7 @@ export const AssetTab = ({ props, tabIndex, tabTitle }) => {
       {!hideTitle && (
         <div>
           <span className="menu-item-count">{tabIndex}</span>
-          <p className="menu-item-text">{tabTitle}</p>
+          <span className="menu-item-text">{tabTitle}</span>
         </div>
       )}
     </div>
@@ -143,7 +143,7 @@ const MenuItem = (props) => {
           ) : (
             <>
               <span className="menu-item-count">{tabIndex}</span>
-              <p className="menu-item-text">{tabTitle}</p>
+              <span className="menu-item-text">{tabTitle}</span>
             </>
           )}
         </>

package/src/components/templates/horizontal-responsive/Edit.jsx

@@ -134,9 +134,9 @@ const MenuItem = (props) => {
             <span className={'menu-item-count'} item-data={tab}>
               {tabIndex}
             </span>
-            <p className={'menu-item-text'} item-data={tab}>
+            <span className={'menu-item-text'} item-data={tab}>
               {title || defaultTitle}
-            </p>
+            </span>
           </>
         )}
       </Menu.Item>
@@ -270,7 +270,9 @@ const MenuWrapper = (props) => {
                 }}
               >
                 <span className={'menu-item-count'}>{underlineIndex + 1}</span>
-                <p className={'menu-item-text'}>{title || defaultTitle}</p>
+                <span className={'menu-item-text'}>
+                  {title || defaultTitle}
+                </span>
               </Dropdown.Item>
             );
           })}

package/src/components/templates/horizontal-responsive/View.jsx

@@ -88,7 +88,7 @@ const MenuItem = (props) => {
         }}
       >
         <span className={'menu-item-count'}>{tabIndex}</span>
-        <p className={'menu-item-text'}>{title || defaultTitle}</p>
+        <span className={'menu-item-text'}>{title || defaultTitle}</span>
       </Button>
     </React.Fragment>
   );
@@ -169,7 +169,9 @@ const MenuWrapper = (props) => {
                 }}
               >
                 <span className={'menu-item-count'}>{underlineIndex + 1}</span>
-                <p className={'menu-item-text'}>{title || defaultTitle}</p>
+                <span className={'menu-item-text'}>
+                  {title || defaultTitle}
+                </span>
               </Dropdown.Item>
             );
           })}

package/src/index.js

@@ -14,6 +14,7 @@ import {
   TabsView,
   blockSchema,
 } from '@eeacms/volto-tabs-block/components';
+
 import { TABS_BLOCK } from './constants';
 import { TabsWidget } from './widgets';
 

package/src/less/menu.less

@@ -21,7 +21,7 @@
     border-width: 0 0 4px 0;
   }
 
-  .ui.secondary.inverted.menu .active.item:not(.remove-margin) {
+  .ui.secondary.inverted.menu .active.item {
     background-color: @menuItemInvertedActiveBackgroundColor !important;
   }
 
@@ -43,7 +43,7 @@
     cursor: pointer;
   }
 
-  .ui.menu:not(.inverted, .pointing) .active.item:not(.remove-margin) {
+  .ui.menu:not(.inverted, .pointing) .active.item {
     background-color: @menuItemActiveBackgroundColor;
   }