@eeacms/volto-tabs-block 5.0.8 → 6.0.0

package/src/components/templates/horizontal-responsive/schema.js

@@ -1,14 +1,195 @@
-export default () => ({
-  title: 'Horizontal tabs block',
+import { defineMessages } from 'react-intl';
+
+const messages = defineMessages({
+  HorizontalTabsBlock: {
+    id: 'horizontal-tabs-block',
+    defaultMessage: 'Horizontal 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.HorizontalTabsBlock),
   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',
       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/index.js

@@ -1,3 +1,5 @@
+import { defineMessages } from 'react-intl';
+
 import {
   DefaultEdit,
   DefaultView,
@@ -22,6 +24,17 @@ import tabsSVG from '@eeacms/volto-tabs-block//icons/tabs.svg';
 import rightSVG from '@plone/volto/icons/right-key.svg';
 import downSVG from '@plone/volto/icons/down-key.svg';
 
+defineMessages({
+  default: {
+    id: 'Default',
+    defaultMessage: 'Default',
+  },
+  accordion: {
+    id: 'Accordion responsive',
+    defaultMessage: 'Accordion responsive',
+  },
+});
+
 export default (config) => {
   config.blocks.blocksConfig[TABS_BLOCK] = {
     id: TABS_BLOCK,
@@ -41,12 +54,14 @@ export default (config) => {
     schema: layoutSchema(config),
     templates: {
       default: {
+        id: 'default',
         title: 'Default',
         edit: DefaultEdit,
         view: DefaultView,
         schema: defaultSchema,
       },
       accordion: {
+        id: 'accordionResponsive',
         title: 'Accordion responsive',
         edit: AccordionEdit,
         view: AccordionView,
@@ -59,18 +74,21 @@ export default (config) => {
         },
       },
       'horizontal-responsive': {
+        id: 'horizontalResponsive',
         title: 'Horizontal responsive',
         edit: HorizontalResponsiveEdit,
         view: HorizontalResponsiveView,
         schema: horizontalResponsiveSchema,
       },
       carousel: {
+        id: 'carouselHorizontal',
         title: 'Carousel horizontal',
         edit: DefaultEdit,
         view: HorizontalCarouselView,
         schema: carouselSchema,
       },
       carousel_vertical: {
+        id: 'carouselVerticalPrototype',
         title: 'Carousel vertical (prototype)',
         edit: DefaultEdit,
         view: VerticalCarouselView,