Add very small quote text size

REDMINE-20338
codevise · Aug 15, 2023 · 4b1cb94 · 4b1cb94
1 parent f4d54ec
commit 4b1cb94
Show file tree

Hide file tree

Showing 7 changed files with 21 additions and 4 deletions.
diff --git a/entry_types/scrolled/config/locales/new/quote.de.yml b/entry_types/scrolled/config/locales/new/quote.de.yml
@@ -17,5 +17,6 @@ de:
                 large: Groß
                 medium: Mittel
                 small: Klein
+                verySmall: Sehr klein
             color:
               label: Farbe
diff --git a/entry_types/scrolled/config/locales/new/quote.en.yml b/entry_types/scrolled/config/locales/new/quote.en.yml
@@ -17,5 +17,6 @@ en:
                 large: Large
                 medium: Medium
                 small: Small
+                verySmall: Very Small
             color:
               label: Color
diff --git a/entry_types/scrolled/package/src/contentElements/quote/Quote.js b/entry_types/scrolled/package/src/contentElements/quote/Quote.js
@@ -50,6 +50,8 @@ function getTextScaleCategory(configuration) {
       return 'quoteText-lg';
     case 'small':
       return 'quoteText-sm';
+    case 'verySmall':
+      return 'quoteText-xs';
     default:
       return 'quoteText-md';
   }

diff --git a/entry_types/scrolled/package/src/contentElements/quote/editor.js b/entry_types/scrolled/package/src/contentElements/quote/editor.js
@@ -14,7 +14,7 @@ editor.contentElementTypes.register('quote', {
   configurationEditor({entry}) {
     this.tab('general', function() {
       this.input('textSize', SelectInputView, {
-        values: ['large', 'medium', 'small']
+        values: ['large', 'medium', 'small', 'verySmall']
       });
       this.group('ContentElementPosition');
       this.group('PaletteColor', {

diff --git a/entry_types/scrolled/package/src/contentElements/quote/stories.js b/entry_types/scrolled/package/src/contentElements/quote/stories.js
@@ -40,6 +40,12 @@ storiesOfContentElement(module, {
         textSize: 'small'
       }
     },
+    {
+      name: 'Very Small',
+      configuration: {
+        textSize: 'verySmall'
+      }
+    },
     {
       name: 'Hanging',
       themeOptions: {

diff --git a/entry_types/scrolled/package/src/frontend/Text.js b/entry_types/scrolled/package/src/frontend/Text.js
@@ -10,7 +10,7 @@ import styles from './Text.module.css';
  * @param {string} props.scaleCategory -
  *   One of the styles `'heading-lg'`, `'heading-md'`, `'heading-sm'`,
  *   `'heading-xs'`, `'body'`, `'caption'`, `'question'`,
- *   `'quoteText-lg`', `'quoteText-md`', `'quoteText-sm`', `'quoteAttribution`',
+ *   `'quoteText-lg`', `'quoteText-md`', `'quoteText-sm`', `'quoteText-xs`', `'quoteAttribution`',
  *   `'counterNumber-lg`', `'counterNumber-md`', `'counterNumber-sm`',
  *   `'counterNumber-xs`', `'counterDescription`'.
  * @param {string} [props.inline] - Render a span instread of a div.
@@ -27,7 +27,7 @@ Text.propTypes = {
   inline: PropTypes.bool,
   scaleCategory: PropTypes.oneOf([
     'heading-lg', 'heading-md', 'heading-sm', 'heading-xs',
-    'quoteText-lg', 'quoteText-md', 'quoteText-sm', 'quoteAttribution',
+    'quoteText-lg', 'quoteText-md', 'quoteText-sm', 'quoteText-xs', 'quoteAttribution',
     'counterNumber-lg', 'counterNumber-md', 'counterNumber-sm', 'counterNumber-xs',
     'counterDescription',
     'body', 'caption', 'question'

diff --git a/entry_types/scrolled/package/src/frontend/Text.module.css b/entry_types/scrolled/package/src/frontend/Text.module.css
@@ -76,6 +76,12 @@
   line-height: 1.2;
 }
 
+.quoteText-xs {
+  composes: typography-quoteText from global;
+  font-size: 26px;
+  line-height: 1.2;
+}
+
 .quoteAttribution {
   composes: typography-quoteAttribution from global;
   font-size: text-base;
@@ -141,7 +147,8 @@
     line-height: 1.2;
   }
 
-  .quoteText-sm {
+  .quoteText-sm,
+  .quoteText-xs {
     font-size: text-base;
     line-height: 1.4;
   }