@eeacms/volto-tabs-block 8.1.0 → 9.0.0

package/src/components/Edit.jsx

@@ -12,7 +12,8 @@ import { TABS_BLOCK } from '@eeacms/volto-tabs-block/constants';
 import { empty, emptyTab } from '@eeacms/volto-tabs-block/helpers';
 import { StyleWrapperView } from '@eeacms/volto-block-style/StyleWrapper';
 import { BlockStyleWrapperEdit } from '@eeacms/volto-block-style/BlockStyleWrapper';
-import { DefaultEdit } from './templates/default';
+import { getVariation } from '@eeacms/volto-tabs-block/helpers';
+import { DefaultEdit } from './variations/default';
 import { useIntl } from 'react-intl';
 
 import '@eeacms/volto-tabs-block/less/edit.less';
@@ -23,7 +24,7 @@ const Edit = (props) => {
   const intl = useIntl();
   const { onChangeBlock, onChangeField } = props;
   const { data = {}, block = null } = props;
-  const template = data.variation || 'default';
+  const variation = getVariation(data);
   const tabsData = data.data || {};
   const tabsList = tabsData.blocks_layout?.items || [];
   const tabs = tabsData.blocks || {};
@@ -38,11 +39,11 @@ const Edit = (props) => {
   const verticalAlign = data.verticalAlign || 'flex-start';
   const tabsBlockConfig = config.blocks.blocksConfig[TABS_BLOCK];
 
-  const activeTemplate = config.blocks.blocksConfig[
+  const activeVariation = config.blocks.blocksConfig[
     TABS_BLOCK
-  ].variations.filter((v, _i) => v.id === template);
+  ].variations.filter((v, _i) => v.id === variation);
 
-  const TabsEdit = activeTemplate?.[0]?.edit || DefaultEdit;
+  const TabsEdit = activeVariation?.[0]?.edit || DefaultEdit;
 
   const schemaObject = tabsBlockConfig.blockSchema(props);
 
@@ -168,7 +169,7 @@ const Edit = (props) => {
           Tabs
         </legend>
         <div
-          className={cx('tabs-block edit', theme, verticalAlign, template)}
+          className={cx('tabs-block edit', theme, verticalAlign, variation)}
           ref={view}
           role="presentation"
           onKeyDown={(e) => {
@@ -200,7 +201,6 @@ const Edit = (props) => {
               tabsData={tabsData}
               tabsList={tabsList}
               node={view}
-              template={template}
               onChangeTabData={onChangeTabData}
               onSelectBlock={onSelectBlock}
               setActiveBlock={setActiveBlock}

package/src/components/View.jsx

@@ -5,10 +5,11 @@ import { withRouter } from 'react-router';
 import { StyleWrapperView } from '@eeacms/volto-block-style/StyleWrapper';
 import { TABS_BLOCK } from '@eeacms/volto-tabs-block/constants';
 import {
+  getVariation,
   isTabEmpty,
   getParentTabFromHash,
 } from '@eeacms/volto-tabs-block/helpers';
-import { DefaultView } from './templates/default';
+import { DefaultView } from './variations/default';
 import { withScrollToTarget } from '@eeacms/volto-tabs-block/hocs';
 
 import config from '@plone/volto/registry';
@@ -20,7 +21,7 @@ const View = (props) => {
   const view = React.useRef(null);
   const { data = {}, uiContainer = '', location, history } = props;
   const metadata = props.metadata || props.properties;
-  const template = data.variation || 'default';
+  const variation = getVariation(data);
   const tabsData = data.data || {};
   const tabs = tabsData.blocks || {};
   const tabsList = (tabsData.blocks_layout?.items || []).filter((tab) => {
@@ -32,11 +33,11 @@ const View = (props) => {
   const theme = data.theme || 'light';
   const verticalAlign = data.verticalAlign || 'flex-start';
 
-  const activeTemplate = config.blocks.blocksConfig[
+  const activeVariation = config.blocks.blocksConfig[
     TABS_BLOCK
-  ].variations.filter((v, _i) => v.id === template);
+  ].variations.filter((v, _i) => v.id === variation);
 
-  const TabsView = activeTemplate?.[0]?.view || DefaultView;
+  const TabsView = activeVariation?.[0]?.view || DefaultView;
 
   const query = React.useMemo(() => {
     const { search } = location;
@@ -95,7 +96,7 @@ const View = (props) => {
       styled={true}
     >
       <div
-        className={cx('tabs-block', template, theme, verticalAlign)}
+        className={cx('tabs-block', variation, theme, verticalAlign)}
         id={props.id}
         ref={view}
       >
@@ -117,7 +118,6 @@ const View = (props) => {
             tabData={tabData}
             tabsData={tabsData}
             tabsList={tabsList}
-            template={template}
             uiContainer={uiContainer}
             setActiveTab={handleActiveTabChange}
           />

package/src/components/index.js

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

package/src/components/{templates → variations}/accordion/Edit.jsx

@@ -1,5 +1,5 @@
-import Edit from '@eeacms/volto-tabs-block/components/templates/default/Edit';
-import { accordionSchemaEnhancer } from '@eeacms/volto-tabs-block/components/templates/accordion/schema';
+import Edit from '@eeacms/volto-tabs-block/components/variations/default/Edit';
+import { accordionSchemaEnhancer } from '@eeacms/volto-tabs-block/components/variations/accordion/schema';
 import cx from 'classnames';
 
 const AccordionEdit = (props) => {

package/src/components/{templates → variations}/accordion/View.jsx

@@ -17,6 +17,7 @@ import { getParentTabFromHash } from '@eeacms/volto-tabs-block/helpers';
 import { withScrollToTarget } from '@eeacms/volto-tabs-block/hocs';
 
 import '@eeacms/volto-tabs-block/less/menu.less';
+import { getVariation } from '../../../helpers';
 
 class Tab extends React.Component {
   render() {
@@ -39,9 +40,11 @@ const View = (props) => {
     id,
   } = props;
 
+  const variation = getVariation(data);
+
   const accordionConfig = config.blocks.blocksConfig[
     TABS_BLOCK
-  ].variations.filter((v, _i) => v.id === data.variation);
+  ].variations.filter((v, _i) => v.id === variation);
   const {
     icons,
     semanticIcon,

package/src/components/{templates → variations}/carousel/HorizontalView.jsx

@@ -6,7 +6,7 @@ import { Icon, RenderBlocks } from '@plone/volto/components';
 
 import rightArrowSVG from '@eeacms/volto-tabs-block/icons/right-key.svg';
 import leftArrowSVG from '@eeacms/volto-tabs-block/icons/left-key.svg';
-import { carouselSchemaEnhancer } from '@eeacms/volto-tabs-block/components/templates/carousel/schema';
+import { carouselSchemaEnhancer } from '@eeacms/volto-tabs-block/components/variations/carousel/schema';
 
 import 'slick-carousel/slick/slick.css';
 import 'slick-carousel/slick/slick-theme.css';

package/src/components/{templates → variations}/carousel/VerticalView.jsx

@@ -6,7 +6,7 @@ import { RenderBlocks } from '@plone/volto/components';
 import 'slick-carousel/slick/slick.css';
 import 'slick-carousel/slick/slick-theme.css';
 import '@eeacms/volto-tabs-block/less/carousel.less';
-import { carouselSchemaEnhancer } from '@eeacms/volto-tabs-block/components/templates/carousel/schema';
+import { carouselSchemaEnhancer } from '@eeacms/volto-tabs-block/components/variations/carousel/schema';
 
 const Slider = loadable(() => import('react-slick'));
 

package/src/components/{templates → variations}/default/Edit.jsx

@@ -7,7 +7,7 @@ import { Menu, Tab, Input, Container } from 'semantic-ui-react';
 import { BlocksForm } from '@plone/volto/components';
 import { emptyBlocksForm } from '@plone/volto/helpers';
 import EditBlockWrapper from '@eeacms/volto-tabs-block/components/EditBlockWrapper';
-import { defaultSchemaEnhancer } from '@eeacms/volto-tabs-block/components/templates/default/schema';
+import { defaultSchemaEnhancer } from '@eeacms/volto-tabs-block/components/variations/default/schema';
 import { AssetTab } from '@eeacms/volto-tabs-block/components';
 import {
   SimpleMarkdown,

package/src/components/{templates → variations}/horizontal-responsive/Edit.jsx

@@ -10,7 +10,7 @@ import { Menu, Tab, Container, Dropdown, Input } from 'semantic-ui-react';
 import { emptyBlocksForm } from '@plone/volto/helpers';
 import { BlocksForm } from '@plone/volto/components';
 import EditBlockWrapper from '@eeacms/volto-tabs-block/components/EditBlockWrapper';
-import { defaultSchemaEnhancer } from '@eeacms/volto-tabs-block/components/templates/default/schema';
+import { defaultSchemaEnhancer } from '@eeacms/volto-tabs-block/components/variations/default/schema';
 import {
   SimpleMarkdown,
   getMenuPosition,

package/src/helpers.js

@@ -7,6 +7,21 @@ import {
 } from '@plone/volto/helpers';
 import { visitBlocks, toSlug } from '@eeacms/volto-anchors/helpers';
 
+const variationsMapping = {
+  carousel: 'carousel-horizontal',
+  carousel_vertical: 'carousel-vertical',
+};
+
+export const getVariation = (data) => {
+  const { variation, template } = data;
+  return (
+    variationsMapping[variation || template] ||
+    variation ||
+    template ||
+    'default'
+  );
+};
+
 export const empty = ({ schema, intl }) => {
   const tabId = uuid();
   const data = {