From 97c09c7c0f9f94170963118ef3efb7685878398c Mon Sep 17 00:00:00 2001
From: Emily <emplums@github.com>
Date: Mon, 23 Jul 2018 16:06:55 -0700
Subject: [PATCH] fix linting issues

---
 examples/component-examples/Avatar.js        | 20 ++++++++---
 examples/component-examples/Block.js         |  5 ++-
 examples/component-examples/Box.js           |  5 ++-
 examples/component-examples/BranchName.js    | 10 +++---
 examples/component-examples/Buttons.js       | 36 +++++++++++++-------
 examples/component-examples/Caret.js         | 12 +++----
 examples/component-examples/CaretBox.js      |  9 +++--
 examples/component-examples/CircleBadge.js   |  9 ++---
 examples/component-examples/CircleOcticon.js |  5 ++-
 examples/component-examples/CounterLabel.js  |  6 ++--
 examples/component-examples/Details.js       | 10 +++---
 examples/component-examples/DonutChart.js    |  9 ++---
 examples/component-examples/Dropdown.js      | 12 +++----
 examples/component-examples/Flash.js         | 10 +++---
 examples/component-examples/Flex.js          | 11 +++---
 examples/component-examples/Heading.js       |  6 +++-
 examples/component-examples/Label.js         | 12 +++----
 examples/component-examples/Link.js          |  8 ++---
 examples/component-examples/MergeStatus.js   |  8 ++---
 examples/component-examples/StateLabel.js    | 15 +++-----
 examples/component-examples/Text.js          | 12 +++----
 examples/component-examples/TextInput.js     | 10 +++---
 examples/component-examples/Tooltip.js       | 31 ++++++++---------
 examples/component-examples/UnderlineNav.js  |  9 ++---
 24 files changed, 143 insertions(+), 137 deletions(-)

diff --git a/examples/component-examples/Avatar.js b/examples/component-examples/Avatar.js
index eca77f9de78..723ea4f3b7e 100644
--- a/examples/component-examples/Avatar.js
+++ b/examples/component-examples/Avatar.js
@@ -7,16 +7,28 @@ const AvatarExample = {
   element: (
     <div>
       <Block mb={2}>
-        <LiveEditor code={`<Avatar src="https://avatars.githubusercontent.com/primer?v=3&s=128" size={128} username="primer" />`} scope={{Avatar}} />
+        <LiveEditor
+          code={`<Avatar src="https://avatars.githubusercontent.com/primer?v=3&s=128" size={128} username="primer" />`}
+          scope={{Avatar}}
+        />
       </Block>
       <Block mb={2}>
-        <LiveEditor code={`<Avatar src="https://avatars.githubusercontent.com/primer?v=3&s=128" size={128} username="primer" />`} scope={{Avatar}} />
+        <LiveEditor
+          code={`<Avatar src="https://avatars.githubusercontent.com/primer?v=3&s=128" size={128} username="primer" />`}
+          scope={{Avatar}}
+        />
       </Block>
       <Block mb={2}>
-        <LiveEditor code={`<Avatar src="https://avatars.githubusercontent.com/reactjs?v=3&s=32" size={32} username="reactjs" />`} scope={{Avatar}}/>
+        <LiveEditor
+          code={`<Avatar src="https://avatars.githubusercontent.com/reactjs?v=3&s=32" size={32} username="reactjs" />`}
+          scope={{Avatar}}
+        />
       </Block>
       <Block>
-        <LiveEditor code={`<Avatar src="https://avatars.githubusercontent.com/npm?v=3&s=64" username="npm" />`} scope={{Avatar}}/>
+        <LiveEditor
+          code={`<Avatar src="https://avatars.githubusercontent.com/npm?v=3&s=64" username="npm" />`}
+          scope={{Avatar}}
+        />
       </Block>
     </div>
   )
diff --git a/examples/component-examples/Block.js b/examples/component-examples/Block.js
index 7d0621b66a4..73f51c338b5 100644
--- a/examples/component-examples/Block.js
+++ b/examples/component-examples/Block.js
@@ -58,7 +58,10 @@ const BlockExample = {
         </tbody>
       </table>
       <Heading fontSize="3">Code Example</Heading>
-      <LiveEditor code={`<Block width="400" display="inline-block" bg="blue" p={3} fg="white">white</Block>`} scope={{Block}} />
+      <LiveEditor
+        code={`<Block width="400" display="inline-block" bg="blue" p={3} fg="white">white</Block>`}
+        scope={{Block}}
+      />
     </div>
   )
 }
