@eeacms/volto-tabs-block 5.0.8 → 6.0.0

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

@@ -1,40 +1,87 @@
-import config from '@plone/volto/registry';
+import { defineMessages } from 'react-intl';
 
-export default () => ({
-  title: 'Accordion tabs block',
+const messages = defineMessages({
+  AccordionTabsBlock: {
+    id: 'accordion-tabs-block',
+    defaultMessage: 'Accordion tabs block',
+  },
+  Default: {
+    id: 'default',
+    defaultMessage: 'Default',
+  },
+  Menu: {
+    id: 'menu',
+    defaultMessage: 'Menu',
+  },
+  Style: {
+    id: 'style',
+    defaultMessage: 'Style',
+  },
+  Description: {
+    id: 'description',
+    defaultMessage: 'Description',
+  },
+  IconPositionOnTheRight: {
+    id: 'icon-position-on-the-right',
+    defaultMessage: 'Icon position on the right',
+  },
+  PositionLeftRightIconAccordionTab: {
+    id: 'position-left-right-of-the-icon-in-the-accordion-tab',
+    defaultMessage: 'Position left/right of the icon in the accordion tab',
+  },
+  Inverted: {
+    id: 'inverted',
+    defaultMessage: 'Inverted',
+  },
+  Theme: {
+    id: 'theme',
+    defaultMessage: 'Theme',
+  },
+  SetThemeAccordionTabsBlock: {
+    id: 'set-the-theme-for-the-accordion-tabs-block',
+    defaultMessage: 'Set the theme for the accordion tabs block',
+  },
+});
+
+export default (config, props) => ({
+  title: props.intl.formatMessage(messages.AccordionTabsBlock),
   fieldsets: [
     {
       id: 'default',
-      title: 'Default',
+      title: props.intl.formatMessage(messages.Default),
       fields: ['description'],
     },
     {
       id: 'menu',
-      title: 'Menu',
+      title: props.intl.formatMessage(messages.Menu),
       fields: ['menuInverted', 'accordionIconRight'],
     },
     {
       id: 'style',
-      title: 'Style',
+      title: props.intl.formatMessage(messages.Style),
       fields: ['theme'],
     },
   ],
   properties: {
     description: {
-      title: 'Description',
+      title: props.intl.formatMessage(messages.Description),
     },
     accordionIconRight: {
-      title: 'Icon position on the right',
-      description: 'Position left/right of the icon in the accordion tab',
+      title: props.intl.formatMessage(messages.IconPositionOnTheRight),
+      description: props.intl.formatMessage(
+        messages.PositionLeftRightIconAccordionTab,
+      ),
       type: 'boolean',
     },
     menuInverted: {
-      title: 'Inverted',
+      title: props.intl.formatMessage(messages.Inverted),
       type: 'boolean',
     },
     theme: {
-      title: 'Theme',
-      description: 'Set the theme for the accordion tabs block',
+      title: props.intl.formatMessage(messages.Theme),
+      description: props.intl.formatMessage(
+        messages.SetThemeAccordionTabsBlock,
+      ),
       widget: 'theme_picker',
       colors: [
         ...(config.settings && config.settings.themeColors

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

@@ -1,19 +1,48 @@
-export default () => ({
-  title: 'Carousel block',
+import { defineMessages } from 'react-intl';
+
+const messages = defineMessages({
+  CarouselTabsBlock: {
+    id: 'carousel-tabs-block',
+    defaultMessage: 'Carousel block',
+  },
+  Default: {
+    id: 'default',
+    defaultMessage: 'Default',
+  },
+  Theme: {
+    id: 'theme',
+    defaultMessage: 'Theme',
+  },
+  Light: {
+    id: 'light',
+    defaultMessage: 'Light',
+  },
+  Dark: {
+    id: 'dark',
+    defaultMessage: 'Dark',
+  },
+  Grey: {
+    id: 'grey',
+    defaultMessage: 'Grey',
+  },
+});
+
+export default (config, props) => ({
+  title: props.intl.formatMessage(messages.CarouselTabsBlock),
   fieldsets: [
     {
       id: 'default',
-      title: 'Default',
+      title: props.intl.formatMessage(messages.Default),
       fields: ['theme'],
     },
   ],
   properties: {
     theme: {
-      title: 'Theme',
+      title: props.intl.formatMessage(messages.Theme),
       choices: [
-        ['light', 'Light'],
-        ['dark', 'Dark'],
-        ['grey', 'Grey'],
+        ['light', props.intl.formatMessage(messages.Light)],
+        ['dark', props.intl.formatMessage(messages.Dark)],
+        ['grey', props.intl.formatMessage(messages.Grey)],
       ],
       default: 'light',
     },

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

@@ -1,14 +1,195 @@
-export default () => ({
-  title: 'Default tabs block',
+import { defineMessages } from 'react-intl';
+
+const messages = defineMessages({
+  DefaultTabsBlock: {
+    id: 'default-tabs-block',
+    defaultMessage: 'Default tabs block',
+  },
+  Default: {
+    id: 'default',
+    defaultMessage: 'Default',
+  },
+  Menu: {
+    id: 'menu',
+    defaultMessage: 'Menu',
+  },
+  Description: {
+    id: 'description',
+    defaultMessage: 'Description',
+  },
+  Position: {
+    id: 'position',
+    defaultMessage: 'Position',
+  },
+  Top: {
+    id: 'top',
+    defaultMessage: 'Top',
+  },
+  Bottom: {
+    id: 'bottom',
+    defaultMessage: 'Bottom',
+  },
+  LeftSide: {
+    id: 'left-side',
+    defaultMessage: 'Left side',
+  },
+  RightSide: {
+    id: 'right-side',
+    defaultMessage: 'Right side',
+  },
+  Alignment: {
+    id: 'alignment',
+    defaultMessage: 'Alignment',
+  },
+  Left: {
+    id: 'left',
+    defaultMessage: 'Left',
+  },
+  Center: {
+    id: 'center',
+    defaultMessage: 'Center',
+  },
+  Right: {
+    id: 'right',
+    defaultMessage: 'Right',
+  },
+  SpaceBetween: {
+    id: 'space-between',
+    defaultMessage: 'Space between',
+  },
+  Size: {
+    id: 'size',
+    defaultMessage: 'Size',
+  },
+  Mini: {
+    id: 'mini',
+    defaultMessage: 'Mini',
+  },
+  Tiny: {
+    id: 'tiny',
+    defaultMessage: 'Tiny',
+  },
+  Small: {
+    id: 'small',
+    defaultMessage: 'Small',
+  },
+  Large: {
+    id: 'large',
+    defaultMessage: 'Large',
+  },
+  Huge: {
+    id: 'huge',
+    defaultMessage: 'Huge',
+  },
+  Massive: {
+    id: 'massive',
+    defaultMessage: 'Massive',
+  },
+  Color: {
+    id: 'color',
+    defaultMessage: 'Color',
+  },
+  Red: {
+    id: 'red',
+    defaultMessage: 'Red',
+  },
+  Orange: {
+    id: 'orange',
+    defaultMessage: 'Orange',
+  },
+  Yellow: {
+    id: 'yellow',
+    defaultMessage: 'Yellow',
+  },
+  Olive: {
+    id: 'olive',
+    defaultMessage: 'Olive',
+  },
+  Green: {
+    id: 'green',
+    defaultMessage: 'Green',
+  },
+  Teal: {
+    id: 'teal',
+    defaultMessage: 'Teal',
+  },
+  Blue: {
+    id: 'blue',
+    defaultMessage: 'Blue',
+  },
+  Violet: {
+    id: 'violet',
+    defaultMessage: 'Violet',
+  },
+  Purple: {
+    id: 'purple',
+    defaultMessage: 'Purple',
+  },
+  Pink: {
+    id: 'pink',
+    defaultMessage: 'Pink',
+  },
+  Brown: {
+    id: 'brown',
+    defaultMessage: 'Brown',
+  },
+  Grey: {
+    id: 'grey',
+    defaultMessage: 'Grey',
+  },
+  Black: {
+    id: 'black',
+    defaultMessage: 'Black',
+  },
+  MenuBorderless: {
+    id: 'menu-border-less',
+    defaultMessage: 'Borderless',
+  },
+  MenuCompact: {
+    id: 'menu-compact',
+    defaultMessage: 'Compact',
+  },
+  MenuFluid: {
+    id: 'menu-fluid',
+    defaultMessage: 'Fluid',
+  },
+  MenuInverted: {
+    id: 'menu-inverted',
+    defaultMessage: 'Inverted',
+  },
+  MenuPointing: {
+    id: 'menu-pointing',
+    defaultMessage: 'Pointing',
+  },
+  MenuSecondary: {
+    id: 'menu-secondary',
+    defaultMessage: 'Secondary',
+  },
+  MenuStackable: {
+    id: 'menu-stackable',
+    defaultMessage: 'Stackable',
+  },
+  MenuTabular: {
+    id: 'menu-tabular',
+    defaultMessage: 'Tabular',
+  },
+  MenuText: {
+    id: 'menu-text',
+    defaultMessage: 'Text',
+  },
+});
+
+export default (config, props) => ({
+  title: props.intl.formatMessage(messages.DefaultTabsBlock),
   fieldsets: [
     {
       id: 'default',
-      title: 'Default',
+      title: props.intl.formatMessage(messages.Default),
       fields: ['description'],
     },
     {
       id: 'menu',
-      title: 'Menu',
+      title: props.intl.formatMessage(messages.Menu),
       fields: [
         'menuAlign',
         'menuPosition',
@@ -28,92 +209,92 @@ export default () => ({
   ],
   properties: {
     description: {
-      title: 'Description',
+      title: props.intl.formatMessage(messages.Description),
     },
     menuPosition: {
-      title: 'Position',
+      title: props.intl.formatMessage(messages.Position),
       choices: [
-        ['top', 'Top'],
-        ['bottom', 'Bottom'],
-        ['left side', 'Left side'],
-        ['right side', 'Right side'],
+        ['top', props.intl.formatMessage(messages.Top)],
+        ['bottom', props.intl.formatMessage(messages.Bottom)],
+        ['left side', props.intl.formatMessage(messages.LeftSide)],
+        ['right side', props.intl.formatMessage(messages.RightSide)],
       ],
     },
     menuAlign: {
-      title: 'Alignment',
+      title: props.intl.formatMessage(messages.Alignment),
       choices: [
-        ['left', 'Left'],
-        ['center', 'Center'],
-        ['right', 'Right'],
-        ['space-between', 'Space between'],
+        ['left', props.intl.formatMessage(messages.Left)],
+        ['center', props.intl.formatMessage(messages.Center)],
+        ['right', props.intl.formatMessage(messages.Right)],
+        ['space-between', props.intl.formatMessage(messages.SpaceBetween)],
       ],
     },
     menuSize: {
-      title: 'Size',
+      title: props.intl.formatMessage(messages.Size),
       choices: [
-        ['mini', 'Mini'],
-        ['tiny', 'Tiny'],
-        ['small', 'Small'],
-        ['large', 'Large'],
-        ['huge', 'Huge'],
-        ['massive', 'Masive'],
+        ['mini', props.intl.formatMessage(messages.Mini)],
+        ['tiny', props.intl.formatMessage(messages.Tiny)],
+        ['small', props.intl.formatMessage(messages.Small)],
+        ['large', props.intl.formatMessage(messages.Large)],
+        ['huge', props.intl.formatMessage(messages.Huge)],
+        ['massive', props.intl.formatMessage(messages.Massive)],
       ],
     },
     menuColor: {
-      title: 'Color',
+      title: props.intl.formatMessage(messages.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'],
+        ['red', props.intl.formatMessage(messages.Red)],
+        ['orange', props.intl.formatMessage(messages.Orange)],
+        ['yellow', props.intl.formatMessage(messages.Yellow)],
+        ['olive', props.intl.formatMessage(messages.Olive)],
+        ['green', props.intl.formatMessage(messages.Green)],
+        ['teal', props.intl.formatMessage(messages.Teal)],
+        ['blue', props.intl.formatMessage(messages.Blue)],
+        ['violet', props.intl.formatMessage(messages.Violet)],
+        ['purple', props.intl.formatMessage(messages.Purple)],
+        ['pink', props.intl.formatMessage(messages.Pink)],
+        ['brown', props.intl.formatMessage(messages.Brown)],
+        ['grey', props.intl.formatMessage(messages.Grey)],
+        ['black', props.intl.formatMessage(messages.Black)],
       ],
     },
     menuBorderless: {
-      title: 'Borderless',
+      title: props.intl.formatMessage(messages.MenuBorderless),
       type: 'boolean',
     },
     menuCompact: {
-      title: 'Compact',
+      title: props.intl.formatMessage(messages.MenuCompact),
       type: 'boolean',
       defaultValue: true,
     },
     menuFluid: {
-      title: 'Fluid',
+      title: props.intl.formatMessage(messages.MenuFluid),
       type: 'boolean',
       defaultValue: true,
     },
     menuInverted: {
-      title: 'Inverted',
+      title: props.intl.formatMessage(messages.MenuInverted),
       type: 'boolean',
     },
     menuPointing: {
-      title: 'Pointing',
+      title: props.intl.formatMessage(messages.MenuPointing),
       type: 'boolean',
     },
     menuSecondary: {
-      title: 'Secondary',
+      title: props.intl.formatMessage(messages.MenuSecondary),
       type: 'boolean',
     },
     menuStackable: {
-      title: 'Stackable',
+      title: props.intl.formatMessage(messages.MenuStackable),
       type: 'boolean',
     },
     menuTabular: {
-      title: 'Tabular',
+      title: props.intl.formatMessage(messages.MenuTabular),
       type: 'boolean',
     },
     menuText: {
-      title: 'Text',
+      title: props.intl.formatMessage(messages.MenuText),
       type: 'boolean',
       defaultValue: true,
     },

package/src/components/templates/horizontal-responsive/Edit.jsx

@@ -331,7 +331,7 @@ const Edit = (props) => {
         />
       ),
       pane: (
-        <Tab.Pane as={isContainer ? Container : undefined}>
+        <Tab.Pane key={tab} as={isContainer ? Container : undefined}>
           <div tabIndex={0} role="tabpanel" id={'tab-pane-' + tab}>
             <BlocksForm
               allowedBlocks={data?.allowedBlocks}

package/src/components/templates/horizontal-responsive/View.jsx

@@ -70,7 +70,7 @@ const MenuItem = (props) => {
       <Button
         as="a"
         tabIndex={0}
-        className={cx('item', 'accesibility-button', {
+        className={cx('item', {
           active: tab === activeTab,
         })}
         item-data={tab}
@@ -230,7 +230,7 @@ const View = (props) => {
         />
       ),
       pane: (
-        <Tab.Pane as={isContainer ? Container : undefined}>
+        <Tab.Pane key={tab} as={isContainer ? Container : undefined}>
           <div
             id={tabs[tab]?.title || `Tab ${tabsList.indexOf(tab) + 1}`}
             className="tab-name"