Let themes use quote variant with centered quote mark

So far quote design was only controlled via theme options. We now allow using quotes with different designs side by side via theme defined content element variants. REDMINE-20380
codevise · Oct 10, 2023 · 0f1102b · 0f1102b
1 parent 383a7d3
commit 0f1102b
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 2 deletions.
diff --git a/entry_types/scrolled/package/src/contentElements/quote/Quote.js b/entry_types/scrolled/package/src/contentElements/quote/Quote.js
@@ -18,9 +18,12 @@ export function Quote({configuration, contentElementId, sectionProps}) {
   const theme = useTheme();
   const {t} = useI18n({locale: 'ui'});
 
+  const design = configuration.variant ? configuration.variant.split('-')[0] : theme.options.quoteDesign;
+
   return (
     <figure className={classNames(styles.figure,
-                                  styles[`design-${theme.options.quoteDesign || 'largeHanging'}`],
+                                  styles[`design-${design || 'largeHanging'}`],
+                                  `scope-quote-${configuration.variant}`,
                                   {[styles.maskedMark]: theme.options.properties?.root?.quoteLeftMarkMaskImage},
                                   {[styles.centerRagged]: sectionProps.layout === 'centerRagged'})}
             style={{'--palette-color': paletteColor(configuration.color)}}>

diff --git a/entry_types/scrolled/package/src/contentElements/quote/Quote.module.css b/entry_types/scrolled/package/src/contentElements/quote/Quote.module.css
@@ -10,6 +10,11 @@
   color: var(--palette-color);
 }
 
+.design-largeCentered {
+  text-align: center;
+  align-items: center;
+}
+
 .figure a {
   color: var(--palette-color, contentLinkColor);
 }
@@ -21,7 +26,7 @@
   width: 100%;
   box-sizing: border-box;
   margin: 0;
-  padding: 1em 0 0.5em 0;
+  padding: 1em 0 var(--theme-quote-text-padding-bottom, 0.5em) 0;
 }
 
 .design-largeHanging .text,
@@ -75,12 +80,24 @@
   right: calc(100% + var(--theme-quote-hanging-mark-spacing, 0.05em));
 }
 
+.design-largeCentered .text p:first-child::before,
 .design-largeHanging .text p:first-child::before {
   font-size: var(--quote-large-mark-font-size);
   line-height: 1em;
+}
+
+.design-largeCentered .text p:first-child::before {
+  font-size: var(--quote-large-mark-font-size);
+  margin-top: var(--theme-quote-large-mark-margin-top, -0.1em);
+  margin-bottom: var(--theme-quote-large-mark-margin-bottom, -0.3em);
+  display: block;
+}
+
+.design-largeHanging .text p:first-child::before {
   top: var(--theme-quote-large-mark-top, -0.2em);
 }
 
+.design-largeCentered .text p:last-child::after,
 .design-largeHanging .text p:last-child::after {
   display: none;
 }
@@ -104,6 +121,10 @@
   margin-right: 0.5em;
 }
 
+.design-largeCentered .attribution p:first-child::before {
+  display: none;
+}
+
 .attribution p {
   margin: 0;
 }

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

diff --git a/entry_types/scrolled/package/src/contentElements/quote/stories.js b/entry_types/scrolled/package/src/contentElements/quote/stories.js
@@ -46,6 +46,19 @@ storiesOfContentElement(module, {
         textSize: 'verySmall'
       }
     },
+    {
+      name: 'Large Centered',
+      configuration: {
+        variant: 'largeCentered-custom'
+      },
+      themeOptions: {
+        properties: {
+          'quote-largeCentered-custom': {
+            quoteLargeMarkFontSize: '3em'
+          }
+        }
+      }
+    },
     {
       name: 'Hanging',
       themeOptions: {