change(text-align): align value map now allows passing title values as third parameter

- this way the user can pass its own align value map and the icon will use
  the title otherwise it fallbacks to the name id

Author: ichim-david

src/Widgets/TextAlign.jsx

@@ -8,20 +8,20 @@ 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';
 
-const VALUE_MAP = [
-  ['left', alignLeftSVG],
-  ['right', alignRightSVG],
-  ['center', alignCenterSVG],
-  ['justify', alignJustifySVG],
-  ['', clearSVG],
+export const TEXT_ALIGN_VALUE_MAP = [
+  ['left', alignLeftSVG, 'Left align'],
+  ['right', alignRightSVG, 'Right align'],
+  ['center', alignCenterSVG, 'Center align'],
+  ['justify', alignJustifySVG, 'Justify align'],
+  ['', clearSVG, 'Clear selection'],
 ];
 
 export default (props) => {
-  const { value, onChange, id, actions = VALUE_MAP } = props;
+  const { value, onChange, id, actions = TEXT_ALIGN_VALUE_MAP } = props;
   return (
     <FormFieldWrapper {...props}>
       <div className="align-tools">
-        {actions.map(([name, icon], index) => (
+        {actions.map(([name, icon, title], index) => (
           <Button.Group key={`button-group-${name}-${index}`}>
             <Button
               icon
@@ -33,7 +33,7 @@ export default (props) => {
                 onChange(id, name);
               }}
             >
-              <Icon name={icon} size="24px" />
+              <Icon name={icon} title={title || name} size="24px" />
             </Button>
           </Button.Group>
         ))}