@eeacms/volto-tabs-block 6.0.2 → 7.0.0

package/src/helpers.test.js

@@ -4,22 +4,28 @@ import {
   scrollToTarget,
   getParentTabFromHash,
 } from './helpers';
-import { emptyBlocksForm } from '@plone/volto/helpers';
+// import { emptyBlocksForm } from '@plone/volto/helpers';
 import { visitBlocks, toSlug } from '@eeacms/volto-anchors/helpers';
 
-jest.mock('@plone/volto/helpers', () => ({
-  emptyBlocksForm: jest.fn(),
-}));
+// jest.mock('@plone/volto/helpers', () => ({
+//   emptyBlocksForm: jest.fn(),
+// }));
 
 jest.mock('@eeacms/volto-anchors/helpers', () => ({
   visitBlocks: jest.fn(),
   toSlug: jest.fn(),
 }));
 
+const schema = {
+  fieldsets: [{ id: 'default', fields: [] }],
+  properties: {},
+  required: [],
+};
+
 describe('empty function', () => {
   it('returns a tab block with unique ID', () => {
-    emptyBlocksForm.mockReturnValue({});
-    const result = empty();
+    // emptyBlocksForm.mockReturnValue({});
+    const result = empty({ schema });
     expect(Object.keys(result.blocks)).toHaveLength(1);
     expect(result.blocks[Object.keys(result.blocks)[0]]['@type']).toEqual(
       'tab',
@@ -30,8 +36,8 @@ describe('empty function', () => {
 
 describe('emptyTab function', () => {
   it('returns a tab block', () => {
-    emptyBlocksForm.mockReturnValue({});
-    const result = emptyTab();
+    // emptyBlocksForm.mockReturnValue({});
+    const result = emptyTab({ schema });
     expect(result['@type']).toEqual('tab');
   });
 });

package/src/index.js

@@ -9,13 +9,10 @@ import {
   HorizontalResponsiveView,
   HorizontalCarouselView,
   VerticalCarouselView,
-  defaultSchema,
-  accordionSchema,
-  horizontalResponsiveSchema,
-  carouselSchema,
   layoutSchema,
   TabsEdit,
   TabsView,
+  blockSchema,
 } from '@eeacms/volto-tabs-block/components';
 import { TABS_BLOCK } from './constants';
 import { TabsWidget } from './widgets';
@@ -33,9 +30,21 @@ defineMessages({
     id: 'Accordion responsive',
     defaultMessage: 'Accordion responsive',
   },
+  carouselHorizontal: {
+    defaultMessage: 'Carousel horizontal',
+    id: 'Carousel horizontal',
+  },
+  carouselVerticalPrototype: {
+    defaultMessage: 'Carousel vertical (prototype)',
+    id: 'Carousel vertical (prototype)',
+  },
+  horizontalResponsive: {
+    defaultMessage: 'Horizontal responsive',
+    id: 'Horizontal responsive',
+  },
 });
 
-export default (config) => {
+const applyConfig = (config) => {
   config.blocks.blocksConfig[TABS_BLOCK] = {
     id: TABS_BLOCK,
     title: 'Tabs',
@@ -51,21 +60,23 @@ export default (config) => {
       view: [],
     },
     blockHasOwnFocusManagement: true,
+    blockSchema: blockSchema,
     schema: layoutSchema(config),
-    templates: {
-      default: {
+    variations: [
+      {
         id: 'default',
         title: 'Default',
+        isDefault: true,
         edit: DefaultEdit,
         view: DefaultView,
-        schema: defaultSchema,
+        schemaEnhancer: DefaultEdit.schemaEnhancer,
       },
-      accordion: {
-        id: 'accordionResponsive',
+      {
+        id: 'accordion',
         title: 'Accordion responsive',
         edit: AccordionEdit,
         view: AccordionView,
-        schema: accordionSchema,
+        schemaEnhancer: AccordionEdit.schemaEnhancer,
         transformWidth: 800,
         icons: {
           closed: rightSVG,
@@ -73,29 +84,28 @@ export default (config) => {
           size: '24px',
         },
       },
-      'horizontal-responsive': {
-        id: 'horizontalResponsive',
+      {
+        id: 'horizontal-responsive',
         title: 'Horizontal responsive',
         edit: HorizontalResponsiveEdit,
         view: HorizontalResponsiveView,
-        schema: horizontalResponsiveSchema,
+        schemaEnhancer: HorizontalResponsiveEdit.schemaEnhancer,
       },
-      carousel: {
-        id: 'carouselHorizontal',
+      {
+        id: 'carousel-horizontal',
         title: 'Carousel horizontal',
         edit: DefaultEdit,
         view: HorizontalCarouselView,
-        schema: carouselSchema,
+        schemaEnhancer: HorizontalCarouselView.schemaEnhancer,
       },
-      carousel_vertical: {
-        id: 'carouselVerticalPrototype',
+      {
+        id: 'carousel-vertical',
         title: 'Carousel vertical (prototype)',
         edit: DefaultEdit,
         view: VerticalCarouselView,
-        schema: carouselSchema,
+        schemaEnhancer: VerticalCarouselView.schemaEnhancer,
       },
-      ...(config.blocks.blocksConfig[TABS_BLOCK]?.templates || {}),
-    },
+    ],
     getBlocks: (data) => {
       const { blocks = {}, blocks_layout = {} } = data?.data;
       if (blocks_layout?.items?.length) {
@@ -116,3 +126,5 @@ export default (config) => {
 
   return config;
 };
+
+export default applyConfig;

package/src/less/carousel.less

@@ -7,6 +7,15 @@
 .loadAddonVariables();
 
 .tabs-block {
+  // ensure only active slide is selectable
+  .slick-slide {
+    visibility: hidden;
+  }
+
+  .slick-active {
+    visibility: visible;
+  }
+
   .slick-slider {
     z-index: 2;
     display: flex !important;

package/src/less/edit.less

@@ -138,3 +138,29 @@
     }
   }
 }
+
+.block-editor-tabs_block {
+  .block.tabs_block.selected::before,
+  .block.tabs_block:hover::before {
+    border-style: dashed;
+  }
+
+  fieldset {
+    border: none;
+
+    legend {
+      position: absolute;
+      z-index: 3;
+      top: -1.3em;
+      left: 0;
+      width: fit-content;
+      padding: 0 1rem;
+      margin-right: auto;
+      margin-left: auto;
+      background-color: @pageBackground;
+      color: @borderColor;
+      cursor: pointer;
+      text-align: center;
+    }
+  }
+}

package/src/less/menu.less

@@ -17,6 +17,18 @@
     overflow-y: hidden;
   }
 
+  .ui.secondary.inverted.pointing.menu {
+    border-width: 0 0 4px 0;
+  }
+
+  .ui.secondary.inverted.menu .active.item:not(.remove-margin) {
+    background-color: @menuItemInvertedActiveBackgroundColor !important;
+  }
+
+  .ui.menu .addition-button .menu-item-text {
+    line-height: 1;
+  }
+
   .remove-menu :not(.RRT__tab--collapsed) {
     padding-top: 0 !important;
     padding-left: 0 !important;
@@ -27,6 +39,112 @@
     margin-bottom: @menuMarginButton;
   }
 
+  .ui.item {
+    cursor: pointer;
+  }
+
+  .ui.menu:not(.inverted, .pointing) .active.item:not(.remove-margin) {
+    background-color: @menuItemActiveBackgroundColor;
+  }
+
+  .RRT__tabs.tabs-accessibility.ui.inverted.menu {
+    background-color: @menuItemInvertedBackgroundColor;
+
+    .item {
+      color: @menuItemInvertedTextColor !important;
+    }
+
+    .item.active {
+      border-color: @secondaryPointingInvertedActiveBorderColor;
+      color: @menuItemInvertedActiveTextColor !important;
+    }
+
+    .item:hover {
+      color: @menuItemInvertedHoverTextColor !important;
+    }
+  }
+
+  .tab-icon {
+    display: block !important;
+  }
+
+  .asset-position {
+    .image {
+      &.icon {
+        width: @tabImageSmallSize;
+      }
+
+      &.tile {
+        width: @tabImageMediumSize;
+      }
+
+      &.thumb {
+        width: @tabImageLargeSize;
+      }
+    }
+
+    .icon {
+      &.small {
+        font-size: @tabIconSmallSize;
+      }
+
+      &.medium {
+        font-size: @tabIconMediumSize;
+      }
+
+      &.large {
+        font-size: @tabIconLargeSize;
+      }
+    }
+  }
+
+  .RRT__accordion .tab-with-icon {
+    flex-direction: row-reverse;
+    gap: 0.25rem;
+
+    .icon {
+      font-size: 1.25rem;
+      --accordion-title-icon-order: 0;
+    }
+  }
+
+  .accordion-title {
+    display: flex;
+  }
+
+  .asset-top,
+  .asset-left,
+  .asset-right {
+    display: flex;
+    align-items: center;
+    gap: 0.6em;
+
+    .menu-item-text {
+      margin: 0;
+    }
+  }
+
+  .asset-top {
+    flex-direction: column;
+    text-align: center;
+
+    .icon {
+      display: block !important;
+    }
+  }
+
+  .asset-left {
+    flex-direction: row;
+  }
+
+  .asset-right {
+    flex-direction: row-reverse;
+  }
+
+  .menu-item-count {
+    display: @menuItemCountDisplay;
+  }
+
   > .styled > .tabs > .ui.menu,
   > .styled > .tabs > .ui.grid > .column > .ui.menu,
   > .tabs > .ui.menu,
@@ -88,10 +206,6 @@
         }
       }
 
-      .menu-item-count {
-        display: @menuItemCountDisplay;
-      }
-
       &.active {
         border-width: 0.2rem;
       }

package/src/less/menu.variables

@@ -11,11 +11,27 @@
 @menuTitleHoverColor: #013C60;
 @menuTitleHoverBackground: none;
 
+/* Tab Icons */
+@tabImageSmallSize:  48px;
+@tabImageMediumSize: 64px;
+@tabImageLargeSize: 80px;
+@tabIconSmallSize:  48px;
+@tabIconMediumSize: 64px;
+@tabIconLargeSize: 80px;
+
 /* Menu description */
 @menuDescriptionColor: #636363;
 
 /* Menu item */
 @menuItemCountDisplay: none;
+@secondaryPointingInvertedActiveBorderColor: var(--inverted-secondary-active-border-color, @pink);
+@menuItemActiveBackgroundColor: var(--tab-active-bg-color, rgba(0, 0, 0, 0.05));
+@menuItemInvertedBackgroundColor: var(--tab-inverted-bg-color, #C7D5D8);
+@menuItemInvertedActiveBackgroundColor: var(--tab-inverted-active-bg-color, rgba(0, 0, 0, 0.1));
+@menuItemInvertedActiveTextColor: var(--tab-inverted-active-text-color, @textColor);
+@menuItemInvertedTextColor: var(--tab-inverted-text-color, @textColor);
+@menuItemInvertedHoverTextColor:var(--tab-inverted-hover-text-color, @textColor);
+
 
 @accordionMenuItemBackground: #F3F4F5;  /* not used */
 @accordionTabBackground: transparent;

package/src/less/tabs.less

@@ -6,36 +6,48 @@
 
 .loadAddonVariables();
 
-.tabs-block {
-  .remove-menu.active {
-    overflow: revert; /* needed for edit double click to modify title to remove scrollbar */
+@keyframes slide-down {
+  0% {
+    overflow: hidden;
+    max-height: 0;
+    opacity: 0;
+    visibility: hidden;
   }
 
-  .tabs-accessibility {
-    .ui.button.item:focus-visible {
-      outline: 1px dotted #212121 !important;
-      outline: 5px auto -webkit-focus-ring-color !important;
-    }
+  95% {
+    overflow: hidden;
+    max-height: @animationContentMaxHeight;
+    visibility: visible;
+  }
 
-    a:focus-visible {
-      outline: 1px dotted #212121 !important;
-      outline: 5px auto -webkit-focus-ring-color !important;
-    }
+  100% {
+    max-height: auto;
+    opacity: 1;
+    visibility: visible;
+  }
+}
 
-    .slick-current:focus-visible {
-      outline: 1px dotted #212121 !important;
-      outline: 5px auto -webkit-focus-ring-color !important;
-    }
+@keyframes slide-up {
+  from {
+    overflow: hidden;
+    max-height: @animationContentMaxHeight;
+    opacity: 1;
+    visibility: visible;
+  }
 
-    .accessibility-accordion-tab {
-      outline: none;
-    }
+  to {
+    overflow: hidden;
+    max-height: 0;
+    opacity: 0;
+    visibility: hidden;
+  }
+}
 
-    .accessibility-accordion-tab:focus-visible {
-      outline: 1px dotted #212121 !important;
-      outline: 5px auto -webkit-focus-ring-color !important;
-    }
+.tabs-block {
+  .remove-menu.active {
+    overflow: revert; /* needed for edit double click to modify title to remove scrollbar */
   }
+
   color: @tabsBlockColor;
 
   > .styled {
@@ -91,6 +103,24 @@
       }
     }
   }
+
+  @media not (prefers-reduced-motion) {
+    .ui.accordion .title ~ .content.RRT__panel {
+      display: block;
+      padding: 0;
+      animation: slide-up @animationDuration linear both;
+      will-change: max-height, overflow, opacity;
+    }
+
+    .tab-name {
+      padding: @tabAccordionContentPadding;
+    }
+
+    .ui.accordion .title ~ .content.RRT__panel.active {
+      animation: slide-down @animationDuration linear both;
+    }
+  }
+
   @media print {
     .ui.tab {
       display: block !important;

package/src/less/tabs.variables

@@ -5,6 +5,9 @@
 @tabsBlockColor: var(--text-color, #000);
 @verticalPadding: 1rem;
 @horizontalPadding: 1rem;
+@animationDuration: 0.5s;
+@tabAccordionContentPadding: 1rem;
+@animationContentMaxHeight: 1000px;
 
 /* Tab pane */
 @tabPanePadding: @verticalPadding @horizontalPadding;