Merge pull request #2097 from tf/quote-sized-typography

Add typography classes for different sizes of quote element
codevise · Apr 15, 2024 · b1f0519 · b1f0519
2 parents 82c97ce + 50a9c47
commit b1f0519
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 7 deletions.
diff --git a/entry_types/scrolled/doc/creating_themes/custom_typography.md b/entry_types/scrolled/doc/creating_themes/custom_typography.md
@@ -66,6 +66,16 @@ The following rule names are supported:
 | `body` | Applies to text blocks (paragraphs, lists, block quotes) in the entry content. |
 | `caption` | Applies to captions of content elements like inline images or inline videos. |
 | `content_link` | Applies to text links in text blocks, figures, quotes and counters. |
+| `quote_text` | Applies to the main text of quote content elements. |
+| `quote_text_lg` | Applies to the main text of quote content elements with size "large". |
+| `quote_text_md` | Applies to the main text of quote content elements with size "medium". |
+| `quote_text_sm` | Applies to the main text of quote content elements with size "small". |
+| `quote_text_xs` | Applies to the main text of quote content elements with size "very small". |
+| `quote_attribution` | Applies to the main text of quote content elements. |
+| `quote_attribution_lg` | Applies to the attribution line of quote content elements with size "large". |
+| `quote_attribution_md` | Applies to the attribution line of quote content elements with size "medium". |
+| `quote_attribution_sm` | Applies to the attribution line of quote content elements with size "small". |
+| `quote_attribution_xs` | Applies to the attribution line of quote content elements with size "very small". |
 | `default_navigation_chapter_link` | Applies to chapter links in the default navigation. |
 | `default_navigation_chapter_summary` | Applies to chapter summary texts in the default navigation. |
 | `default_navigation_active_chapter_link` | Applies to the chapter link representing the current chapter. |

diff --git a/entry_types/scrolled/package/src/contentElements/quote/Quote.js b/entry_types/scrolled/package/src/contentElements/quote/Quote.js
@@ -32,7 +32,7 @@ export function Quote({configuration, contentElementId, sectionProps}) {
                       contentElementId={contentElementId}
                       onChange={text => updateConfiguration({text})}
                       onlyParagraphs={true}
-                      scaleCategory={getTextScaleCategory(configuration)} />
+                      scaleCategory={getTextScaleCategory(configuration, 'Text')} />
       </blockquote>
 
       {(isSelected || !utils.isBlankEditableTextValue(configuration.attribution || [])) &&
@@ -41,22 +41,24 @@ export function Quote({configuration, contentElementId, sectionProps}) {
                        contentElementId={contentElementId}
                        onChange={attribution => updateConfiguration({attribution})}
                        onlyParagraphs={true}
-                       scaleCategory="quoteAttribution"
+                       scaleCategory={getTextScaleCategory(configuration, 'Attribution')}
                        placeholder={t('pageflow_scrolled.inline_editing.type_attribution')} />
        </figcaption>}
     </figure>
   );
 }
 
-function getTextScaleCategory(configuration) {
+function getTextScaleCategory(configuration, suffix) {
+  const base = `quote${suffix}`;
+
   switch (configuration.textSize) {
     case 'large':
-      return 'quoteText-lg';
+      return `${base}-lg`;
     case 'small':
-      return 'quoteText-sm';
+      return `${base}-sm`;
     case 'verySmall':
-      return 'quoteText-xs';
+      return `${base}-xs`;
     default:
-      return 'quoteText-md';
+      return `${base}-md`;
   }
 }
diff --git a/entry_types/scrolled/package/src/frontend/Text.module.css b/entry_types/scrolled/package/src/frontend/Text.module.css
@@ -99,24 +99,28 @@
 
 .quoteText-lg {
   composes: typography-quoteText from global;
+  composes: typography-quoteTextLg from global;
   font-size: text-2l;
   line-height: 1.1;
 }
 
 .quoteText-md {
   composes: typography-quoteText from global;
+  composes: typography-quoteTextMd from global;
   font-size: text-l;
   line-height: 1.1;
 }
 
 .quoteText-sm {
   composes: typography-quoteText from global;
+  composes: typography-quoteTextSm from global;
   font-size: text-md;
   line-height: 1.2;
 }
 
 .quoteText-xs {
   composes: typography-quoteText from global;
+  composes: typography-quoteTextXs from global;
   font-size: 26px;
   line-height: 1.2;
 }
@@ -127,6 +131,26 @@
   line-height: 1.4;
 }
 
+.quoteAttribution-lg {
+  composes: quoteAttribution;
+  composes: typography-quoteAttributionLg from global;
+}
+
+.quoteAttribution-md {
+  composes: quoteAttribution;
+  composes: typography-quoteAttributionMd from global;
+}
+
+.quoteAttribution-sm {
+  composes: quoteAttribution;
+  composes: typography-quoteAttributionSm from global;
+}
+
+.quoteAttribution-xs {
+  composes: quoteAttribution;
+  composes: typography-quoteAttributionXs from global;
+}
+
 .counterNumber-lg {
   composes: typography-counterNumber from global;
   font-size: text-5xl;