From 588b938246bcf1a9534b2fac0a304beec4e68e59 Mon Sep 17 00:00:00 2001 From: Brent Jackson Date: Sun, 20 Nov 2016 14:51:39 -0500 Subject: [PATCH] Add UI page frame --- .gitignore | 1 + README.md | 1 + demo/App.js | 2 + demo/Container.js | 5 ++- demo/Cta.js | 30 +++++++-------- demo/Examples.js | 21 +++++----- demo/Features.js | 74 ++++++++++++++++++------------------ demo/Footer.js | 3 +- demo/Header.js | 2 +- demo/Link.js | 5 +-- demo/Nav.js | 3 +- demo/UI.js | 40 ++++++++++++++++++- demo/UiComponents.js | 20 ++++++++++ demo/UiHeader.js | 26 +++++++++++++ demo/UiNav.js | 23 +++++++++++ demo/Usage.js | 24 ++++++------ demo/entry.js | 2 +- demo/ui-components.js | 58 ++++++++++++++++++++++++++++ packages/axs-ui/src/index.js | 23 ++++++----- src/index.js | 4 ++ 20 files changed, 269 insertions(+), 98 deletions(-) create mode 100644 demo/UiComponents.js create mode 100644 demo/UiHeader.js create mode 100644 demo/UiNav.js create mode 100644 demo/ui-components.js diff --git a/.gitignore b/.gitignore index e1d5df4..32507cc 100644 --- a/.gitignore +++ b/.gitignore @@ -2,4 +2,5 @@ dist demo/bundle.js demo/index.html +demo/ui/index.html diff --git a/README.md b/README.md index 0d50eb5..324cfc7 100644 --- a/README.md +++ b/README.md @@ -321,6 +321,7 @@ Axs also offers several shorthand styling props for faster development. - [ ] axs-ui library - [ ] Flexbox props - [ ] Element reset style objects +- [ ] Replace open color with palx - [ ] Plugin architecture for style props ## Related diff --git a/demo/App.js b/demo/App.js index e32f77d..8aa292e 100644 --- a/demo/App.js +++ b/demo/App.js @@ -17,6 +17,8 @@ class App extends React.Component { } componentDidMount () { + const { pathname } = history.location + this.setState({ path: pathname }) history.listen(({ pathname }) => { this.setState({ path: pathname }) }) diff --git a/demo/Container.js b/demo/Container.js index bb7cce5..798009a 100644 --- a/demo/Container.js +++ b/demo/Container.js @@ -3,7 +3,10 @@ import React from 'react' import { Box } from '../src' const Container = props => ( - + ) const cx = { diff --git a/demo/Cta.js b/demo/Cta.js index fb085d3..eac5f9c 100644 --- a/demo/Cta.js +++ b/demo/Cta.js @@ -5,22 +5,20 @@ import Container from './Container' import Dit from './Dit' const Cta = () => ( - - - - - Read the docs and get started - - - - + + + + Read the docs and get started + + + ) export default Cta diff --git a/demo/Examples.js b/demo/Examples.js index f57bc85..e87c3c4 100644 --- a/demo/Examples.js +++ b/demo/Examples.js @@ -3,22 +3,19 @@ import React from 'react' import { Box, Text } from '../src' import { Flex, Heading } from 'axs-ui' import Container from './Container' -import Pre from './Pre' import ExamplePre from './ExamplePre' import examples from './example-source' const Examples = () => ( - - - - {examples.map((eg, i) => ( - - - - - ))} - - + + + {examples.map((eg, i) => ( + + + + + ))} + ) export default Examples diff --git a/demo/Features.js b/demo/Features.js index 0f8add2..2100ede 100644 --- a/demo/Features.js +++ b/demo/Features.js @@ -6,44 +6,42 @@ import Container from './Container' import Dit from './Dit' const Features = () => ( - - - - - - - - Axs is an abstraction of the most common responsive typographic and layout styling concerns in the form of two UI component primitives. - - - - - - - Axs is intended as a way to quickly prototype new UI, handle one-off styles, - and serve as a foundation for creating your own custom UI component libraries. - - - - - - - Use the Box component as a starting point for any visual containers or grid systems in your app. - Use the Text component for headings, labels, messages, or any other UI typography. - - - - - - - Each Axs component handles CSS-in-JS with the css prop, - with support for media queries and pseudoclasses, - to allow for any fine-tuned styling needs. - - - - - + + + + + + + Axs is an abstraction of the most common responsive typographic and layout styling concerns in the form of two UI component primitives. + + + + + + + Axs is intended as a way to quickly prototype new UI, handle one-off styles, + and serve as a foundation for creating your own custom UI component libraries. + + + + + + + Use the Box component as a starting point for any visual containers or grid systems in your app. + Use the Text component for headings, labels, messages, or any other UI typography. + + + + + + + Each Axs component handles CSS-in-JS with the css prop, + with support for media queries and pseudoclasses, + to allow for any fine-tuned styling needs. + + + + ) const cx = { diff --git a/demo/Footer.js b/demo/Footer.js index 9fa8691..3dbe2f6 100644 --- a/demo/Footer.js +++ b/demo/Footer.js @@ -7,8 +7,7 @@ import Container from './Container' import Logo from './Logo' const Footer = () => ( - + ( - + diff --git a/demo/Link.js b/demo/Link.js index 68b1822..ef94c77 100644 --- a/demo/Link.js +++ b/demo/Link.js @@ -15,13 +15,12 @@ const Link = ({ to, ...props }) => { size6 bold grape + display='inline-block' + py2 {...props} is='a' onClick={e => to ? onClick(e, to) : null} css={{ - display: 'inline-block', - paddingTop: 16, - paddingBottom: 16, textDecoration: 'none', ':hover': { color: colors.grape9 diff --git a/demo/Nav.js b/demo/Nav.js index b4297b4..87e7ac7 100644 --- a/demo/Nav.js +++ b/demo/Nav.js @@ -43,7 +43,8 @@ const Nav = () => ( const cx = { root: { - flexWrap: 'wrap' + flexWrap: 'wrap', + alignItems: 'center' }, space: { flex: '1 1 auto' diff --git a/demo/UI.js b/demo/UI.js index b35c174..a269ca5 100644 --- a/demo/UI.js +++ b/demo/UI.js @@ -1,8 +1,46 @@ import React from 'react' +import { Box, config } from 'axs-ui' + +import Container from './Container' +import UiHeader from './UiHeader' +import UiNav from './UiNav' +import UiComponents from './UiComponents' const UI = () => { - return
UI
+ return ( + + + + + + + + ) +} + +const { breakpoints } = config.get() + +const cx = { + root: { + }, + nav: { + [breakpoints[1]]: { + position: 'fixed', + top: 100, + left: 0, + bottom: 0, + overflow: 'auto', + width: 192, + paddingLeft: 32, + paddingRight: 32, + backgroundColor: '#fff' + } + }, + main: { + } } export default UI diff --git a/demo/UiComponents.js b/demo/UiComponents.js new file mode 100644 index 0000000..225b353 --- /dev/null +++ b/demo/UiComponents.js @@ -0,0 +1,20 @@ + +import React from 'react' +import { Box, Heading } from 'axs-ui' + +import components from './ui-components' +import ExamplePre from './ExamplePre' + +const UiComponents = () => ( + + {components.map((comp, i) => ( + + + + + ))} + +) + +export default UiComponents + diff --git a/demo/UiHeader.js b/demo/UiHeader.js new file mode 100644 index 0000000..2fa406b --- /dev/null +++ b/demo/UiHeader.js @@ -0,0 +1,26 @@ + +import React from 'react' +import { + Box, + Heading, + Text +} from 'axs-ui' +import Pre from './Pre' + +const UiHeader = () => ( + + + Axs UI + + + UI Component Primitives + + 
npm i axs-ui
+ + In addition to the core Box and Text components, + the optional axs-ui package includes several pre-styled UI component primitives. + + +) + +export default UiHeader diff --git a/demo/UiNav.js b/demo/UiNav.js new file mode 100644 index 0000000..5a360ba --- /dev/null +++ b/demo/UiNav.js @@ -0,0 +1,23 @@ + +import React from 'react' +import { Box } from 'axs' +import components from './ui-components' +import Link from './Link' + +const UiNav = (props) => ( + + {components.map((comp, i) => ( + + {comp.name} + + ))} + +) + +export default UiNav + diff --git a/demo/Usage.js b/demo/Usage.js index 3d84be3..57eec36 100644 --- a/demo/Usage.js +++ b/demo/Usage.js @@ -15,19 +15,17 @@ const example = ( ) const Usage = () => ( - - - - - - 
-        
-        
-          {example}
-        
-      
-    
-  
+  
+    
+    
+      
+        
+      
+      
+        {example}
+      
+    
+  
 )
 
 export default Usage
