tidy up docs

src/components/global-styles/global-styles.md

@@ -1,8 +1,14 @@
 Appends the required global css to the head of your application. Contains css reset, basic semantic styles for text, inputs and buttons, and fallback responsive media styles to support SSR responsive layouts.
 
-```jsx
-<>
-  <GlobalStyles />
-  <p>NOTE: component does not render anything</p>
-</>
+```jsx static
+import React from "react"
+
+import { GlobalStyles } from 'gfw-components';
+
+export const App = () => (
+  <>
+    <GlobalStyles />
+    <Main />
+  </>
+);
 ```

src/components/responsive/desktop/desktop.md

@@ -1,7 +1,7 @@
 A convenience component for showing content on desktop.
 
-```js
-import { MediaContextProvider } from 'gfw-components';
+```jsx static
+import { MediaContextProvider, Desktop } from 'gfw-components';
 
 <MediaContextProvider>
   <Desktop>

src/components/responsive/media/media.md

@@ -1,7 +1,7 @@
 Component for accessing the `Media` API from fresnel to decide when to render content.
 
-```js
-import { MediaContextProvider } from 'gfw-components';
+```jsx static
+import { MediaContextProvider, Media } from 'gfw-components';
 
 <MediaContextProvider>
   <Media at="small">

src/components/responsive/mobile/mobile.md

@@ -1,7 +1,7 @@
 A convenience component for showing content on mobile.
 
-```js
-import { MediaContextProvider } from 'gfw-components';
+```jsx static
+import { MediaContextProvider, Mobile } from 'gfw-components';
 
 <MediaContextProvider>
   <Mobile>

src/docs/i18n.md

@@ -0,0 +1,2 @@
+The `<Header />` comes with a default language dropdown component with built in support for Transifex or your choice of translation method. To use the default language selector make sure you add the [Transifex Live](https://docs.transifex.com/live/installing-the-javascript-snippet) snippets to the head of your site. If you are using the static script you must add the Transifex script to translate your site.
+<br />

src/docs/introduction.md

@@ -1,3 +1,3 @@
-A [React](https://reactjs.org/) component library for the [Global Forest Watch](https://github.com/Vizzuality/gfw) project built with [Emotion](https://emotion.sh/docs/introduction) CSS in JS styled components. All features have support for Server Side Rendering (SSR), the latest two versions of evergreen browsers and IE>=11. All designs for these components are based on the [Global Forest Watch UI kit](https://invis.io/82QPKXD964H).
+A [React](https://reactjs.org/) component library for the [Global Forest Watch](https://github.com/Vizzuality/gfw) project built with [Emotion](https://emotion.sh/docs/introduction) CSS-in-JS styled components. All features have support for Server Side Rendering (SSR), the latest two versions of evergreen browsers and IE>=11. All designs for these components are based on the [Global Forest Watch UI kit](https://invis.io/82QPKXD964H). The library requires installing some external dependancies for fonts and optional featueres so be sure to read the install instructions in full.
 <br />
 <br />

src/docs/module.md

@@ -0,0 +1,55 @@
+```bash
+npm install gfw-components
+```
+
+or with yarn
+
+```bash
+yarn add gfw-components
+```
+
+import and add the global styles component to the root of your app
+
+```jsx static
+import React from "react"
+
+import { GlobalStyles } from 'gfw-components';
+
+export const App = () => (
+  <>
+    <GlobalStyles />
+    <Main />
+  </>
+);
+```
+
+add the font to your html document
+```html
+<link href="https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500;1,600&display=swap" rel="stylesheet">
+```
+
+then import components and add them to your layout
+
+```jsx static
+import React from "react"
+
+import { Header, Footer } from 'gfw-components';
+
+export const MyPage = () => (
+  <div className="l-page">
+    <Header />
+    <div className="content">
+      <h1>My page</h1>
+    </div>
+    <Footer />
+  </div>
+);
+```
+<br />
+
+### Requirements
+
+If you are using `gfw-components` as a npm module there are some external requirments:
+- `react >= 16.8`
+- `react-dom >= 16.8`
+<br />

src/docs/static.md

@@ -0,0 +1,20 @@
+
+You can install the core GFW components (`<GlobalStyles />`, `<Header />`, `<Footer />`, `<ContactUsModal />`) as a static script.
+
+Add the following tags and font to the head of your app.
+
+```html
+<script type="text/javascript" src="https://gfw-assets.s3.amazonaws.com/static/gfw-assets.latest.js" preconnect></script>
+<link href="https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500;1,600&display=swap" rel="stylesheet">
+```
+
+And then place inside the html docment tags with the following ids:
+
+```html
+<!-- place where you want the header -->
+<div id="headerGfw"></div>
+<!-- place where you want the footer -->
+<div id="footerGfw"></div>
+<!-- place at the bottom of your html document -->
+<div id="contactGfw"></div>
+```

styleguide.config.js

@@ -38,16 +38,20 @@ module.exports = {
   },
   sections: [
     {
-      name: 'Introduction',
+      name: 'Setup',
       content: 'src/docs/introduction.md',
       sections: [
         {
-          name: 'Install',
-          content: 'src/docs/install.md',
+          name: 'Module',
+          content: 'src/docs/module.md',
         },
         {
-          name: 'Translations',
-          content: 'src/docs/translations.md',
+          name: 'Static',
+          content: 'src/docs/static.md',
+        },
+        {
+          name: 'i18n',
+          content: 'src/docs/i18n.md',
         },
       ],
     },