Merge pull request #1988 from tf/quote-properties

Allow using SVG data URLs as quote marks
codevise · Aug 18, 2023 · 1ea1edd · 1ea1edd
2 parents e9fede9 + e1f6355
commit 1ea1edd
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 16 deletions.
diff --git a/entry_types/scrolled/doc/creating_themes/custom_typography.md b/entry_types/scrolled/doc/creating_themes/custom_typography.md
@@ -187,13 +187,15 @@ adjust the design:
 | Name | Description |
 | ---- | ----------- |
 | `quote_attribution_min_width` | Control horizontal position of attribute text. |
+| `quote_hanging_mark_spacing` | Distance between quote marks and quote text in `hanging` or `largeHanging` design. |
 | `quote_indent` | Length by which to indent the quote text. |
-| `quote_mark_left_mark` | Symbol to use for the left quotation mark. |
-| `quote_mark_right_mark` | Symbol to use for the left quotation mark. |
+| `quote_left_mark` | Symbol to use for the left quotation mark. |
+| `quote_right_mark` | Symbol to use for the left quotation mark. |
 | `quote_mark_font_weight` | Font weight of the quotation marks. |
 | `quote_mark_opacity` | Opacity of the quotation marks. |
 | `quote_large_mark_font_size` | Font size of the quotation mark in the `largeHanging` design. |
 | `quote_large_mark_top` | Length by which to translate the translation mark in the `largeHanging` design. |
+| `quote_mark_width` | Can be used when `quote_left_mark` or `quote_right_mark` are SVG data URLs. |
 
 These properties need to be passed in the root scope:
 

diff --git a/entry_types/scrolled/package/src/contentElements/quote/Quote.module.css b/entry_types/scrolled/package/src/contentElements/quote/Quote.module.css
@@ -52,6 +52,7 @@
   font-weight: var(--theme-quote-mark-font-weight, bold);
   opacity: var(--theme-quote-mark-opacity, 0.5);
   color: var(--theme-quote-mark-color);
