Feature/gifs

packages/dataparcels-docs/src/component/ApiPage.jsx

@@ -54,6 +54,7 @@ export default ({name, api, md, after}: Props) => {
     let Description = md._desc;
     let After = md._after;
     return <PageLayout
+        modifier="marginBottom"
         content={() => <Box>
             <Box modifier="marginBottomGiga">
                 <Typography>

packages/dataparcels-docs/src/component/Example.jsx

@@ -9,6 +9,7 @@ type Props = {
 };
 
 export default ({name, md: Markdown}: Props) => <PageLayout
+    modifier="marginBottom"
     content={() => <Typography>
         <Text element="h1">{name}</Text>
         <Markdown />

packages/dataparcels-docs/src/component/PageLayout.jsx

@@ -6,10 +6,11 @@ import SiteNavigation from 'component/SiteNavigation';
 
 type Props = {
     content: () => Node,
-    nav?: () => Node
+    nav?: () => Node,
+    modifier?: string
 };
 
-export default ({content, nav}: Props) => <Wrapper modifier="marginBottom">
+export default ({content, nav, modifier}: Props) => <Wrapper modifier={modifier}>
     <Grid>
         <GridItem modifier="9 padding">
             {content()}

packages/dataparcels-docs/src/content/API.js

@@ -7,45 +7,57 @@ import SpruceClassName from 'stampy/lib/util/SpruceClassName';
 import IconParcel from 'content/parcel.gif';
 import IconParcelHoc from 'content/parcelhoc.gif';
 import IconParcelBoundary from 'content/parcelboundary.gif';
+import IconParcelBoundaryHoc from 'content/parcelboundaryhoc.gif';
 
-const Item = ({name, description, image}) => <GridItem modifier="4">
-    <Link to={`/api/${name}`}>
-        <Box modifier="padding">
-            <Image src={image} modifier="center" />
-            <Text element="div" modifier="center sizeHecto link">{name}</Text>
-        </Box>
-    </Link>
-    <Box modifier="padding">
-        <Text element="div" modifier="center">{description}</Text>
-    </Box>
-</GridItem>;
-
-export default () => <Box>
+const Item = ({name, description, image}) => <Box modifier="paddingBottom">
     <Grid>
-        <Item
-            name="Parcel"
-            description={<Box>
-                <Text element="p" modifier="marginMilli">Parcel is a data container.</Text>
-                <Text element="p">It's job is to hold your data, split it into smaller parts, and merge changes back together.</Text>
-            </Box>}
-            image={IconParcel}
-        />
-        <Item
-            name="ParcelHoc"
-            description={<Box>
-                <Text element="p" modifier="marginMilli">ParcelHoc is a React higher order component.</Text>
-                <Text element="p">It's job is to provide a parcel as a prop, and to handle how the parcel binds to React props and lifecycle events.</Text>
-            </Box>}
-            image={IconParcelHoc}
-        />
-        <Item
-            name="ParcelBoundary"
-            description={<Box>
-                <Text element="p" modifier="marginMilli">ParcelBoundary is a React component.</Text>
-                <Text element="p">It's job is to optimise rendering performance, and to optionally control the flow of parcel changes.</Text>
-            </Box>}
-            image={IconParcelBoundary}
-        />
+        <GridItem modifier="3 padding">
+            <Link to={`/api/${name}`}>
+                <Image src={image} />
+            </Link>
+        </GridItem>
+         <GridItem modifier="8 padding">
+            <Box modifier="paddingTop">
+                <Text element="div" modifier="sizeKilo link margin"><Link to={`/api/${name}`}>{name}</Link></Text>
+                <Text element="div">{description}</Text>
+            </Box>
+        </GridItem>
+        <GridItem modifier="1" />
     </Grid>
-    <Text element="p" modifier="margin">See also: <Link className="Link" to="/api/ParcelBoundaryHoc">ParcelBoundaryHoc</Link>, <Link className="Link" to="/api/ChangeRequest">ChangeRequest</Link>, <Link className="Link" to="/api/Action">Action</Link>.</Text>
+</Box>;
+
+export default () => <Box>
+    <Item
+        name="Parcel"
+        description={<Box>
+            <Text element="p" modifier="marginMilli">Parcel is a data container.</Text>
+            <Text element="p">It's job is to hold your data, split it into smaller parts, and merge changes back together.</Text>
+        </Box>}
+        image={IconParcel}
+    />
+    <Item
+        name="ParcelHoc"
+        description={<Box>
+            <Text element="p" modifier="marginMilli">ParcelHoc is a React higher order component.</Text>
+            <Text element="p">It's job is to provide a parcel as a prop, and to handle how the parcel binds to React props and lifecycle events.</Text>
+        </Box>}
+        image={IconParcelHoc}
+    />
+    <Item
+        name="ParcelBoundary"
+        description={<Box>
+            <Text element="p" modifier="marginMilli">ParcelBoundary is a React component.</Text>
+            <Text element="p">It's job is to optimise rendering performance, and to optionally control the flow of parcel changes.</Text>
+        </Box>}
+        image={IconParcelBoundary}
+    />
+    <Item
+        name="ParcelBoundaryHoc"
+        description={<Box>
+            <Text element="p" modifier="marginMilli">ParcelBoundaryHoc is a React higher order component.</Text>
+            <Text element="p">It's job is to control the flow of parcel changes. It is the higher order component version of a ParcelBoundary.</Text>
+        </Box>}
+        image={IconParcelBoundaryHoc}
+    />
+    <Text element="p" modifier="margin">See also: <Link className="Link" to="/api/ChangeRequest">ChangeRequest</Link>, <Link className="Link" to="/api/Action">Action</Link>.</Text>
 </Box>;

packages/dataparcels-docs/src/content/APIExamples.md

@@ -0,0 +1,17 @@
+import ExamplesParcelHoc from 'content/ExamplesParcelHoc.md';
+import ExamplesParcelBoundary from 'content/ExamplesParcelBoundary.md';
+import Link from 'gatsby-link';
+
+### Parcel
+
+* <Link to="/examples/editing-objects">Editing objects</Link>
+* <Link to="/examples/editing-arrays">Editing arrays</Link>
+* <Link to="/examples/managing-your-own-parcel-state">Managing your own parcel state</Link>
+
+### ParcelHoc
+
+<ExamplesParcelHoc />
+
+### ParcelBoundary
+
+<ExamplesParcelBoundary />

packages/dataparcels-docs/src/content/Examples.md

@@ -1,15 +1,5 @@
-import ExamplesParcel from 'content/ExamplesParcel.md';
-import ExamplesParcelHoc from 'content/ExamplesParcelHoc.md';
-import ExamplesParcelBoundary from 'content/ExamplesParcelBoundary.md';
+import Link from 'gatsby-link';
 
-### Parcel
-
-<ExamplesParcel />
-
-### ParcelHoc
-
-<ExamplesParcelHoc />
-
-### ParcelBoundary
-
-<ExamplesParcelBoundary />
+* <Link to="/examples/editing-objects">Editing objects</Link>
+* <Link to="/examples/editing-arrays">Editing arrays</Link>
+* <Link to="/examples/managing-your-own-parcel-state">Managing your own parcel state</Link>

packages/dataparcels-docs/src/docs/api/parcel/ParcelAfter.md

@@ -1,5 +1,5 @@
-import ExamplesParcel from 'content/ExamplesParcel.md';
+import Examples from 'content/Examples.md';
 
 ### Examples
 
-<ExamplesParcel />
+<Examples />

packages/dataparcels-docs/src/docs/api/parcelBoundaryHoc/ParcelBoundaryHoc.md

@@ -1,14 +1,17 @@
 import Link from 'component/Link';
 import Param from 'component/Param';
+import ApiPageIcon from 'component/ApiPageIcon';
 import ParcelHocExample from 'pages/examples/parcelhoc-example.md';
 import ParcelHocInitialValueFromProps from 'pages/examples/parcelhoc-initialvalue.md';
 import ParcelHocOnChange from 'pages/examples/parcelhoc-onchange.md';
-import IconParcelBoundary from 'content/parcelboundary.gif';
+import IconParcelBoundaryHoc from 'content/parcelboundaryhoc.gif';
 import {Box, Message} from 'dcme-style';
 
 # ParcelBoundaryHoc
 
-ParcelBoundaryHoc is a React higher order component. It's job is to control the flow of parcel changes. It is the higher oder component version of a <Link to="/api/ParcelBoundary">ParcelBoundary</Link>.
+<ApiPageIcon>{IconParcelBoundaryHoc}</ApiPageIcon>
+
+ParcelBoundaryHoc is a React higher order component. It's job is to control the flow of parcel changes. It is the higher order component version of a <Link to="/api/ParcelBoundary">ParcelBoundary</Link>.
 
 Each ParcelBoundaryHoc is given a name, and expects that it will be given Parcel as a prop of the same name.
 

packages/dataparcels-docs/src/pages/api/index.js

@@ -2,14 +2,19 @@
 import type {Node} from 'react';
 
 import React from 'react';
-import {Box, Text} from 'dcme-style';
+import {Box, Text, Wrapper} from 'dcme-style';
 import PageLayout from 'component/PageLayout';
 import API from 'content/API';
 import IconParcel from 'content/parcelinverted.gif';
 
-export default () => <PageLayout
-    content={() => <Box modifier="paddingTopKilo">
-        <Text id="API" element="h1" modifier="sizeGiga">API</Text>
+export default () => <Box>
+    <PageLayout
+        modifier="marginBottom"
+        content={() => <Box modifier="paddingTopKilo">
+            <Text id="API" element="h1" modifier="sizeGiga">API</Text>
+        </Box>}
+    />
+    <Wrapper>
         <API />
-    </Box>}
-/>;
+    </Wrapper>
+</Box>

packages/dataparcels-docs/src/pages/getting-started.js

@@ -6,5 +6,6 @@ import GettingStartedMarkdown from 'pages/getting-started.md';
 import PageLayout from 'component/PageLayout';
 
 export default () => <PageLayout
+    modifier="marginBottom"
     content={() => <Typography><GettingStartedMarkdown /></Typography>}
 />;

packages/dataparcels-docs/src/pages/getting-started.md

@@ -45,6 +45,10 @@ We could do something like this.
 import React from 'react';
 import {ParcelHoc} from 'react-dataparcels';
 
+// PLEASE DON'T USE THIS CODE
+// THIS CODE IS FOR DEMONSTRAION PURPOSES ONLY
+// THERE'S A BETTER WAY OF DOING IT BELOW
+
 const PersonParcelHoc = ParcelHoc({
     name: "personParcel",
     initialValue: (/* props */) => ({

packages/dataparcels-docs/src/pages/index.js

@@ -7,6 +7,7 @@ import IndexMarkdown from 'pages/index.md';
 import PageLayout from 'component/PageLayout';
 import API from 'content/API';
 import IconParcel from 'content/parcelinverted.gif';
+import APIExamples from 'content/APIExamples.md';
 
 export default () => <Box>
     <Box modifier="invertedCopy invertedBackground">
@@ -39,10 +40,17 @@ export default () => <Box>
                     <NavigationListItem><a className="Link" href={`#Getting-Started`}>Getting Started</a></NavigationListItem>
                     <NavigationListItem><a className="Link" href={`#Examples`}>Examples</a></NavigationListItem>
                     <NavigationListItem><a className="Link" href={`#API`}>API</a></NavigationListItem>
+                    <NavigationListItem><a className="Link" href={`#API-Examples`}>API Examples</a></NavigationListItem>
                 </NavigationList>}
             />
-            <Text id="API" element="h2" modifier="sizeMega">API</Text>
-            <API />
+            <Wrapper>
+                <Text id="API" element="h2" modifier="sizeMega">API</Text>
+                <API />
+                <Text id="API-Examples" element="h2" modifier="sizeMega">API Examples</Text>
+                <Typography>
+                    <APIExamples />
+                </Typography>
+            </Wrapper>
         </Wrapper>
     </Box>
 </Box>