diff --git a/demo/entry.js b/demo/entry.js
index e52c4ee..2a5acfd 100644
--- a/demo/entry.js
+++ b/demo/entry.js
@@ -41,7 +41,7 @@ module.exports = (locals) => {
   }
   const { renderToString, renderToStaticMarkup } = require('react-dom/server')
 
-  const app = renderToStaticMarkup()
+  const app = renderToString()
   const css = cxs.css
   cxs.reset()
 
diff --git a/demo/ui-components.js b/demo/ui-components.js
new file mode 100644
index 0000000..1586120
--- /dev/null
+++ b/demo/ui-components.js
@@ -0,0 +1,58 @@
+
+import React from 'react'
+import {
+  Box,
+  Text,
+  Heading,
+  Flex,
+  Block,
+  InlineBlock,
+  Inline,
+} from 'axs-ui'
+
+const components = [
+  {
+    name: 'Heading',
+    example: (
+      
+        Hello
+      
+    )
+  },
+  {
+    name: 'Flex',
+    example: (
+      
+        Box
+        Box
+      
+    )
+  },
+  {
+    name: 'Block',
+    example: (
+      
+        Display Block
+      
+    )
+  },
+  {
+    name: 'InlineBlock',
+    example: (
+      
+        InlineBlock
+      
+    )
+  },
+  {
+    name: 'Inline',
+    example: (
+      
+        Inline
+      
+    )
+  },
+]
+
+export default components
+
diff --git a/packages/axs-ui/src/index.js b/packages/axs-ui/src/index.js
index f9e7c44..e7b495f 100644
--- a/packages/axs-ui/src/index.js
+++ b/packages/axs-ui/src/index.js
@@ -2,33 +2,38 @@
 import {
   Box,
   Text,
+  config,
   cxs
 } from 'axs'
 
