Merge pull request #2351 from tf/counter-size-typography

Support size-based typography for counters

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;