@eeacms/volto-tabs-block 5.0.8 → 6.0.0

package/locales/volto.pot

@@ -1,7 +1,7 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: Plone\n"
-"POT-Creation-Date: 2023-06-28T10:48:22.678Z\n"
+"POT-Creation-Date: 2023-08-29T17:15:15.520Z\n"
 "Last-Translator: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
 "Language-Team: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
 "MIME-Version: 1.0\n"
@@ -13,4 +13,399 @@ msgstr ""
 "Preferred-Encodings: utf-8\n"
 "Domain: volto\n"
 
+#: index
+# defaultMessage: Accordion responsive
+msgid "Accordion responsive"
+msgstr ""
+
+#: index
+# defaultMessage: Default
+msgid "Default"
+msgstr ""
+
+#: components/EditBlockWrapper
+# defaultMessage: Unknown Block {block}
+msgid "Unknown Block"
+msgstr ""
+
+#: components/templates/accordion/schema
+# defaultMessage: Accordion tabs block
+msgid "accordion-tabs-block"
+msgstr ""
+
+#: components/schema
+# defaultMessage: Accordion responsive
+msgid "accordionResponsive"
+msgstr ""
+
+#: components/templates/default/schema
+#: components/templates/horizontal-responsive/schema
+# defaultMessage: Alignment
+msgid "alignment"
+msgstr ""
+
+#: components/templates/default/schema
+#: components/templates/horizontal-responsive/schema
+# defaultMessage: Black
+msgid "black"
+msgstr ""
+
+#: components/templates/default/schema
+#: components/templates/horizontal-responsive/schema
+# defaultMessage: Blue
+msgid "blue"
+msgstr ""
+
+#: components/schema
+#: components/templates/default/schema
+#: components/templates/horizontal-responsive/schema
+# defaultMessage: Bottom
+msgid "bottom"
+msgstr ""
+
+#: components/templates/default/schema
+#: components/templates/horizontal-responsive/schema
+# defaultMessage: Brown
+msgid "brown"
+msgstr ""
+
+#: components/templates/carousel/schema
+# defaultMessage: Carousel block
+msgid "carousel-tabs-block"
+msgstr ""
+
+#: components/schema
+# defaultMessage: Carousel horizontal
+msgid "carouselHorizontal"
+msgstr ""
+
+#: components/schema
+# defaultMessage: Carousel vertical (prototype)
+msgid "carouselVerticalPrototype"
+msgstr ""
+
+#: components/templates/default/schema
+#: components/templates/horizontal-responsive/schema
+# defaultMessage: Center
+msgid "center"
+msgstr ""
+
+#: components/templates/default/schema
+#: components/templates/horizontal-responsive/schema
+# defaultMessage: Color
+msgid "color"
+msgstr ""
+
+#: components/templates/carousel/schema
+# defaultMessage: Dark
+msgid "dark"
+msgstr ""
+
+#: components/schema
+#: components/templates/accordion/schema
+#: components/templates/carousel/schema
+#: components/templates/default/schema
+#: components/templates/horizontal-responsive/schema
+# defaultMessage: Default
+msgid "default"
+msgstr ""
+
+#: components/templates/default/schema
+# defaultMessage: Default tabs block
+msgid "default-tabs-block"
+msgstr ""
+
+#: components/EditBlockWrapper
+# defaultMessage: delete
+msgid "delete"
+msgstr ""
+
+#: components/templates/accordion/schema
+#: components/templates/default/schema
+#: components/templates/horizontal-responsive/schema
+# defaultMessage: Description
+msgid "description"
+msgstr ""
+
+#: components/templates/default/schema
+#: components/templates/horizontal-responsive/schema
+# defaultMessage: Green
+msgid "green"
+msgstr ""
+
+#: components/templates/carousel/schema
+#: components/templates/default/schema
+#: components/templates/horizontal-responsive/schema
+# defaultMessage: Grey
+msgid "grey"
+msgstr ""
+
+#: components/templates/horizontal-responsive/schema
+# defaultMessage: Horizontal tabs block
+msgid "horizontal-tabs-block"
+msgstr ""
+
+#: components/schema
+# defaultMessage: Horizontal responsive
+msgid "horizontalResponsive"
+msgstr ""
+
+#: components/templates/default/schema
+#: components/templates/horizontal-responsive/schema
+# defaultMessage: Huge
+msgid "huge"
+msgstr ""
+
+#: components/templates/accordion/schema
+# defaultMessage: Icon position on the right
+msgid "icon-position-on-the-right"
+msgstr ""
+
+#: components/templates/accordion/schema
+# defaultMessage: Inverted
+msgid "inverted"
+msgstr ""
+
+#: components/templates/default/schema
+#: components/templates/horizontal-responsive/schema
+# defaultMessage: Large
+msgid "large"
+msgstr ""
+
+#: components/templates/default/schema
+#: components/templates/horizontal-responsive/schema
+# defaultMessage: Left
+msgid "left"
+msgstr ""
+
+#: components/templates/default/schema
+#: components/templates/horizontal-responsive/schema
+# defaultMessage: Left side
+msgid "left-side"
+msgstr ""
+
+#: components/templates/carousel/schema
+# defaultMessage: Light
+msgid "light"
+msgstr ""
+
+#: components/templates/default/schema
+#: components/templates/horizontal-responsive/schema
+# defaultMessage: Massive
+msgid "massive"
+msgstr ""
+
+#: components/templates/accordion/schema
+#: components/templates/default/schema
+#: components/templates/horizontal-responsive/schema
+# defaultMessage: Menu
+msgid "menu"
+msgstr ""
+
+#: components/templates/default/schema
+#: components/templates/horizontal-responsive/schema
+# defaultMessage: Borderless
+msgid "menu-border-less"
+msgstr ""
+
+#: components/templates/default/schema
+#: components/templates/horizontal-responsive/schema
+# defaultMessage: Compact
+msgid "menu-compact"
+msgstr ""
+
+#: components/templates/default/schema
+#: components/templates/horizontal-responsive/schema
+# defaultMessage: Fluid
+msgid "menu-fluid"
+msgstr ""
+
+#: components/templates/default/schema
+#: components/templates/horizontal-responsive/schema
+# defaultMessage: Inverted
+msgid "menu-inverted"
+msgstr ""
+
+#: components/templates/default/schema
+#: components/templates/horizontal-responsive/schema
+# defaultMessage: Pointing
+msgid "menu-pointing"
+msgstr ""
+
+#: components/templates/default/schema
+#: components/templates/horizontal-responsive/schema
+# defaultMessage: Secondary
+msgid "menu-secondary"
+msgstr ""
+
+#: components/templates/default/schema
+#: components/templates/horizontal-responsive/schema
+# defaultMessage: Stackable
+msgid "menu-stackable"
+msgstr ""
+
+#: components/templates/default/schema
+#: components/templates/horizontal-responsive/schema
+# defaultMessage: Tabular
+msgid "menu-tabular"
+msgstr ""
+
+#: components/templates/default/schema
+#: components/templates/horizontal-responsive/schema
+# defaultMessage: Text
+msgid "menu-text"
+msgstr ""
+
+#: components/schema
+# defaultMessage: Middle
+msgid "middle"
+msgstr ""
+
+#: components/templates/default/schema
+#: components/templates/horizontal-responsive/schema
+# defaultMessage: Mini
+msgid "mini"
+msgstr ""
+
+#: components/templates/default/schema
+#: components/templates/horizontal-responsive/schema
+# defaultMessage: Olive
+msgid "olive"
+msgstr ""
+
+#: components/templates/default/schema
+#: components/templates/horizontal-responsive/schema
+# defaultMessage: Orange
+msgid "orange"
+msgstr ""
+
+#: components/templates/default/schema
+#: components/templates/horizontal-responsive/schema
+# defaultMessage: Pink
+msgid "pink"
+msgstr ""
+
+#: components/templates/default/schema
+#: components/templates/horizontal-responsive/schema
+# defaultMessage: Position
+msgid "position"
+msgstr ""
+
+#: components/templates/accordion/schema
+# defaultMessage: Position left/right of the icon in the accordion tab
+msgid "position-left-right-of-the-icon-in-the-accordion-tab"
+msgstr ""
+
+#: components/templates/default/schema
+#: components/templates/horizontal-responsive/schema
+# defaultMessage: Purple
+msgid "purple"
+msgstr ""
+
+#: components/templates/default/schema
+#: components/templates/horizontal-responsive/schema
+# defaultMessage: Red
+msgid "red"
+msgstr ""
+
+#: components/templates/default/schema
+#: components/templates/horizontal-responsive/schema
+# defaultMessage: Right
+msgid "right"
+msgstr ""
+
+#: components/templates/default/schema
+#: components/templates/horizontal-responsive/schema
+# defaultMessage: Right side
+msgid "right-side"
+msgstr ""
+
+#: components/templates/accordion/schema
+# defaultMessage: Set the theme for the accordion tabs block
+msgid "set-the-theme-for-the-accordion-tabs-block"
+msgstr ""
+
+#: components/templates/default/schema
+#: components/templates/horizontal-responsive/schema
+# defaultMessage: Size
+msgid "size"
+msgstr ""
+
+#: components/templates/default/schema
+#: components/templates/horizontal-responsive/schema
+# defaultMessage: Small
+msgid "small"
+msgstr ""
+
+#: components/templates/default/schema
+#: components/templates/horizontal-responsive/schema
+# defaultMessage: Space between
+msgid "space-between"
+msgstr ""
+
+#: components/templates/accordion/schema
+# defaultMessage: Style
+msgid "style"
+msgstr ""
+
+#: components/schema
+# defaultMessage: Tabs
+msgid "tabs"
+msgstr ""
+
+#: components/schema
+# defaultMessage: Tabs block
+msgid "tabs-block"
+msgstr ""
 
