Merge pull request #67 from eea/develop

Release

.project.eslintrc.js

@@ -1,7 +1,9 @@
 const fs = require('fs');
 const path = require('path');
 
-const projectRootPath = fs.realpathSync('./project');    // __dirname
+const projectRootPath = fs.existsSync('./project')
+  ? fs.realpathSync('./project')
+  : fs.realpathSync('./../../../');
 const packageJson = require(path.join(projectRootPath, 'package.json'));
 const jsConfig = require(path.join(projectRootPath, 'jsconfig.json')).compilerOptions;
 

CHANGELOG.md

@@ -4,6 +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).
 
+### [4.1.1](https://github.com/eea/volto-block-style/compare/4.1.0...4.1.1) - 15 November 2022
+
+#### :nail_care: Enhancements
+
+- change(block-style): pass className coming from styling widgets into style wrapper [David Ichim - [`2279958`](https://github.com/eea/volto-block-style/commit/22799586c2fc87a60b45cc1096cbd37b73846f39)]
+- change(align-widget): modified widget to allow update of actions and defaultActionsInfo [David Ichim - [`c871b2c`](https://github.com/eea/volto-block-style/commit/c871b2c95eb1254ecebe6aba0e665cc5d29cc7cf)]
+
+#### :hammer_and_wrench: Others
+
+- test(estlint): Fix .project.eslintrc.js [Alin Voinea - [`ebf5a1b`](https://github.com/eea/volto-block-style/commit/ebf5a1b85626370edaf3fe08a2991ada8e8596c8)]
 ### [4.1.0](https://github.com/eea/volto-block-style/compare/4.0.0...4.1.0) - 28 October 2022
 
 #### :nail_care: Enhancements

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-block-style",
-  "version": "4.1.0",
+  "version": "4.1.1",
   "description": "volto-block-style: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

src/StyleWrapper/StyleWrapperView.jsx

@@ -132,6 +132,7 @@ const StyleWrapperView = (props) => {
       customClass,
       theme,
       align,
+      props.className,
       {
         align,
         styled,

src/Widgets/Align.jsx

@@ -48,23 +48,23 @@ export const messages = defineMessages({
   },
 });
 
-export const defaultActionsInfo = ({ intl }) => ({
-  left: [imageLeftSVG, intl.formatMessage(messages.left)],
-  right: [imageRightSVG, intl.formatMessage(messages.right)],
-  center: [imageFitSVG, intl.formatMessage(messages.center)],
-  narrow: [imageNarrowSVG, intl.formatMessage(messages.narrow)],
-  wide: [imageWideSVG, intl.formatMessage(messages.wide)],
-  full: [imageFullSVG, intl.formatMessage(messages.full)],
-  '': [clearSVG, intl.formatMessage(messages[''])],
-});
+export const defaultActionsInfo = {
+  left: [imageLeftSVG, messages.left],
+  right: [imageRightSVG, messages.right],
+  center: [imageFitSVG, messages.center],
+  narrow: [imageNarrowSVG, messages.narrow],
+  wide: [imageWideSVG, messages.wide],
+  full: [imageFullSVG, messages.full],
+  '': [clearSVG, messages['']],
+};
 
-const AlignWidget = (props) => {
+const AlignWidget = (props, rest) => {
   const intl = useIntl();
 
   const {
     id,
     onChange,
-    actions = ['left', 'right', 'center', 'full'],
+    actions = rest.actions || ['left', 'right', 'center', 'full'],
     actionsInfoMap = {},
     value,
   } = props;
@@ -81,30 +81,40 @@ const AlignWidget = (props) => {
   }
 
   const actionsInfo = {
-    ...defaultActionsInfo({ intl }),
+    ...defaultActionsInfo,
     ...actionsInfoMap,
   };
 
   return (
     <FormFieldWrapper {...props} className="align-widget">
       <div className="align-buttons">
-        {actions.map((action) => (
-          <Button.Group key={action}>
-            <Button
-              icon
-              basic
-              aria-label={actionsInfo[action][1]}
-              onClick={() => onChange(id, action)}
-              active={(action === 'center' && !value) || value === action}
-            >
-              <Icon
-                name={actionsInfo[action][0]}
-                title={actionsInfo[action][1] || action}
-                size="24px"
-              />
-            </Button>
-          </Button.Group>
-        ))}
+        {actions.map((action) => {
+          const action_info_list = actionsInfo[action];
+          const title = action_info_list[1];
+          return (
+            <Button.Group key={action}>
+              <Button
+                icon
+                basic
+                aria-label={action}
+                onClick={() => onChange(id, action)}
+                active={(action === 'center' && !value) || value === action}
+              >
+                <Icon
+                  name={action_info_list[0]}
+                  title={
+                    title
+                      ? typeof title === 'string'
+                        ? title
+                        : intl.formatMessage(title)
+                      : action
+                  }
+                  size="24px"
+                />
+              </Button>
+            </Button.Group>
+          );
+        })}
       </div>
     </FormFieldWrapper>
   );

src/Widgets/TextAlign.jsx

@@ -1,13 +1,9 @@
-import React from 'react';
-import { Button } from 'semantic-ui-react';
-import { FormFieldWrapper, Icon } from '@plone/volto/components';
-
 import alignLeftSVG from '@plone/volto/icons/align-left.svg';
 import alignRightSVG from '@plone/volto/icons/align-right.svg';
 import alignJustifySVG from '@plone/volto/icons/align-justify.svg';
 import alignCenterSVG from '@plone/volto/icons/align-center.svg';
-import clearSVG from '@plone/volto/icons/clear.svg';
-import { defineMessages, useIntl } from 'react-intl';
+import { defineMessages } from 'react-intl';
+import AlignWidget, { defaultActionsInfo } from './Align';
 
 export const messages = defineMessages({
   left: {
@@ -31,57 +27,13 @@ export const messages = defineMessages({
     defaultMessage: 'Clear selection',
   },
 });
-const defaultActionsInfo = ({ intl }) => ({
-  left: [alignLeftSVG, intl.formatMessage(messages.left)],
-  right: [alignRightSVG, intl.formatMessage(messages.right)],
-  center: [alignCenterSVG, intl.formatMessage(messages.center)],
-  justify: [alignJustifySVG, intl.formatMessage(messages.justify)],
-  '': [clearSVG, intl.formatMessage(messages[''])],
-});
 
-export default (props) => {
-  const intl = useIntl();
-  const {
-    onChange,
-    id,
-    actions = ['left', 'right', 'center', 'justify'],
-    actionsInfoMap = {},
-    value,
-  } = props;
-  // add clear selection button to the actions mapping if it's not already present
-  if (actions[actions.length - 1] !== '') {
-    actions.push('');
-  }
+defaultActionsInfo['left'] = [alignLeftSVG, messages.left];
+defaultActionsInfo['right'] = [alignRightSVG, messages.right];
+defaultActionsInfo['center'] = [alignCenterSVG, messages.center];
+defaultActionsInfo['justify'] = [alignJustifySVG, messages.justify];
 
-  const actionsInfo = {
-    ...defaultActionsInfo({ intl }),
-    ...actionsInfoMap,
-  };
-
-  return (
-    <FormFieldWrapper {...props}>
-      <div className="align-tools">
-        {actions.map((action, index) => (
-          <Button.Group key={`button-group-${action}-${index}`}>
-            <Button
-              icon
-              basic
-              compact
-              active={value === action}
-              aria-label={actionsInfo[action][1]}
-              onClick={() => {
-                onChange(id, action);
-              }}
-            >
-              <Icon
-                name={actionsInfo[action][0]}
-                title={actionsInfo[action][1] || action}
-                size="24px"
-              />
-            </Button>
-          </Button.Group>
-        ))}
-      </div>
-    </FormFieldWrapper>
-  );
+export default (props) => {
+  const actions = { actions: ['left', 'right', 'center', 'justify'] };
+  return AlignWidget(props, actions);
 };