Add iframe support for primitives (#422)

* add iframe support for primitives Co-authored-by: Cole Bemis <colebemis@users.noreply.github.com> * oops --------- Co-authored-by: Cole Bemis <colebemis@users.noreply.github.com>
primer · Mar 10, 2023 · 7749a7b · 7749a7b
1 parent 10942d2
commit 7749a7b
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 9 deletions.
diff --git a/content/foundations/css-utilities/animations.mdx b/content/foundations/css-utilities/animations.mdx
@@ -14,7 +14,7 @@ description: Animations are reusable animation classes that you can use to empha
     {id: 'utilities-animation--grow-x'},
     {id: 'utilities-animation--pulse'},
     {id: 'utilities-animation--hover'},
-    {id: 'utilities-animation--rotate'},
+    {id: 'utilities-animation--rotate'}
   ]}
 />
 

diff --git a/src/components/storybook-embed.tsx b/src/components/storybook-embed.tsx
@@ -5,29 +5,34 @@ import {sentenceCase} from 'change-case'
 
 const baseUrls = {
   react: 'https://primer.style/react/storybook',
-  css: 'https://primer.style/css/storybook',
+  css: 'https://primer.style/css/storybook'
 }
 
 const colorSchemes = Object.keys(theme.colorSchemes)
 
 type StorybookEmbedProps = {
   framework?: 'react' | 'css'
+  baseUrl?: string
   stories: Array<{id: string}>
   height?: string | number
 }
 
-export function StorybookEmbed({framework = 'react', stories, height = 250}: StorybookEmbedProps) {
-  const baseUrl = baseUrls[framework]
+export function StorybookEmbed({
+  framework,
+  baseUrl = baseUrls[framework || ''],
+  stories,
+  height = 250
+}: StorybookEmbedProps) {
   const [selectedColorScheme, setSelectedColorScheme] = React.useState(colorSchemes[0])
   const [selectedStory, setSelectedStory] = React.useState(stories[0])
   const options = {
     id: selectedStory.id,
-    globals: framework === 'css' ? `theme:${selectedColorScheme}` : `colorScheme:${selectedColorScheme}`,
+    globals: framework === 'react' ? `colorScheme:${selectedColorScheme}` : `theme:${selectedColorScheme}`
   }
   const iframeRef = React.useRef<HTMLIFrameElement>(null)
   const iframeUrl = `${baseUrl}/iframe.html?${new URLSearchParams(options)}`
   const storybookUrl = `${baseUrl}?path=/story/${selectedStory.id}&${new URLSearchParams({
-    globals: options.globals,
+    globals: options.globals
   })}`
 
   // Prevent iframe from affecting browser history
@@ -56,7 +61,7 @@ export function StorybookEmbed({framework = 'react', stories, height = 250}: Sto
           sx={{
             gap: 3,
             justifyContent: 'space-between',
-            overflow: 'auto',
+            overflow: 'auto'
           }}
         >
           <Box sx={{display: 'flex', alignItems: 'center', gap: 2}}>
@@ -107,7 +112,7 @@ export function StorybookEmbed({framework = 'react', stories, height = 250}: Sto
               display: 'inline-flex',
               alignItems: 'center',
               gap: 1,
-              whiteSpace: 'nowrap',
+              whiteSpace: 'nowrap'
             }}
           >
             View in Storybook
@@ -124,7 +129,7 @@ export function StorybookEmbed({framework = 'react', stories, height = 250}: Sto
             borderTopRightRadius: 0,
             borderColor: 'border.default',
             borderStyle: 'solid',
-            borderWidth: 1,
+            borderWidth: 1
           }}
           title="storybook-preview"
           id="storybook-preview-iframe"