docs(website): use carbon ads

website/gatsby-config.js

@@ -14,7 +14,8 @@ module.exports = {
           { title: 'Playground', url: '/playground/' },
           { title: 'Usage', url: '/docs/getting-started/' },
         ],
-        codeFundProperty: 269,
+        carbonAdUrl:
+          '//cdn.carbonads.com/carbon.js?serve=CE7I5K3N&placement=react-svgrcom',
         googleAnalytics: 'UA-154496255-2',
         algoliaDocSearch: {
           apiKey: '0c7343afd83c189413499c62c1df6853',

website/package.json

@@ -1,25 +1,25 @@
 {
   "private": true,
   "dependencies": {
-    "@smooth-ui/core-sc": "^11.1.4",
-    "@xstyled/styled-components": "^1.15.0",
+    "@smooth-ui/core-sc": "^11.1.5",
+    "@xstyled/styled-components": "^1.17.1",
     "brace": "^0.11.1",
-    "final-form": "^4.18.6",
-    "gatsby": "^2.18.17",
-    "history": "^4.10.1",
+    "final-form": "^4.20.1",
+    "gatsby": "^2.23.21",
+    "history": "^5.0.0",
     "isomorphic-fetch": "^2.2.1",
-    "polished": "^3.4.2",
-    "prismjs": "^1.17.1",
+    "polished": "^3.6.5",
+    "prismjs": "^1.20.0",
     "prop-types": "^15.7.2",
-    "react": "^16.12.0",
-    "react-ace": "^8.0.0",
-    "react-dom": "^16.12.0",
-    "react-final-form": "^6.3.3",
-    "react-helmet": "^5.2.1",
-    "react-icons": "^3.8.0",
+    "react": "^16.13.1",
+    "react-ace": "^9.1.1",
+    "react-dom": "^16.13.1",
+    "react-final-form": "^6.5.0",
+    "react-helmet": "^6.1.0",
+    "react-icons": "^3.10.0",
     "reakit": "^1.0.0-beta.14",
-    "smooth-doc": "^3.3.0",
-    "styled-components": "^4.4.1"
+    "smooth-doc": "^4.0.1",
+    "styled-components": "^5.1.1"
   },
   "scripts": {
     "build": "gatsby build && cp _redirects public/",

website/src/components/playground/Playground.js

@@ -12,6 +12,7 @@ import {
   Dialog as ReakitDialog,
   DialogBackdrop as ReakitDialogBackdrop,
 } from 'reakit/Dialog'
+import { CarbonAd } from 'smooth-doc/components'
 import { lighten } from 'polished'
 import { Button } from '@smooth-ui/core-sc'
 import { Settings } from './Settings'
@@ -20,7 +21,6 @@ import defaultSvg from './defaultSVG'
 import { DropArea } from './DropArea'
 import { Loading } from './Loading'
 import { settings, getInitialState, stateToSettings } from './config/settings'
-import { CodeFund } from './CodeFund'
 import { useQuery } from './Query'
 
 const GlobalStyle = createGlobalStyle`
@@ -346,7 +346,7 @@ export function Playground() {
           </React.Suspense>
           <CopyFeedback {...dialog} />
           <FloatingAd>
-            <CodeFund />
+            <CarbonAd />
           </FloatingAd>
         </PlaygroundContainer>
       </ClientOnly>

website/src/components/playground/SettingsGroup.js

@@ -1,6 +1,10 @@
 import * as React from 'react'
 import styled, { up, css, Box } from '@xstyled/styled-components'
-import { useHiddenState, Hidden, HiddenDisclosure } from 'reakit/Hidden'
+import {
+  useDisclosureState,
+  DisclosureContent,
+  Disclosure,
+} from 'reakit/Disclosure'
 import { ChevronLeft } from 'components/playground/icons/ChevronLeft'
 
 const Container = styled.div`
@@ -58,22 +62,22 @@ const Content = styled.div`
 `
 
 export function SettingsGroup({ title, children }) {
-  const hidden = useHiddenState({ visible: true })
+  const disclosure = useDisclosureState({ visible: true })
   return (
     <Container>
-      <HiddenDisclosure {...hidden}>
-        {(hiddenDisclosureProps) => (
-          <Button row {...hiddenDisclosureProps}>
+      <Disclosure {...disclosure}>
+        {(DisclosureProps) => (
+          <Button row {...DisclosureProps}>
             <Box col>{title}</Box>
             <Box col="auto">
               <Marker />
             </Box>
           </Button>
         )}
-      </HiddenDisclosure>
-      <Hidden as={Content} {...hidden}>
+      </Disclosure>
+      <DisclosureContent as={Content} {...disclosure}>
         {children}
-      </Hidden>
+      </DisclosureContent>
     </Container>
   )
 }