+  width: var(--theme-quote-mark-width);
 }
 
 .text p:first-child::before {
@@ -65,7 +66,7 @@
 .design-largeHanging .text p:first-child::before,
 .design-hanging .text p:first-child::before {
   position: absolute;
-  right: calc(100% + 0.05em);
+  right: calc(100% + var(--theme-quote-hanging-mark-spacing, 0.05em));
 }
 
 .design-largeHanging .text p:first-child::before {
@@ -79,7 +80,7 @@
 }
 
 .design-hanging .text p:first-child::after {
-  padding-left: 0.05em;
+  padding-left: var(--theme-quote-hanging-mark-spacing, 0.05em);
 }
 
 .attribution {

diff --git a/entry_types/scrolled/package/src/contentElements/quote/stories.js b/entry_types/scrolled/package/src/contentElements/quote/stories.js
@@ -52,6 +52,17 @@ storiesOfContentElement(module, {
         quoteDesign: 'hanging'
       }
     },
+    {
+      name: 'Hanging with custom spacing',
+      themeOptions: {
+        quoteDesign: 'hanging',
+        properties: {
+          root: {
+            quoteHangingMarkSpacing: '0.3em'
+          }
+        }
+      }
+    },
     {
       name: 'Centered Attribution',
       themeOptions: {
@@ -88,6 +99,21 @@ storiesOfContentElement(module, {
         }
       }
     },
+    {
+      name: 'SVG mark',
+      themeOptions: {
+        properties: {
+          root: {
+            quoteLeftMark: markSvg(),
+            quoteLargeMarkFontSize: '1em',
+            quoteMarkWidth: '1.5em',
+            quoteHangingMarkSpacing: '0.3em',
+            quoteIndent: '1.8em',
+            quoteLeftMarkTop: '-0.35em'
+          }
+        }
+      }
+    },
     {
       name: 'Pallete color',
       themeOptions: {
@@ -103,3 +129,7 @@ storiesOfContentElement(module, {
     }
   ]
 });
+
+function markSvg() {
+  return `url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' shape-rendering='geometricPrecision' text-rendering='geometricPrecision' image-rendering='optimizeQuality' fill-rule='evenodd' clip-rule='evenodd' viewBox='0 0 512 358.88'%3E%3Cpath fill='%230ff' fill-rule='nonzero' d='M383.91 0c42.61 0 74.76 14 96.41 41.99 10.59 13.68 18.53 29.23 23.81 46.63 5.25 17.26 7.87 36.24 7.87 56.9 0 23.45-3.27 45.79-9.81 67.02-6.55 21.24-16.35 41.25-29.38 60.01-13.05 18.77-28.97 35.33-47.76 49.66-18.67 14.24-40.16 26.25-64.44 36.03a8.869 8.869 0 0 1-8.51-1.06l-88.49-56.56c-4.12-2.63-5.33-8.1-2.7-12.21a8.769 8.769 0 0 1 4.06-3.42c16.64-6.98 31.71-14.08 45.19-21.3 13.47-7.22 25.48-14.62 36.02-22.19 10.22-7.34 19.04-15.44 26.45-24.3 2.46-2.93 4.76-5.94 6.9-9.03-4.65 1.45-9.61 2.17-14.88 2.17-13.52 0-26.24-2.13-38.14-6.37-11.93-4.24-22.97-10.61-33.12-19.1-10.43-8.71-18.26-19.37-23.47-31.94-5.12-12.35-7.69-26.44-7.69-42.26 0-18.17 2.7-34.18 8.08-48.01 5.51-14.18 13.82-25.97 24.88-35.33 10.85-9.17 23.79-16.05 38.81-20.61C348.74 2.24 365.38 0 383.91 0zm82.4 52.81c-18.08-23.36-45.55-35.05-82.4-35.05-16.93 0-31.86 1.97-44.78 5.89-12.63 3.84-23.47 9.58-32.49 17.22-8.79 7.44-15.41 16.84-19.82 28.18-4.55 11.69-6.83 25.57-6.83 41.62 0 13.52 2.11 25.35 6.3 35.46 4.11 9.89 10.27 18.28 18.48 25.14 8.49 7.1 17.72 12.43 27.67 15.98 9.95 3.55 20.69 5.33 32.21 5.33 9.05 0 16.67-3.34 22.85-10 3.14-3.34 8.37-3.77 12.01-.87l4.44 3.56c3.17 2.42 4.4 6.78 2.71 10.59-5.25 11.83-12.07 22.74-20.42 32.72-8.32 9.94-18.23 19.04-29.72 27.29-11.16 8.01-23.84 15.83-38.03 23.43-9.78 5.24-20.23 10.36-31.34 15.37l71.04 45.41c21.07-8.85 39.77-19.5 56.1-31.95 17.28-13.18 31.92-28.42 43.94-45.71 12.03-17.31 21.04-35.68 27.02-55.08 5.99-19.43 8.99-40.04 8.99-61.82 0-19.07-2.35-36.33-7.04-51.76-4.64-15.3-11.61-28.96-20.89-40.95zM124.39 0c42.62 0 74.76 14 96.42 41.99 10.58 13.68 18.52 29.23 23.81 46.63 5.24 17.26 7.87 36.24 7.87 56.9 0 47.08-13.07 89.43-39.2 127.03-13.04 18.77-28.97 35.33-47.76 49.66-18.66 14.24-40.15 26.25-64.44 36.03a8.876 8.876 0 0 1-8.51-1.06L4.09 300.62c-4.12-2.63-5.33-8.1-2.7-12.21a8.769 8.769 0 0 1 4.06-3.42c16.64-6.98 31.71-14.08 45.2-21.3 13.47-7.22 25.48-14.62 36.02-22.19 10.21-7.34 19.03-15.44 26.45-24.3 2.47-2.95 4.78-5.98 6.94-9.09-4.71 1.48-9.69 2.23-14.93 2.23-13.54 0-26.27-2.13-38.17-6.37l-.44-.17c-11.76-4.26-22.64-10.57-32.64-18.93-10.43-8.71-18.26-19.37-23.48-31.94-5.12-12.35-7.68-26.44-7.68-42.26 0-18.17 2.69-34.18 8.07-48.01 5.52-14.18 13.82-25.97 24.89-35.33 10.84-9.17 23.78-16.05 38.8-20.61C89.22 2.24 105.87 0 124.39 0zm82.4 52.81c-18.08-23.36-45.54-35.05-82.4-35.05-16.93 0-31.86 1.97-44.77 5.89-12.64 3.84-23.47 9.58-32.49 17.22-8.8 7.44-15.41 16.84-19.82 28.18-4.55 11.69-6.83 25.57-6.83 41.62 0 13.52 2.1 25.35 6.3 35.46 4.1 9.89 10.27 18.28 18.48 25.14 8.4 7.03 17.5 12.31 27.27 15.85l.4.13c9.95 3.55 20.69 5.33 32.2 5.33 4.61 0 8.79-.82 12.51-2.45 3.75-1.64 7.21-4.16 10.35-7.55 3.14-3.34 8.37-3.77 12-.87l4.45 3.56a8.843 8.843 0 0 1 2.71 10.59 138.097 138.097 0 0 1-20.43 32.72c-8.32 9.94-18.23 19.04-29.71 27.29-11.16 8.01-23.85 15.83-38.04 23.43-9.78 5.24-20.22 10.36-31.34 15.37l71.04 45.41c21.07-8.85 39.78-19.5 56.1-31.95 17.28-13.18 31.93-28.42 43.95-45.71 24-34.54 36-73.51 36-116.9 0-19.07-2.34-36.33-7.03-51.76-4.65-15.3-11.62-28.96-20.9-40.95z'/%3E%3C/svg%3E")`;
+}
diff --git a/entry_types/scrolled/package/src/contentElements/textBlock/TextBlock.module.css b/entry_types/scrolled/package/src/contentElements/textBlock/TextBlock.module.css
@@ -2,15 +2,15 @@
 @value breakpoint-sm from 'pageflow-scrolled/values/breakpoints.module.css';
 
 .text {
-  --blockquote-padding-left: 0;
+  --block-quote-padding-left: 0;
 }
 
 .quoteDesign-hanging {
-  --blockquote-padding-left: 1em;
+  --block-quote-padding-left: var(--theme-text-block-block-quote-hanging-indent, 1em);
 }
 
 .quoteDesign-largeHanging {
-  --blockquote-padding-left: 1.6em;
+  --block-quote-padding-left: var(--theme-text-block-block-quote-hanging-indent, 1.6em);
 }
 
 .text p {
@@ -54,7 +54,7 @@
 }
 
 .text blockquote {
-  padding: 0.5em 0.5em 0.5em var(--blockquote-padding-left);
+  padding: 0.5em 0.5em 0.5em var(--block-quote-padding-left);
   margin: 1.375rem 0 0 0;
   position: relative;
   /* Prevent block quote symbol from overlapping with floated elements. */
@@ -65,6 +65,7 @@
 .text blockquote::after {
   font-weight: var(--theme-quote-mark-font-weight, bold);
   opacity: var(--theme-quote-mark-opacity, 0.5);
+  width: var(--theme-quote-mark-width);
 }
 
 .text blockquote::before {
@@ -81,7 +82,7 @@
 }
 
 .quoteDesign-largeHanging blockquote::before {
-  font-size: 2.5em;
+  font-size: var(--theme-quote-large-mark-font-size, 2.5em);
   line-height: 1em;
   top: calc(var(--theme-quote-large-mark-top, -0.2em));
   padding-top: inherit;
@@ -93,16 +94,16 @@
 }
 
 .quoteDesign-hanging blockquote::before {
-  right: calc(100% - var(--blockquote-padding-left) + 0.05em);
+  right: calc(100% - var(--block-quote-padding-left) + var(--theme-quote-hanging-mark-spacing, 0.05em));
 }
 
 .quoteDesign-hanging blockquote::after {
-  padding-left: 0.05em;
+  padding-left: var(--theme-quote-hanging-mark-spacing, 0.05em);
 }
 
 @media screen and breakpoint-sm {
   .quoteDesign-largeHanging {
-    --blockquote-padding-left: 2em;
+    --block-quote-padding-left: var(--theme-text-block-block-quote-hanging-indent, 2em);
   }
 
   .text blockquote {
@@ -111,7 +112,7 @@
   }
 
   .quoteDesign-largeHanging blockquote::before {
-    font-size: 3em;
+    font-size: var(--theme-quote-large-mark-font-size, 3em);;
   }
 }
 

diff --git a/entry_types/scrolled/package/src/contentElements/textBlock/stories.js b/entry_types/scrolled/package/src/contentElements/textBlock/stories.js
@@ -145,21 +145,23 @@ storiesOfContentElement(module, {
       }
     },
     {
-      name: 'With customiezed hanging quotes',
+      name: 'With customized hanging quotes',
       themeOptions: {
         quoteDesign: 'hanging',
         properties: {
           root: {
             quoteLeftMark: '"»"',
             quoteRightMark: '"«"',
+            quoteHangingMarkSpacing: '0.2em',
             quoteMarkOpacity: 1,
-            quoteMarkFontWeight: 'normal'
+            quoteMarkFontWeight: 'normal',
+            textBlockBlockQuoteHangingIndent: '2em'
           }
         }
       }
     },
     {
-      name: 'With customiezed inline quotes',
+      name: 'With customized inline quotes',
       themeOptions: {
         quoteDesign: 'inline',
         properties: {