Merge pull request #2014 from tf/centered-quote-variant

Let themes use quote variant with centered quote mark
codevise · Oct 10, 2023 · 09d996e · 09d996e
2 parents 383a7d3 + 0f1102b
commit 09d996e
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: {