Add text alignment option to counter

Allow overriding the automatic centering of wide counters with
explicit left, center, centerRagged, or right alignment. Auto
(default) preserves the existing behavior based on element width
and section layout.

REDMINE-21218

Author: tf

entry_types/scrolled/config/locales/de.yml

@@ -332,6 +332,14 @@ de:
               values:
                 leading: Vor dem Betrag ($100)
                 trailing: Nach dem Betrag (100%)
+            textAlign:
+              label: Textausrichtung
+              blank: "(Automatisch)"
+              values:
+                left: Links
+                center: Mitte
+                centerRagged: Zentriert
+                right: Rechts
             thousandsSeparators:
               label: "Tausendertrennzeichen anzeigen"
               inline_help: "Zum Beispiel 1.000, wenn Deutsch als Sprache für den Beitrag eingestellt ist."

entry_types/scrolled/config/locales/en.yml

@@ -325,6 +325,14 @@ en:
               values:
                 leading: Leading ($100)
                 trailing: Trailing (100%)
+            textAlign:
+              label: Text alignment
+              blank: "(Auto)"
+              values:
+                left: Left
+                center: Center
+                centerRagged: Center (ragged)
+                right: Right
             thousandsSeparators:
               label: "Display thousands separators"
               inline_help: "For example, 1,000 in stories with English language setting."

entry_types/scrolled/package/spec/contentElements/counter/Counter-spec.js

@@ -5,6 +5,8 @@ import {Counter} from 'contentElements/counter/Counter';
 import {renderInContentElement} from 'pageflow-scrolled/testHelpers';
 import {contentElementWidths} from 'pageflow-scrolled/frontend';
 
+import styles from 'contentElements/counter/Counter.module.css';
+
 import '@testing-library/jest-dom/extend-expect';
 import 'support/toHaveScaleCategory';
 import 'support/toHaveColor';
@@ -180,4 +182,140 @@ describe('Counter', () => {
 
     expect(numberWrapper.className).toContain('animation-fadeIn-active');
   });
+
+  describe('textAlign', () => {
+    function renderCounterWithOptions(configuration, {width, sectionProps} = {}) {
+      const baseConfiguration = {
+        targetValue: 10,
+        startValue: 0,
+        countingSpeed: 'none',
+        entranceAnimation: 'fadeIn',
+        ...configuration
+      };
+
+      return renderInContentElement(
+        <Counter
+          configuration={baseConfiguration}
+          contentElementId={5}
+          contentElementWidth={width || contentElementWidths.md}
+          sectionProps={sectionProps || {}}
+        />, {
+          editorState: {isEditable: false}
+        }
+      );
+    }
+
+    it('centers wide elements by default', () => {
+      const {container} = renderCounterWithOptions({}, {width: contentElementWidths.xl});
+
+      expect(container.firstChild).toHaveClass(styles.center);
+    });
+
+    it('does not center narrow elements by default', () => {
+      const {container} = renderCounterWithOptions({}, {width: contentElementWidths.md});
+
+      expect(container.firstChild).not.toHaveClass(styles.center);
+    });
+
+    it('applies centerRagged alignment from sectionProps layout by default', () => {
+      const {container} = renderCounterWithOptions({}, {sectionProps: {layout: 'centerRagged'}});
+      const wrapper = container.querySelector('[class*="wrapper"]');
+      const numberWrapper = container.querySelector('[class*="number"]');
+      const descriptionDiv = wrapper.lastChild;
+
+      expect(container.firstChild).toHaveClass(styles.center);
+      expect(numberWrapper).toHaveClass(styles.numberCenter);
+      expect(descriptionDiv).toHaveClass(styles.textCenter);
+    });
+
+    it('applies left alignment when textAlign is left', () => {
+      const {container} = renderCounterWithOptions(
+        {textAlign: 'left'},
+        {width: contentElementWidths.xl}
+      );
+
+      expect(container.firstChild).toHaveClass(styles.left);
+      expect(container.firstChild).not.toHaveClass(styles.center);
+    });
+
+    it('applies right alignment when textAlign is right', () => {
+      const {container} = renderCounterWithOptions(
+        {textAlign: 'right'},
+        {width: contentElementWidths.xl}
+      );
+
+      expect(container.firstChild).toHaveClass(styles.right);
+    });
+
+    it('applies center alignment when textAlign is center', () => {
+      const {container} = renderCounterWithOptions(
+        {textAlign: 'center'},
+        {width: contentElementWidths.md}
+      );
+
+      expect(container.firstChild).toHaveClass(styles.center);
+    });
+
+    it('centers description text when textAlign is centerRagged', () => {
+      const {container} = renderCounterWithOptions(
+        {textAlign: 'centerRagged'},
+        {width: contentElementWidths.md}
+      );
+      const wrapper = container.querySelector('[class*="wrapper"]');
+      const descriptionDiv = wrapper.lastChild;
+
+      expect(descriptionDiv).toHaveClass(styles.textCenter);
+    });
+
+    it('centers the number when textAlign is center', () => {
+      const {container} = renderCounterWithOptions(
+        {textAlign: 'center'},
+        {width: contentElementWidths.md}
+      );
+      const numberWrapper = container.querySelector('[class*="number"]');
+
+      expect(numberWrapper).toHaveClass(styles.numberCenter);
+    });
+
+    it('centers the number when textAlign is centerRagged', () => {
+      const {container} = renderCounterWithOptions(
+        {textAlign: 'centerRagged'},
+        {width: contentElementWidths.md}
+      );
+      const numberWrapper = container.querySelector('[class*="number"]');
+
+      expect(numberWrapper).toHaveClass(styles.numberCenter);
+    });
+
+    it('does not center the number when textAlign is left', () => {
+      const {container} = renderCounterWithOptions(
+        {textAlign: 'left'},
+        {width: contentElementWidths.xl}
+      );
+      const numberWrapper = container.querySelector('[class*="number"]');
+
+      expect(numberWrapper).not.toHaveClass(styles.numberCenter);
+    });
+
+    it('right aligns the number when textAlign is right', () => {
+      const {container} = renderCounterWithOptions(
+        {textAlign: 'right'},
+        {width: contentElementWidths.md}
+      );
+      const numberWrapper = container.querySelector('[class*="number"]');
+
+      expect(numberWrapper).toHaveClass(styles.numberRight);
+    });
+
+    it('right aligns description text when textAlign is right', () => {
+      const {container} = renderCounterWithOptions(
+        {textAlign: 'right'},
+        {width: contentElementWidths.md}
+      );
+      const wrapper = container.querySelector('[class*="wrapper"]');
+      const descriptionDiv = wrapper.lastChild;
+
+      expect(descriptionDiv).toHaveClass(styles.textRight);
+    });
+  });
 });