diff --git a/examples/component-examples/Box.js b/examples/component-examples/Box.js
index bb320ecbb65..437d831e0e4 100644
--- a/examples/component-examples/Box.js
+++ b/examples/component-examples/Box.js
@@ -22,7 +22,10 @@ const BoxExample = {
         <LiveEditor code={`<Box shadow="large" p={2}>This is a box with a large shadow.</Box>`} scope={{Box}} />
       </Block>
       <Block mb={6}>
-        <LiveEditor code={`<Box shadow="extra-large" p={2}>This is a box with an extra-large shadow.</Box>`} scope={{Box}} />
+        <LiveEditor
+          code={`<Box shadow="extra-large" p={2}>This is a box with an extra-large shadow.</Box>`}
+          scope={{Box}}
+        />
       </Block>
       <Block mb={6}>
         <LiveEditor code={`<Box borderColor="green" p={2}>This is a box with a green border.</Box>`} scope={{Box}} />
diff --git a/examples/component-examples/BranchName.js b/examples/component-examples/BranchName.js
index 32c1740c2b4..d6c0ccb9547 100644
--- a/examples/component-examples/BranchName.js
+++ b/examples/component-examples/BranchName.js
@@ -4,13 +4,11 @@ import {Detail, LiveEditor} from '@compositor/kit'
 import ExampleHeading from '../doc-components/ExampleHeading'
 import {BranchName} from '../../src'
 
-const linkedBranch =
-`<BranchName tag="a" href="/">
+const linkedBranch = `<BranchName tag="a" href="/">
   a_new_feature_branch
 </BranchName>`
 
-const branchOcticon =
-`<BranchName>
+const branchOcticon = `<BranchName>
   <Octicon icon={GitBranch} />
   a_new_feature_branch
 </BranchName>`
@@ -19,12 +17,12 @@ const BranchNameExample = {
   name: 'BranchName',
   element: (
     <div>
-      <LiveEditor code={`<BranchName>a_new_feature_branch</BranchName>`} scope={{BranchName}}/>
+      <LiveEditor code={`<BranchName>a_new_feature_branch</BranchName>`} scope={{BranchName}} />
       <Detail>
         <ExampleHeading mt={3}>Linked BranchName</ExampleHeading>
         <LiveEditor code={linkedBranch} scope={{BranchName}} />
         <ExampleHeading mt={3}>BranchName with Octicon</ExampleHeading>
-        <LiveEditor scope={{BranchName, GitBranch, Octicon}} code={branchOcticon}/>
+        <LiveEditor scope={{BranchName, GitBranch, Octicon}} code={branchOcticon} />
       </Detail>
     </div>
   )
diff --git a/examples/component-examples/Buttons.js b/examples/component-examples/Buttons.js
index 4c6f0b76ba7..91aa000ee22 100644
--- a/examples/component-examples/Buttons.js
+++ b/examples/component-examples/Buttons.js
@@ -9,38 +9,50 @@ const ButtonExample = {
   element: (
     <div>
       <Block mb={2}>
-        <LiveEditor code={`<Button> Button </Button>`} scope={{Button}}/>
+        <LiveEditor code={`<Button> Button </Button>`} scope={{Button}} />
       </Block>
       <Block mb={2}>
-        <LiveEditor code={`<Button size="sm"> Button small </Button>`} scope={{Button}}/>
+        <LiveEditor code={`<Button size="sm"> Button small </Button>`} scope={{Button}} />
       </Block>
       <Block mb={2}>
-        <LiveEditor code={`<Button size="large"> Button large </Button>`} scope={{Button}}/>
+        <LiveEditor code={`<Button size="large"> Button large </Button>`} scope={{Button}} />
       </Block>
       <Block mb={2}>
-        <LiveEditor code={`<ButtonDanger> ButtonDanger </ButtonDanger>`} scope={{ButtonDanger}}/>
+        <LiveEditor code={`<ButtonDanger> ButtonDanger </ButtonDanger>`} scope={{ButtonDanger}} />
       </Block>
       <Block mb={2}>
-        <LiveEditor code={`<ButtonPrimary> ButtonPrimary </ButtonPrimary>`} scope={{ButtonPrimary}}/>
+        <LiveEditor code={`<ButtonPrimary> ButtonPrimary </ButtonPrimary>`} scope={{ButtonPrimary}} />
       </Block>
       <Block mb={2}>
-        <LiveEditor code={`<ButtonOutline> ButtonOutline </ButtonOutline>`} scope={{ButtonOutline}}/>
+        <LiveEditor code={`<ButtonOutline> ButtonOutline </ButtonOutline>`} scope={{ButtonOutline}} />
       </Block>
       <Block mb={2}>
-        <LiveEditor code={`<Button block> Button block </Button>`} scope={{Button}}/>
+        <LiveEditor code={`<Button block> Button block </Button>`} scope={{Button}} />
       </Block>
       <Block mb={2}>
-        <LiveEditor code={`<Button linkStyle> Button linkStyle </Button>`} scope={{Button}}/>
+        <LiveEditor code={`<Button linkStyle> Button linkStyle </Button>`} scope={{Button}} />
       </Block>
       <Block mb={2}>
-        <LiveEditor code={`<ButtonLink href="https://www.goatslive.com/">This is an {'<a>'} styled as a button</ButtonLink>`} scope={{ButtonLink}}/>
+        <LiveEditor
+          code={`<ButtonLink href="https://www.goatslive.com/">This is an {'<a>'} styled as a button</ButtonLink>`}
+          scope={{ButtonLink}}
+        />
       </Block>
       <Block mb={2}>
         <ExampleHeading>Octicon Buttons</ExampleHeading>
-        <LiveEditor code={`<OcticonButton icon={Pencil} label="Edit" onClick={() => alert('edit')} mr={3} />`} scope={{OcticonButton, Pencil}}/>
-        <LiveEditor code={`<Text color="red"><OcticonButton icon={X} label="Close" onClick={() => alert('close')} mr={3} /></Text>`} scope={{OcticonButton, Text, X}}/>  
+        <LiveEditor
+          code={`<OcticonButton icon={Pencil} label="Edit" onClick={() => alert('edit')} mr={3} />`}
+          scope={{OcticonButton, Pencil}}
+        />
+        <LiveEditor
+          code={`<Text color="red"><OcticonButton icon={X} label="Close" onClick={() => alert('close')} mr={3} /></Text>`}
+          scope={{OcticonButton, Text, X}}
+        />
         <Block>
-          <LiveEditor code={`<OcticonButton icon={Hubot} size="large" label="ROBOT" onClick={() => alert('beep boop')} />`} scope={{OcticonButton, Hubot}}/>
+          <LiveEditor
+            code={`<OcticonButton icon={Hubot} size="large" label="ROBOT" onClick={() => alert('beep boop')} />`}
+            scope={{OcticonButton, Hubot}}
+          />
         </Block>
       </Block>
     </div>
diff --git a/examples/component-examples/Caret.js b/examples/component-examples/Caret.js
index 43d8032e4bb..03db316e86f 100644
--- a/examples/component-examples/Caret.js
+++ b/examples/component-examples/Caret.js
@@ -2,21 +2,19 @@ import React from 'react'
 import {LiveEditor} from '@compositor/kit'
 import {Caret, Text, Box, Block} from '../../src'
 
-const example = (loc) =>
-`<Box p={2} mb={4} position="relative" maxWidth={300} minHeight={96} shadow="small" key={loc}>
+const example = loc =>
+  `<Box p={2} mb={4} position="relative" maxWidth={300} minHeight={96} shadow="small" key="${loc}">
   <Text fontSize={1} mono>
-    location='{loc}'
+    location='${loc}'
   </Text>
-  <Caret location={loc} />
+  <Caret location="${loc}" />
 </Box>`
 
 const CaretExample = {
   name: 'Caret',
   element: (
     <Block mt={4}>
-      {Caret.locations.map(loc => (
-        <LiveEditor code={example(loc)} scope={{Text, Caret, Box, loc}}/>
-      ))}
+      {Caret.locations.map(loc => <LiveEditor key={loc} code={example(loc)} scope={{Text, Caret, Box, loc}} />)}
     </Block>
   )
 }
diff --git a/examples/component-examples/CaretBox.js b/examples/component-examples/CaretBox.js
index a917498fdc7..47258ccec07 100644
--- a/examples/component-examples/CaretBox.js
+++ b/examples/component-examples/CaretBox.js
@@ -1,10 +1,9 @@
 import React from 'react'
-import {PropsForm, LiveEditor} from '@compositor/kit'
-import {Caret, CaretBox, theme} from '../../src'
+import {LiveEditor} from '@compositor/kit'
+import {CaretBox} from '../../src'
 import ExampleHeading from '../doc-components/ExampleHeading'
 
-const example =
-`<CaretBox my={4} p={2} minHeight={100} borderColor="purple">
+const example = `<CaretBox my={4} p={2} minHeight={100} borderColor="purple">
   CaretBox
 </CaretBox>`
 
@@ -13,7 +12,7 @@ const CaretBoxExample = {
   element: (
     <div>
       <ExampleHeading mt={2}>CaretBox</ExampleHeading>
-      <LiveEditor code={example} scope={{CaretBox}}/>
+      <LiveEditor code={example} scope={{CaretBox}} />
     </div>
   )
 }
diff --git a/examples/component-examples/CircleBadge.js b/examples/component-examples/CircleBadge.js
index cd5fc6c84a3..a78546553c0 100644
--- a/examples/component-examples/CircleBadge.js
+++ b/examples/component-examples/CircleBadge.js
@@ -3,16 +3,13 @@ import Octicon, {Zap} from '@githubprimer/octicons-react'
 import {LiveEditor} from '@compositor/kit'
 import {Block, CircleBadge, Heading} from '../../src'
 
-const octicon =
-`<CircleBadge size="medium">
+const octicon = `<CircleBadge size="medium">
   <Octicon icon={Zap}/>
 </CircleBadge>`
 
-const image =
-`<CircleBadge bg="blue" size="small"><img src="https://avatars0.githubusercontent.com/t/1929972?s=280&v=4"/></CircleBadge>`
+const image = `<CircleBadge bg="blue" size="small"><img src="https://avatars0.githubusercontent.com/t/1929972?s=280&v=4"/></CircleBadge>`
 
-const sizes =
-`<CircleBadge bg="blue" size="small"><img src="https://avatars0.githubusercontent.com/t/1929972?s=280&v=4"/></CircleBadge>
+const sizes = `<CircleBadge bg="blue" size="small"><img src="https://avatars0.githubusercontent.com/t/1929972?s=280&v=4"/></CircleBadge>
 <CircleBadge bg="blue" size="medium"><img src="https://avatars0.githubusercontent.com/t/1929972?s=280&v=4"/></CircleBadge>
 <CircleBadge bg="blue" size="large"><img src="https://avatars0.githubusercontent.com/t/1929972?s=280&v=4"/></CircleBadge>`
 
diff --git a/examples/component-examples/CircleOcticon.js b/examples/component-examples/CircleOcticon.js
index 3ca3e07a9ca..93c99385ea6 100644
--- a/examples/component-examples/CircleOcticon.js
+++ b/examples/component-examples/CircleOcticon.js
@@ -7,7 +7,10 @@ const CircleOcticonExample = {
   name: 'CircleOcticon',
   element: (
     <div className="d-flex">
-      <LiveEditor code={`<CircleOcticon icon={Check} size={32} bg="green" color="white" />`} scope={{CircleOcticon, Check}} />
+      <LiveEditor
+        code={`<CircleOcticon icon={Check} size={32} bg="green" color="white" />`}
+        scope={{CircleOcticon, Check}}
+      />
     </div>
   )
 }
diff --git a/examples/component-examples/CounterLabel.js b/examples/component-examples/CounterLabel.js
index 13c19acfb1d..8ea9d2e1240 100644
--- a/examples/component-examples/CounterLabel.js
+++ b/examples/component-examples/CounterLabel.js
@@ -6,9 +6,9 @@ const CounterLabelExample = {
   name: 'CounterLabel',
   element: (
     <div>
-      <LiveEditor code={`<CounterLabel>12</CounterLabel>`} scope={{CounterLabel}}/>
-      <LiveEditor code={`<CounterLabel theme={'gray'}>13</CounterLabel>`} scope={{CounterLabel}}/>
-      <LiveEditor code={`<CounterLabel theme={'gray-light'}>13</CounterLabel>`} scope={{CounterLabel}}/>
+      <LiveEditor code={`<CounterLabel>12</CounterLabel>`} scope={{CounterLabel}} />
+      <LiveEditor code={`<CounterLabel theme={'gray'}>13</CounterLabel>`} scope={{CounterLabel}} />
+      <LiveEditor code={`<CounterLabel theme={'gray-light'}>13</CounterLabel>`} scope={{CounterLabel}} />
     </div>
   )
 }
diff --git a/examples/component-examples/Details.js b/examples/component-examples/Details.js
index fd58abc60b2..38f18dd8e95 100644
--- a/examples/component-examples/Details.js
+++ b/examples/component-examples/Details.js
@@ -4,15 +4,13 @@ import {LiveEditor} from '@compositor/kit'
 import {Block, Details} from '../../src'
 import ExampleHeading from '../doc-components/ExampleHeading'
 
-const example1 =
-`<Details>
+const example1 = `<Details>
   <summary className="btn">Click me</summary>
   <p>This should show and hide</p>
 </Details>
 `
 
-const example2 =
-`<Details>
+const example2 = `<Details>
   {({open, toggle}) => (
     <React.Fragment>
       <summary className="btn" onClick={toggle}>
@@ -30,11 +28,11 @@ const DetailsExample = {
     <div>
       <Block mb={4}>
         <ExampleHeading>With static children</ExampleHeading>
-        <LiveEditor code={example1} scope={{Details}}/>
+        <LiveEditor code={example1} scope={{Details}} />
       </Block>
       <Block my={4}>
         <ExampleHeading>With children as a function</ExampleHeading>
-        <LiveEditor code={example2} scope={{Details}}/>
+        <LiveEditor code={example2} scope={{Details}} />
       </Block>
       <Block my={4}>
         <ExampleHeading>With render prop</ExampleHeading>
diff --git a/examples/component-examples/DonutChart.js b/examples/component-examples/DonutChart.js
index 6265087531f..b3e06b4ee13 100644
--- a/examples/component-examples/DonutChart.js
+++ b/examples/component-examples/DonutChart.js
@@ -3,16 +3,14 @@ import {LiveEditor} from '@compositor/kit'
 import {Block, DonutChart, Text, DonutSlice, theme} from '../../src'
 import ExampleHeading from '../doc-components/ExampleHeading'
 
-const dataPropExample =
-`<DonutChart mr={1} data={{error: 2, pending: 3, success: 5}} />
+const dataPropExample = `<DonutChart mr={1} data={{error: 2, pending: 3, success: 5}} />
 <DonutChart mr={1} data={{error: 1, pending: 4, success: 2}} />
 <DonutChart mr={1} data={{pending: 2, success: 6}} />
 <DonutChart mr={1} data={{pending: 0, success: 1}} />
 <DonutChart mr={1} data={{pending: 1, queued: 1}} />
 <DonutChart mr={1} data={{unknown: 1}} />`
 
-const donutSliceExample =
-`<DonutChart mr={1}>
+const donutSliceExample = `<DonutChart mr={1}>
   <DonutSlice value={1} state="pending" />
   <DonutSlice value={1} state="success" />
   <DonutSlice value={1} state="error" />
@@ -43,8 +41,7 @@ const donutSliceExample =
   <DonutSlice value={1} state="queued" />
 </DonutChart>`
 
-const customColorsExample =
-`<DonutChart>
+const customColorsExample = `<DonutChart>
   <DonutSlice value={1} fill={theme.colors.purple[0]} />
   <DonutSlice value={1} fill={theme.colors.purple[1]} />
   <DonutSlice value={1} fill={theme.colors.purple[2]} />
diff --git a/examples/component-examples/Dropdown.js b/examples/component-examples/Dropdown.js
index dad2ff9a812..95e62a074a0 100644
--- a/examples/component-examples/Dropdown.js
+++ b/examples/component-examples/Dropdown.js
@@ -3,8 +3,7 @@ import {LiveEditor} from '@compositor/kit'
 import {Block, Dropdown} from '../../src'
 import ExampleHeading from '../doc-components/ExampleHeading'
 
-const dropdownPrimary =
-`<Dropdown scheme={'primary'}>
+const dropdownPrimary = `<Dropdown scheme={'primary'}>
   <ul>
     <li>Item 1</li>
     <li>Item 2</li>
@@ -12,8 +11,7 @@ const dropdownPrimary =
   </ul>
 </Dropdown>`
 
-const dropdown =
-`<Dropdown>
+const dropdown = `<Dropdown>
   <ul>
     <li>Item 1</li>
     <li>Item 2</li>
@@ -21,8 +19,7 @@ const dropdown =
   </ul>
 </Dropdown>`
 
-const dropdownTitle =
-`<Dropdown title="Options">
+const dropdownTitle = `<Dropdown title="Options">
   <ul>
     <li>Item 1</li>
     <li>Item 2</li>
@@ -30,7 +27,6 @@ const dropdownTitle =
   </ul>
 </Dropdown>`
 
-
 const DropdownExample = {
   name: 'Dropdown',
   element: (
@@ -45,7 +41,7 @@ const DropdownExample = {
       </Block>
       <Block my={4}>
         <ExampleHeading>Dropdown with title</ExampleHeading>
-        <LiveEditor code={dropdownTitle} scope={{Dropdown}}/>
+        <LiveEditor code={dropdownTitle} scope={{Dropdown}} />
       </Block>
     </div>
   )
diff --git a/examples/component-examples/Flash.js b/examples/component-examples/Flash.js
index 086440f2755..3fa1c8ffdb7 100644
--- a/examples/component-examples/Flash.js
+++ b/examples/component-examples/Flash.js
@@ -7,19 +7,19 @@ const FlashExample = {
   element: (
     <div>
       <Block mb={3}>
-        <LiveEditor code={`<Flash> Flash </Flash>`} scope={{Flash}}/>
+        <LiveEditor code={`<Flash> Flash </Flash>`} scope={{Flash}} />
       </Block>
       <Block mb={3}>
-        <LiveEditor code={`<Flash scheme="yellow"> Flash yellow </Flash>`} scope={{Flash}}/>
+        <LiveEditor code={`<Flash scheme="yellow"> Flash yellow </Flash>`} scope={{Flash}} />
       </Block>
       <Block mb={3}>
-        <LiveEditor code={`<Flash scheme="red"> Flash red </Flash>`} scope={{Flash}}/>
+        <LiveEditor code={`<Flash scheme="red"> Flash red </Flash>`} scope={{Flash}} />
       </Block>
       <Block mb={3}>
-        <LiveEditor code={`<Flash scheme="green"> Flash green </Flash>`} scope={{Flash}}/>
+        <LiveEditor code={`<Flash scheme="green"> Flash green </Flash>`} scope={{Flash}} />
       </Block>
       <Block mb={3}>
-        <LiveEditor code={`<Flash full> Flash full </Flash>`} scope={{Flash}}/>
+        <LiveEditor code={`<Flash full> Flash full </Flash>`} scope={{Flash}} />
       </Block>
     </div>
   )
diff --git a/examples/component-examples/Flex.js b/examples/component-examples/Flex.js
index e1da2ad9b42..6ec257d4a0d 100644
--- a/examples/component-examples/Flex.js
+++ b/examples/component-examples/Flex.js
@@ -11,8 +11,7 @@ const propObj = {
   alignContent: ['start', 'end', 'center', 'between', 'around', 'stretch']
 }
 
-const example1 =
-`<FlexContainer wrap="nowrap" width={300} height={300} border>
+const example1 = `<FlexContainer wrap="nowrap" width={300} height={300} border>
   <FlexItem flexAuto>
     <Block p={3} bg="blue">
       Item 1
@@ -30,8 +29,7 @@ const example1 =
   </FlexItem>
 </FlexContainer>`
 
-const example2 =
-`<FlexContainer wrap="nowrap" width={300} height={300} border>
+const example2 = `<FlexContainer wrap="nowrap" width={300} height={300} border>
   <FlexItem alignSelf="center">
     <Block p={3} bg="blue">
       Item 1
@@ -49,8 +47,7 @@ const example2 =
   </FlexItem>
 </FlexContainer>`
 
-const example3 =
-`<FlexContainer wrap="nowrap" width={300} height={300} border>
+const example3 = `<FlexContainer wrap="nowrap" width={300} height={300} border>
   <FlexItem tag="p">
     <Block p={3} bg="blue">
       Item 1
@@ -110,7 +107,7 @@ const FlexExample = {
         ))}
       </PropsForm>
       <ExampleHeading mt={3}>FlexContainer + FlexItems set to flexAuto</ExampleHeading>
-      <LiveEditor code={example1} scope={{FlexContainer, FlexItem, Block}}/>
+      <LiveEditor code={example1} scope={{FlexContainer, FlexItem, Block}} />
       <ExampleHeading mt={2}>FlexContainer + FlexItems with first item set to alignSelf='center'</ExampleHeading>
       <LiveEditor code={example2} scope={{FlexContainer, FlexItem, Block}} />
       <ExampleHeading mt={2}>FlexContainer + FlexItems using tag prop set to "p"</ExampleHeading>
diff --git a/examples/component-examples/Heading.js b/examples/component-examples/Heading.js
index f9c0f67539d..b39bac3d4e4 100644
--- a/examples/component-examples/Heading.js
+++ b/examples/component-examples/Heading.js
@@ -8,7 +8,11 @@ const HeadingExample = {
     <div>
       <Heading mb={2}>Default Heading</Heading>
       {[0, 1, 2, 3, 4, 5, /* 6, 7, */ '00-light', '0-light', '1-light', '2-light', '3-light'].map(fontSize => (
-        <LiveEditor code={`<Heading key={fontSize} fontSize={fontSize} mb={2}>With fontSize={fontSize}</Heading>`} scope={{Heading, fontSize}}/>
+        <LiveEditor
+          key={fontSize}
+          code={`<Heading fontSize={"${fontSize}"} mb={2}>With fontSize={"${fontSize}"}</Heading>`}
+          scope={{Heading, fontSize}}
+        />
       ))}
     </div>
   )
diff --git a/examples/component-examples/Label.js b/examples/component-examples/Label.js
index b19e5d7a82b..d88092e081c 100644
--- a/examples/component-examples/Label.js
+++ b/examples/component-examples/Label.js
@@ -8,14 +8,14 @@ const LabelExample = {
   element: (
     <div>
       <Block mb={3}>
-        <LiveEditor code={`<Label>Default label</Label>`} scope={{Label}}/>
-        <LiveEditor code={`<Label scheme="gray-darker">Darker gray label</Label>`} scope={{Label}}/>
-        <LiveEditor code={`<Label scheme="orange">Orange label</Label>`} scope={{Label}}/>
-        <LiveEditor code={`<Label scheme="green">Green label</Label>`} scope={{Label}}/>
+        <LiveEditor code={`<Label>Default label</Label>`} scope={{Label}} />
+        <LiveEditor code={`<Label scheme="gray-darker">Darker gray label</Label>`} scope={{Label}} />
+        <LiveEditor code={`<Label scheme="orange">Orange label</Label>`} scope={{Label}} />
+        <LiveEditor code={`<Label scheme="green">Green label</Label>`} scope={{Label}} />
       </Block>
       <Block mb={3}>
-        <LiveEditor code={`<Label outline>Default outline label</Label>`} scope={{Label}}/>
-        <LiveEditor code={`<Label outline scheme="green">Green outline label</Label>`} scope={{Label}}/>
+        <LiveEditor code={`<Label outline>Default outline label</Label>`} scope={{Label}} />
+        <LiveEditor code={`<Label outline scheme="green">Green outline label</Label>`} scope={{Label}} />
       </Block>
     </div>
   )
diff --git a/examples/component-examples/Link.js b/examples/component-examples/Link.js
index 2ae2e3e645f..d5e2b7ed9d4 100644
--- a/examples/component-examples/Link.js
+++ b/examples/component-examples/Link.js
@@ -7,16 +7,16 @@ const LinkExample = {
   element: (
     <div>
       <Block mb={1}>
-        <LiveEditor code={`<Link href="https://github.com">Link</Link>`} scope={{Link}}/>
+        <LiveEditor code={`<Link href="https://github.com">Link</Link>`} scope={{Link}} />
       </Block>
       <Block mb={1}>
-        <LiveEditor code={`<Link muted href="https://github.com">Link muted</Link>`} scope={{Link}}/>
+        <LiveEditor code={`<Link muted href="https://github.com">Link muted</Link>`} scope={{Link}} />
       </Block>
       <Block mb={1}>
-        <LiveEditor code={`<Link scheme="gray" href="https://github.com">Link gray</Link>`} scope={{Link}}/>
+        <LiveEditor code={`<Link scheme="gray" href="https://github.com">Link gray</Link>`} scope={{Link}} />
       </Block>
       <Block mb={1}>
-        <LiveEditor code={`<Link scheme="gray-dark" href="https://github.com">Link gray-dark</Link>`} scope={{Link}}/>
+        <LiveEditor code={`<Link scheme="gray-dark" href="https://github.com">Link gray-dark</Link>`} scope={{Link}} />
       </Block>
     </div>
   )
diff --git a/examples/component-examples/MergeStatus.js b/examples/component-examples/MergeStatus.js
index b648163d2c7..c2a7255a7f7 100644
--- a/examples/component-examples/MergeStatus.js
+++ b/examples/component-examples/MergeStatus.js
@@ -7,16 +7,16 @@ const MergeStatusExample = {
   element: (
     <div>
       <Block mb={2}>
-        <LiveEditor code={`<MergeStatus state="pending" />`} scope={{MergeStatus}}/>
+        <LiveEditor code={`<MergeStatus state="pending" />`} scope={{MergeStatus}} />
       </Block>
       <Block mb={2}>
-        <LiveEditor code={`<MergeStatus state="invalid" />`} scope={{MergeStatus}}/>
+        <LiveEditor code={`<MergeStatus state="invalid" />`} scope={{MergeStatus}} />
       </Block>
       <Block mb={2}>
-        <LiveEditor code={`<MergeStatus state="merged" />`} scope={{MergeStatus}}/>
+        <LiveEditor code={`<MergeStatus state="merged" />`} scope={{MergeStatus}} />
       </Block>
       <Block mb={2}>
-        <LiveEditor code={`<MergeStatus state="ready" />`} scope={{MergeStatus}}/>
+        <LiveEditor code={`<MergeStatus state="ready" />`} scope={{MergeStatus}} />
       </Block>
     </div>
   )
diff --git a/examples/component-examples/StateLabel.js b/examples/component-examples/StateLabel.js
index 36af393844f..95d20bf13a7 100644
--- a/examples/component-examples/StateLabel.js
+++ b/examples/component-examples/StateLabel.js
@@ -4,8 +4,7 @@ import {LiveEditor} from '@compositor/kit'
 import {Block, StateLabel} from '../../src'
 import ExampleHeading from '../doc-components/ExampleHeading'
 
-const example1 =
-`<Block mb={2}>
+const example1 = `<Block mb={2}>
   <StateLabel state="open">Open</StateLabel>
 </Block>
 <Block mb={2}>
@@ -15,8 +14,7 @@ const example1 =
   <StateLabel state="merged">Merged</StateLabel>
 </Block>`
 
-const example2 =
-`<Block mb={2}>
+const example2 = `<Block mb={2}>
   <StateLabel>Unknown</StateLabel>
 </Block>
 <Block mb={2}>
@@ -33,8 +31,7 @@ const example2 =
 </Block>
 `
 
-const example3 =
-`<Block mb={2}>
+const example3 = `<Block mb={2}>
   <StateLabel scheme="invalid">Invalid</StateLabel>
 </Block>
 <Block mb={2}>
@@ -47,8 +44,7 @@ const example3 =
   <StateLabel scheme="purple">Purple</StateLabel>
 </Block>`
 
-const example4 =
-`<Block mb={2}>
+const example4 = `<Block mb={2}>
   <span className="mr-2">
     <StateLabel small>Unknown</StateLabel>
   </span>
@@ -74,8 +70,7 @@ const example4 =
   </span>
 </Block>`
 
-const example5 =
-`<Block mb={2}>
+const example5 = `<Block mb={2}>
   <span className="mr-2">
     <StateLabel small scheme="invalid">
       Invalid
diff --git a/examples/component-examples/Text.js b/examples/component-examples/Text.js
index 4683dfdeb21..5b04c697fa3 100644
--- a/examples/component-examples/Text.js
+++ b/examples/component-examples/Text.js
@@ -6,12 +6,12 @@ const TextExample = {
   name: 'Text',
   element: (
     <div>
-      <LiveEditor code={`<Text tag="div">Text</Text>`} scope={{Text}}/>
-      <LiveEditor code={`<Text tag="div" fontWeight="bold">Text bold</Text>`} scope={{Text}}/>
-      <LiveEditor code={`<Text tag="div" color="green">Text green</Text>`} scope={{Text}}/>
-      <LiveEditor code={`<Text tag="div" lineHeight="condensed">Text lineHeight 'condensed'</Text>`} scope={{Text}}/>
-      <LiveEditor code={`<Text tag="div" fontSize={4}>Text fontSize 4</Text>`} scope={{Text}}/>
-      <LiveEditor code={`<Text tag="div" p={4}>Text padding 4</Text>`} scope={{Text}}/>
+      <LiveEditor code={`<Text tag="div">Text</Text>`} scope={{Text}} />
+      <LiveEditor code={`<Text tag="div" fontWeight="bold">Text bold</Text>`} scope={{Text}} />
+      <LiveEditor code={`<Text tag="div" color="green">Text green</Text>`} scope={{Text}} />
+      <LiveEditor code={`<Text tag="div" lineHeight="condensed">Text lineHeight 'condensed'</Text>`} scope={{Text}} />
+      <LiveEditor code={`<Text tag="div" fontSize={4}>Text fontSize 4</Text>`} scope={{Text}} />
+      <LiveEditor code={`<Text tag="div" p={4}>Text padding 4</Text>`} scope={{Text}} />
     </div>
   )
 }
diff --git a/examples/component-examples/TextInput.js b/examples/component-examples/TextInput.js
index f3aac46b211..854b3ef2859 100644
--- a/examples/component-examples/TextInput.js
+++ b/examples/component-examples/TextInput.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import {LiveEditor} from '@compositor/kit'
-import {TextInput, Block} from '../../src'
+import {TextInput} from '../../src'
 import ExampleHeading from '../doc-components/ExampleHeading'
 
 const TextInputExample = {
@@ -8,12 +8,12 @@ const TextInputExample = {
   element: (
     <div>
       <ExampleHeading>Text Input</ExampleHeading>
-      <LiveEditor code={`<TextInput name="zipcode" />`} scope={{TextInput}}/>
+      <LiveEditor code={`<TextInput name="zipcode" />`} scope={{TextInput}} />
       <ExampleHeading>Text Input Sizes</ExampleHeading>
-      <LiveEditor code={`<TextInput name="zipcode" size="small" placeholder="Small input" />`} scope={{TextInput}}/>
-      <LiveEditor code={`<TextInput name="zipcode" size="large" placeholder="Large input" />`} scope={{TextInput}}/>
+      <LiveEditor code={`<TextInput name="zipcode" size="small" placeholder="Small input" />`} scope={{TextInput}} />
+      <LiveEditor code={`<TextInput name="zipcode" size="large" placeholder="Large input" />`} scope={{TextInput}} />
       <ExampleHeading>Text Input - Block</ExampleHeading>
-      <LiveEditor code={`<TextInput block placeholder="Full width block input" />`} scope={{TextInput}}/>
+      <LiveEditor code={`<TextInput block placeholder="Full width block input" />`} scope={{TextInput}} />
     </div>
   )
 }
diff --git a/examples/component-examples/Tooltip.js b/examples/component-examples/Tooltip.js
index 0cae9618c9a..761b9a2cbd3 100644
--- a/examples/component-examples/Tooltip.js
+++ b/examples/component-examples/Tooltip.js
@@ -3,21 +3,19 @@ import {LiveEditor} from '@compositor/kit'
 import {Box, Block, Tooltip} from '../../src'
 import ExampleHeading from '../doc-components/ExampleHeading'
 
-const basicExample =
-`<Box p={3}>
+const basicExample = `<Box p={3}>
   <Tooltip text="Hello, Tooltip!">Text with a tooltip</Tooltip>
 </Box>`
 
-const directionExample = (dir) =>
-`<Box p={3} my={2} key={dir}>
-  <Tooltip text="Hello, Tooltip!" direction={dir}>
-    Tooltip direction={dir}
+const directionExample = dir =>
+  `<Box p={3} my={2} key="${dir}">
+  <Tooltip text="Hello, Tooltip!" direction="${dir}">
+    Tooltip direction="${dir}"
   </Tooltip>
 </Box>
 `
 
-const wrapExample =
-`<Box p={3} my={2}>
+const wrapExample = `<Box p={3} my={2}>
   <Tooltip
     text="Hello, Tooltip! This tooltip has a sentence that will wrap to a newline."
     wrap
@@ -28,15 +26,14 @@ const wrapExample =
   </Tooltip>
 </Box>`
 
-const alignmentExample = (align) =>
-`<Box p={3} my={2} key={align}>
-  <Tooltip text="Hello, Tooltip!" direction="ne" align={align}>
-    Tooltip align={align}
+const alignmentExample = align =>
+  `<Box p={3} my={2} key="${align}">
+  <Tooltip text="Hello, Tooltip!" direction="ne" align="${align}">
+    Tooltip align="${align}"
   </Tooltip>
 </Box>`
 
-const noDelayExample =
-`<Box p={3} my={2}>
+const noDelayExample = `<Box p={3} my={2}>
   <Tooltip noDelay text="Hello, Tooltip!">
     Text with a tooltip
   </Tooltip>
@@ -47,15 +44,15 @@ const TooltipExample = {
   element: (
     <div>
       <ExampleHeading mt={3}>Basic Tooltip</ExampleHeading>
-      <LiveEditor code={basicExample} scope={{Tooltip, Box}}/>
+      <LiveEditor code={basicExample} scope={{Tooltip, Box}} />
       <Block p={2} my={2}>
         <ExampleHeading mt={3}>Directions</ExampleHeading>
         {Tooltip.directions.map(dir => (
-          <LiveEditor code={directionExample(dir)} scope={{Tooltip, Box, dir}} />
+          <LiveEditor key={dir} code={directionExample(dir)} scope={{Tooltip, Box, dir}} />
         ))}
         <ExampleHeading mt={3}>Alignment</ExampleHeading>
         {Tooltip.alignments.map(align => (
-          <LiveEditor code={alignmentExample(align)} scope={{Box, Tooltip, align}} />
+          <LiveEditor key={align} code={alignmentExample(align)} scope={{Box, Tooltip, align}} />
         ))}
         <ExampleHeading mt={3}>Word wrap</ExampleHeading>
         <LiveEditor code={wrapExample} scope={{Tooltip, Box}} />
diff --git a/examples/component-examples/UnderlineNav.js b/examples/component-examples/UnderlineNav.js
index e87fdfdd9ad..8ea3cc9c85e 100644
--- a/examples/component-examples/UnderlineNav.js
+++ b/examples/component-examples/UnderlineNav.js
@@ -5,8 +5,7 @@ import {NavLink} from 'react-router-dom'
 import ExampleHeading from '../doc-components/ExampleHeading'
 import {Block, Text, UnderlineNav, UnderlineNavLink} from '../../src'
 
-const underlineNavLinkExample =
-`<UnderlineNav>
+const underlineNavLinkExample = `<UnderlineNav>
   <UnderlineNavLink href="#foo" selected>
     Selected
   </UnderlineNavLink>
@@ -14,8 +13,7 @@ const underlineNavLinkExample =
   <UnderlineNavLink href="#baz">Baz</UnderlineNavLink>
 </UnderlineNav>`
 
-const linkTagExample =
-`<UnderlineNav>
+const linkTagExample = `<UnderlineNav>
   <a href="#foo">Foo</a>
   <a href="#bar" selected>
     Selected
@@ -23,8 +21,7 @@ const linkTagExample =
   <a href="#baz">Baz</a>
 </UnderlineNav>`
 
-const navLinkExample =
-`<UnderlineNav>
+const navLinkExample = `<UnderlineNav>
   <NavLink to="#foo">Foo</NavLink>
   <NavLink to="#bar">Two</NavLink>
   <NavLink to="/">Selected</NavLink>