Merge pull request #66 from eea/develop

Align widget

CHANGELOG.md

@@ -4,7 +4,19 @@ 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.0.0](https://github.com/eea/volto-block-style/compare/3.7.2...4.0.0) - 25 October 2022
+### [4.1.0](https://github.com/eea/volto-block-style/compare/4.0.0...4.1.0) - 28 October 2022
+
+#### :nail_care: Enhancements
+
+- change(textAlign): modeled TextAlign widget to code from Align widget [David Ichim - [`248ce49`](https://github.com/eea/volto-block-style/commit/248ce49742d5be31ead54a51149e11afab6a4818)]
+- change(align-widget): backported changes from Volto 16 Align widget in our Align widget [David Ichim - [`8901c45`](https://github.com/eea/volto-block-style/commit/8901c4540fa4b29a9ee3b1e63bea584079c8b9e3)]
+- change(text-align): add clear selection if it's not found as last option [David Ichim - [`7761417`](https://github.com/eea/volto-block-style/commit/77614176fe466ef074da02cf1160cf10636f22f9)]
+- change(text-align): align value map now allows passing title values as third parameter [David Ichim - [`fc26773`](https://github.com/eea/volto-block-style/commit/fc26773cea78c5818cd37d05ff8178b66f03b0ab)]
+
+#### :hammer_and_wrench: Others
+
+- Release 4.1.0 [Alin Voinea - [`0d3e576`](https://github.com/eea/volto-block-style/commit/0d3e57602628c75333ae797ffb0933c297f3218b)]
+## [4.0.0](https://github.com/eea/volto-block-style/compare/3.7.2...4.0.0) - 27 October 2022
 
 #### :hammer_and_wrench: Others
 

package.json

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

src/Widgets/Align.jsx

@@ -5,25 +5,109 @@
  */
 
 import React from 'react';
-import { injectIntl } from 'react-intl';
-
+import { defineMessages, useIntl } from 'react-intl';
 import { FormFieldWrapper } from '@plone/volto/components';
-import AlignBlock from '@plone/volto/components/manage/Sidebar/AlignBlock';
+import { Icon } from '@plone/volto/components';
+import { Button } from 'semantic-ui-react';
+import imageLeftSVG from '@plone/volto/icons/image-left.svg';
+import imageRightSVG from '@plone/volto/icons/image-right.svg';
+import imageFitSVG from '@plone/volto/icons/image-fit.svg';
+import imageNarrowSVG from '@eeacms/volto-block-style/icons/image-narrow.svg';
+import imageWideSVG from '@plone/volto/icons/image-wide.svg';
+import imageFullSVG from '@plone/volto/icons/image-full.svg';
+import clearSVG from '@plone/volto/icons/clear.svg';
+
+export const messages = defineMessages({
+  left: {
+    id: 'Left',
+    defaultMessage: 'Left',
+  },
+  right: {
+    id: 'Right',
+    defaultMessage: 'Right',
+  },
+  center: {
+    id: 'Center',
+    defaultMessage: 'Center',
+  },
+  narrow: {
+    id: 'Narrow',
+    defaultMessage: 'Narrow',
+  },
+  wide: {
+    id: 'Wide',
+    defaultMessage: 'Wide',
+  },
+  full: {
+    id: 'Full',
+    defaultMessage: 'Full',
+  },
+  '': {
+    id: 'Clear selection',
+    defaultMessage: 'Clear selection',
+  },
+});
+
+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[''])],
+});
 
 const AlignWidget = (props) => {
-  const { id, onChange, value } = props;
+  const intl = useIntl();
+
+  const {
+    id,
+    onChange,
+    actions = ['left', 'right', 'center', 'full'],
+    actionsInfoMap = {},
+    value,
+  } = props;
+
+  React.useEffect(() => {
+    if (!props.value && props.default) {
+      props.onChange(props.id, props.default);
+    }
+  });
+
+  // add clear selection button to the actions mapping if it's not already present
+  if (actions[actions.length - 1] !== '') {
+    actions.push('');
+  }
+
+  const actionsInfo = {
+    ...defaultActionsInfo({ intl }),
+    ...actionsInfoMap,
+  };
+
   return (
     <FormFieldWrapper {...props} className="align-widget">
-      <div className="align-tools">
-        <AlignBlock
-          align={value}
-          onChangeBlock={(block, { align }) => onChange(id, align)}
-          data={{ align: value }}
-          block={id}
-        />
+      <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>
+        ))}
       </div>
     </FormFieldWrapper>
   );
 };
 
-export default injectIntl(AlignWidget);
+export default AlignWidget;

src/Widgets/TextAlign.jsx

@@ -7,33 +7,77 @@ 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';
 
-const VALUE_MAP = [
-  ['left', alignLeftSVG],
-  ['right', alignRightSVG],
-  ['center', alignCenterSVG],
-  ['justify', alignJustifySVG],
-  ['', clearSVG],
-];
+export const messages = defineMessages({
+  left: {
+    id: 'Left',
+    defaultMessage: 'Left',
+  },
+  right: {
+    id: 'Right',
+    defaultMessage: 'Right',
+  },
+  center: {
+    id: 'Center',
+    defaultMessage: 'Center',
+  },
+  justify: {
+    id: 'Justify',
+    defaultMessage: 'Justify',
+  },
+  '': {
+    id: 'Clear selection',
+    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 { value, onChange, id, actions = VALUE_MAP } = 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('');
+  }
+
+  const actionsInfo = {
+    ...defaultActionsInfo({ intl }),
+    ...actionsInfoMap,
+  };
+
   return (
     <FormFieldWrapper {...props}>
       <div className="align-tools">
-        {actions.map(([name, icon], index) => (
-          <Button.Group key={`button-group-${name}-${index}`}>
+        {actions.map((action, index) => (
+          <Button.Group key={`button-group-${action}-${index}`}>
             <Button
               icon
               basic
               compact
-              active={value === name}
-              aria-label={name}
+              active={value === action}
+              aria-label={actionsInfo[action][1]}
               onClick={() => {
-                onChange(id, name);
+                onChange(id, action);
               }}
             >
-              <Icon name={icon} size="24px" />
+              <Icon
+                name={actionsInfo[action][0]}
+                title={actionsInfo[action][1] || action}
+                size="24px"
+              />
             </Button>
           </Button.Group>
         ))}