@eeacms/volto-tabs-block 6.0.0 → 6.0.1

package/CHANGELOG.md

@@ -4,7 +4,51 @@ 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).
 
-### [6.0.0](https://github.com/eea/volto-tabs-block/compare/5.1.0...6.0.0) - 26 September 2023
+### [6.0.1](https://github.com/eea/volto-tabs-block/compare/6.0.0...6.0.1) - 29 September 2023
+
+#### :bug: Bug Fixes
+
+- fix(edit): block description due to typo [David Ichim - [`942dbb4`](https://github.com/eea/volto-tabs-block/commit/942dbb47230ff115d5dfc3387d4e699f0b23c152)]
+
+#### :nail_care: Enhancements
+
+- change(tabs): refactor accordion template to use accordion classes refs #256605 #63 from eea/fix-inverted-css [ichim-david - [`5d29463`](https://github.com/eea/volto-tabs-block/commit/5d29463ff58fec4cddefc874369d70e5165923eb)]
+- change(tabs): removed styling for RRT_accordion regarding colors since the options were removed [David Ichim - [`23e33b1`](https://github.com/eea/volto-tabs-block/commit/23e33b181dfd40878d4f987d236aa11cf06898a2)]
+- change(tabs): removed theme styling from package as we already have the styling in volto-eea-design-system [David Ichim - [`d4280b1`](https://github.com/eea/volto-tabs-block/commit/d4280b162f3d572d3095a39d0febccc22a750df5)]
+- change(responsive-tabs): removed rtabs styling, pointing and secondary option from accordion template [David Ichim - [`e084ccc`](https://github.com/eea/volto-tabs-block/commit/e084ccc721e89d62496dabacb068a159ba267cf9)]
+
+#### :house: Documentation changes
+
+- docs: Update README and DEVELOP [Alin Voinea - [`e35251d`](https://github.com/eea/volto-tabs-block/commit/e35251d1891faf8a9ac801a965c9c4f15669a927)]
+
+#### :hammer_and_wrench: Others
+
+- test: increase cypress timeout [ana-oprea - [`e3175ba`](https://github.com/eea/volto-tabs-block/commit/e3175bad72169d345dfde75528cf9e15839622a8)]
+- restore test to bump test coverage [David Ichim - [`fbc2291`](https://github.com/eea/volto-tabs-block/commit/fbc22910a4cb8c61f383f529a47faf1b8fbed6be)]
+- end cypress tests with contains statements [David Ichim - [`8bae801`](https://github.com/eea/volto-tabs-block/commit/8bae801c3a7a396b634008af131d4bf40e5736fc)]
+- comment cypress flaky test for now [David Ichim - [`3e679be`](https://github.com/eea/volto-tabs-block/commit/3e679beefdaf061fb114bf3cfb24a6e660cb32b3)]
+- added pointing and secondary tab options also to the accordion responsive template for backward compatibility [David Ichim - [`7a03e3d`](https://github.com/eea/volto-tabs-block/commit/7a03e3d1cd24c281a30c7d02339e1b7122a3f321)]
+- removed color property condition regarding theme colors as that concerns only the accordion template [David Ichim - [`a6f975a`](https://github.com/eea/volto-tabs-block/commit/a6f975affbd85c326f889665902d7c0bf38d3111)]
+- break basic block test into 2 tests since we tested the carousel template [David Ichim - [`ef2c02b`](https://github.com/eea/volto-tabs-block/commit/ef2c02b1c062227631308ea66ad97a9a5bed6306)]
+- modified accordion template test to catch more conditions thus increasing test coverage [David Ichim - [`2345325`](https://github.com/eea/volto-tabs-block/commit/2345325ff0070b845226bf59612a24cc0e2815ac)]
+- add tabs-secondary-variant class tabs for default and accordion variant [David Ichim - [`ff9d558`](https://github.com/eea/volto-tabs-block/commit/ff9d558055ebb51b2979be5aa5d1fa2aacc859cc)]
+- typo fixing in carousel template [David Ichim - [`56341d0`](https://github.com/eea/volto-tabs-block/commit/56341d026eee7352280c4433a908e34e2186d161)]
+- lint fix [David Ichim - [`fb5b681`](https://github.com/eea/volto-tabs-block/commit/fb5b681e5d3821bdf8f8957ff6d9bf97998e4273)]
+- bump package version due to major changes to themes functionality [David Ichim - [`c889732`](https://github.com/eea/volto-tabs-block/commit/c8897320c1548b8242653116804f408681f5ffc7)]
+- lint fix [David Ichim - [`2ef951f`](https://github.com/eea/volto-tabs-block/commit/2ef951fbe231f467dc78693d737d332125ad2a3a)]
+- bring back logic that reads the width of the component to determine if we have accordion or tabs [David Ichim - [`807ce46`](https://github.com/eea/volto-tabs-block/commit/807ce46647ad78eaa514b5951d3dc950e43738a6)]
+- removed extra scrollbar when editing the tab name [David Ichim - [`76f8702`](https://github.com/eea/volto-tabs-block/commit/76f870265017ae066c281b4f4bd1bb9a9eee266b)]
+- bring back resize detector in order to correctly get the re-render of tab to accordion [David Ichim - [`0d72f04`](https://github.com/eea/volto-tabs-block/commit/0d72f0417d0c6a9f049a6affda65adab7fda3f4a)]
+- Update 01-block-tabs.cy.js [dobri1408 - [`85a0fdb`](https://github.com/eea/volto-tabs-block/commit/85a0fdb1582df87f731ab33402e2a20d2f4a13b5)]
+- test accordion template [Dobricean Ioan Dorian - [`58ba666`](https://github.com/eea/volto-tabs-block/commit/58ba666b50e6f5a549f105c772127380ab0b5b27)]
+- add test [Dobricean Ioan Dorian - [`02b47d0`](https://github.com/eea/volto-tabs-block/commit/02b47d0ecabf4f8b84c7fc6b8ed8b2411b9e3965)]
+- fix stylelint [Dobricean Ioan Dorian - [`a9c0c2d`](https://github.com/eea/volto-tabs-block/commit/a9c0c2d1937655734c6fbed4265da1cb9275da65)]
+- remove resizedetector [Dobricean Ioan Dorian - [`37cf3c5`](https://github.com/eea/volto-tabs-block/commit/37cf3c5ab516c965aade05f57acf89eb71993017)]
+- tabs [Dobricean Ioan Dorian - [`e6a1a45`](https://github.com/eea/volto-tabs-block/commit/e6a1a45640203b55eac96386529964b20ac11311)]
+- remove RRT_accordion styles [Dobricean Ioan Dorian - [`d82887a`](https://github.com/eea/volto-tabs-block/commit/d82887a89c2e65360c8cb08c790e9a2c211222c4)]
+- WIP using accordion classes instead of relying on styling menu as accordion [David Ichim - [`e50ef8b`](https://github.com/eea/volto-tabs-block/commit/e50ef8b7fed8a8aa96ee1a013efff51c856f3a93)]
+- fix css inverted [Dobricean Ioan Dorian - [`fdf86b5`](https://github.com/eea/volto-tabs-block/commit/fdf86b5db107f506c5d914c0d91fbc190fc2f35e)]
+## [6.0.0](https://github.com/eea/volto-tabs-block/compare/5.1.0...6.0.0) - 26 September 2023
 
 #### :rocket: New Features
 
@@ -84,6 +128,7 @@ 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
 
@@ -174,6 +219,7 @@ 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
@@ -184,7 +230,13 @@ 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
@@ -208,7 +260,9 @@ 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
@@ -224,6 +278,7 @@ 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
@@ -267,6 +322,8 @@ 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
@@ -281,11 +338,17 @@ 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
@@ -302,6 +365,8 @@ 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/DEVELOP.md

@@ -16,26 +16,26 @@
 
 1. Go to http://localhost:3000
 
-1.  Happy hacking!
+1. Initialize git hooks
 
     ```Bash
-    cd src/addons/volto-tabs-block/
+    yarn prepare
     ```
 
+1. Happy hacking!
+
 ### Or add @eeacms/volto-tabs-block to your Volto project
 
 Before starting make sure your development environment is properly set. See [Volto Developer Documentation](https://docs.voltocms.com/getting-started/install/)
 
 1.  Make sure you have installed `yo`, `@plone/generator-volto` and `mrs-developer`
 
-        $ npm install -g yo
-        $ npm install -g @plone/generator-volto
-        $ npm install -g mrs-developer
+        npm install -g yo @plone/generator-volto mrs-developer
 
 1.  Create new volto app
 
-        $ yo @plone/volto my-volto-project --addon @eeacms/volto-tabs-block
-        $ cd my-volto-project
+        yo @plone/volto my-volto-project --addon @eeacms/volto-tabs-block --skip-install
+        cd my-volto-project
 
 1.  Add the following to `mrs.developer.json`:
 
@@ -50,29 +50,26 @@ Before starting make sure your development environment is properly set. See [Vol
 
 1.  Install
 
-        $ yarn develop
-        $ yarn
+        make develop
+        yarn
 
 1.  Start backend
 
-        $ docker pull plone
-        $ docker run -d --name plone -p 8080:8080 -e SITE=Plone -e PROFILES="profile-plone.restapi:blocks" plone
+        docker run --pull always -it --rm --name plone -p 8080:8080 -e SITE=Plone plone/plone-backend
 
     ...wait for backend to setup and start - `Ready to handle requests`:
 
-        $ docker logs -f plone
-
     ...you can also check http://localhost:8080/Plone
 
 1.  Start frontend
 
-        $ yarn start
+        yarn start
 
 1.  Go to http://localhost:3000
 
 1.  Happy hacking!
 
-        $ cd src/addons/volto-tabs-block/
+        cd src/addons/volto-tabs-block/
 
 ## Cypress
 

package/README.md

@@ -18,7 +18,11 @@
 
 ## Features
 
-![Tabs](./docs/volto-tabs-block.gif)
+#### IMPORTANT! Because this depends on @eeacms/volto-block-style, you should always load this addon as the last addon in Volto project configuration or after @eeacms/volto-block-style.
+
+###
+
+![Tabs](https://github.com/eea/volto-tabs-block/raw/master/docs/volto-tabs-block.gif)
 
 ## Getting started
 
@@ -41,25 +45,25 @@ Go to http://localhost:3000
 
 1. Start Volto frontend
 
-- If you already have a volto project, just update `package.json`:
+* If you already have a volto project, just update `package.json`:
 
-  ```JSON
-  "addons": [
-      "@eeacms/volto-tabs-block"
-  ],
+   ```JSON
+   "addons": [
+       "@eeacms/volto-tabs-block"
+   ],
 
-  "dependencies": {
-      "@eeacms/volto-tabs-block": "*"
-  }
-  ```
+   "dependencies": {
+       "@eeacms/volto-tabs-block": "*"
+   }
+   ```
 
-- If not, create one:
+* If not, create one:
 
-  ```
-  npm install -g yo @plone/generator-volto
-  yo @plone/volto my-volto-project --canary --addon @eeacms/volto-tabs-block
-  cd my-volto-project
-  ```
+   ```
+   npm install -g yo @plone/generator-volto
+   yo @plone/volto my-volto-project --canary --addon @eeacms/volto-tabs-block
+   cd my-volto-project
+   ```
 
 1. Install new add-ons and restart Volto:
 

package/cypress.config.js

@@ -2,7 +2,7 @@ const { defineConfig } = require('cypress');
 
 module.exports = defineConfig({
   viewportWidth: 1280,
-  defaultCommandTimeout: 5000,
+  defaultCommandTimeout: 10000,
   chromeWebSecurity: false,
   reporter: 'junit',
   video: true,

package/package.json

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

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

@@ -15,7 +15,6 @@ import { TABS_BLOCK } from '@eeacms/volto-tabs-block/constants';
 import { withScrollToTarget } from '@eeacms/volto-tabs-block/hocs';
 import { getParentTabFromHash } from '@eeacms/volto-tabs-block/helpers';
 import noop from 'lodash/noop';
-import 'react-responsive-tabs/styles.css';
 import '@eeacms/volto-tabs-block/less/menu.less';
 
 const MenuItem = (props) => {
@@ -364,13 +363,18 @@ const Edit = (props) => {
       }}
       tabsWrapperClass={cx(
         props?.data?.accordionIconRight ? 'tabs-accordion-icon-right' : '',
-        'ui pointing secondary menu',
+        'ui fluid menu tabs-secondary-variant',
         'tabs-accessibility',
-        data?.theme ? `theme-${data?.theme}` : '',
+        data?.theme ? `${data?.theme}` : '',
         {
           inverted: getDataValue('menuInverted'),
         },
-        'ui fluid pointing secondary menu',
+        {
+          pointing: getDataValue('menuPointing'),
+        },
+        {
+          secondary: getDataValue('menuSecondary'),
+        },
       )}
       showMore={false}
     />

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

@@ -12,12 +12,14 @@ import { withScrollToTarget } from '@eeacms/volto-tabs-block/hocs';
 import { getParentTabFromHash } from '@eeacms/volto-tabs-block/helpers';
 import noop from 'lodash/noop';
 
-import 'react-responsive-tabs/styles.css';
+import { withResizeDetector } from 'react-resize-detector';
+
 import '@eeacms/volto-tabs-block/less/menu.less';
 
 class Tab extends React.Component {
   constructor() {
     super();
+    this.animateId = null;
     this.state = {
       height: 0,
     };
@@ -25,11 +27,14 @@ class Tab extends React.Component {
 
   componentDidMount() {
     if (this.state.height === 0) {
-      requestAnimationFrame(() => {
+      this.animateId = requestAnimationFrame(() => {
         this.setState({ height: 'auto' });
       });
     }
   }
+  componentWillUnmount() {
+    cancelAnimationFrame(this.animateId);
+  }
 
   render() {
     return (
@@ -54,9 +59,9 @@ const View = (props) => {
     tabs = {},
     activeTabIndex = 0,
     setActiveTab = noop,
+    width,
     id,
   } = props;
-
   const accordionConfig =
     config.blocks.blocksConfig[TABS_BLOCK].templates?.['accordion'] || {};
   const { icons, semanticIcon, transformWidth = 800 } = accordionConfig;
@@ -65,6 +70,10 @@ const View = (props) => {
   const [mounted, setMounted] = React.useState(false);
   const [hashTab, setHashTab] = React.useState(false);
   const [initialWidth, setInitialWidth] = React.useState(transformWidth);
+  const tabs_width = tabsContainer?.current?.state?.blockWidth || initialWidth;
+  const [isAccordion, setIsAccordion] = React.useState(
+    tabs_width < initialWidth,
+  );
 
   const schema = React.useMemo(
     () =>
@@ -103,7 +112,7 @@ const View = (props) => {
               size={icons.size}
             />
           )}
-          {title || defaultTitle}{' '}
+          <span>{title || defaultTitle} </span>
         </>
       ),
       content: (
@@ -116,8 +125,13 @@ const View = (props) => {
         />
       ),
       key: tab,
-      tabClassName: cx('ui button item title', { active }),
-      panelClassName: cx('ui bottom attached segment tab', {
+      tabClassName: cx(
+        {
+          active,
+        },
+        isAccordion ? 'title accordion-title' : 'ui item title',
+      ),
+      panelClassName: cx('ui attached segment tab content', {
         active,
       }),
     };
@@ -135,6 +149,10 @@ const View = (props) => {
     );
   }, [mounted]);
 
+  React.useEffect(() => {
+    setIsAccordion(width <= initialWidth);
+  }, [width, initialWidth]);
+
   useLayoutEffect(() => {
     if (document.activeElement.role !== 'tab') return;
     if (
@@ -149,6 +167,7 @@ const View = (props) => {
       activeTabDiv.focus();
     }
   }, [activeTabIndex, id]);
+
   return (
     <div
       tabIndex="0"
@@ -182,13 +201,22 @@ const View = (props) => {
           }
         }}
         tabsWrapperClass={cx(
-          props?.data?.accordionIconRight ? 'tabs-accordion-icon-right' : '',
-          'ui pointing secondary menu',
-          'tabs-accessibility',
-          data?.theme ? `theme-${data?.theme}` : '',
+          props?.data?.accordionIconRight
+            ? 'tabs-accordion-icon-right'
+            : 'tabs-accordion-icon-left',
+          isAccordion
+            ? 'ui accordion tabs-accessibility'
+            : 'ui menu tabs-accessibility tabs-secondary-variant',
+          data?.theme ? `${data?.theme}` : '',
           {
             inverted: getDataValue('menuInverted'),
           },
+          {
+            pointing: getDataValue('menuPointing'),
+          },
+          {
+            secondary: getDataValue('menuSecondary'),
+          },
         )}
         showMore={false}
       />
@@ -196,4 +224,8 @@ const View = (props) => {
   );
 };
 
-export default compose(withScrollToTarget, withRouter)(View);
+export default compose(
+  withScrollToTarget,
+  withResizeDetector,
+  withRouter,
+)(View);

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

@@ -13,6 +13,14 @@ const messages = defineMessages({
     id: 'menu',
     defaultMessage: 'Menu',
   },
+  MenuPointing: {
+    id: 'menu-pointing',
+    defaultMessage: 'Pointing',
+  },
+  MenuSecondary: {
+    id: 'menu-secondary',
+    defaultMessage: 'Secondary',
+  },
   Style: {
     id: 'style',
     defaultMessage: 'Style',
@@ -54,7 +62,12 @@ export default (config, props) => ({
     {
       id: 'menu',
       title: props.intl.formatMessage(messages.Menu),
-      fields: ['menuInverted', 'accordionIconRight'],
+      fields: [
+        'menuInverted',
+        'menuSecondary',
+        'menuPointing',
+        'accordionIconRight',
+      ],
     },
     {
       id: 'style',
@@ -77,6 +90,14 @@ export default (config, props) => ({
       title: props.intl.formatMessage(messages.Inverted),
       type: 'boolean',
     },
+    menuPointing: {
+      title: props.intl.formatMessage(messages.MenuPointing),
+      type: 'boolean',
+    },
+    menuSecondary: {
+      title: props.intl.formatMessage(messages.MenuSecondary),
+      type: 'boolean',
+    },
     theme: {
       title: props.intl.formatMessage(messages.Theme),
       description: props.intl.formatMessage(

package/src/components/templates/carousel/HorizontalView.jsx

@@ -123,8 +123,8 @@ const View = (props) => {
 
   React.useEffect(() => {
     if (!slider.current?.innerSlider?.list) return;
-    const unfocuseElements = ['a', 'button', 'input'];
-    unfocuseElements.forEach((tag) => {
+    const unfocusedElements = ['a', 'button', 'input'];
+    unfocusedElements.forEach((_tag) => {
       for (let element of slider.current.innerSlider.list.querySelectorAll(
         ".slick-slide[aria-hidden='true'] a",
       )) {
@@ -134,10 +134,10 @@ const View = (props) => {
   }, [activeTab]);
   React.useEffect(() => {
     if (!slider.current?.innerSlider?.list) return;
-    let unaccesibileElements = slider.current.innerSlider.list.querySelectorAll(
+    let inaccessibleElements = slider.current.innerSlider.list.querySelectorAll(
       '.slick-slide',
     );
-    for (let element of unaccesibileElements) {
+    for (let element of inaccessibleElements) {
       element.setAttribute('tabindex', '0');
       element.setAttribute('aria-hidden', 'false');
       element.style.removeProperty('outline');
@@ -147,7 +147,7 @@ const View = (props) => {
         carouselDiv.setAttribute('tabindex', '0');
   }, []);
 
-  const panes = tabsList.map((tab, index) => {
+  const panes = tabsList.map((tab, _index) => {
     return {
       id: tab,
       renderItem: (

package/src/components/templates/carousel/VerticalView.jsx

@@ -27,7 +27,7 @@ const View = (props) => {
     verticalSwiping: true,
   };
 
-  const panes = tabsList.map((tab, index) => {
+  const panes = tabsList.map((tab, _index) => {
     return {
       id: tab,
       renderItem: (

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

@@ -209,7 +209,7 @@ const Edit = (props) => {
           <Tab.Pane as={isContainer ? Container : undefined}>
             <BlocksForm
               allowedBlocks={data?.allowedBlocks}
-              description={data?.instrunctions?.data}
+              description={data?.instructions?.data}
               manage={manage}
               metadata={metadata}
               pathname={props.pathname}
@@ -276,10 +276,7 @@ const Edit = (props) => {
         menu={{
           attached: menuPosition.attached,
           borderless: getDataValue('menuBorderless'),
-          color:
-            props?.template === 'accordion' && props?.data?.theme
-              ? `theme-${props?.data?.theme}`
-              : getDataValue('menuColor'),
+          color: getDataValue('menuColor'),
           compact: getDataValue('menuCompact'),
           fluid: getDataValue('menuFluid'),
           inverted: getDataValue('menuInverted'),
@@ -291,6 +288,7 @@ const Edit = (props) => {
           text: getDataValue('menuText'),
           vertical: menuPosition.vertical,
           className: cx(
+            'tabs-secondary-variant',
             data.menuAlign,
             menuPosition.direction === 'left' ? 'border-right' : '',
             menuPosition.direction === 'right' ? 'border-left' : '',

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

@@ -171,6 +171,7 @@ const View = (props) => {
           text: getDataValue('menuText'),
           vertical: menuPosition.vertical,
           className: cx(
+            'tabs-secondary-variant',
             data.menuAlign,
             menuPosition.direction === 'left' ? 'border-right' : '',
             menuPosition.direction === 'right' ? 'border-left' : '',

package/src/less/menu.less

@@ -12,14 +12,14 @@
   }
 
   .remove-menu {
-    padding-right: 0px !important;
-    padding-bottom: 0px !important;
+    padding-right: 0 !important;
+    padding-bottom: 0 !important;
     overflow-y: hidden;
   }
 
   .remove-menu :not(.RRT__tab--collapsed) {
-    padding-top: 0px !important;
-    padding-left: 0px !important;
+    padding-top: 0 !important;
+    padding-left: 0 !important;
     border-bottom: none !important;
   }
 
@@ -143,13 +143,12 @@
     }
   }
 
-  .RRT__container {
-    .inverted {
-      .RRT__tab.active {
-        background-color: rgba(0, 0, 0, 0.1) !important;
-      }
-    }
+  .RRT__accordion.tabs-accordion-icon-left {
+    --accordion-title-justify: flex-start;
+    --accordion-title-icon-order: 0;
+  }
 
+  .RRT__container {
     > .ui.tab .rah-animating {
       transition: height 0ms ease 0ms !important;
 
@@ -157,364 +156,7 @@
         transition: opacity 0ms ease 0ms !important;
       }
     }
-
-    .RRT__tabs.inverted.ui.secondary.pointing.menu:not(.RRT__accordion) {
-      background-color: @green !important;
-    }
-
-    .inverted .RRT__tab--collapsed {
-      background-color: @green !important;
-    }
-  }
-
-  .ui.menu.RRT__accordion.tabs-accordion-icon-right {
-    .tabs-icon {
-      position: absolute;
-      right: 0%;
-    }
-
-    .item {
-      padding-top: 0.6875rem !important;
-      padding-bottom: 0.6875rem !important;
-    }
-  }
-
-  .ui.menu.RRT__accordion {
-    &::before {
-      display: none;
-    }
-
-    border-bottom: none !important;
-
-    .ui.item {
-      display: flex;
-      width: 100%;
-      padding: 0 1rem !important;
-      border-bottom: 0.0625rem solid #e6e7e8;
-      margin: 0 !important;
-
-      .icon {
-        margin: 0 !important;
-      }
-
-      .dropdown.icon {
-        transform: rotate(-90deg);
-      }
-
-      &.active {
-        .dropdown.icon {
-          transform: rotate(0);
-        }
-      }
-    }
-
-    .RRT__tab:not(.active) .icon {
-      color: #808285;
-    }
-
-    &.theme-primary {
-      .ui.item:not(.active):hover {
-        color: @primaryColor !important;
-
-        .icon {
-          color: @primaryColor !important;
-        }
-      }
-
-      .ui.item.active {
-        background-color: @primaryColor !important;
-        color: #fff !important;
-      }
-
-      .active .menu-item-text {
-        color: #fff !important;
-      }
-    }
-
-    &.theme-secondary {
-      .ui.item:not(.active):hover {
-        color: @secondaryColor !important;
-
-        .icon {
-          color: @secondaryColor !important;
-        }
-      }
-
-      .ui.item.active {
-        background-color: @secondaryColor !important;
-        color: #fff !important;
-      }
-
-      .active .menu-item-text {
-        color: #fff !important;
-      }
-    }
-
-    &.theme-tertiary {
-      .ui.item:not(.active):hover {
-        color: @tertiaryColor !important;
-
-        .icon {
-          color: @tertiaryColor !important;
-        }
-      }
-
-      .ui.item.active {
-        background-color: @tertiaryColor !important;
-        color: #fff !important;
-      }
-
-      .active .menu-item-text {
-        color: #fff !important;
-      }
-    }
-
-    &.red {
-      color: @red !important;
-
-      .ui.item.active {
-        background-color: @red !important;
-        color: #fff !important;
-      }
-
-      .active .menu-item-text {
-        color: #fff !important;
-      }
-    }
-
-    &.orange {
-      .ui.item:hover {
-        color: @orange !important;
-      }
-
-      .ui.item.active {
-        background-color: @orange !important;
-        color: #fff !important;
-      }
-
-      .active .menu-item-text {
-        color: #fff !important;
-      }
-    }
-
-    &.yellow {
-      .ui.item:hover {
-        color: @yellow !important;
-      }
-
-      .ui.item.active {
-        background-color: @yellow !important;
-        color: #fff !important;
-      }
-
-      .active .menu-item-text {
-        color: #fff !important;
-      }
-    }
-
-    &.olive {
-      .ui.item:hover {
-        color: @olive !important;
-      }
-
-      .ui.item.active {
-        background-color: @olive !important;
-        color: #fff !important;
-      }
-
-      .active .menu-item-text {
-        color: #fff !important;
-      }
-    }
-
-    &.green {
-      .ui.item:hover {
-        color: @green !important;
-      }
-
-      .ui.item.active {
-        background-color: @green !important;
-        color: #fff !important;
-      }
-
-      .active .menu-item-text {
-        color: #fff !important;
-      }
-    }
-
-    &.teal {
-      .ui.item:hover {
-        color: @teal !important;
-      }
-
-      .ui.item.active {
-        background-color: @teal !important;
-        color: #fff !important;
-      }
-
-      .active .menu-item-text {
-        color: #fff !important;
-      }
-    }
-
-    &.blue {
-      .ui.item:hover {
-        color: @blue !important;
-      }
-
-      .ui.item.active {
-        background-color: @blue !important;
-        color: #fff !important;
-      }
-
-      .active .menu-item-text {
-        color: #fff !important;
-      }
-    }
-
-    &.violet {
-      .ui.item:hover {
-        color: @violet !important;
-      }
-
-      .ui.item.active {
-        background-color: @violet !important;
-        color: #fff !important;
-      }
-
-      .active .menu-item-text {
-        color: #fff !important;
-      }
-    }
-
-    &.purple {
-      .ui.item:hover {
-        color: @purple !important;
-      }
-
-      .ui.item.active {
-        background-color: @purple !important;
-        color: #fff !important;
-      }
-
-      .active .menu-item-text {
-        color: #fff !important;
-      }
-    }
-
-    &.brown {
-      .ui.item:hover {
-        color: @brown !important;
-      }
-
-      .ui.item.active {
-        background-color: @brown !important;
-        color: #fff !important;
-      }
-    }
-
-    &.grey {
-      .ui.item:hover {
-        color: @grey !important;
-      }
-
-      .ui.item.active {
-        background-color: @grey !important;
-        color: #fff !important;
-      }
-
-      .active .menu-item-text {
-        color: #fff !important;
-      }
-    }
-
-    &.black {
-      .ui.item:hover {
-        color: @black !important;
-      }
-
-      .ui.item.active {
-        background-color: @black !important;
-        color: #fff !important;
-      }
-
-      .active .menu-item-text {
-        color: #fff !important;
-      }
-    }
-
-    .ui.tab {
-      padding: 1rem;
-      margin-bottom: 0;
-      background-color: @accordionTabBackground !important;
-    }
   }
 }
 
-.ui.menu.RRT__tabs {
-  .item.ui {
-    color: #323232;
-  }
-
-  &.theme-primary {
-    .item.ui:hover {
-      color: @primaryColor !important;
-    }
-
-    .item.ui.active {
-      border-bottom: 0.1875rem solid @primaryColor !important;
-      color: @primaryColor !important;
-    }
-  }
-
-  &.theme-secondary {
-    .item.ui:hover {
-      color: @secondaryColor !important;
-    }
-
-    .item.ui.active {
-      border-bottom: 0.1875rem solid @secondaryColor !important;
-      color: @secondaryColor !important;
-    }
-  }
-
-  &.theme-tertiary {
-    .item.ui:hover {
-      color: @tertiaryColor !important;
-    }
-
-    .ui.item.active {
-      border-bottom: 0.1875rem solid @tertiaryColor !important;
-      color: @tertiaryColor !important;
-    }
-  }
-}
-
-.tabs-block {
-  .theme-primary {
-    .active.item {
-      border-bottom: 0.1875rem solid @primaryColor !important;
-      color: @primaryColor !important;
-    }
-  }
-
-  .theme-secondary {
-    .active.item {
-      border-bottom: 0.1875rem solid @secondaryColor !important;
-      color: @secondaryColor !important;
-    }
-  }
-
-  .theme-tertiary {
-    .active.item {
-      border-bottom: 0.1875rem solid @tertiaryColor !important;
-      color: @tertiaryColor !important;
-    }
-  }
-}
-
-// .tabs-block .ui.menu.RRT__accordion .ui.item .icon {
-//   color: #808285;
-// }
-
 .loadAddonOverrides();

package/src/less/menu.variables

@@ -8,7 +8,6 @@
 @menuTitleFontSize: 24px;
 @menuTitleFontWeight: normal;
 @menuTitleColor: #013C60;
-@menuTitleBackgrounnd: none;
 @menuTitleHoverColor: #013C60;
 @menuTitleHoverBackground: none;
 
@@ -18,10 +17,10 @@
 /* Menu item */
 @menuItemCountDisplay: none;
 
-@accordionMenuItemBackground: #F3F4F5;
+@accordionMenuItemBackground: #F3F4F5;  /* not used */
 @accordionTabBackground: transparent;
 
 /* Theme variables */
 @primaryColor         : #004B7F;
 @secondaryColor       : #007B6C;
-@tertiaryColor        : #3D5265;
+@tertiaryColor        : #3D5265;

package/src/less/tabs.less

@@ -7,6 +7,10 @@
 .loadAddonVariables();
 
 .tabs-block {
+  .remove-menu.active {
+    overflow: revert; /* needed for edit double click to modify title to remove scrollbar */
+  }
+
   .tabs-accessibility {
     .ui.button.item:focus-visible {
       outline: 1px dotted #212121 !important;

package/src/less/tabs.variables

@@ -2,9 +2,9 @@
             Tabs block
 *******************************/
 
-@tabsBlockColor: #000;
+@tabsBlockColor: var(--text-color, #000);
 @verticalPadding: 1rem;
 @horizontalPadding: 1rem;
 
 /* Tab pane */
-@tabPanePadding: @verticalPadding @horizontalPadding;
+@tabPanePadding: @verticalPadding @horizontalPadding;