From 0f1102be45e410106e1a332d19d086f5fbbcf59b Mon Sep 17 00:00:00 2001
From: Tim Fischbach <tfischbach@codevise.de>
Date: Tue, 10 Oct 2023 07:14:57 +0200
Subject: [PATCH] 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
---
 .../src/contentElements/quote/Quote.js        |  5 +++-
 .../contentElements/quote/Quote.module.css    | 23 ++++++++++++++++++-
 .../src/contentElements/quote/editor.js       |  1 +
 .../src/contentElements/quote/stories.js      | 13 +++++++++++
 4 files changed, 40 insertions(+), 2 deletions(-)

diff --git a/entry_types/scrolled/package/src/contentElements/quote/Quote.js b/entry_types/scrolled/package/src/contentElements/quote/Quote.js
index 76ddb4cc4..03ee04e56 100644
--- 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
index fbb18627e..101c5d84b 100644
--- 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
index 9e34be160..591b8de5c 100644
--- 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
index 9fcf589a4..57f0d76f9 100644
--- 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: {