Merge pull request #1986 from tf/storybook-theme-property-scopes

Support scopes in storybook theme properties
codevise · Aug 17, 2023 · f4e26a1 · f4e26a1
2 parents b2cb178 + e26449d
commit f4e26a1
Show file tree

Hide file tree

Showing 5 changed files with 91 additions and 36 deletions.
diff --git a/entry_types/scrolled/package/spec/support/__spec__/stories-spec.js b/entry_types/scrolled/package/spec/support/__spec__/stories-spec.js
@@ -78,7 +78,9 @@ describe('exampleStories', () => {
         name: 'With Properties',
         themeOptions: {
           properties: {
-            accentColor: 'red'
+            root: {
+              accentColor: 'red'
+            }
           }
         }
       }]
@@ -91,13 +93,19 @@ describe('exampleStories', () => {
           theme: expect.objectContaining({
             options: expect.objectContaining({
               properties: expect.objectContaining({
-                accentColor: 'red'
+                root: {
+                  accentColor: 'red'
+                }
               })
             })
           })
         })
       }),
-      cssProperties: {'--theme-accent-color': 'red'}
+      cssRules: {
+        root: {
+          '--theme-accent-color': 'red'
+        }
+      }
     }));
   });
 

diff --git a/entry_types/scrolled/package/spec/support/stories.js b/entry_types/scrolled/package/spec/support/stories.js
@@ -54,7 +54,9 @@ let seedFixture = seedFixtureFromFile;
  *       configuration: {size: 'large'},
  *       themeOptions: {
  *         properties: {
- *           accentColor: '#0f0'
+ *           root: {
+ *             accentColor: '#0f0'
+ *           }
  *         }
  *       }
  *     }
