Release - Add block extenders and i18n aware (#20)

CHANGELOG.md

@@ -4,8 +4,16 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+#### [3.4.0](https://github.com/eea/volto-accordion-block/compare/3.3.1...3.4.0)
+
+- Add block extenders and i18n aware [`#20`](https://github.com/eea/volto-accordion-block/pull/20)
+- Release 3.4.0 [`d2be3bc`](https://github.com/eea/volto-accordion-block/commit/d2be3bcea7deb2e0aecf6e96c84a331c288d3823)
+
 #### [3.3.1](https://github.com/eea/volto-accordion-block/compare/3.3.0...3.3.1)
 
+> 7 September 2021
+
+- Release - Visual improvements (#18) [`#19`](https://github.com/eea/volto-accordion-block/pull/19)
 - Visual improvements [`#18`](https://github.com/eea/volto-accordion-block/pull/18)
 
 #### [3.3.0](https://github.com/eea/volto-accordion-block/compare/3.2.4...3.3.0)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-accordion-block",
-  "version": "3.3.1",
+  "version": "3.4.0",
   "description": "volto-accordion-block: Volto accordion block",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

src/components/manage/Blocks/Accordion/Edit.jsx

@@ -1,10 +1,12 @@
 import { BlocksForm, Icon, SidebarPortal } from '@plone/volto/components';
-import InlineForm from '@plone/volto/components/manage/Form/InlineForm';
 import { emptyBlocksForm } from '@plone/volto/helpers';
 import helpSVG from '@plone/volto/icons/help.svg';
 import { isEmpty } from 'lodash';
 import React, { useState } from 'react';
 import { Button, Segment } from 'semantic-ui-react';
+import { withBlockExtensions } from '@plone/volto/helpers';
+import { BlockDataForm } from '@plone/volto/components';
+import { useIntl } from 'react-intl';
 import AccordionEdit from './AccordionEdit';
 import EditBlockWrapper from './EditBlockWrapper';
 import './editor.less';
@@ -22,7 +24,7 @@ const Edit = (props) => {
     manage,
     formDescription,
   } = props;
-
+  const intl = useIntl();
   const properties = isEmpty(data?.data?.blocks)
     ? emptyAccordion(3)
     : data.data;
@@ -33,7 +35,7 @@ const Edit = (props) => {
    * @returns {Object} defaultValues
    */
   const setInitialData = () => {
-    const accordionSchema = accordionBlockSchema();
+    const accordionSchema = accordionBlockSchema({ intl });
     const defaultValues = Object.keys(accordionSchema.properties).reduce(
       (accumulator, currentVal) => {
         return accordionSchema.properties[currentVal].default
@@ -222,8 +224,8 @@ const Edit = (props) => {
           </Segment>
         )}
         {!data?.readOnlySettings && (
-          <InlineForm
-            schema={accordionBlockSchema()}
+          <BlockDataForm
+            schema={accordionBlockSchema({ intl })}
             title="Accordion block"
             onChangeField={(id, value) => {
               onChangeBlock(block, {
@@ -232,11 +234,12 @@ const Edit = (props) => {
               });
             }}
             formData={data}
+            block={block}
           />
         )}
       </SidebarPortal>
     </fieldset>
   );
 };
 
-export default Edit;
+export default withBlockExtensions(Edit);

src/components/manage/Blocks/Accordion/Schema.js

@@ -1,3 +1,48 @@
+import { defineMessages } from 'react-intl';
+
+const messages = defineMessages({
+  Accordion: {
+    id: 'Accordion',
+    defaultMessage: 'Accordion',
+  },
+  Style: {
+    id: 'Style',
+    defaultMessage: 'Style',
+  },
+  Title: {
+    id: 'Title',
+    defaultMessage: 'Title',
+  },
+  friendly_name: {
+    id: 'Friendly name',
+    defaultMessage: 'Friendly name',
+  },
+  title_size: {
+    id: 'Title size',
+    defaultMessage: 'Title size',
+  },
+  title_size_description: {
+    id: 'Accordion Title size',
+    defaultMessage: 'Accordion Title size',
+  },
+  right_arrows: {
+    id: 'Title Icon on the right',
+    defaultMessage: 'Title Icon on the right',
+  },
+  collapsed: {
+    id: 'Collapsed by default',
+    defaultMessage: 'Collapsed by default',
+  },
+  non_exclusive: {
+    id: 'Non exclusive',
+    defaultMessage: 'Non exclusive',
+  },
+  non_exclusive_description: {
+    id: 'Allow multiple panels open at a time',
+    defaultMessage: 'Allow multiple panels open at a time',
+  },
+});
+
 export const AccordionSchema = {
   title: 'Accordion',
   fieldsets: [
@@ -15,7 +60,7 @@ export const AccordionSchema = {
   required: [],
 };
 
-export const accordionBlockSchema = () => ({
+export const accordionBlockSchema = ({ intl }) => ({
   title: 'Accordion block',
   fieldsets: [
     {
@@ -25,7 +70,7 @@ export const accordionBlockSchema = () => ({
     },
     {
       id: 'style',
-      title: 'Style',
+      title: intl.formatMessage(messages.Style),
       fields: [
         'title',
         'title_size',
@@ -37,18 +82,18 @@ export const accordionBlockSchema = () => ({
   ],
   properties: {
     title: {
-      title: 'Title',
-      description: 'Friendly name',
+      title: intl.formatMessage(messages.Title),
+      description: intl.formatMessage(messages.friendly_name),
       type: 'string',
     },
     data: {
-      title: 'Accordion',
+      title: intl.formatMessage(messages.Accordion),
       type: 'panels',
       schema: AccordionSchema,
     },
     title_size: {
-      title: 'Title size',
-      description: 'Accordion Title size',
+      title: intl.formatMessage(messages.title_size),
+      description: intl.formatMessage(messages.title_size_description),
       type: 'string',
       factory: 'Choice',
       choices: [
@@ -60,18 +105,18 @@ export const accordionBlockSchema = () => ({
       ],
     },
     right_arrows: {
-      title: 'Title Icon on the right',
+      title: intl.formatMessage(messages.right_arrows),
       type: 'boolean',
       default: false,
     },
     collapsed: {
-      title: 'Collapsed by default',
+      title: intl.formatMessage(messages.collapsed),
       type: 'boolean',
       default: true,
     },
     non_exclusive: {
-      title: 'Non exclusive',
-      description: 'Allow multiple panels open at a time',
+      title: intl.formatMessage(messages.non_exclusive),
+      description: intl.formatMessage(messages.non_exclusive_description),
       type: 'boolean',
       default: true,
     },

src/components/manage/Blocks/Accordion/View.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { RenderBlocks } from '@plone/volto/components';
 import { getPanels, accordionBlockHasValue } from './util';
 import { Accordion } from 'semantic-ui-react';
+import { withBlockExtensions } from '@plone/volto/helpers';
 
 import cx from 'classnames';
 import { Icon } from '@plone/volto/components';
@@ -93,4 +94,4 @@ const View = (props) => {
   );
 };
 
-export default View;
+export default withBlockExtensions(View);