feat(docs): Add custom content for sketchy preset demo

packages/docs/src/components/components.mdx

@@ -0,0 +1,210 @@
+import { Message, NavLink, Divider, Container, Box, Button, Card, Text, Image, Slider, Label, Flex, Checkbox, Select, Textarea, Radio, Input, Link, Progress, Badge, Alert } from "theme-ui"
+
+---
+
+# Example components
+
+<Divider />
+
+## Borders
+
+<Flex sx={{ flexWrap: "wrap" }}>
+  <Box p={3} m={2} color="text" bg="muted" sx={{
+    border: "2px solid black",
+    borderRadius: "sketchy0",
+    minWidth: "100px"
+  }}>
+    sketchy0
+  </Box>
+  <Box p={3} m={2} color="text" bg="muted" sx={{
+    border: "2px solid black",
+    borderRadius: "sketchy1",
+    minWidth: "100px"
+  }}>
+    sketchy1
+  </Box>
+  <Box p={3} m={2} color="text" bg="muted" sx={{
+    border: "2px solid black",
+    borderRadius: "sketchy2",
+    minWidth: "100px"
+  }}>
+    sketchy2
+  </Box>
+  <Box p={3} m={2} color="text" bg="muted" sx={{
+    border: "2px solid black",
+    borderRadius: "sketchy3",
+    minWidth: "100px"
+  }}>
+    sketchy3
+  </Box>
+  <Box p={3} m={2} color="text" bg="muted" sx={{
+    border: "2px solid black",
+    borderRadius: "sketchy4",
+    minWidth: "100px"
+  }}>
+    sketchy4
+  </Box>
+</Flex>
+
+---
+
+## Buttons
+
+<Button variant="primary" m={10}>
+  Default
+</Button>
+<Button variant="danger" m={10}>
+  Danger
+</Button>
+<Button variant="info" m={10}>
+  Info
+</Button>
+<Button variant="warning" m={10}>
+  Warning
+</Button>
+<Button variant="success" m={10}>
+  Success
+</Button>
+
+
+---
+
+## Form elements
+
+<Box
+  as='form'
+  pb={3}
+  onSubmit={e => e.preventDefault()} sx={{width: '100%', maxWidth: "500px"}}>
+  <Label htmlFor='username'>Username</Label>
+  <Input
+    name='username'
+    mb={3}
+  />
+  <Label htmlFor='password'>Password</Label>
+  <Input
+    type='password'
+    name='password'
+    mb={3}
+  />
+  <Box>
+    <Label mb={3}>
+      <Checkbox />
+      Remember me
+    </Label>
+  </Box>
+  <Label htmlFor='sound'>Sound</Label>
+  <Select name='sound' mb={3}>
+    <option>Beep</option>
+    <option>Boop</option>
+    <option>Blip</option>
+  </Select>
+  <Label htmlFor='comment'>Comment</Label>
+  <Textarea
+    name='comment'
+    rows='6'
+    mb={3}
+  />
+  <Flex mb={3}>
+    <Label>
+      <Radio name='letter' /> Alpha
+    </Label>
+    <Label>
+      <Radio name='letter' /> Bravo
+    </Label>
+    <Label>
+      <Radio name='letter' /> Charlie
+    </Label>
+  </Flex>
+  <Button>
+    Submit
+  </Button>
+</Box>
+
+---
+
+## Links
+
+<Box pb={20}>
+  <Link href='#!'>Hello</Link>
+</Box>
+
+---
+
+## Badges
+
+<Box pb={20}>
+  <Badge variant='accent'>New</Badge>
+  <Badge variant='outline' ml={2}>Cool</Badge>
+</Box>
+
+---
+
+## Alerts
+
+<Box pb={20}>
+  <Alert variant="danger" m={10}>
+    Danger
+  </Alert>
+  <Alert variant="info" m={10}>
+    Info
+  </Alert>
+  <Alert variant="warning" m={10}>
+    Warning
+  </Alert>
+  <Alert variant="success" m={10}>
+    Success
+  </Alert>
+</Box>
+
+---
+
+## Navigation
+
+<Box pb={20}>
+  <Flex as='nav'>
+    <NavLink href='#!' p={2}>
+      Home
+    </NavLink>
+    <NavLink href='#!' p={2}>
+      Blog
+    </NavLink>
+    <NavLink href='#!' p={2}>
+      About
+    </NavLink>
+  </Flex>
+</Box>
+
+---
+
+## Table
+
+<table style={{paddingBottom: 20}}>
+    <thead>
+        <tr>
+            <th colSpan="2">The table header</th>
+        </tr>
+    </thead>
+    <tbody>
+        <tr>
+            <td>The table body</td>
+            <td>with two columns</td>
+        </tr>
+    </tbody>
+</table>
+
+---
+
+## Card
+
+<Card
+  mb={5}
+  sx={{
+    maxWidth: 400,
+    padding: "30px"
+  }}>
+  <Text>
+    Cupcake ipsum dolor sit amet chocolate bar. Apple pie macaroon muffin jelly candy cake soufflé muffin croissant. Gummies jelly beans cotton candy fruitcake. Wafer lemon drops soufflé cookie. Sesame snaps fruitcake cheesecake danish toffee marzipan biscuit.
+  </Text>
+</Card>
+
+---