@@ -69,7 +71,7 @@ export function storiesOfContentElement(module, options) {
   }
 
   exampleStories(options).forEach(({
-    title, seed, requireConsentOptIn, cssProperties, parameters = {}
+    title, seed, requireConsentOptIn, cssRules, parameters = {}
   }) => {
     const consent = Consent.create();
 
@@ -83,9 +85,10 @@ export function storiesOfContentElement(module, options) {
     stories.add(title,
                 () =>
                   <RootProviders seed={seed} consent={consent}>
-                    <div style={cssProperties}>
-                      <Entry />
-                    </div>
+                    <style>
+                      {renderCss(cssRules)}
+                    </style>
+                    <Entry />
                   </RootProviders>,
                 {
                   ...parameters,
@@ -97,6 +100,22 @@ export function storiesOfContentElement(module, options) {
   });
 }
 
+function renderCss(rules) {
+  return Object.entries(rules).map(([name, properties]) => {
+    const selector = (name === 'root' ? ':root' : `.scope-${name}`);
+
+    const declations = Object.entries(properties).map(([key, value]) =>
+      `${key}: ${value};`
+    ).join('\n');
+
+    return `
+      ${selector} {
+        ${declations}
+      }
+    `
+  }).join('\n');
+}
+
 /**
  * When generating a `.storybook/seed.json` via the
  * `pageflow_scrolled:storybook:seed:setup` Rake task, a couple of
@@ -259,7 +278,13 @@ function exampleStoryGroup({name, typeName, examples, parameters, requireConsent
     }),
     requireConsentOptIn,
     parameters,
-    cssProperties: themeCssProperties(examples[index].themeOptions?.properties || {})
+    cssRules: Object.entries(examples[index].themeOptions?.properties || {}).reduce(
+      (result, [scope, properties]) => {
+        result[scope] = themeCssProperties(properties);
+        return result;
+      },
+      {}
+    )
   }));
 }
 

diff --git a/entry_types/scrolled/package/src/contentElements/counter/stories.js b/entry_types/scrolled/package/src/contentElements/counter/stories.js
@@ -55,7 +55,9 @@ storiesOfContentElement(module, {
       name: 'Pallete number color',
       themeOptions: {
         properties: {
-          paletteColorAccent: '#04f'
+          root: {
+            paletteColorAccent: '#04f'
+          }
         }
       },
       configuration: {

diff --git a/entry_types/scrolled/package/src/contentElements/quote/stories.js b/entry_types/scrolled/package/src/contentElements/quote/stories.js
@@ -56,7 +56,9 @@ storiesOfContentElement(module, {
       name: 'Centered Attribution',
       themeOptions: {
         properties: {
-          quoteAttributionMinWidth: '50%'
+          root: {
+            quoteAttributionMinWidth: '50%'
+          }
         }
       }
     },
@@ -65,28 +67,34 @@ storiesOfContentElement(module, {
       themeOptions: {
         quoteDesign: 'inline',
         properties: {
-          quoteLeftMark: '"»"',
-          quoteRightMark: '"«"',
-          quoteMarkFontWeight: 'normal',
-          quoteIndent: 0,
-          quoteMarkOpacity: 1
+          root: {
+            quoteLeftMark: '"»"',
+            quoteRightMark: '"«"',
+            quoteMarkFontWeight: 'normal',
+            quoteIndent: 0,
+            quoteMarkOpacity: 1
+          }
         }
       }
     },
     {
       name: 'Double angle',
       themeOptions: {
         properties: {
-          quoteLeftMark: '"»"',
-          quoteLeftMarkTop: '-0.35em'
+          root: {
+            quoteLeftMark: '"»"',
+            quoteLeftMarkTop: '-0.35em'
+          }
         }
       }
     },
     {
       name: 'Pallete color',
       themeOptions: {
         properties: {
-          paletteColorAccent: '#04f'
+          root: {
+            paletteColorAccent: '#04f'
+          }
         }
       },
       configuration: {

diff --git a/entry_types/scrolled/package/src/contentElements/textBlock/stories.js b/entry_types/scrolled/package/src/contentElements/textBlock/stories.js
@@ -111,7 +111,9 @@ storiesOfContentElement(module, {
       configuration: linkExampleConfiguration,
       themeOptions: {
         properties: {
-          contentLinkColor: 'red'
+          root: {
+            contentLinkColor: 'red'
+          }
         }
       }
     },
@@ -120,8 +122,10 @@ storiesOfContentElement(module, {
       configuration: linkExampleConfiguration,
       themeOptions: {
         properties: {
-          lightContentLinkColor: 'yellow',
-          darkContentLinkColor: 'green',
+          root: {
+            lightContentLinkColor: 'yellow',
+            darkContentLinkColor: 'green',
+          }
         }
       }
     },
@@ -133,8 +137,10 @@ storiesOfContentElement(module, {
       },
       themeOptions: {
         properties: {
-          lightContentLinkColor: 'yellow',
-          darkContentLinkColor: 'green',
+          root: {
+            lightContentLinkColor: 'yellow',
+            darkContentLinkColor: 'green',
+          }
         }
       }
     },
@@ -143,10 +149,12 @@ storiesOfContentElement(module, {
       themeOptions: {
         quoteDesign: 'hanging',
         properties: {
-          quoteLeftMark: '"»"',
-          quoteRightMark: '"«"',
-          quoteMarkOpacity: 1,
-          quoteMarkFontWeight: 'normal'
+          root: {
+            quoteLeftMark: '"»"',
+            quoteRightMark: '"«"',
+            quoteMarkOpacity: 1,
+            quoteMarkFontWeight: 'normal'
+          }
         }
       }
     },
@@ -155,21 +163,25 @@ storiesOfContentElement(module, {
       themeOptions: {
         quoteDesign: 'inline',
         properties: {
-          quoteLeftMark: '"»"',
-          quoteRightMark: '"«"'
+          root: {
+            quoteLeftMark: '"»"',
+            quoteRightMark: '"«"'
+          }
         }
       }
     },
     {
       name: 'With custom lists',
       themeOptions: {
         properties: {
-          textBlockUnorderedListStyleType: '"-  "',
-          textBlockUnorderedListMarkerColor: 'red',
-          textBlockUnorderedListIndent: '15px',
-          textBlockOrderedListIndent: '60px',
-          textBlockFirstListItemMarginTop: '2rem',
-          textBlockListItemMarginTop: 0
+          root: {
+            textBlockUnorderedListStyleType: '"-  "',
+            textBlockUnorderedListMarkerColor: 'red',
+            textBlockUnorderedListIndent: '15px',
+            textBlockOrderedListIndent: '60px',
+            textBlockFirstListItemMarginTop: '2rem',
+            textBlockListItemMarginTop: 0
+          }
         }
       }
     }