@eeacms/volto-tabs-block 1.3.0 → 2.0.0

package/.coverage.babel.config.js

@@ -2,7 +2,11 @@ const defaultBabel = require('@plone/volto/babel');
 
 function applyDefault(api) {
   const voltoBabel = defaultBabel(api);
-  voltoBabel.plugins.push('@babel/plugin-transform-modules-commonjs', 'transform-class-properties', 'istanbul');
+  voltoBabel.plugins.push(
+    '@babel/plugin-transform-modules-commonjs',
+    'transform-class-properties',
+    'istanbul',
+  );
   return voltoBabel;
 }
 

package/.project.eslintrc.js

@@ -0,0 +1,46 @@
+const fs = require('fs');
+const path = require('path');
+
+const projectRootPath = fs.realpathSync('./project');    // __dirname
+const packageJson = require(path.join(projectRootPath, 'package.json'));
+const jsConfig = require(path.join(projectRootPath, 'jsconfig.json')).compilerOptions;
+
+const pathsConfig = jsConfig.paths;
+
+let voltoPath = path.join(projectRootPath, 'node_modules/@plone/volto');
+
+Object.keys(pathsConfig).forEach(pkg => {
+  if (pkg === '@plone/volto') {
+    voltoPath = `./${jsConfig.baseUrl}/${pathsConfig[pkg][0]}`;
+  }
+});
+const AddonConfigurationRegistry = require(`${voltoPath}/addon-registry.js`);
+const reg = new AddonConfigurationRegistry(projectRootPath);
+
+// Extends ESlint configuration for adding the aliases to `src` directories in Volto addons
+const addonAliases = Object.keys(reg.packages).map(o => [
+  o,
+  reg.packages[o].modulePath,
+]);
+
+
+module.exports = {
+  extends: `${projectRootPath}/node_modules/@plone/volto/.eslintrc`,
+  settings: {
+    'import/resolver': {
+      alias: {
+        map: [
+          ['@plone/volto', '@plone/volto/src'],
+          ...addonAliases,
+          ['@package', `${__dirname}/src`],
+          ['~', `${__dirname}/src`],
+        ],
+        extensions: ['.js', '.jsx', '.json'],
+      },
+      'babel-plugin-root-import': {
+        rootPathSuffix: 'src',
+      },
+    },
+  },
+};
+

package/CHANGELOG.md