+#: components/templates/default/schema
+#: components/templates/horizontal-responsive/schema
+# defaultMessage: Teal
+msgid "teal"
+msgstr ""
+
+#: components/schema
+# defaultMessage: Template
+msgid "template"
+msgstr ""
+
+#: components/templates/accordion/schema
+#: components/templates/carousel/schema
+# defaultMessage: Theme
+msgid "theme"
+msgstr ""
+
+#: components/templates/default/schema
+#: components/templates/horizontal-responsive/schema
+# defaultMessage: Tiny
+msgid "tiny"
+msgstr ""
+
+#: components/schema
+# defaultMessage: Title
+msgid "title"
+msgstr ""
+
+#: components/schema
+#: components/templates/default/schema
+#: components/templates/horizontal-responsive/schema
+# defaultMessage: Top
+msgid "top"
+msgstr ""
+
+#: components/schema
+# defaultMessage: Vertical align
+msgid "vertical-align"
+msgstr ""
+
+#: components/templates/default/schema
+#: components/templates/horizontal-responsive/schema
+# defaultMessage: Violet
+msgid "violet"
+msgstr ""
+
+#: components/templates/default/schema
+#: components/templates/horizontal-responsive/schema
+# defaultMessage: Yellow
+msgid "yellow"
+msgstr ""

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-tabs-block",
-  "version": "5.0.8",
+  "version": "6.0.0",
   "description": "volto-tabs-block: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -31,8 +31,31 @@
     "@cypress/code-coverage": "^3.10.0",
     "@plone/scripts": "*",
     "babel-plugin-transform-class-properties": "^6.24.1",
