feat(CodeBlock): Pass variables into graphqlPlayground url

src/components/CodeBlock.stories.tsx

@@ -11,7 +11,7 @@ import { CodeBlock as Component } from './CodeBlock';
 export default {
   args: {
     braidThemeName: defaultArgs.braidThemeName,
-    graphqlPlayground: 'https://graphql.seek.com/graphql',
+    graphqlPlayground: 'https://manage.developer.seek.com/graphql-explorer',
     language: 'graphql',
     size: defaultArgs.size,
     trim: true,

src/components/CodeBlock.tsx

@@ -56,15 +56,20 @@ export const CodeBlock = ({
 
   const child = children[index];
 
+  const variables =
+    children[0].language === 'graphql' && children[1]?.label === 'Variables'
+      ? children[1].code
+      : undefined;
+
   const graphqlPlaygroundButton =
-    child.language === 'graphql' && graphqlPlayground ? (
+    children[0].language === 'graphql' && graphqlPlayground ? (
       <Box component="span" paddingLeft={tablePadding}>
         <GraphQLPlaygroundAction
           graphqlPlayground={graphqlPlayground}
           size={size}
-        >
-          {child.code}
-        </GraphQLPlaygroundAction>
+          query={children[0].code}
+          variables={variables}
+        />
       </Box>
     ) : undefined;
 

src/components/CodeBlock/GraphQLPlaygroundAction.tsx

@@ -8,26 +8,29 @@ import { SIZE_TO_SMALLER, Size } from '../../private/size';
 const URL = url.URL ?? window.URL;
 
 interface Props {
-  children: string;
+  query: string;
+  variables: string | undefined;
   graphqlPlayground: string;
   size: Size;
 }
 
 export const GraphQLPlaygroundAction = ({
-  children,
+  query,
+  variables,
   graphqlPlayground,
   size,
 }: Props) => {
   const playgroundUrl = new URL(graphqlPlayground);
-  playgroundUrl.searchParams.set('query', children);
+  playgroundUrl.searchParams.set('query', query);
+  playgroundUrl.searchParams.set('variables', variables ?? '{}');
   const href = playgroundUrl.toString();
 
   const smallerSize = SIZE_TO_SMALLER[size];
 
   return (
     <Text size={smallerSize} weight="medium">
       <TextLink href={href} rel="noreferrer" target="_blank">
-        <IconVideo alignY="lowercase" /> Playground
+        <IconVideo alignY="lowercase" /> GraphQL Explorer
       </TextLink>
     </Text>
   );