Merge pull request #19 from eea/develop

Refactor tabs block

CHANGELOG.md

@@ -4,9 +4,25 @@ 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).
 
+#### [1.3.0](https://github.com/eea/volto-tabs-block/compare/1.2.12...1.3.0)
+
+- 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)
+- Change z-index for slide-arrows [`97baed1`](https://github.com/eea/volto-tabs-block/commit/97baed1c11b90d043cb5f772c65dcaee24278ca3)
+- update [`26bfd0e`](https://github.com/eea/volto-tabs-block/commit/26bfd0e00aded4bef827b57c7e0d9036540a7ee7)
+- update [`542d0cd`](https://github.com/eea/volto-tabs-block/commit/542d0cd14e8164d20d8cb8dd7416d108fbaa88d5)
+- Make horizontal-responsive work [`bb1d81e`](https://github.com/eea/volto-tabs-block/commit/bb1d81e858d01c409ce86f19974c60cbd764b717)
+- Add horizontal responsive template [`c6e6cca`](https://github.com/eea/volto-tabs-block/commit/c6e6cca355c6164a26e7aec291e4a0223625ea91)
+- Let theme addon to set default values for default template schema [`55f148d`](https://github.com/eea/volto-tabs-block/commit/55f148d1a95417f8a0b55681ce250acde8463c1c)
+- Render pane as container if tabs-block has full-width class [`bbffb96`](https://github.com/eea/volto-tabs-block/commit/bbffb96b908476ddee447af3ce79bafb1a12f9a8)
+- Refactor default template [`58eff52`](https://github.com/eea/volto-tabs-block/commit/58eff5281adb08a5f8fe6d21fd43330252012277)
+
 #### [1.2.12](https://github.com/eea/volto-tabs-block/compare/1.2.11...1.2.12)
 
-- Make sure metadata block works within Tabs block [`65a6bf4`](https://github.com/eea/volto-tabs-block/commit/65a6bf41ab81e308fd75c6525616a4735dbfe456)
+> 21 January 2022
+
+- Make sure metadata block works within Tabs block [`#17`](https://github.com/eea/volto-tabs-block/pull/17)
 
 #### [1.2.11](https://github.com/eea/volto-tabs-block/compare/1.2.10...1.2.11)
 

Jenkinsfile

@@ -4,7 +4,7 @@ pipeline {
   environment {
         GIT_NAME = "volto-tabs-block"
         NAMESPACE = "@eeacms"
-        SONARQUBE_TAGS = "volto.eea.europa.eu,climate-energy.eea.europa.eu,biodiversity.europa.eu,www.eea.europa.eu-ims,sustainability.eionet.europa.eu,forest.eea.europa.eu,clms.land.copernicus.eu,industry.eea.europa.eu,water.europa.eu-freshwater"
+        SONARQUBE_TAGS = "volto.eea.europa.eu,climate-energy.eea.europa.eu,biodiversity.europa.eu,www.eea.europa.eu-ims,sustainability.eionet.europa.eu,forest.eea.europa.eu,clms.land.copernicus.eu,industry.eea.europa.eu,water.europa.eu-freshwater,demo-www.eea.europa.eu,clmsdemo.devel6cph.eea.europa.eu"
         DEPENDENCIES = "@eeacms/volto-block-style"
     }
 

cypress/integration/block-basics.js

@@ -36,14 +36,13 @@ describe('Blocks Tests', () => {
     cy.get('.field-wrapper-menuAlign #field-menuAlign').click();
     cy.get('.react-select__menu').contains('Left').click();
     cy.get('.field-wrapper-menuPosition #field-menuPosition').first().click();
-    cy.get('.react-select__menu').contains('Inline').click();
+    cy.get('.react-select__menu').contains('Top').click();
 
     cy.get('[contenteditable=true]').first().focus().click();
-    cy.get('.tabs-block [contenteditable=true]').first().type("Hydrogen");
+    cy.get('.tabs-block [contenteditable=true]').first().type('Hydrogen');
     cy.get('.tabs-block .ui.left.menu .item').last().click();
     cy.get('.tabs-block').contains('Tab 2').click();
-    cy.get('.tabs-block.edit [contenteditable=true]').first().type("Oxygen");
-
+    cy.get('.tabs-block.edit [contenteditable=true]').first().type('Oxygen');
 
     cy.get('[contenteditable=true]').first().type('{enter}');
     cy.get('.ui.basic.icon.button.block-add-button').first().click();
@@ -56,8 +55,8 @@ describe('Blocks Tests', () => {
     cy.get('.react-select__menu').contains('Bottom').click();
     cy.get('.field-wrapper-theme #field-theme').click();
     cy.get('.react-select__menu').contains('Dark').click();
-    cy.get('.tabs-block .ui.left.menu .item').eq(1).click();
-
+    cy.get('.tabs-block .ui.menu .item').last().click();
+    cy.get('.tabs-block .ui.menu .item').eq(1).click();
 
     // Save
     cy.get('#toolbar-save').click();

package.json

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

src/components/Edit.jsx

@@ -1,5 +1,7 @@
 import React from 'react';
 import { without } from 'lodash';
+import cx from 'classnames';
+import config from '@plone/volto/registry';
 import { SidebarPortal, BlocksToolbar } from '@plone/volto/components';
 import InlineForm from '@plone/volto/components/manage/Form/InlineForm';
 import { getBlocksLayoutFieldname } from '@plone/volto/helpers';
@@ -9,9 +11,9 @@ import { StyleWrapperView } from '@eeacms/volto-block-style/StyleWrapper';
 import { BlockStyleWrapperEdit } from '@eeacms/volto-block-style/BlockStyleWrapper';
 import { DefaultEdit } from './templates/default';
 import { schema } from './schema';
-import cx from 'classnames';
 
-import config from '@plone/volto/registry';
+import '@eeacms/volto-tabs-block/less/edit.less';
+import '@eeacms/volto-tabs-block/less/tabs.less';
 
 const Edit = (props) => {
   const { onChangeBlock, onChangeField } = props;
@@ -36,7 +38,12 @@ const Edit = (props) => {
   const templateSchema =
     config.blocks.blocksConfig[TABS_BLOCK].templates?.[template]?.schema || {};
 
-  const schemaObject = schema(config, templateSchema(config));
+  const schemaObject = schema(
+    config,
+    typeof templateSchema === 'function'
+      ? templateSchema(config, props)
+      : templateSchema,
+  );
 
   React.useEffect(() => {
     if (!Object.keys(data.data || {}).length) {

src/components/View.jsx

@@ -1,12 +1,13 @@
 import React from 'react';
+import cx from 'classnames';
+import { StyleWrapperView } from '@eeacms/volto-block-style/StyleWrapper';
 import { TABS_BLOCK } from '@eeacms/volto-tabs-block/constants';
 import { DefaultView } from './templates/default';
-import { StyleWrapperView } from '@eeacms/volto-block-style/StyleWrapper';
-import cx from 'classnames';
 
 import config from '@plone/volto/registry';
 
-import '@eeacms/volto-tabs-block/less/tabs-block.less';
+import '@eeacms/volto-tabs-block/less/edit.less';
+import '@eeacms/volto-tabs-block/less/tabs.less';
 
 const View = (props) => {
   const view = React.useRef(null);

src/components/index.js

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

src/components/schema.js

@@ -7,12 +7,12 @@ export const schema = (config, templateSchema = {}) => {
     templatesConfig[template].title || template,
   ]);
 
-  const defaultFieldset = templateSchema.fieldsets.filter(
+  const defaultFieldset = templateSchema?.fieldsets?.filter(
     (fieldset) => fieldset.id === 'default',
   )[0];
 
   return {
-    title: templateSchema.title || 'Tabs block',
+    title: templateSchema?.title || 'Tabs block',
     fieldsets: [
       {
         id: 'default',
@@ -22,10 +22,10 @@ export const schema = (config, templateSchema = {}) => {
           'title',
           'template',
           'verticalAlign',
-          ...(defaultFieldset?.fields || {}),
+          ...(defaultFieldset?.fields || []),
         ],
       },
-      ...(templateSchema.fieldsets.filter(
+      ...(templateSchema?.fieldsets?.filter(
         (fieldset) => fieldset.id !== 'default',
       ) || []),
     ],
@@ -53,8 +53,8 @@ export const schema = (config, templateSchema = {}) => {
         ],
         default: 'flex-start',
       },
-      ...(templateSchema.properties || {}),
+      ...(templateSchema?.properties || {}),
     },
-    required: [...(templateSchema.required || [])],
+    required: [...(templateSchema?.required || [])],
   };
 };

src/components/templates/carousel/HorizontalView.jsx

@@ -3,11 +3,13 @@ import { connect } from 'react-redux';
 import { compose } from 'redux';
 import { withRouter } from 'react-router';
 import loadable from '@loadable/component';
+import cx from 'classnames';
 import { Icon, RenderBlocks } from '@plone/volto/components';
 import { withScrollToTarget } from '@eeacms/volto-tabs-block/hocs';
+
 import rightArrowSVG from '@eeacms/volto-tabs-block/icons/right-arrow.svg';
 import leftArrowSVG from '@eeacms/volto-tabs-block/icons/left-arrow.svg';
-import cx from 'classnames';
+
 import 'slick-carousel/slick/slick.css';
 import 'slick-carousel/slick/slick-theme.css';
 import '@eeacms/volto-tabs-block/less/carousel.less';

src/components/templates/carousel/VerticalView.jsx

@@ -3,9 +3,9 @@ import { connect } from 'react-redux';
 import { compose } from 'redux';
 import { withRouter } from 'react-router';
 import loadable from '@loadable/component';
+import cx from 'classnames';
 import { RenderBlocks } from '@plone/volto/components';
 import { withScrollToTarget } from '@eeacms/volto-tabs-block/hocs';
-import cx from 'classnames';
 
 import 'slick-carousel/slick/slick.css';
 import 'slick-carousel/slick/slick-theme.css';

src/components/templates/default/Edit.jsx

@@ -1,12 +1,17 @@
 import React from 'react';
 import { isEmpty } from 'lodash';
 import { v4 as uuid } from 'uuid';
-import { Menu, Tab, Input } from 'semantic-ui-react';
+import cx from 'classnames';
+import { Menu, Tab, Input, Container } from 'semantic-ui-react';
+import config from '@plone/volto/registry';
 import { BlocksForm } from '@plone/volto/components';
 import { emptyBlocksForm } from '@plone/volto/helpers';
+import { TABS_BLOCK } from '@eeacms/volto-tabs-block/constants';
 import EditBlockWrapper from '@eeacms/volto-tabs-block/components/EditBlockWrapper';
-import { SimpleMarkdown } from '@eeacms/volto-tabs-block/utils';
-import cx from 'classnames';
+import {
+  SimpleMarkdown,
+  getMenuPosition,
+} from '@eeacms/volto-tabs-block/utils';
 
 import '@eeacms/volto-tabs-block/less/menu.less';
 
@@ -19,10 +24,12 @@ const MenuItem = (props) => {
     data = {},
     editingTab = null,
     selected = false,
-    tabs = {},
     tabData = {},
+    tabs = {},
     tabsData = {},
+    tabsDescription,
     tabsList = [],
+    tabsTitle,
     emptyTab = () => {},
     setActiveBlock = () => {},
     setActiveTab = () => {},
@@ -63,6 +70,12 @@ const MenuItem = (props) => {
 
   return (
     <>
+      {index === 0 && (tabsTitle || tabsDescription) && (
+        <Menu.Item className="menu-title">
+          <SimpleMarkdown md={tabsTitle} className="title" defaultTag="##" />
+          <SimpleMarkdown md={tabsDescription} className="description" />
+        </Menu.Item>
+      )}
       <Menu.Item
         name={defaultTitle}
         active={tab === activeTab}
@@ -150,43 +163,47 @@ const Edit = (props) => {
     onSelectBlock = () => {},
     setEditingTab = () => {},
   } = props;
-  const uiContainer = data.align === 'full' ? 'ui container' : false;
-  const menuAlign = data.menuAlign || 'left';
-  const menuPosition = data.menuPosition || 'inline';
+  const menuPosition = getMenuPosition(data);
+  const isContainer = data.align === 'full';
   const tabsTitle = data.title;
   const tabsDescription = data.description;
 
+  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 panes = tabsList.map((tab, index) => {
     return {
       id: tab,
-      menuItem: () => {
-        return (
-          <React.Fragment key={`tab-${tab}`}>
-            {index === 0 && (tabsTitle || tabsDescription) ? (
-              <Menu.Item className="menu-title">
-                <SimpleMarkdown
-                  md={tabsTitle}
-                  className="title"
-                  defaultTag="##"
-                />
-                <SimpleMarkdown md={tabsDescription} className="description" />
-              </Menu.Item>
-            ) : (
-              ''
-            )}
-            <MenuItem
-              {...props}
-              editingTab={editingTab}
-              index={index}
-              setEditingTab={setEditingTab}
-              tab={tab}
-            />
-          </React.Fragment>
-        );
-      },
+      menuItem: (
+        <MenuItem
+          {...props}
+          editingTab={editingTab}
+          index={index}
+          setEditingTab={setEditingTab}
+          tab={tab}
+          tabsTitle={tabsTitle}
+          tabsDescription={tabsDescription}
+        />
+      ),
       render: () => {
         return (
-          <Tab.Pane>
+          <Tab.Pane as={isContainer ? Container : undefined}>
             <BlocksForm
               allowedBlocks={data?.allowedBlocks}
               description={data?.instrunctions?.data}
@@ -253,11 +270,26 @@ const Edit = (props) => {
     <>
       <Tab
         activeIndex={activeTabIndex}
-        className={cx('default tabs', menuPosition, uiContainer)}
+        className="default tabs"
         menu={{
-          className: cx(menuAlign),
+          attached: menuPosition.attached,
+          borderless: getDataValue('menuBorderless'),
+          color: getDataValue('menuColor'),
+          compact: getDataValue('menuCompact'),
+          fluid: getDataValue('menuFluid'),
+          inverted: getDataValue('menuInverted'),
+          pointing: getDataValue('menuPointing'),
+          secondary: getDataValue('menuSecondary'),
+          size: getDataValue('menuSize'),
+          stackable: getDataValue('menuStackable'),
+          tabular: getDataValue('menuTabular'),
+          text: getDataValue('menuText'),
+          vertical: menuPosition.vertical,
+          className: cx(data.menuAlign, { container: isContainer }),
         }}
+        menuPosition={menuPosition.direction}
         panes={panes}
+        grid={{ paneWidth: 9, tabWidth: 3 }}
       />
     </>
   );