@eeacms/volto-tabs-block 1.3.1 → 2.0.1

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,9 +4,39 @@ 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.1](https://github.com/eea/volto-tabs-block/compare/2.0.0...2.0.1)
+
+- stylelint [`267fbdb`](https://github.com/eea/volto-tabs-block/commit/267fbdb72f69715690d281498d1fd0837c18fc0d)
+- Prettier fix [`5ac20a8`](https://github.com/eea/volto-tabs-block/commit/5ac20a8352f00618dae1623ac200ea1779342e8d)
+- Apply menu item style on tabs-block only [`fec62b2`](https://github.com/eea/volto-tabs-block/commit/fec62b222bcc07bc102f6d73b89369f57f49512d)
+
+### [2.0.0](https://github.com/eea/volto-tabs-block/compare/1.3.2...2.0.0)
+
+> 8 June 2022
+
+- Add accordion template for mobile [`#23`](https://github.com/eea/volto-tabs-block/pull/23)
+- 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)
+- 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)
 
-- Style fix + missing key [`0d2b097`](https://github.com/eea/volto-tabs-block/commit/0d2b097850bc89d8a525ce8a4564a348975d33b9)
+> 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)
 

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.1",
+  "version": "2.0.1",
   "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/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

@@ -118,6 +118,144 @@
       }
     }
   }
+
+  .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;