Merge pull request #2211 from tf/counter-grouping

Allow disabling thousands separators in counter

Author: tf

entry_types/scrolled/config/locales/new/counter_grouping.de.yml

@@ -0,0 +1,9 @@
+de:
+  pageflow_scrolled:
+    editor:
+      content_elements:
+        counter:
+          attributes:
+            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/new/counter_grouping.en.yml

@@ -0,0 +1,9 @@
+en:
+  pageflow_scrolled:
+    editor:
+      content_elements:
+        counter:
+          attributes:
+            thousandsSeparators:
+              label: "Display thousands separators"
+              inline_help: "For example, 1,000 in stories with English language setting."

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

@@ -88,6 +88,7 @@ export function Counter({configuration, contentElementId, contentElementWidth, s
 
   function format(value) {
     const localeString = value.toLocaleString(locale, {
+      useGrouping: !configuration.hideThousandsSeparators,
       minimumFractionDigits: decimalPlaces,
       maximumFractionDigits: decimalPlaces
     });

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

@@ -1,5 +1,7 @@
 import {editor} from 'pageflow-scrolled/editor';
-import {SelectInputView, TextInputView, NumberInputView, SeparatorView} from 'pageflow/ui';
+import {
+  CheckBoxInputView, SelectInputView, TextInputView, NumberInputView, SeparatorView
+} from 'pageflow/ui';
 
 import pictogram from './pictogram.svg';
 
@@ -25,6 +27,9 @@ editor.contentElementTypes.register('counter', {
           (0).toLocaleString(locale, {minimumFractionDigits: i})
         )
       });
+      this.input('thousandsSeparators', CheckBoxInputView, {
+        storeInverted: 'hideThousandsSeparators'
+      });
       this.input('unit', TextInputView);
       this.input('unitPlacement', SelectInputView, {
         values: ['trailing', 'leading'],

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

@@ -52,6 +52,26 @@ storiesOfContentElement(module, {
         unitPlacement: 'leading'
       }
     },
+    {
+      name: 'With Default Grouping',
+      configuration: {
+        targetValue: 2000,
+        startValue: 1000,
+        unit: 'kg',
+        description: [],
+        textSize: 'small'
+      }
+    },
+    {
+      name: 'Without Grouping',
+      configuration: {
+        targetValue: 2025,
+        startValue: 2020,
+        hideThousandsSeparators: true,
+        unit: '',
+        description: []
+      }
+    },
     {
       name: 'Pallete number color',
       themeOptions: {