Support legacy textSize in counter elements

Existing counter elements use the textSize property with values like
'large', 'medium', 'small', 'verySmall'. Map these to the new
numberSize values based on equivalent font sizes to ensure backwards
compatibility in both frontend rendering and editor UI.

REDMINE-21218

Author: tf

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

@@ -61,6 +61,50 @@ describe('Counter', () => {
     expect(getByText('10')).toHaveScaleCategory('counterNumber', 'lg');
   });
 
+  it('defaults to md size for number', () => {
+    const {getByText} = renderCounter();
+
+    expect(getByText('10')).toHaveScaleCategory('counterNumber', 'md');
+  });
+
+  it('defaults to md size for unit', () => {
+    const {getByText} = renderCounter({unit: 'kg'});
+
+    expect(getByText('kg')).toHaveScaleCategory('counterUnit', 'md');
+  });
+
+  it('defaults to md size for description', () => {
+    const {getByText} = renderCounter({
+      description: [{type: 'paragraph', children: [{text: 'Some text'}]}]
+    });
+
+    expect(getByText('Some text')).toHaveScaleCategory('counterDescription', 'md');
+  });
+
+  it('maps legacy textSize large to counterNumber-xxxl', () => {
+    const {getByText} = renderCounter({textSize: 'large'});
+
+    expect(getByText('10')).toHaveScaleCategory('counterNumber', 'xxxl');
+  });
+
+  it('maps legacy textSize medium to counterNumber-xl', () => {
+    const {getByText} = renderCounter({textSize: 'medium'});
+
+    expect(getByText('10')).toHaveScaleCategory('counterNumber', 'xl');
+  });
+
+  it('maps legacy textSize small to counterNumber-md', () => {
+    const {getByText} = renderCounter({textSize: 'small'});
+
+    expect(getByText('10')).toHaveScaleCategory('counterNumber', 'md');
+  });
+
+  it('maps legacy textSize verySmall to counterNumber-xs', () => {
+    const {getByText} = renderCounter({textSize: 'verySmall'});
+
+    expect(getByText('10')).toHaveScaleCategory('counterNumber', 'xs');
+  });
+
   it('renders description with counterDescription scale category', () => {
     const {getByText} = renderCounter({
       description: [{type: 'paragraph', children: [{text: 'Some text'}]}]

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

@@ -0,0 +1,63 @@
+import {createLegacyTextSizeDelegator} from 'contentElements/counter/createLegacyTextSizeDelegator';
+
+describe('createLegacyTextSizeDelegator', () => {
+  it('returns numberSize when set', () => {
+    const model = fakeModel({numberSize: 'lg'});
+    const delegator = createLegacyTextSizeDelegator(model);
+
+    expect(delegator.get('numberSize')).toBe('lg');
+  });
+
+  it('maps legacy textSize large to xxxl', () => {
+    const model = fakeModel({textSize: 'large'});
+    const delegator = createLegacyTextSizeDelegator(model);
+
+    expect(delegator.get('numberSize')).toBe('xxxl');
+  });
+
+  it('maps legacy textSize medium to xl', () => {
+    const model = fakeModel({textSize: 'medium'});
+    const delegator = createLegacyTextSizeDelegator(model);
+
+    expect(delegator.get('numberSize')).toBe('xl');
+  });
+
+  it('maps legacy textSize small to md', () => {
+    const model = fakeModel({textSize: 'small'});
+    const delegator = createLegacyTextSizeDelegator(model);
+
+    expect(delegator.get('numberSize')).toBe('md');
+  });
+
+  it('maps legacy textSize verySmall to xs', () => {
+    const model = fakeModel({textSize: 'verySmall'});
+    const delegator = createLegacyTextSizeDelegator(model);
+
+    expect(delegator.get('numberSize')).toBe('xs');
+  });
+
+  it('prefers numberSize over textSize', () => {
+    const model = fakeModel({numberSize: 'sm', textSize: 'large'});
+    const delegator = createLegacyTextSizeDelegator(model);
+
+    expect(delegator.get('numberSize')).toBe('sm');
+  });
+
+  it('passes through other properties', () => {
+    const model = fakeModel({unit: 'kg'});
+    const delegator = createLegacyTextSizeDelegator(model);
+
+    expect(delegator.get('unit')).toBe('kg');
+  });
+
+  function fakeModel(attributes) {
+    return {
+      get(name) {
+        return attributes[name];
+      },
+      has(name) {
+        return name in attributes;
+      }
+    };
+  }
+});

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

@@ -106,7 +106,7 @@ export function Counter({configuration, contentElementId, contentElementWidth, s
 
     return (
       <Text scaleCategory="counterUnit"
-            typographySize={configuration.unitSize}
+            typographySize={configuration.unitSize || 'md'}
             inline>
         <span style={configuration.unitColor ? {color: paletteColor(configuration.unitColor)} : undefined}>
           {configuration.unit}
@@ -133,7 +133,7 @@ export function Counter({configuration, contentElementId, contentElementWidth, s
           style={{'--counting-duration': `${countingDuration || 1000}ms`}}
         >
           <Text scaleCategory="counterNumber"
-                typographySize={configuration.numberSize}
+                typographySize={configuration.numberSize || legacyTextSizes[configuration.textSize] || 'md'}
                 inline>
             <span style={{color: paletteColor(configuration.numberColor)}}>
               {configuration.unitPlacement === 'leading' && renderUnit()}
@@ -149,7 +149,7 @@ export function Counter({configuration, contentElementId, contentElementWidth, s
                         onChange={description => updateConfiguration({description})}
                         onlyParagraphs={true}
                         scaleCategory="counterDescription"
-                        typographySize={configuration.descriptionSize}
+                        typographySize={configuration.descriptionSize || 'md'}
                         placeholder={t('pageflow_scrolled.inline_editing.type_description')} />
         </div>
       </div>
@@ -164,6 +164,13 @@ const countingDurations = {
   slow: 5000
 }
 
+const legacyTextSizes = {
+  verySmall: 'xs',
+  small: 'md',
+  medium: 'xl',
+  large: 'xxxl'
+};
+
 function easeInOut(t) {
   t = t * 2;
   if (t < 1) return (t**2)/2;

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

@@ -0,0 +1,22 @@
+const legacyTextSizes = {
+  verySmall: 'xs',
+  small: 'md',
+  medium: 'xl',
+  large: 'xxxl'
+};
+
+export function createLegacyTextSizeDelegator(model) {
+  const delegator = Object.create(model);
+
+  delegator.get = function(name) {
+    const result = model.get(name);
+
+    if (name === 'numberSize') {
+      return result || legacyTextSizes[model.get('textSize')];
+    }
+
+    return result;
+  };
+
+  return delegator;
+}

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

@@ -3,6 +3,7 @@ import {
   CheckBoxInputView, SelectInputView, SliderInputView, TextInputView, NumberInputView, SeparatorView
 } from 'pageflow/ui';
 
+import {createLegacyTextSizeDelegator} from './createLegacyTextSizeDelegator';
 import pictogram from './pictogram.svg';
 
 editor.contentElementTypes.register('counter', {
@@ -13,15 +14,14 @@ editor.contentElementTypes.register('counter', {
 
   defaultConfig: {
     targetValue: 100,
-    countingSpeed: 'medium',
-    numberSize: 'md',
-    unitSize: 'md',
-    descriptionSize: 'md'
+    countingSpeed: 'medium'
   },
 
   configurationEditor({entry}) {
     const locale = entry.metadata.get('locale');
     this.tab('general', function() {
+      const modelDelegator = createLegacyTextSizeDelegator(this.model);
+
       this.input('targetValue', NumberInputView, {locale});
       this.input('decimalPlaces', SelectInputView, {
         values: [0, 1, 2, 3],
@@ -43,6 +43,7 @@ editor.contentElementTypes.register('counter', {
         order: 'asc'
       });
       this.input('numberSize', SliderInputView, {
+        model: modelDelegator,
         values: numberSizes,
         texts: numberTexts,
         defaultValue: 'md',