Adjust component configuration

README.md

@@ -30,6 +30,9 @@ class App extends React.Component {
 
 # Notes
 
+- Remove all duplicate/flattened style props?
+- theme config for all components?
+
 - [ ] propsString for permutations
 - [ ] toJsx code blocks
 - [ ] Tests
@@ -55,6 +58,7 @@ class App extends React.Component {
 - [x] Input, etc, hideLabel prop
 - [x] Button rounded prop
 - [x] Button outline prop
+- [ ] ToolbarSpace or <Space auto />
 
 - [ ] theme component styles (e.g. Button, Heading)
 

docs/components/Root.js

@@ -75,9 +75,7 @@ class Root extends React.Component {
               {components.map(component => {
                 const { Component } = component
                 return (
-                  <section key={component.name}
-                    id={component.name}
-                    className='py3'>
+                  <Section key={component.name} id={component.name}>
                     <SectionHeader
                       title={component.name}
                       href={`#${component.name}`}
@@ -92,7 +90,8 @@ class Root extends React.Component {
                       <Permutations {...component} />
                     </Panel>
                     <PropsTable props={component.props} />
-                  </section>
+                    <NavItem small href='#' children='Back to Top' />
+                  </Section>
                 )
               })}
             </main>

docs/examples.js

@@ -23,6 +23,7 @@ import {
   Panel,
   PanelFooter,
   PanelHeader,
+  Progress,
   Space,
   Text,
   Toolbar
@@ -86,6 +87,16 @@ const examples = {
       </Text>
       <PanelFooter children='The footer is a good place for less important information' />
     </Panel>
+  ),
+  Progress: (
+    <Progress value={0.25} />
+  ),
+  Toolbar: (
+    <Toolbar>
+      <NavItem children='Toolbar' />
+      <NavItem children='NavItem' />
+      <NavItem children='NavItem' />
+    </Toolbar>
   )
 }
 

package.json

@@ -7,7 +7,7 @@
   "scripts": {
     "prepublish": "mkdir -p dist && babel src --out-dir dist",
     "start": "static-react docs/components/Root.js --props docs/data.js > index.html",
-    "watch": "onchange src/**/* -- npm run start",
+    "watch": "onchange 'src/**/*' 'docs/**/*' -- npm run start",
     "test": "static-react docs/components/Root.js --props docs/data.js"
   },
   "peerDependencies": {

src/Badge.js

@@ -13,7 +13,7 @@ const Badge = ({
   ...props
 }, { rebass }) => {
   const config = { ...theme, ...rebass}
-  const badgeConfig = { ...theme.Badge, ...rebass.Badge }
+  const badgeConfig = { ...theme.Badge, ...(rebass ? rebass.Badge : {}) }
   const bg = config.colorTypes[type]
 
   return (

src/Banner.js

@@ -8,7 +8,7 @@ import theme from './theme'
 
 const Banner = ({ align, minHeight, color, backgroundColor, backgroundImage, style, ...props }, { rebass }) => {
   const config = { ...theme, ...rebass }
-  const bannerConfig = { ...theme.Banner, ...rebass.Banner }
+  const bannerConfig = { ...theme.Banner, ...(rebass ? rebass.Banner : {}) }
   const { scale, fontSizes } = config
 
   const alignment = {

src/Block.js

@@ -22,7 +22,7 @@ const Block = ({
   ...props
 }, { rebass }) => {
   const config = { ...theme, ...rebass }
-  const blockConfig = { ...theme.Block, ...rebass.Block }
+  const blockConfig = { ...theme.Block, ...(rebass ? rebass.Block : {}) }
 
   return (
     <div {...props}

src/Container.js

@@ -8,7 +8,7 @@ import theme from './theme'
 
 const Container = ({ style, ...props }, { rebass }) => {
   const config = { ...theme, ...rebass }
-  const containerConfig = { ...theme.Container, ...rebass.Container }
+  const containerConfig = { ...theme.Container, ...(rebass ? rebass.Container : {}) }
   const { maxWidth, padding } = containerConfig
 
   return (

src/Heading.js

@@ -8,6 +8,7 @@ import theme from './theme'
 
 const Heading =({ level, size, style, ...props }, { rebass }) => {
   const config = { ...theme, ...rebass }
+  const headingConfig = { ...theme.Heading, ...(rebass ? rebass.Heading : {}) }
   const Component = `h${level}`
   const fontSize = typeof size === 'number' ? theme.fontSizes[size] : theme.fontSizes[level]
 
@@ -18,6 +19,7 @@ const Heading =({ level, size, style, ...props }, { rebass }) => {
       style={{
         fontSize,
         margin: 0,
+        ...headingConfig,
         ...style
       }} />
   )

src/HeadingLink.js

@@ -1,6 +1,7 @@
 
 
 import React from 'react'
+import Heading from './Heading'
 import theme from './theme'
 
 /**
@@ -9,26 +10,23 @@ import theme from './theme'
 
 const HeadingLink =({ level, size, href, style, ...props }, { rebass }) => {
   const config = { ...theme, ...rebass }
-  const Component = `h${level}`
-  const fontSize = size ? theme.fontSizes[size] : theme.fontSizes[level]
+  const headingLinkConfig = { ...theme.HeadingLink, ...(rebass ? rebass.HeadingLink : {}) }
 
+  // className isn't passed on
   return (
-    <Component
-      {...props}
-      className='HeadingLink'
-      style={{
-        fontSize,
-        margin: 0,
-        ...style
-      }}>
+    <Heading className='HeadingLink'
+      level={level}
+      size={size}>
       <a
         {...props}
         href={href}
         style={{
           color: 'inherit',
-          textDecoration: 'none'
+          textDecoration: 'none',
+          ...headingLinkConfig,
+          ...style
         }} />
-    </Component>
+    </Heading>
   )
 }
 

src/Input.js

@@ -7,8 +7,10 @@ import theme from './theme'
  * Input element with label
  */
 
-const Input = ({ label, name, type, hideLabel, children, style, ...props }, context) => {
-  const config = { ...theme, ...context.rebass }
+const Input = ({ label, name, type, hideLabel, children, style, ...props }, { rebass }) => {
+  const config = { ...theme, ...rebass }
+  const { borderColor } = config
+
   return (
     <div className='Input' style={style}>
       <Label
@@ -29,7 +31,7 @@ const Input = ({ label, name, type, hideLabel, children, style, ...props }, cont
           padding: 8,
           borderRadius: 2,
           borderWidth: 1,
-          borderColor: config.borderColor,
+          borderColor,
           borderStyle: 'solid'
         }} />
     </div>

src/Label.js

@@ -6,8 +6,9 @@ import theme from './theme'
  * Label element for form controls
  */
 
-const Label = ({ hide, style, ...props }, context) => {
-  const config = Object.assign({}, theme, context.rebass)
+const Label = ({ hide, style, ...props }, { rebass }) => {
+  const config = { ...theme, ...rebass }
+  const labelConfig = { ...theme.Label, ...(rebass ? rebass.Label : {}) }
   const { fontSizes } = config
 
   const hideStyles = hide ? {
@@ -23,7 +24,7 @@ const Label = ({ hide, style, ...props }, context) => {
     className='Label'
     style={{
       fontSize: fontSizes[5],
-      fontWeight: 'bold',
+      ...labelConfig,
       ...hideStyles,
       ...style
     }} />

src/Menu.js

@@ -6,8 +6,9 @@ import theme from './theme'
  * Menu component for navigation links and actions
  */
 
-const Menu = ({ backgroundColor, borderColor, style, ...props }, context) => {
-  const config = Object.assign({}, theme, context.rebass)
+const Menu = ({ backgroundColor, borderColor, style, ...props }, { rebass }) => {
+  const config = { ...theme, ...rebass }
+  const menuConfig = { ...theme.Menu, ...(rebass ? rebass.Menu : {}) }
 
   return (
     <div
@@ -20,23 +21,11 @@ const Menu = ({ backgroundColor, borderColor, style, ...props }, context) => {
         borderRadius: 2,
         borderWidth: 1,
         borderStyle: 'solid',
-        borderColor: borderColor || config.borderColor,
-        backgroundColor,
+        ...menuConfig,
         ...style
       }} />
   )
 }
 
-Menu.propTypes = {
-  /** Background color */
-  backgroundColor: React.PropTypes.string,
-  /** Border color */
-  borderColor: React.PropTypes.string,
-}
-
-Menu.defaultProps = {
-  backgroundColor: 'white'
-}
-
 export default Menu
 

src/Message.js

@@ -6,15 +6,14 @@ import theme from './theme'
 
 const Message = ({
   type,
-  color,
-  backgroundColor,
   style,
   ...props
 }, { rebass }) => {
   const config = { ...theme, ...rebass}
-  const messageConfig = { ...theme.Message, ...rebass.Message }
+  const messageConfig = { ...theme.Message, ...(rebass ? rebass.Message : {}) }
 
-  const bg = config.colorTypes[type]
+  const { borderRadius } = config
+  const backgroundColor = config.colorTypes[type]
 
   return (
     <div
@@ -25,9 +24,9 @@ const Message = ({
         display: 'flex',
         alignItems: 'center',
         padding: config.scale[2],
-        color: color || messageConfig.color,
-        backgroundColor: backgroundColor || bg,
-        borderRadius: config.borderRadius,
+        backgroundColor,
+        borderRadius,
+        ...messageConfig,
         ...style
       }} />
   )
@@ -41,11 +40,7 @@ Message.propTypes = {
     'success',
     'warning',
     'error',
-  ]),
-  /** Text color */
-  color: React.PropTypes.string,
-  /** Background color - overrides the message type color */
-  backgroundColor: React.PropTypes.string,
+  ])
 }
 
 Message.defaultProps = {

src/NavItem.js

@@ -1,26 +1,36 @@
 
 import React from 'react'
+import theme from './theme'
 
 /**
  * Link for use in navigation. Inherits color
  */
 
-const NavItem = ({ Component, style, ...props }) => (
-  <Component
-    {...props}
-    className='NavItem'
-    style={{
-      fontWeight: 'bold',
-      textDecoration: 'none',
-      display: 'inline-block',
-      padding: 8,
-      color: 'inherit',
-      cursor: 'pointer',
-      ...style
-    }} />
-)
+const NavItem = ({ small, Component, style, ...props }, { rebass }) => {
+  const config = { ...theme, ...rebass }
+  const navItemConfig = { ...theme.NavItem, ...(rebass.NavItem : {}) }
+  const { fontSizes } = config
+
+  return (
+    <Component
+      {...props}
+      className='NavItem'
+      style={{
+        fontSize: small ? fontSizes[5] : fontSizes[4],
+        textDecoration: 'none',
+        display: 'inline-block',
+        padding: 8,
+        color: 'inherit',
+        cursor: 'pointer',
+        ...navItemConfig,
+        ...style
+      }} />
+  )
+}
 
 NavItem.propTypes = {
+  /** Sets a smaller font size for compact UI */
+  small: React.PropTypes.bool,
   /** Root component - useful for use with react-router's Link component */
   Component: React.PropTypes.node
 }
@@ -29,5 +39,9 @@ NavItem.defaultProps = {
   Component: 'a'
 }
 
+NavItem.contextTypes = {
+  rebass: React.PropTypes.object
+}
+
 export default NavItem
 

src/Panel.js

@@ -8,7 +8,7 @@ import theme from './theme'
 
 const Panel = ({ type, style, ...props }, { rebass }) => {
   const config = { ...theme, ...rebass }
-  const panelConfig = { ...theme.Panel, ...rebass.Panel }
+  const panelConfig = { ...theme.Panel, ...(rebass ? rebass.Panel : {}) }
   const { scale, borderRadius } = config
 
   const borderColor = config.colorTypes[type]
@@ -24,6 +24,7 @@ const Panel = ({ type, style, ...props }, { rebass }) => {
         borderStyle: 'solid',
         borderColor,
         borderRadius,
+        ...panelConfig,
         ...style
       }}
     />

src/PanelFooter.js

@@ -8,6 +8,7 @@ import theme from './theme'
 
 const PanelFooter = ({ type, style, ...props }, { rebass }) => {
   const config = { ...theme, ...rebass }
+  const panelFooterConfig = { ...theme.PanelFooter, ...(rebass ? rebass.PanelFooter : {}) }
   const borderTopColor = config.colorTypes[type]
   const { scale, borderRadius, fontSizes } = config
 
@@ -28,6 +29,7 @@ const PanelFooter = ({ type, style, ...props }, { rebass }) => {
         borderTopStyle: 'solid',
         borderTopColor,
         borderRadius: `0 0 ${borderRadius}px ${borderRadius}px`,
+        ...panelFooterConfig,
         ...style
       }} />
   )