@eeacms/volto-tabs-block 5.1.0 → 6.0.1

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

@@ -13,6 +13,14 @@ const messages = defineMessages({
     id: 'menu',
     defaultMessage: 'Menu',
   },
+  MenuPointing: {
+    id: 'menu-pointing',
+    defaultMessage: 'Pointing',
+  },
+  MenuSecondary: {
+    id: 'menu-secondary',
+    defaultMessage: 'Secondary',
+  },
   Style: {
     id: 'style',
     defaultMessage: 'Style',
@@ -54,7 +62,12 @@ export default (config, props) => ({
     {
       id: 'menu',
       title: props.intl.formatMessage(messages.Menu),
-      fields: ['menuInverted', 'accordionIconRight'],
+      fields: [
+        'menuInverted',
+        'menuSecondary',
+        'menuPointing',
+        'accordionIconRight',
+      ],
     },
     {
       id: 'style',
@@ -77,6 +90,14 @@ export default (config, props) => ({
       title: props.intl.formatMessage(messages.Inverted),
       type: 'boolean',
     },
+    menuPointing: {
+      title: props.intl.formatMessage(messages.MenuPointing),
+      type: 'boolean',
+    },
+    menuSecondary: {
+      title: props.intl.formatMessage(messages.MenuSecondary),
+      type: 'boolean',
+    },
     theme: {
       title: props.intl.formatMessage(messages.Theme),
       description: props.intl.formatMessage(

package/src/components/templates/carousel/HorizontalView.jsx

@@ -123,8 +123,8 @@ const View = (props) => {
 
   React.useEffect(() => {
     if (!slider.current?.innerSlider?.list) return;
-    const unfocuseElements = ['a', 'button', 'input'];
-    unfocuseElements.forEach((tag) => {
+    const unfocusedElements = ['a', 'button', 'input'];
+    unfocusedElements.forEach((_tag) => {
       for (let element of slider.current.innerSlider.list.querySelectorAll(
         ".slick-slide[aria-hidden='true'] a",
       )) {
@@ -134,10 +134,10 @@ const View = (props) => {
   }, [activeTab]);
   React.useEffect(() => {
     if (!slider.current?.innerSlider?.list) return;
-    let unaccesibileElements = slider.current.innerSlider.list.querySelectorAll(
+    let inaccessibleElements = slider.current.innerSlider.list.querySelectorAll(
       '.slick-slide',
     );
-    for (let element of unaccesibileElements) {
+    for (let element of inaccessibleElements) {
       element.setAttribute('tabindex', '0');
       element.setAttribute('aria-hidden', 'false');
       element.style.removeProperty('outline');
@@ -147,7 +147,7 @@ const View = (props) => {
         carouselDiv.setAttribute('tabindex', '0');
   }, []);
 
-  const panes = tabsList.map((tab, index) => {
+  const panes = tabsList.map((tab, _index) => {
     return {
       id: tab,
       renderItem: (

package/src/components/templates/carousel/VerticalView.jsx

@@ -27,7 +27,7 @@ const View = (props) => {
     verticalSwiping: true,
   };
 
-  const panes = tabsList.map((tab, index) => {
+  const panes = tabsList.map((tab, _index) => {
     return {
       id: tab,
       renderItem: (

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

@@ -209,7 +209,7 @@ const Edit = (props) => {
           <Tab.Pane as={isContainer ? Container : undefined}>
             <BlocksForm
               allowedBlocks={data?.allowedBlocks}
-              description={data?.instrunctions?.data}
+              description={data?.instructions?.data}
               manage={manage}
               metadata={metadata}
               pathname={props.pathname}
@@ -276,10 +276,7 @@ const Edit = (props) => {
         menu={{
           attached: menuPosition.attached,
           borderless: getDataValue('menuBorderless'),
-          color:
-            props?.template === 'accordion' && props?.data?.theme
-              ? `theme-${props?.data?.theme}`
-              : getDataValue('menuColor'),
+          color: getDataValue('menuColor'),
           compact: getDataValue('menuCompact'),
           fluid: getDataValue('menuFluid'),
           inverted: getDataValue('menuInverted'),
@@ -291,6 +288,7 @@ const Edit = (props) => {
           text: getDataValue('menuText'),
           vertical: menuPosition.vertical,
           className: cx(
+            'tabs-secondary-variant',
             data.menuAlign,
             menuPosition.direction === 'left' ? 'border-right' : '',
             menuPosition.direction === 'right' ? 'border-left' : '',

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

@@ -171,6 +171,7 @@ const View = (props) => {
           text: getDataValue('menuText'),
           vertical: menuPosition.vertical,
           className: cx(
+            'tabs-secondary-variant',
             data.menuAlign,
             menuPosition.direction === 'left' ? 'border-right' : '',
             menuPosition.direction === 'right' ? 'border-left' : '',

package/src/less/menu.less

@@ -12,14 +12,14 @@
   }
 
   .remove-menu {
-    padding-right: 0px !important;
-    padding-bottom: 0px !important;
+    padding-right: 0 !important;
+    padding-bottom: 0 !important;
     overflow-y: hidden;
   }
 
   .remove-menu :not(.RRT__tab--collapsed) {
-    padding-top: 0px !important;
-    padding-left: 0px !important;
+    padding-top: 0 !important;
+    padding-left: 0 !important;
     border-bottom: none !important;
   }
 
@@ -143,13 +143,12 @@
     }
   }
 
-  .RRT__container {
-    .inverted {
-      .RRT__tab.active {
-        background-color: rgba(0, 0, 0, 0.1) !important;
-      }
-    }
+  .RRT__accordion.tabs-accordion-icon-left {
+    --accordion-title-justify: flex-start;
+    --accordion-title-icon-order: 0;
+  }
 
+  .RRT__container {
     > .ui.tab .rah-animating {
       transition: height 0ms ease 0ms !important;
 
@@ -157,364 +156,7 @@
         transition: opacity 0ms ease 0ms !important;
       }
     }
-
-    .RRT__tabs.inverted.ui.secondary.pointing.menu:not(.RRT__accordion) {
-      background-color: @green !important;
-    }
-
-    .inverted .RRT__tab--collapsed {
-      background-color: @green !important;
-    }
-  }
-
-  .ui.menu.RRT__accordion.tabs-accordion-icon-right {
-    .tabs-icon {
-      position: absolute;
-      right: 0%;
-    }
-
-    .item {
-      padding-top: 0.6875rem !important;
-      padding-bottom: 0.6875rem !important;
-    }
-  }
-
-  .ui.menu.RRT__accordion {
-    &::before {
-      display: none;
-    }
-
-    border-bottom: none !important;
-
-    .ui.item {
-      display: flex;
-      width: 100%;
-      padding: 0 1rem !important;
-      border-bottom: 0.0625rem solid #e6e7e8;
-      margin: 0 !important;
-
-      .icon {
-        margin: 0 !important;
-      }
-
-      .dropdown.icon {
-        transform: rotate(-90deg);
-      }
-
-      &.active {
-        .dropdown.icon {
-          transform: rotate(0);
-        }
-      }
-    }
-
-    .RRT__tab:not(.active) .icon {
-      color: #808285;
-    }
-
-    &.theme-primary {
-      .ui.item:not(.active):hover {
-        color: @primaryColor !important;
-
-        .icon {
-          color: @primaryColor !important;
-        }
-      }
-
-      .ui.item.active {
-        background-color: @primaryColor !important;
-        color: #fff !important;
-      }
-
-      .active .menu-item-text {
-        color: #fff !important;
-      }
-    }
-
-    &.theme-secondary {
-      .ui.item:not(.active):hover {
-        color: @secondaryColor !important;
-
-        .icon {
-          color: @secondaryColor !important;
-        }
-      }
-
-      .ui.item.active {
-        background-color: @secondaryColor !important;
-        color: #fff !important;
-      }
-
-      .active .menu-item-text {
-        color: #fff !important;
-      }
-    }
-
-    &.theme-tertiary {
-      .ui.item:not(.active):hover {
-        color: @tertiaryColor !important;
-
-        .icon {
-          color: @tertiaryColor !important;
-        }
-      }
-
-      .ui.item.active {
-        background-color: @tertiaryColor !important;
-        color: #fff !important;
-      }
-
-      .active .menu-item-text {
-        color: #fff !important;
-      }
-    }
-
-    &.red {
-      color: @red !important;
-
-      .ui.item.active {
-        background-color: @red !important;
-        color: #fff !important;
-      }
-
-      .active .menu-item-text {
-        color: #fff !important;
-      }
-    }
-
-    &.orange {
-      .ui.item:hover {
-        color: @orange !important;
-      }
-
-      .ui.item.active {
-        background-color: @orange !important;
-        color: #fff !important;
-      }
-
-      .active .menu-item-text {
-        color: #fff !important;
-      }
-    }
-
-    &.yellow {
-      .ui.item:hover {
-        color: @yellow !important;
-      }
-
-      .ui.item.active {
-        background-color: @yellow !important;
-        color: #fff !important;
-      }
-
-      .active .menu-item-text {
-        color: #fff !important;
-      }
-    }
-
-    &.olive {
-      .ui.item:hover {
-        color: @olive !important;
-      }
-
-      .ui.item.active {
-        background-color: @olive !important;
-        color: #fff !important;
-      }
-
-      .active .menu-item-text {
-        color: #fff !important;
-      }
-    }
-
-    &.green {
-      .ui.item:hover {
-        color: @green !important;
-      }
-
-      .ui.item.active {
-        background-color: @green !important;
-        color: #fff !important;
-      }
-
-      .active .menu-item-text {
-        color: #fff !important;
-      }
-    }
-
-    &.teal {
-      .ui.item:hover {
-        color: @teal !important;
-      }
-
-      .ui.item.active {
-        background-color: @teal !important;
-        color: #fff !important;
-      }
-
-      .active .menu-item-text {
-        color: #fff !important;
-      }
-    }
-
-    &.blue {
-      .ui.item:hover {
-        color: @blue !important;
-      }
-
-      .ui.item.active {
-        background-color: @blue !important;
-        color: #fff !important;
-      }
-
-      .active .menu-item-text {
-        color: #fff !important;
-      }
-    }
-
-    &.violet {
-      .ui.item:hover {
-        color: @violet !important;
-      }
-
-      .ui.item.active {
-        background-color: @violet !important;
-        color: #fff !important;
-      }
-
-      .active .menu-item-text {
-        color: #fff !important;
-      }
-    }
-
-    &.purple {
-      .ui.item:hover {
-        color: @purple !important;
-      }
-
-      .ui.item.active {
-        background-color: @purple !important;
-        color: #fff !important;
-      }
-
-      .active .menu-item-text {
-        color: #fff !important;
-      }
-    }
-
-    &.brown {
-      .ui.item:hover {
-        color: @brown !important;
-      }
-
-      .ui.item.active {
-        background-color: @brown !important;
-        color: #fff !important;
-      }
-    }
-
-    &.grey {
-      .ui.item:hover {
-        color: @grey !important;
-      }
-
-      .ui.item.active {
-        background-color: @grey !important;
-        color: #fff !important;
-      }
-
-      .active .menu-item-text {
-        color: #fff !important;
-      }
-    }
-
-    &.black {
-      .ui.item:hover {
-        color: @black !important;
-      }
-
-      .ui.item.active {
-        background-color: @black !important;
-        color: #fff !important;
-      }
-
-      .active .menu-item-text {
-        color: #fff !important;
-      }
-    }
-
-    .ui.tab {
-      padding: 1rem;
-      margin-bottom: 0;
-      background-color: @accordionTabBackground !important;
-    }
   }
 }
 
-.ui.menu.RRT__tabs {
-  .item.ui {
-    color: #323232;
-  }
-
-  &.theme-primary {
-    .item.ui:hover {
-      color: @primaryColor !important;
-    }
-
-    .item.ui.active {
-      border-bottom: 0.1875rem solid @primaryColor !important;
-      color: @primaryColor !important;
-    }
-  }
-
-  &.theme-secondary {
-    .item.ui:hover {
-      color: @secondaryColor !important;
-    }
-
-    .item.ui.active {
-      border-bottom: 0.1875rem solid @secondaryColor !important;
-      color: @secondaryColor !important;
-    }
-  }
-
-  &.theme-tertiary {
-    .item.ui:hover {
-      color: @tertiaryColor !important;
-    }
-
-    .ui.item.active {
-      border-bottom: 0.1875rem solid @tertiaryColor !important;
-      color: @tertiaryColor !important;
-    }
-  }
-}
-
-.tabs-block {
-  .theme-primary {
-    .active.item {
-      border-bottom: 0.1875rem solid @primaryColor !important;
-      color: @primaryColor !important;
-    }
-  }
-
-  .theme-secondary {
-    .active.item {
-      border-bottom: 0.1875rem solid @secondaryColor !important;
-      color: @secondaryColor !important;
-    }
-  }
-
-  .theme-tertiary {
-    .active.item {
-      border-bottom: 0.1875rem solid @tertiaryColor !important;
-      color: @tertiaryColor !important;
-    }
-  }
-}
-
-// .tabs-block .ui.menu.RRT__accordion .ui.item .icon {
-//   color: #808285;
-// }
-
 .loadAddonOverrides();

package/src/less/menu.variables

@@ -8,7 +8,6 @@
 @menuTitleFontSize: 24px;
 @menuTitleFontWeight: normal;
 @menuTitleColor: #013C60;
-@menuTitleBackgrounnd: none;
 @menuTitleHoverColor: #013C60;
 @menuTitleHoverBackground: none;
 
@@ -18,10 +17,10 @@
 /* Menu item */
 @menuItemCountDisplay: none;
 
-@accordionMenuItemBackground: #F3F4F5;
+@accordionMenuItemBackground: #F3F4F5;  /* not used */
 @accordionTabBackground: transparent;
 
 /* Theme variables */
 @primaryColor         : #004B7F;
 @secondaryColor       : #007B6C;
-@tertiaryColor        : #3D5265;
+@tertiaryColor        : #3D5265;

package/src/less/tabs.less

@@ -7,6 +7,10 @@
 .loadAddonVariables();
 
 .tabs-block {
+  .remove-menu.active {
+    overflow: revert; /* needed for edit double click to modify title to remove scrollbar */
+  }
+
   .tabs-accessibility {
     .ui.button.item:focus-visible {
       outline: 1px dotted #212121 !important;

package/src/less/tabs.variables

@@ -2,9 +2,9 @@
             Tabs block
 *******************************/
 
-@tabsBlockColor: #000;
+@tabsBlockColor: var(--text-color, #000);
 @verticalPadding: 1rem;
 @horizontalPadding: 1rem;
 
 /* Tab pane */
-@tabPanePadding: @verticalPadding @horizontalPadding;
+@tabPanePadding: @verticalPadding @horizontalPadding;