@@ -4,8 +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.0.0](https://github.com/eea/volto-tabs-block/compare/1.3.2...2.0.0)
+
+- Update [`525551e`](https://github.com/eea/volto-tabs-block/commit/525551e151d469f71e3ecbae9af994cf1dc61644)
+- Improve accordion variation [`e95977e`](https://github.com/eea/volto-tabs-block/commit/e95977e2b06178dd820ea1b1983d74b4fd3f38f5)
+- Release 2.0.0 [`1206ab1`](https://github.com/eea/volto-tabs-block/commit/1206ab1c22346761aacb9c5aba7c536e7407526e)
+- Update accordion template title [`4b8def3`](https://github.com/eea/volto-tabs-block/commit/4b8def34c9a55e4b38cafb9b8533679a9759f5c5)
+- stylelint [`13ef886`](https://github.com/eea/volto-tabs-block/commit/13ef886b203ad4f701820ae8d4066d87814a928f)
+- stylelint [`d29ff73`](https://github.com/eea/volto-tabs-block/commit/d29ff739e17fe398373c289b01f57328543e333d)
+- stylelint [`73195f6`](https://github.com/eea/volto-tabs-block/commit/73195f60362fffe12ae13f685a9c349cbe486118)
+- prettier [`8308f52`](https://github.com/eea/volto-tabs-block/commit/8308f52c296f39da416c927d807f33741ecf66aa)
+- Add accordion template for mobile [`92e99cf`](https://github.com/eea/volto-tabs-block/commit/92e99cf538983164426ad82b0e71e5ba6532e419)
+- Remove useless  from block title [`4ab8b58`](https://github.com/eea/volto-tabs-block/commit/4ab8b58b9266d2937fd033865e52100f0a6333b2)
+
+#### [1.3.2](https://github.com/eea/volto-tabs-block/compare/1.3.1...1.3.2)
+
+> 3 June 2022
+
+- fix(edit): Align inner blocks toolbar CSS with columns/accordion/grou… [`#22`](https://github.com/eea/volto-tabs-block/pull/22)
+- fix(edit): Align inner blocks toolbar CSS with columns/accordion/group block [`b51fe35`](https://github.com/eea/volto-tabs-block/commit/b51fe3591a6dddbca95f10deb20cf01390de742d)
+
+#### [1.3.1](https://github.com/eea/volto-tabs-block/compare/1.3.0...1.3.1)
+
+> 29 April 2022
+
+- Style fix + missing key [`#21`](https://github.com/eea/volto-tabs-block/pull/21)
+
 #### [1.3.0](https://github.com/eea/volto-tabs-block/compare/1.2.12...1.3.0)
 
+> 6 April 2022
+
+- Refactor tabs block [`#19`](https://github.com/eea/volto-tabs-block/pull/19)
 - Refactor tabs block [`#18`](https://github.com/eea/volto-tabs-block/pull/18)
 - Fix tests [`fdc74d9`](https://github.com/eea/volto-tabs-block/commit/fdc74d9f5f1c851de9ca3a9576cf2dbcd1495968)
 - Bump version [`acfef41`](https://github.com/eea/volto-tabs-block/commit/acfef413eb9f923f7a7283d12417e23c81192633)

package/Jenkinsfile

@@ -184,10 +184,10 @@ pipeline {
             unstash "xunit-reports"
             unstash "cypress-coverage"
             def scannerHome = tool 'SonarQubeScanner';
-            def nodeJS = tool 'NodeJS11';
+            def nodeJS = tool 'NodeJS';
             withSonarQubeEnv('Sonarqube') {
               sh '''sed -i "s#/opt/frontend/my-volto-project/src/addons/${GIT_NAME}/##g" xunit-reports/coverage/lcov.info'''
-              sh "export PATH=$PATH:${scannerHome}/bin:${nodeJS}/bin; sonar-scanner -Dsonar.javascript.lcov.reportPaths=./xunit-reports/coverage/lcov.info,./cypress-coverage/coverage/lcov.info -Dsonar.sources=./src -Dsonar.projectKey=$GIT_NAME-$BRANCH_NAME -Dsonar.projectVersion=$BRANCH_NAME-$BUILD_NUMBER"
+              sh "export PATH=${scannerHome}/bin:${nodeJS}/bin:$PATH; sonar-scanner -Dsonar.javascript.lcov.reportPaths=./xunit-reports/coverage/lcov.info,./cypress-coverage/coverage/lcov.info -Dsonar.sources=./src -Dsonar.projectKey=$GIT_NAME-$BRANCH_NAME -Dsonar.projectVersion=$BRANCH_NAME-$BUILD_NUMBER"
               sh '''try=2; while [ \$try -gt 0 ]; do curl -s -XPOST -u "${SONAR_AUTH_TOKEN}:" "${SONAR_HOST_URL}api/project_tags/set?project=${GIT_NAME}-${BRANCH_NAME}&tags=${SONARQUBE_TAGS},${BRANCH_NAME}" > set_tags_result; if [ \$(grep -ic error set_tags_result ) -eq 0 ]; then try=0; else cat set_tags_result; echo "... Will retry"; sleep 60; try=\$(( \$try - 1 )); fi; done'''
             }
           }

package/babel.config.js

@@ -0,0 +1,17 @@
+module.exports = function (api) {
+  api.cache(true);
+  const presets = ['razzle/babel'];
+  const plugins = [
+    [
+      'react-intl', // React Intl extractor, required for the whole i18n infrastructure to work
+      {
+        messagesDir: './build/messages/',
+      },
+    ],
+  ];
+
+  return {
+    plugins,
+    presets,
+  };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-tabs-block",
-  "version": "1.3.0",
+  "version": "2.0.0",
   "description": "volto-tabs-block: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -20,9 +20,10 @@
     "@eeacms/volto-block-style"
   ],
   "dependencies": {
+    "@eeacms/volto-block-style": "*",
+    "react-responsive-tabs": "4.4.3",
     "react-slick": "^0.24.0",
-    "slick-carousel": "^1.8.1",
-    "@eeacms/volto-block-style": "*"
+    "slick-carousel": "^1.8.1"
   },
   "devDependencies": {
     "@cypress/code-coverage": "^3.9.5",
@@ -30,21 +31,19 @@
   },
   "scripts": {
     "release": "release-it",
-    "release-major-beta": "release-it major --preRelease=beta",
-    "release-beta": "release-it --preRelease=beta",
     "bootstrap": "npm install -g ejs; npm link ejs; node bootstrap",
     "test": "make test",
     "test:fix": "make test-update",
-    "i18n": "rm -rf build/messages && NODE_ENV=production node src/i18n.js",
     "pre-commit": "yarn stylelint:fix && yarn prettier:fix && yarn lint:fix",
-    "stylelint": "if [ -d ./project ]; then ./project/node_modules/stylelint/bin/stylelint.js --allow-empty-input 'src/**/*.{css,less}'; else ../../../node_modules/stylelint/bin/stylelint.js --allow-empty-input 'src/**/*.{css,less}'; fi",
-    "stylelint:overrides": "if [ -d ./project ]; then ./project/node_modules/.bin/stylelint --syntax less --allow-empty-input 'theme/**/*.overrides' 'src/**/*.overrides'; else ../../../node_modules/.bin/stylelint --syntax less --allow-empty-input 'theme/**/*.overrides' 'src/**/*.overrides'; fi",
+    "stylelint": "../../../node_modules/.bin/stylelint 'theme/**/*.{css,less}' 'src/**/*.{css,less}'",
+    "stylelint:overrides": "../../../node_modules/.bin/stylelint --allow-empty-input 'theme/**/*.overrides' 'src/**/*.overrides'",
     "stylelint:fix": "yarn stylelint --fix && yarn stylelint:overrides --fix",
     "prettier": "if [ -d ./project ]; then ./project/node_modules/.bin/prettier --single-quote --check 'src/**/*.{js,jsx,json,css,less,md}'; else ../../../node_modules/.bin/prettier --single-quote --check 'src/**/*.{js,jsx,json,css,less,md}'; fi",
     "prettier:fix": "if [ -d ./project ]; then ./project/node_modules/.bin/prettier --single-quote --write 'src/**/*.{js,jsx,json,css,less,md}'; else ../../../node_modules/.bin/prettier --single-quote --write 'src/**/*.{js,jsx,json,css,less,md}'; fi",
     "lint": "if [ -d ./project ]; then ./project/node_modules/eslint/bin/eslint.js --max-warnings=0 'src/**/*.{js,jsx}'; else ../../../node_modules/eslint/bin/eslint.js --max-warnings=0 'src/**/*.{js,jsx}'; fi",
     "lint:fix": "if [ -d ./project ]; then ./project/node_modules/eslint/bin/eslint.js --fix 'src/**/*.{js,jsx}'; else ../../../node_modules/eslint/bin/eslint.js --fix 'src/**/*.{js,jsx}'; fi",
-    "cypress:run": "if [ -d ./project ]; then ./project/node_modules/cypress/bin/cypress run; else ../../../node_modules/cypress/bin/cypress run; fi",
-    "cypress:open": "if [ -d ./project ]; then ./project/node_modules/cypress/bin/cypress open; else ../../../node_modules/cypress/bin/cypress open; fi"
+    "i18n": "rm -rf build/messages && NODE_ENV=production i18n --addon",
+    "cypress:run": "if [ -d ./project ]; then NODE_ENV=development ./project/node_modules/cypress/bin/cypress run; else NODE_ENV=development ../../../node_modules/cypress/bin/cypress run; fi",
+    "cypress:open": "if [ -d ./project ]; then NODE_ENV=development ./project/node_modules/cypress/bin/cypress open; else NODE_ENV=development ../../../node_modules/cypress/bin/cypress open; fi"
   }
 }

package/src/components/index.js

@@ -7,5 +7,6 @@ export { TabsEdit, TabsView };
 export { layoutSchema };
 
 export * from './templates/default';
+export * from './templates/accordion';
 export * from './templates/horizontal-responsive';
 export * from './templates/carousel';

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

@@ -0,0 +1,18 @@
+import { DefaultEdit } from '../default';
+
+const Edit = (props) => {
+  return (
+    <DefaultEdit
+      {...props}
+      data={{
+        ...props.data,
+        menuPointing: true,
+        menuSecondary: true,
+        menuFluid: false,
+        menuText: false,
+      }}
+    />
+  );
+};
+
+export default Edit;

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

@@ -0,0 +1,125 @@
+import React from 'react';
+import cx from 'classnames';
+import { compose } from 'redux';
+import { withRouter } from 'react-router';
+import Tabs from 'react-responsive-tabs';
+import AnimateHeight from 'react-animate-height';
+import { Icon } from 'semantic-ui-react';
+import config from '@plone/volto/registry';
+import { Icon as VoltoIcon, RenderBlocks } from '@plone/volto/components';
+import { TABS_BLOCK } from '@eeacms/volto-tabs-block/constants';
+import { withScrollToTarget } from '@eeacms/volto-tabs-block/hocs';
+
+import 'react-responsive-tabs/styles.css';
+import '@eeacms/volto-tabs-block/less/menu.less';
+
+class Tab extends React.Component {
+  constructor() {
+    super();
+    this.state = {
+      height: 0,
+    };
+  }
+
+  componentDidMount() {
+    if (this.state.height === 0) {
+      requestAnimationFrame(() => {
+        this.setState({ height: 'auto' });
+      });
+    }
+  }
+
+  render() {
+    return (
+      <AnimateHeight animateOpacity duration={500} height={this.state.height}>
+        <RenderBlocks {...this.props} />
+      </AnimateHeight>
+    );
+  }
+}
+
+const View = (props) => {
+  const {
+    data = {},
+    tabsList = [],
+    tabs = {},
+    activeTabIndex = 0,
+    setActiveTab = () => {},
+  } = props;
+  const accordionConfig =
+    config.blocks.blocksConfig.tabs_block.templates.accordion;
+  const { icons, semanticIcon } = accordionConfig;
+
+  const schema = React.useMemo(
+    () =>
+      config.blocks.blocksConfig[TABS_BLOCK].templates?.['default']?.schema(
+        config,
+        props,
+      ) || {},
+    [props],
+  );
+
+  const getDataValue = React.useCallback(
+    (key) => {
+      return (
+        (schema.properties[key]?.value || data[key]) ??
+        schema.properties[key]?.defaultValue
+      );
+    },
+    [schema, data],
+  );
+
+  const items = tabsList.map((tab, index) => {
+    const title = tabs[tab].title;
+    const defaultTitle = `Tab ${index + 1}`;
+    const active = activeTabIndex === index;
+    return {
+      title: (
+        <>
+          {semanticIcon ? (
+            <Icon name={active ? semanticIcon.opened : semanticIcon.closed} />
+          ) : (
+            <VoltoIcon
+              name={active ? icons.opened : icons.closed}
+              size={icons.size}
+            />
+          )}
+          {title || defaultTitle}{' '}
+        </>
+      ),
+      getContent: () => <Tab {...props} tab={tab} content={tabs[tab]} />,
+      key: tab,
+      tabClassName: cx('ui button item title', { active }),
+      panelClassName: cx('ui bottom attached segment tab', {
+        active,
+      }),
+    };
+  });
+
+  return (
+    <>
+      <Tabs
+        className="tabs aa"
+        selectedTabKey={tabsList[activeTabIndex]}
+        items={items}
+        onChange={(tab) => {
+          if (tab !== tabsList[activeTabIndex]) {
+            setActiveTab(tab);
+          } else {
+            setActiveTab(null);
+          }
+        }}
+        tabsWrapperClass={cx(
+          'ui pointing secondary menu',
+          getDataValue('menuColor'),
+          {
+            inverted: getDataValue('menuInverted'),
+          },
+        )}
+        showMore={false}
+      />
+    </>
+  );
+};
+
+export default compose(withScrollToTarget, withRouter)(View);

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

@@ -0,0 +1,5 @@
+import AccordionEdit from './Edit';
+import AccordionView from './View';
+import accordionSchema from './schema';
+
+export { AccordionEdit, AccordionView, accordionSchema };

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

@@ -0,0 +1,44 @@
+export default () => ({
+  title: 'Accordion tabs block',
+  fieldsets: [
+    {
+      id: 'default',
+      title: 'Default',
+      fields: ['description'],
+    },
+    {
+      id: 'menu',
+      title: 'Menu',
+      fields: ['menuColor', 'menuInverted'],
+    },
+  ],
+  properties: {
+    description: {
+      title: 'Description',
+    },
+    menuColor: {
+      title: 'Color',
+      defaultValue: 'green',
+      choices: [
+        ['red', 'Red'],
+        ['orange', 'Orange'],
+        ['yellow', 'Yellow'],
+        ['olive', 'Olive'],
+        ['green', 'Green'],
+        ['teal', 'Teal'],
+        ['blue', 'Blue'],
+        ['violet', 'Violet'],
+        ['purple', 'Purple'],
+        ['pink', 'Pink'],
+        ['brown', 'Brown'],
+        ['grey', 'Grey'],
+        ['black', 'Black'],
+      ],
+    },
+    menuInverted: {
+      title: 'Inverted',
+      type: 'boolean',
+    },
+  },
+  required: [],
+});

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

@@ -121,6 +121,7 @@ const View = (props) => {
       menuItem: (
         <MenuItem
           {...props}
+          key={tab}
           tab={tab}
           index={index}
           tabsTitle={tabsTitle}

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

@@ -61,15 +61,16 @@ const MenuWrapper = (props) => {
     tabsList = [],
     setActiveTab = () => {},
   } = props;
+  const [open, setOpen] = React.useState(false);
 
   React.useEffect(() => {
     if (!true || !node?.current) return;
     const items = node.current.querySelectorAll(
       '.ui.menu > .menu-wrapper > .item:not(.menu-title)',
     );
-    const underlineMenu = node.current.querySelector('.ui.dropdown');
-    if (!underlineMenu) return;
-    const overflowOffset = positionedOffset(underlineMenu, node.current);
+    const underlineDropdown = node.current.querySelector('.ui.dropdown');
+    if (!underlineDropdown) return;
+    const overflowOffset = positionedOffset(underlineDropdown, node.current);
     if (!overflowOffset) {
       return;
     }
@@ -83,8 +84,11 @@ const MenuWrapper = (props) => {
         anyHidden = anyHidden || hidden;
       }
     }
-    underlineMenu.style.visibility = anyHidden ? '' : 'hidden';
-  }, [screen, node, data.isResponsive]);
+    underlineDropdown.style.visibility = anyHidden ? '' : 'hidden';
+    if (!anyHidden && open) {
+      setOpen(false);
+    }
+  }, [screen, node, open, data.isResponsive]);
 
   return (
     <React.Fragment>
@@ -95,39 +99,38 @@ const MenuWrapper = (props) => {
           </React.Fragment>
         ))}
       </div>
-      {true && (
-        <Dropdown
-          icon="ellipsis horizontal"
-          className="item"
-          pointing="top right"
-        >
-          <Dropdown.Menu>
-            {tabsList.map((underlineTab, underlineIndex) => {
-              const title = tabs[underlineTab].title;
-              const defaultTitle = `Tab ${underlineIndex + 1}`;
+      <Dropdown
+        icon="ellipsis horizontal"
+        className="item"
+        pointing="top right"
+        open={open}
+        onOpen={() => setOpen(true)}
+        onClose={() => setOpen(false)}
+      >
+        <Dropdown.Menu>
+          {tabsList.map((underlineTab, underlineIndex) => {
+            const title = tabs[underlineTab].title;
+            const defaultTitle = `Tab ${underlineIndex + 1}`;
 
-              return (
-                <Dropdown.Item
-                  hidden
-                  key={`underline-tab-${underlineIndex}-${underlineTab}`}
-                  underline-item-data={underlineTab}
-                  active={underlineTab === activeTab}
-                  onClick={() => {
-                    if (activeTab !== underlineTab) {
-                      setActiveTab(underlineTab);
-                    }
-                  }}
-                >
-                  <span className={'menu-item-count'}>
-                    {underlineIndex + 1}
-                  </span>
-                  <p className={'menu-item-text'}>{title || defaultTitle}</p>
-                </Dropdown.Item>
-              );
-            })}
-          </Dropdown.Menu>
-        </Dropdown>
-      )}
+            return (
+              <Dropdown.Item
+                hidden
+                key={`underline-tab-${underlineIndex}-${underlineTab}`}
+                underline-item-data={underlineTab}
+                active={underlineTab === activeTab}
+                onClick={() => {
+                  if (activeTab !== underlineTab) {
+                    setActiveTab(underlineTab);
+                  }
+                }}
+              >
+                <span className={'menu-item-count'}>{underlineIndex + 1}</span>
+                <p className={'menu-item-text'}>{title || defaultTitle}</p>
+              </Dropdown.Item>
+            );
+          })}
+        </Dropdown.Menu>
+      </Dropdown>
     </React.Fragment>
   );
 };
@@ -201,6 +204,7 @@ const View = (props) => {
       menuItem: (
         <MenuItem
           {...props}
+          key={tab}
           tab={tab}
           tabsList={tabsList}
           index={index}
@@ -245,7 +249,6 @@ const View = (props) => {
           text: getDataValue('menuText'),
           vertical: menuPosition.vertical,
           className: cx(data.menuAlign, { container: isContainer }),
-          items: undefined,
           children: (
             <MenuWrapper
               {...props}

package/src/components/templates/horizontal-responsive/schema.js

@@ -1,5 +1,5 @@
 export default () => ({
-  title: 'Default tabs block',
+  title: 'Horizontal tabs block',
   fieldsets: [
     {
       id: 'default',

package/src/index.js

@@ -2,10 +2,13 @@ import { TabsEdit, TabsView } from '@eeacms/volto-tabs-block/components';
 import {
   DefaultEdit,
   DefaultView,
+  AccordionEdit,
+  AccordionView,
   HorizontalResponsiveView,
   HorizontalCarouselView,
   VerticalCarouselView,
   defaultSchema,
+  accordionSchema,
   horizontalResponsiveSchema,
   carouselSchema,
 } from '@eeacms/volto-tabs-block/components';
@@ -14,11 +17,13 @@ import { TABS_BLOCK } from './constants';
 import { TabsWidget } from './widgets';
 
 import tabsSVG from '@eeacms/volto-tabs-block//icons/tabs.svg';
+import rightSVG from '@plone/volto/icons/right-key.svg';
+import downSVG from '@plone/volto/icons/down-key.svg';
 
 export default (config) => {
   config.blocks.blocksConfig[TABS_BLOCK] = {
     id: TABS_BLOCK,
-    title: 'Tabs block',
+    title: 'Tabs',
     icon: tabsSVG,
     group: 'common',
     edit: TabsEdit,
@@ -39,6 +44,17 @@ export default (config) => {
         view: DefaultView,
         schema: defaultSchema,
       },
+      accordion: {
+        title: 'Accordion responsive',
+        edit: AccordionEdit,
+        view: AccordionView,
+        schema: accordionSchema,
+        icons: {
+          closed: rightSVG,
+          opened: downSVG,
+          size: '24px',
+        },
+      },
       'horizontal-responsive': {
         title: 'Horizontal responsive',
         edit: DefaultEdit,

package/src/less/edit.less

@@ -1,3 +1,10 @@
+@type: 'extra';
+@element: 'custom';
+
+@import (multiple, reference, optional) '../../theme.config';
+
+@borderColor: rgba(120, 192, 215, 0.75);
+
 .inner.tabs_block {
   margin-bottom: 0;
 
@@ -68,48 +75,36 @@
     }
   }
 
+  .blocks-form {
+    margin-top: 0.5rem;
+  }
+
+  .blocks-chooser {
+    right: 0;
+    left: auto;
+    margin-top: 3rem;
+  }
+
   .block-toolbar {
     position: absolute;
     z-index: 3;
-    right: unset;
-    left: -9px;
+    right: -9px;
     display: flex;
-    padding: 5px;
-    border: 1px solid #78c0d7bf;
-    border-bottom: 1px solid #fff;
+    border: none;
+    border: 1px solid @borderColor;
+    border-bottom: 1px solid @pageBackground;
     margin-top: -45px;
-    background-color: #fff;
+    background-color: @pageBackground;
     border-top-left-radius: 1rem;
     border-top-right-radius: 1rem;
 
     .ui.basic.button {
-      padding: 3px;
-      padding-right: 0;
-      box-shadow: none;
+      padding: 8px 5px;
     }
 
-    .wrapper-column-block {
-      > .ui.basic.button {
-        &:hover {
-          background-color: transparent !important;
-        }
-      }
+    .ui.basic.button:hover {
+      background: transparent !important;
     }
-
-    > .ui.basic.button {
-      &:hover {
-        background-color: transparent !important;
-      }
-
-      svg {
-        color: #134448;
-      }
-    }
-  }
-
-  .blocks-chooser {
-    left: 0;
-    margin-top: 50px;
   }
 }
 

package/src/less/menu.less

@@ -86,6 +86,7 @@
 
   &.horizontal-responsive {
     .horizontal-responsive.tabs > .ui.menu {
+      overflow: visible;
       justify-content: space-between;
 
       .menu-wrapper {
@@ -119,4 +120,142 @@
   }
 }
 
+.ui.menu:not(.RRT__accordion) {
+  .ui.item .icon {
+    display: none;
+  }
+}
+
+.RRT__container {
+  > .ui.tab .rah-animating {
+    transition: height 0ms ease 0ms !important;
+
+    > div {
+      transition: opacity 0ms ease 0ms !important;
+    }
+  }
+}
+
+.ui.menu.RRT__accordion {
+  &::before {
+    display: none;
+  }
+
+  border-bottom: none !important;
+
+  .ui.item {
+    display: flex;
+    width: 100%;
+    padding: 0.75rem 1rem !important;
+    border-width: 0 !important;
+    border-bottom: none !important;
+    margin: 0 !important;
+    background-color: @accordionMenuItemBackground;
+
+    .icon {
+      margin: 0 !important;
+    }
+
+    .dropdown.icon {
+      transform: rotate(-90deg);
+    }
+
+    &.active {
+      .dropdown.icon {
+        transform: rotate(0);
+      }
+    }
+  }
+
+  &.red {
+    .ui.item.active {
+      background-color: @red !important;
+      color: #fff !important;
+    }
+  }
+
+  &.orange {
+    .ui.item.active {
+      background-color: @orange !important;
+      color: #fff !important;
+    }
+  }
+
+  &.yellow {
+    .ui.item.active {
+      background-color: @yellow !important;
+      color: #fff !important;
+    }
+  }
+
+  &.olive {
+    .ui.item.active {
+      background-color: @olive !important;
+      color: #fff !important;
+    }
+  }
+
+  &.green {
+    .ui.item.active {
+      background-color: @green !important;
+      color: #fff !important;
+    }
+  }
+
+  &.teal {
+    .ui.item.active {
+      background-color: @teal !important;
+      color: #fff !important;
+    }
+  }
+
+  &.blue {
+    .ui.item.active {
+      background-color: @blue !important;
+      color: #fff !important;
+    }
+  }
+
+  &.violet {
+    .ui.item.active {
+      background-color: @violet !important;
+      color: #fff !important;
+    }
+  }
+
+  &.purple {
+    .ui.item.active {
+      background-color: @purple !important;
+      color: #fff !important;
+    }
+  }
+
+  &.brown {
+    .ui.item.active {
+      background-color: @brown !important;
+      color: #fff !important;
+    }
+  }
+
+  &.grey {
+    .ui.item.active {
+      background-color: @grey !important;
+      color: #fff !important;
+    }
+  }
+
+  &.black {
+    .ui.item.active {
+      background-color: @black !important;
+      color: #fff !important;
+    }
+  }
+
+  .ui.tab {
+    padding: 1rem;
+    margin-bottom: 0;
+    background-color: @accordionTabBackground !important;
+  }
+}
+
 .loadAddonOverrides();

package/src/less/menu.variables

@@ -15,3 +15,6 @@
 
 /* Menu item */
 @menuItemCountDisplay: none;
+
+@accordionMenuItemBackground: #F3F4F5;
+@accordionTabBackground: transparent;