+    "husky": "*",
+    "lint-staged": "*",
     "md5": "^2.3.0"
   },
+  "lint-staged": {
+    "src/**/*.{js,jsx,ts,tsx,json}": [
+      "make lint-fix",
+      "make prettier-fix"
+    ],
+    "src/**/*.{jsx}": [
+      "make i18n"
+    ],
+    "theme/**/*.{css,less}": [
+      "make stylelint-fix"
+    ],
+    "src/**/*.{css,less}": [
+      "make stylelint-fix"
+    ],
+    "theme/**/*.overrides": [
+      "make stylelint-fix"
+    ],
+    "src/**/*.overrides": [
+      "make stylelint-fix"
+    ]
+  },
   "scripts": {
     "release": "release-it",
     "release-major-beta": "release-it major --preRelease=beta",
@@ -50,6 +73,7 @@
     "lint:fix": "make lint-fix",
     "i18n": "make i18n",
     "cypress:run": "make cypress-run",
-    "cypress:open": "make cypress-open"
+    "cypress:open": "make cypress-open",
+    "prepare": "husky install"
   }
 }

package/src/components/Edit.jsx

@@ -44,6 +44,7 @@ const Edit = (props) => {
     typeof templateSchema === 'function'
       ? templateSchema(config, props)
       : templateSchema,
+    props,
   );
 
   React.useEffect(() => {

package/src/components/View.jsx

@@ -15,7 +15,7 @@ import '@eeacms/volto-tabs-block/less/tabs.less';
 
 const View = (props) => {
   const view = React.useRef(null);
-  const { data = {}, uiContainer = '' } = props;
+  const { data = {}, uiContainer = '', location, history } = props;
   const metadata = props.metadata || props.properties;
   const template = data.template || 'default';
   const tabsData = data.data || {};
@@ -31,7 +31,33 @@ const View = (props) => {
     config.blocks.blocksConfig[TABS_BLOCK].templates?.[template]?.view ||
     DefaultView;
 
+  const useQuery = () => {
+    const { search } = location;
+    return React.useMemo(() => new URLSearchParams(search), [search]);
+  };
+
+  const query = useQuery();
+  const activeTabId = query.get('activeTab');
+
+  const addQueryParam = (key, value) => {
+    const searchParams = new URLSearchParams(location.search);
+    searchParams.set(key, value);
+
+    history.push({
+      pathname: location.pathname,
+      search: searchParams.toString(),
+    });
+  };
+
+  const handleActiveTabChange = (id) => {
+    setActiveTab(id);
+    addQueryParam('activeTab', id);
+  };
+
   React.useEffect(() => {
+    if (tabsList.includes(activeTabId)) {
+      setActiveTab(activeTabId);
+    }
     const urlHash = props.location.hash.substring(1) || '';
     const parentTabId = getParentTabFromHash(data, urlHash);
     const id = parentTabId;
@@ -87,7 +113,7 @@ const View = (props) => {
             tabsList={tabsList}
             template={template}
             uiContainer={uiContainer}
-            setActiveTab={setActiveTab}
+            setActiveTab={handleActiveTabChange}
           />
         </StyleWrapperView>
       </div>

package/src/components/schema.js

@@ -1,22 +1,87 @@
 import { TABS_BLOCK } from '@eeacms/volto-tabs-block/constants';
+import { defineMessages } from 'react-intl';
 
-export const schema = (config, templateSchema = {}) => {
+const messages = defineMessages({
+  TabsBlock: {
+    id: 'tabs-block',
+    defaultMessage: 'Tabs block',
+  },
+  Default: {
+    id: 'default',
+    defaultMessage: 'Default',
+  },
+  Tabs: {
+    id: 'tabs',
+    defaultMessage: 'Tabs',
+  },
+  Title: {
+    id: 'title',
+    defaultMessage: 'Title',
+  },
+  Template: {
+    id: 'template',
+    defaultMessage: 'Template',
+  },
+  VerticalAlign: {
+    id: 'vertical-align',
+    defaultMessage: 'Vertical align',
+  },
+  Top: {
+    id: 'top',
+    defaultMessage: 'Top',
+  },
+  Middle: {
+    id: 'middle',
+    defaultMessage: 'Middle',
+  },
+  Bottom: {
+    id: 'bottom',
+    defaultMessage: 'Bottom',
+  },
+  default: {
+    id: 'default',
+    defaultMessage: 'Default',
+  },
+  accordionResponsive: {
+    id: 'accordionResponsive',
+    defaultMessage: 'Accordion responsive',
+  },
+  horizontalResponsive: {
+    id: 'horizontalResponsive',
+    defaultMessage: 'Horizontal responsive',
+  },
+  carouselHorizontal: {
+    id: 'carouselHorizontal',
+    defaultMessage: 'Carousel horizontal',
+  },
+  carouselVerticalPrototype: {
+    id: 'carouselVerticalPrototype',
+    defaultMessage: 'Carousel vertical (prototype)',
+  },
+});
+
+export const schema = (config, templateSchema = {}, props) => {
+  const { intl } = props;
   const templatesConfig = config.blocks.blocksConfig[TABS_BLOCK].templates;
-  const templates = Object.keys(templatesConfig).map((template) => [
-    template,
-    templatesConfig[template].title || template,
-  ]);
+  const templates = Object.keys(templatesConfig).map((template) => {
+    let templateTitle = templatesConfig[template].title || template;
+    let templateId = templatesConfig[template].id;
+    if (templateId && messages[`${templateId}`]) {
+      templateTitle = intl.formatMessage(messages[`${templateId}`]);
+    }
+    return [template, templateTitle];
+  });
 
   const defaultFieldset = templateSchema?.fieldsets?.filter(
     (fieldset) => fieldset.id === 'default',
   )[0];
 
   return {
-    title: templateSchema?.title || 'Tabs block',
+    title: templateSchema?.title || intl.formatMessage(messages.TabsBlock),
     fieldsets: [
       {
         id: 'default',
-        title: 'Default',
+        title: intl.formatMessage(messages.Default),
         fields: [
           'data',
           'title',
@@ -31,23 +96,23 @@ export const schema = (config, templateSchema = {}) => {
     ],
     properties: {
       data: {
-        title: 'Tabs',
+        title: intl.formatMessage(messages.Tabs),
         type: 'tabs',
       },
       title: {
-        title: 'Title',
+        title: intl.formatMessage(messages.Title),
       },
       template: {
-        title: 'Template',
+        title: intl.formatMessage(messages.Template),
         choices: [...templates],
         default: 'default',
       },
       verticalAlign: {
-        title: 'Vertical align',
+        title: intl.formatMessage(messages.VerticalAlign),
         choices: [
-          ['flex-start', 'Top'],
-          ['center', 'Middle'],
-          ['flex-end', 'Bottom'],
+          ['flex-start', intl.formatMessage(messages.Top)],
+          ['center', intl.formatMessage(messages.Middle)],
+          ['flex-end', intl.formatMessage(messages.Bottom)],
         ],
         default: 'flex-start',
       },