Props documentation

pages/_app.js

@@ -34,7 +34,7 @@ export default class MyApp extends App {
           <Header />
           <FlexContainer>
             <SideNav />
-            <Box maxWidth={1012} my={6} mx={'auto'} px={6} className="markdown-body">
+            <Box maxWidth={1012} width={'100%'} my={6} mx={'auto'} px={6} className="markdown-body">
               <Component {...page} />
             </Box>
           </FlexContainer>

pages/components/docs/Avatar.md

@@ -1,10 +1,26 @@
 
 # Avatar
 
+Avatars are images that users can set as their profile picture. On GitHub, they're always going to be rounded squares. They can be custom photos, uploaded by users, or generated as Identicons as a placeholder.
+
+## Default example
+
 ```.jsx
-<Avatar src="https://avatars.githubusercontent.com/primer?v=3&s=128" size={128} username="primer" />
+<Avatar src="https://avatars.githubusercontent.com/primer?v=3&s=128" size={128} />
 ```
 
+## System props
+
+Avatar components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
+
+## Component props
+
+| Prop name | Type | Description
+| :- | :- | :- |
+| alt | String | Passed through to alt on img tag
+| isChild | Boolean | adds the `avatar-child` class if present
+| size | Number | default: 20, adds the `avatar-small` class if less than 24
+| src | String | The source url of the avatar image
 
 export const meta = {
   displayName: 'Avatar'

pages/components/docs/BorderBox.md

@@ -1,12 +1,17 @@
 # BorderBox
 
+## Default example
+
 ```.jsx
 <BorderBox>This is a BorderBox</BorderBox>
-<BorderBox p={2}>This is a BorderBox with padding.</BorderBox>
-<BorderBox boxShadow="small" m={4} p={2}>This is a BorderBox with shadow.</BorderBox>
-<BorderBox boxShadow="medium" m={4} p={2}>This is a BorderBox with a medium shadow.</BorderBox>
-<BorderBox boxShadow="large" m={4} p={2}>This is a BorderBox with a large shadow.</BorderBox>
-<BorderBox boxShadow="extra-large" m={4} p={2}>This is a BorderBox with an extra-large shadow.</BorderBox>
-<BorderBox borderColor="green.5" p={2}>This is a BorderBox with a green border.</BorderBox>
 ```
+
+## System props
+
+BorderBox components get `COMMON` and `LAYOUT` system props. Read our [System Props](/system-props) doc page for a full list of available props.
+
+## Component props
+
+BorderBox does not get any additional props other than the system props mentioned above.
+
 export const meta = { displayName: 'BorderBox'}

pages/components/docs/Box.md

@@ -0,0 +1,19 @@
+# Box
+
+## Default example
+
+```.jsx
+<Box>This is a Box</Box>
+```
+
+## System props
+
+Box components get `COMMON` and `LAYOUT` system props. Read our [System Props](/system-props) doc page for a full list of available props.
+
+## Component props
+
+| Prop name | Type | Description |
+| :- | :- | :- |
+| is | String | sets the HTML tag for the component |
+
+export const meta = {displayName: 'Box'}

pages/components/docs/BranchName.md

@@ -1,19 +1,20 @@
-
 # BranchName
 
+## Default example
+
 ```.jsx
 <BranchName>a_new_feature_branch</BranchName>
+```
 
-<ExampleHeading mt={3}>BranchName with Octicon</ExampleHeading>
-<BranchName>
-  <Octicon icon={GitBranch} />
-  a_new_feature_branch
-</BranchName>
+## System props
 
-<ExampleHeading mt={3}>Linked BranchName</ExampleHeading>
-<BranchName is="a" href="/">
-  a_new_feature_branch
-</BranchName>
-```
+BranchName components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
+
+## Component props
+
+| Prop name | Type | Description |
+| :- | :- | :- |
+| is | String | sets the HTML tag for the component |
+| href | String | a URL to link the component to |
 
 export const meta = {displayName: 'BranchName'}

pages/components/docs/Button.md

@@ -0,0 +1,28 @@
+# Buttons
+
+## Default examples
+
+```.jsx
+<Button>Button</Button>
+<ButtonDanger>Button Danger</ButtonDanger>
+<ButtonLink>Button Link</ButtonLink>
+<ButtonOutline>Button Outline</ButtonOutline>
+<ButtonPrimary>Button Primary</ButtonPrimary>
+```
+
+## System props
+
+Button components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
+
+## Component props
+
+| Prop name | Type | Description |
+| :- | :- | :- |
+| is | String | sets the HTML tag for the component, defaults to `button` |
+| block | Boolean | adds `display: block` to the component |
+| disabled | Boolean | sets the `disabled` attribute on the Button |
+| grouped | Boolean | allows you to use Button in a line of Buttons without duplicate borders |
+| onClick | Function | function to be called when Button is clicked |
+| size | String | use `sm` for a small Button, or `large` for a large Button
+
+export const meta = {displayName: 'Button'}

pages/components/docs/CircleBadge.md

@@ -1,22 +1,25 @@
-
 # CircleBadge
 
+## Default example
+
 ```.jsx
-<Heading fontSize={3}>Small, medium & large</Heading>
-<CircleBadge bg="blue.5" size="small"><img src="https://avatars0.githubusercontent.com/t/1929972?s=280&v=4"/></CircleBadge>
-<CircleBadge bg="blue.5" size="medium"><img src="https://avatars0.githubusercontent.com/t/1929972?s=280&v=4"/></CircleBadge>
-<CircleBadge bg="blue.5" size="large"><img src="https://avatars0.githubusercontent.com/t/1929972?s=280&v=4"/></CircleBadge>
+<CircleBadge>
+  <Octicon icon={Zap} />
+</CircleBadge>
+```
 
-<Heading fontSize={3}>With custom width & height</Heading>
-<CircleBadge bg="blue.5" size={40}><img src="https://avatars0.githubusercontent.com/t/1929972?s=280&v=4"/></CircleBadge>
+## System props
 
-<Heading fontSize={3}>{`With <img> as a child & bg prop`}</Heading>
-<CircleBadge bg="blue.5" size="small"><img src="https://avatars0.githubusercontent.com/t/1929972?s=280&v=4"/></CircleBadge>
+CircleBadge components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
+
+## Component props
+
+| Prop name | Type | Description |
+| :- | :- | :- |
+| is | String | sets the HTML tag for the component, defaults to `button` |
+| alt | String | alt tag |
+| size | String or Number | Use `small`, `medium`, or `large` for default sizes, or provide a custom size |
+| src | String | URL for image used in badge if `is` is set to `img` |
 
-<Heading fontSize={3}>With Octicon as child</Heading>
-<CircleBadge size="medium">
-  <Octicon icon={Zap}/>
-</CircleBadge>
-```
 
 export const meta = {displayName: 'CircleBadge'}

pages/components/docs/CircleOcticon.md

@@ -1,11 +1,22 @@
 
 # CircleOcticon
 
+## Default example
+
 ```.jsx
-<FlexContainer>
-  <CircleOcticon icon={Check} size={32} bg="green.5" color="white" mr={2} />
-  <CircleOcticon icon={Zap} size={48} bg="blue.5" color="white" mr={2} />
-  <CircleOcticon icon={X} size={64} bg="red.5" color="white" mr={2} />
-</FlexContainer>
+  <CircleOcticon icon={Check} size={32} bg="green.5" color="white"/>
 ```
+
+## System props
+
+CircleOcticon components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
+
+## Component props
+
+| Prop name | Type | Description |
+| :- | :- | :- |
+| icon | Octicon | Octicon component used in the component |
+| size | Number | used to set the width and height of the component |
+
+
 export const meta = {displayName: 'CircleOcticon'}

pages/components/docs/CounterLabel.md

@@ -1,10 +1,21 @@
 
 # CounterLabel
 
+## Default example
 ```.jsx
 <CounterLabel>12</CounterLabel>
 <CounterLabel scheme={'gray'}>13</CounterLabel>
 <CounterLabel scheme={'gray-light'}>13</CounterLabel>
 ```
 
+## System props
+
+CounterLabel components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
+
+## Component props
+
+| Prop name | Type | Description |
+| :- | :- | :- |
+| scheme | String | Pass in 'gray' for a gray background and white text, or 'gray-light' for a lighter gray background and dark text. Omitting the scheme prop renders the default counter scheme |
+
 export const meta = {displayName: 'CounterLabel'}

pages/components/docs/Details.md

@@ -26,4 +26,16 @@
 <ExampleHeading>With render prop</ExampleHeading>
 <Details render={() => 'hi'} />
 ```
+
+## System props
+
+Details components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
+
+## Component props
+
+| Prop name | Type | Description |
+| :- | :- | :- |
+| open | Boolean | Sets the open/closed state of the Details component |
+| render | Function | Optional render function as a prop, to allow you to handle toggling and open/closed state within a container component
+
 export const meta = {displayName: 'Details'}