entry_types/scrolled/package/src/contentElements/counter/Counter.js

@@ -115,18 +115,36 @@ export function Counter({configuration, contentElementId, contentElementWidth, s
     );
   }
 
+  const textAlign = configuration.textAlign ||
+    (sectionProps.layout === 'centerRagged' ? 'centerRagged' : 'auto');
+
+  const wrapperAlignment = {
+    auto: contentElementWidth > contentElementWidths.md ? 'center' : null,
+    center: 'center',
+    centerRagged: 'center',
+    left: 'left',
+    right: 'right'
+  }[textAlign];
+
+  const numberAlignment = {
+    center: 'numberCenter',
+    centerRagged: 'numberCenter',
+    right: 'numberRight'
+  }[textAlign];
+
+  const descriptionAlignment = {
+    centerRagged: 'textCenter',
+    right: 'textRight'
+  }[textAlign];
+
   return (
-    <div className={classNames(
-      {[styles.center]: contentElementWidth > contentElementWidths.md}
-    )}>
-      <div className={classNames(
-        styles.wrapper,
-        {[styles.centerRagged]: sectionProps.layout === 'centerRagged'}
-      )}>
+    <div className={styles[wrapperAlignment]}>
+      <div className={styles.wrapper}>
         <div
           className={classNames(
             `typography-counter-${configuration.typographyVariant}`,
             styles.number,
+            styles[numberAlignment],
             styles[`animation-${configuration.entranceAnimation}`],
             {[styles[`animation-${configuration.entranceAnimation}-active`]]: animated
           })}
@@ -142,7 +160,8 @@ export function Counter({configuration, contentElementId, contentElementWidth, s
             </span>
           </Text>
         </div>
-        <div style={{color: paletteColor(configuration.descriptionColor)}}>
+        <div className={styles[descriptionAlignment]}
+             style={{color: paletteColor(configuration.descriptionColor)}}>
           <EditableText value={configuration.description}
                         contentElementId={contentElementId}
                         className={styles.description}

entry_types/scrolled/package/src/contentElements/counter/Counter.module.css

@@ -7,17 +7,40 @@
   word-break: break-word;
 }
 
-.centerRagged {
+.numberCenter {
   text-align: center;
 }
 
+.numberRight {
+  text-align: right;
+}
+
 .center,
 .center .wrapper {
   display: flex;
   flex-direction: column;
   align-items: center;
 }
 
+.left {
+  text-align: left;
+}
+
+.right,
+.right .wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+}
+
+.textCenter {
+  text-align: center;
+}
+
+.textRight {
+  text-align: right;
+}
+
 .animation-fadeIn {
   opacity: 0;
 }

entry_types/scrolled/package/src/contentElements/counter/editor.js

@@ -121,6 +121,10 @@ editor.contentElementTypes.register('counter', {
             position: 'inline'
           })
       });
+      this.input('textAlign', SelectInputView, {
+        values: ['left', 'right', 'center', 'centerRagged'],
+        includeBlank: true
+      });
       this.group('ContentElementPosition', {entry});
     });
   }