packages/docs/src/components/preset.js

@@ -1,7 +1,7 @@
 /** @jsx jsx */
-import { jsx, Styled, components } from 'theme-ui'
-import { ThemeContext } from '@emotion/core'
-import { MDXProvider } from '@mdx-js/react'
+import { Helmet } from 'react-helmet'
+import { jsx, Styled } from 'theme-ui'
+import { ThemeProvider } from '@theme-ui/core'
 import * as presets from '@theme-ui/presets'
 import {
   TypeScale,
@@ -10,14 +10,20 @@ import {
   ColorPalette,
   FontFamily,
 } from '@theme-ui/style-guide'
-import Lorem from './lorem.mdx'
+import Components from './components.mdx'
 
 export default ({ preset: presetName }) => {
   const preset = presets[presetName]
 
   return (
     <div>
-      <ThemeContext.Provider value={preset}>
+      <Helmet>
+        <link
+          rel="stylesheet"
+          href="https://fonts.googleapis.com/css?family=Montserrat:400,700|Poppins:400,700,900|Roboto:400,600|Architects+Daughter"
+        />
+      </Helmet>
+      <ThemeProvider theme={preset}>
         <Styled.root>
           <Styled.h2>Colors</Styled.h2>
           <ColorPalette omit={['modes', 'header']} />
@@ -34,9 +40,7 @@ export default ({ preset: presetName }) => {
           </HeadingStyle>
           <Styled.h2>Type Scale</Styled.h2>
           <TypeScale />
-          <MDXProvider components={components}>
-            <Lorem />
-          </MDXProvider>
+          <Components />
           <Styled.h2 id="json">Raw JSON</Styled.h2>
           <textarea
             value={JSON.stringify(preset, null, 2)}
@@ -52,7 +56,7 @@ export default ({ preset: presetName }) => {
             }}
           />
         </Styled.root>
-      </ThemeContext.Provider>
+      </ThemeProvider>
     </div>
   )
 }

packages/docs/src/components/presets-demo.js

@@ -1,7 +1,6 @@
 /** @jsx jsx */
-import { jsx, Styled, components } from 'theme-ui'
+import { jsx, Styled } from 'theme-ui'
 import { ThemeContext } from '@emotion/core'
-import { MDXProvider } from '@mdx-js/react'
 import { useState } from 'react'
 import { Helmet } from 'react-helmet'
 import * as presets from '@theme-ui/presets'
@@ -13,7 +12,7 @@ import {
   FontFamily,
 } from '@theme-ui/style-guide'
 import Select from './select'
-import Lorem from './lorem.mdx'
+import Components from './components.mdx'
 
 export default () => {
   const [theme, setTheme] = useState('base')
@@ -68,9 +67,7 @@ export default () => {
             </HeadingStyle>
             <Styled.h2>Type Scale</Styled.h2>
             <TypeScale />
-            <MDXProvider components={components}>
-              <Lorem />
-            </MDXProvider>
+            <Components />
             <Styled.h2 id="json">Raw JSON</Styled.h2>
             <textarea
               value={JSON.stringify(preset, null, 2)}