Support size-based typography for counters

Allow themes to customize the counter number and description
typography at each size level (xs, sm, md, lg), matching how quote
text and attribution already work.

Author: tf

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

@@ -132,7 +132,7 @@ export function Counter({configuration, contentElementId, contentElementWidth, s
                       className={styles.description}
                       onChange={description => updateConfiguration({description})}
                       onlyParagraphs={true}
-                      scaleCategory="counterDescription"
+                      scaleCategory={descriptionScaleCategories[configuration.textSize || 'medium']}
                       placeholder={t('pageflow_scrolled.inline_editing.type_description')} />
       </div>
     </div>
@@ -146,6 +146,13 @@ const numberScaleCategories = {
   large: 'counterNumber-lg'
 };
 
+const descriptionScaleCategories = {
+  verySmall: 'counterDescription-xs',
+  small: 'counterDescription-sm',
+  medium: 'counterDescription-md',
+  large: 'counterDescription-lg'
+};
+
 const countingDurations = {
   none: 0,
   fast: 500,

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

@@ -84,6 +84,22 @@ storiesOfContentElement(module, {
       configuration: {
         numberColor: 'accent'
       }
+    },
+    {
+      name: 'Custom typography',
+      configuration: {
+        textSize: 'small'
+      },
+      themeOptions: {
+        typography: {
+          counterNumberSm: {
+            fontSize: '40px'
+          },
+          counterDescriptionSm: {
+            fontSize: '18px'
+          }
+        }
+      }
     }
   ]
 });

entry_types/scrolled/package/src/frontend/Text.js

@@ -14,8 +14,8 @@ import styles from './Text.module.css';
  *   `'headingSubtitle-lg'`, `'headingSubtitle-md'`, `'headingSubtitle-sm'`,
  *   `'body'`, `'caption'`, `'question'`, `'questionAnswer'`,
  *   `'quoteText-lg'`, `'quoteText-md'`, `'quoteText-sm'`, `'quoteText-xs'`, `'quoteAttribution'`,
- *   `'counterNumber-lg'`, `'counterNumber-md'`, `'counterNumber-sm'`,
- *   `'counterNumber-xs'`, `'counterDescription`'.
+ *   `'counterNumber-lg'`, `'counterNumber-md'`, `'counterNumber-sm'`, `'counterNumber-xs'`,
+ *   `'counterDescription-lg'`, `'counterDescription-md'`, `'counterDescription-sm'`, `'counterDescription-xs'`.
  *   `'infoTableLabel'`, `'infoTableValue`'.
  *   `'hotspotsTooltipTitle'`, `'hotspotsTooltipDescription`', `'hotspotsTooltipLink`',
  *   `'teaserTitle-lg'`, `'teaserTitle-md'`, `'teaserTitle-sm'`,
@@ -60,7 +60,7 @@ Text.propTypes = {
     'teaserDescription-lg', 'teaserDescription-md', 'teaserDescription-sm',
     'teaserLink',
     'counterNumber-lg', 'counterNumber-md', 'counterNumber-sm', 'counterNumber-xs',
-    'counterDescription',
+    'counterDescription-lg', 'counterDescription-md', 'counterDescription-sm', 'counterDescription-xs',
     'infoTableLabel', 'infoTableValue',
     'body', 'caption', 'question', 'questionAnswer'
   ]),

entry_types/scrolled/package/src/frontend/Text.module.css

@@ -164,29 +164,37 @@
   composes: typography-quoteAttributionXs from global;
 }
 
-.counterNumber-lg {
+.counterNumber {
   composes: typography-counterNumber from global;
+}
+
+.counterNumber-lg {
+  composes: counterNumber;
+  composes: typography-counterNumberLg from global;
   font-size: text-5xl;
   line-height: 1;
   font-weight: 700;
 }
 
 .counterNumber-md {
-  composes: typography-counterNumber from global;
+  composes: counterNumber;
+  composes: typography-counterNumberMd from global;
   font-size: text-4xl;
   line-height: 1;
   font-weight: 700;
 }
 
 .counterNumber-sm {
-  composes: typography-counterNumber from global;
+  composes: counterNumber;
+  composes: typography-counterNumberSm from global;
   font-size: text-3xl;
   line-height: 1;
   font-weight: 700;
 }
 
 .counterNumber-xs {
-  composes: typography-counterNumber from global;
+  composes: counterNumber;
+  composes: typography-counterNumberXs from global;
   font-size: text-xl;
   line-height: 1;
   font-weight: 700;
@@ -198,6 +206,26 @@
   line-height: 1.4;
 }
 
+.counterDescription-lg {
+  composes: counterDescription;
+  composes: typography-counterDescriptionLg from global;
+}
+
+.counterDescription-md {
+  composes: counterDescription;
+  composes: typography-counterDescriptionMd from global;
+}
+
+.counterDescription-sm {
+  composes: counterDescription;
+  composes: typography-counterDescriptionSm from global;
+}
+
+.counterDescription-xs {
+  composes: counterDescription;
+  composes: typography-counterDescriptionXs from global;
+}
+
 .hotspotsTooltipTitle {
   composes: typography-hotspotTooltipTitle from global;
   font-size: text-xs;