@eeacms/volto-tabs-block 5.0.7 → 5.1.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/icons/left-key.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: Sketch Beta 3.3.2 (12041) - http://www.bohemiancoding.com/sketch -->
+    <title>arrow-left-circle</title>
+    <desc>Created with Sketch Beta.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+        <g id="Icon-Set-Filled" sketch:type="MSLayerGroup" transform="translate(-258.000000, -1089.000000)"
+            fill="#ffffff">
+            <path
+                d="M281,1106 L270.414,1106 L274.536,1110.12 C274.926,1110.51 274.926,1111.15 274.536,1111.54 C274.145,1111.93 273.512,1111.93 273.121,1111.54 L267.464,1105.88 C267.225,1105.64 267.15,1105.31 267.205,1105 C267.15,1104.69 267.225,1104.36 267.464,1104.12 L273.121,1098.46 C273.512,1098.07 274.145,1098.07 274.536,1098.46 C274.926,1098.86 274.926,1099.49 274.536,1099.88 L270.414,1104 L281,1104 C281.552,1104 282,1104.45 282,1105 C282,1105.55 281.552,1106 281,1106 L281,1106 Z M274,1089 C265.164,1089 258,1096.16 258,1105 C258,1113.84 265.164,1121 274,1121 C282.836,1121 290,1113.84 290,1105 C290,1096.16 282.836,1089 274,1089 L274,1089 Z"
+                id="arrow-left-circle" sketch:type="MSShapeGroup"></path>
+        </g>
+    </g>
+</svg>

package/src/icons/right-key.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: Sketch Beta 3.3.2 (12041) - http://www.bohemiancoding.com/sketch -->
+    <title>arrow-right-circle</title>
+    <desc>Created with Sketch Beta.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+        <g id="Icon-Set-Filled" sketch:type="MSLayerGroup" transform="translate(-310.000000, -1089.000000)"
+            fill="#ffffff">
+            <path
+                d="M332.535,1105.88 L326.879,1111.54 C326.488,1111.93 325.855,1111.93 325.465,1111.54 C325.074,1111.15 325.074,1110.51 325.465,1110.12 L329.586,1106 L319,1106 C318.447,1106 318,1105.55 318,1105 C318,1104.45 318.447,1104 319,1104 L329.586,1104 L325.465,1099.88 C325.074,1099.49 325.074,1098.86 325.465,1098.46 C325.855,1098.07 326.488,1098.07 326.879,1098.46 L332.535,1104.12 C332.775,1104.36 332.85,1104.69 332.795,1105 C332.85,1105.31 332.775,1105.64 332.535,1105.88 L332.535,1105.88 Z M326,1089 C317.163,1089 310,1096.16 310,1105 C310,1113.84 317.163,1121 326,1121 C334.837,1121 342,1113.84 342,1105 C342,1096.16 334.837,1089 326,1089 L326,1089 Z"
+                id="arrow-right-circle" sketch:type="MSShapeGroup"></path>
+        </g>
+    </g>
+</svg>

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,

package/src/less/carousel.less

@@ -200,7 +200,8 @@
   &.light {
     .slick-prev,
     .slick-next {
-      svg {
+      svg,
+      path {
         fill: @lightColor !important;
       }
     }
@@ -231,7 +232,8 @@
   &.dark {
     .slick-prev,
     .slick-next {
-      svg {
+      svg,
+      path {
         fill: @darkColor !important;
       }
     }
@@ -262,7 +264,8 @@
   &.grey {
     .slick-prev,
     .slick-next {
-      svg {
+      svg,
+      path {
         fill: @greyColor !important;
       }
     }

package/.i18n.babel.config.js

@@ -1 +0,0 @@
-module.exports = require('@plone/volto/babel');