-export { Box } from 'axs'
-export { Text } from 'axs'
-export { cxs } from 'axs'
+export {
+  Box,
+  Text,
+  config,
+  cxs
+} from 'axs'
 
 import Heading from './Heading'
+import Flex from './Flex'
 import Block from './Block'
-import Inline from './Inline'
 import InlineBlock from './InlineBlock'
-import Flex from './Flex'
+import Inline from './Inline'
 
 export { default as Heading } from './Heading'
+export { default as Flex } from './Flex'
 export { default as Block } from './Block'
-export { default as Inline } from './Inline'
 export { default as InlineBlock } from './InlineBlock'
-export { default as Flex } from './Flex'
+export { default as Inline } from './Inline'
 
 export default {
   Box,
   Text,
+  config,
   cxs,
   Heading,
+  Flex,
   Block,
-  Inline,
   InlineBlock,
-  Flex,
+  Inline,
 }
 
diff --git a/src/index.js b/src/index.js
index c006423..38ef9f8 100644
--- a/src/index.js
+++ b/src/index.js
@@ -4,6 +4,8 @@ import withAxs from './withAxs'
 import config from './config'
 import Box from './Box'
 import Text from './Text'
+
+// Replace with config class properties
 import {
   breakpoints,
   typeScale,
@@ -16,6 +18,8 @@ export { default as withAxs } from './withAxs'
 export { default as config } from './config'
 export { default as Box } from './Box'
 export { default as Text } from './Text'
+
+// Replace with config class properties
 export {
   breakpoints,
   typeScale,