From ea9a2bdbf6edeed5e5ecbd4d600196c6e44d967e Mon Sep 17 00:00:00 2001
From: rangle-brendan <brendan.rygus@rangle.io>
Date: Fri, 4 Sep 2020 12:57:01 -0400
Subject: [PATCH 1/2] [DS] Add graphql support to SyntaxHighlighter

---
 .../syntaxhighlighter/syntaxhighlighter.stories.tsx | 13 +++++++++++++
 .../src/syntaxhighlighter/syntaxhighlighter.tsx     |  2 ++
 2 files changed, 15 insertions(+)

diff --git a/lib/components/src/syntaxhighlighter/syntaxhighlighter.stories.tsx b/lib/components/src/syntaxhighlighter/syntaxhighlighter.stories.tsx
index 7824cd5da7dd..294aad9c43f5 100644
--- a/lib/components/src/syntaxhighlighter/syntaxhighlighter.stories.tsx
+++ b/lib/components/src/syntaxhighlighter/syntaxhighlighter.stories.tsx
@@ -82,6 +82,19 @@ storiesOf('Basics/SyntaxHighlighter', module)
       `}
     </SyntaxHighlighter>
   ))
+  .add('graphql', () => (
+    <SyntaxHighlighter language="graphql" copyable={false}>
+      {`query HeroNameAndFriends {
+          hero {
+            name
+            friends {
+              name
+            }
+          }
+        }
+      `}
+    </SyntaxHighlighter>
+  ))
   .add('unsupported', () => (
     <SyntaxHighlighter language="C#" bordered copyable>
       {`
diff --git a/lib/components/src/syntaxhighlighter/syntaxhighlighter.tsx b/lib/components/src/syntaxhighlighter/syntaxhighlighter.tsx
index 1303a74846b9..5ec021b11f8a 100644
--- a/lib/components/src/syntaxhighlighter/syntaxhighlighter.tsx
+++ b/lib/components/src/syntaxhighlighter/syntaxhighlighter.tsx
@@ -8,6 +8,7 @@ import jsx from 'react-syntax-highlighter/dist/cjs/languages/prism/jsx';
 import bash from 'react-syntax-highlighter/dist/cjs/languages/prism/bash';
 import css from 'react-syntax-highlighter/dist/cjs/languages/prism/css';
 import json from 'react-syntax-highlighter/dist/cjs/languages/prism/json';
+import graphql from 'react-syntax-highlighter/dist/cjs/languages/prism/graphql';
 import html from 'react-syntax-highlighter/dist/cjs/languages/prism/markup';
 import md from 'react-syntax-highlighter/dist/cjs/languages/prism/markdown';
 import yml from 'react-syntax-highlighter/dist/cjs/languages/prism/yaml';
@@ -33,6 +34,7 @@ ReactSyntaxHighlighter.registerLanguage('css', css);
 ReactSyntaxHighlighter.registerLanguage('html', html);
 ReactSyntaxHighlighter.registerLanguage('tsx', tsx);
 ReactSyntaxHighlighter.registerLanguage('typescript', typescript);
+ReactSyntaxHighlighter.registerLanguage('graphql', graphql);
 
 const themedSyntax = memoize(2)((theme) =>
   Object.entries(theme.code || {}).reduce((acc, [key, val]) => ({ ...acc, [`* .${key}`]: val }), {})

From 3365a09ba8307b121a2fd03bc3f72f3a10456a64 Mon Sep 17 00:00:00 2001
From: rangle-brendan <brendan.rygus@rangle.io>
Date: Fri, 4 Sep 2020 13:06:36 -0400
Subject: [PATCH 2/2] Add more complex mock data

---
 .../src/syntaxhighlighter/syntaxhighlighter.stories.tsx       | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/lib/components/src/syntaxhighlighter/syntaxhighlighter.stories.tsx b/lib/components/src/syntaxhighlighter/syntaxhighlighter.stories.tsx
index 294aad9c43f5..4ff7cffbc6c8 100644
--- a/lib/components/src/syntaxhighlighter/syntaxhighlighter.stories.tsx
+++ b/lib/components/src/syntaxhighlighter/syntaxhighlighter.stories.tsx
@@ -84,8 +84,8 @@ storiesOf('Basics/SyntaxHighlighter', module)
   ))
   .add('graphql', () => (
     <SyntaxHighlighter language="graphql" copyable={false}>
-      {`query HeroNameAndFriends {
-          hero {
+      {`query HeroNameAndFriends($episode: Episode) {
+          hero(episode: $episode) {
             name
             friends {
               name