Migrate to chakra

docs/bloglayout.mdx

@@ -3,7 +3,7 @@ name: bloglayout
 ---
 
 import { Playground } from 'docz'
-import Bloglayout from '../src/templates/blog-post-layout'
+import Bloglayout from '../src/templates/blog-post-layout.js'
 
 <Playground>
   <Bloglayout/>

docs/button.mdx

@@ -0,0 +1,24 @@
+---
+name: Button
+---
+
+import { Playground } from 'docz'
+import {Box} from '@chakra-ui/core'
+import Button from '../src/components/button.js'
+import ContactUsButton from '../src/components/contactUsButton.js'
+
+## Button
+<Playground>
+  <Button>hi</Button>
+</Playground>
+
+## Contact us Button
+<Playground>
+  <ContactUsButton />
+</Playground>
+
+### Props
+| Props  | default |
+|:-------|:------|
+| text  | Contact Us|
+

docs/config/theme.js

@@ -1,15 +1,18 @@
+import { theme } from "@chakra-ui/core"
+
 const maxContainerWidth = '70rem'
 const baseLineHeight = 1.45; //24.8px
 const desktopBaseSize = 1.125; //18px
 const mobileBaseSize = 1; //16px
 const breakpoints = [
-  '52em',
+  '48rem',
 ]
 const scale = [
-  0.75,1, 1.2, 1.375, 1.6875, 2.5
+  0.75, 1, 1.2, 1.375, 1.6875, 2.5
 ];
 
 const fontSizes = scale.map(n=> n*mobileBaseSize + 'rem')
+//desktops
 fontSizes.desktop = scale.map(n=> n*desktopBaseSize + 'rem')
 
 const fonts = {
@@ -18,6 +21,13 @@ const fonts = {
   bold: 'TiemposBold',
   italic: 'TiemposItalic'
 }
+
+theme.sizes['maxContainerWidth'] = maxContainerWidth
+
+theme.borders['3px'] = '3px solid'
+
+const radii = [0, 1, 2, 4, 8, 16];
+
 const lineHeights = [
   0.5 * baseLineHeight + 'rem',
   1 * baseLineHeight + 'rem', 
@@ -26,110 +36,24 @@ const lineHeights = [
   2.5 * baseLineHeight + 'rem',
   3 * baseLineHeight + 'rem',
 ];
-const space = [0,...lineHeights];
+
+const space = [0, ...lineHeights];
 
 const colors = {
   tint: '#F8F4F2',
-  black: ['#0F0F0F','#333333', '#666666', '#999999'],
+  black: ['#0F0F0F','#333333', '#666666', '#999999', '#E0E0E0'],
 }
 colors.primary = colors.black[1]
 colors.secondary = colors.tint
 
-const styles = {
-  body:{
-    fontFamily: 'body',
-    fontSize: [1, 'desktop.1'],
-    lineHeight: 1,
-  },
-  h1: {
-    fontFamily: 'heading',
-    fontSize: [5, 'desktop.5'],
-    lineHeight: 3,
-    marginTop: [3, 4], 
-    marginBottom: 1,
-    padding: 0,
-  },
-  h2: {
-    fontFamily: 'heading',
-    fontSize: [4, 'desktop.4'],
-    lineHeight: 2,
-    marginTop: [3, 4],
-    marginBottom: 1,
-    padding: 0,
-  },
-  h3: {
-    fontFamily: 'heading',
-    fontSize: [3, 'desktop.3'],
-    lineHeight: 1,
-    marginTop: [ 2,3 ],
-    marginBottom: 1,
-    padding: 0,
-  },
-  h4: {
-    fontFamily: 'heading',
-    fontSize: [2, 'desktop.2'],
-    lineHeight: 1,
-    marginTop: 2,
-    marginBottom: 1,
-    padding: 0,
-  },
-  h5: {
-    fontFamily: 'heading',
-    fontSize: [1, 'desktop.1'],
-    lineHeight: 1,
-    marginTop: 2,
-    marginBottom: 1,
-    padding: 0,
-  },
-  p: {
-    fontFamily: 'body',
-    fontSize: [1, 'desktop.1'],
-    lineHeight: 1,
-    maxWidth: '40rem',
-    marginBottom: [2,2]
-  },
-  b: {
-    fontFamily: 'bold',
-  },
-  strong: {
-    fontFamily: 'bold'
-  },
-  em: {
-    fontFamily: 'italic'
-  },
-  i: {
-    fontFamily: 'italic',
-  },
-  Container: {
-    maxWidth: '71.5rem',
-    padding: 0,
-    px: ['0.725rem']
-  },
-  ul: {
-    listStyle: 'disc inside none' ,
-    mb: [2,2]
-  },
-  ol: {
-    listStyle: 'decimal inside none',
-  },
-  li: {
-    mb: ['0.5rem','0.5rem'],
-    fontFamily: 'body',
-    fontSize: [1, 'desktop.1'],
-    lineHeight: 1,
-    maxWidth: '40rem',
-    marginBottom: [1,1]
-  }
-}
-
-const theme = {
+const customTheme = {
+  ...theme,
   breakpoints,
   space,
   fontSizes,
+  radii,
   lineHeights,
-  maxContainerWidth,
   fonts,
   colors,
-  styles,
 }
-export default theme;
+export default customTheme;

docs/config/wrapper.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import { ThemeProvider } from 'bricks'
+import { ThemeProvider } from '@chakra-ui/core'
 import theme from './theme'
 
 global.__PATH_PREFIX__ = ''

docs/contact-form.mdx

@@ -0,0 +1,12 @@
+---
+name: Contact-form
+---
+
+import { Playground } from 'docz'
+import ContactForm from '../src/components/contactForm.js'
+
+## Contact-form
+
+<Playground>
+  <ContactForm />
+</Playground>

docs/developmentServices.mdx

@@ -0,0 +1,12 @@
+---
+name: Development-services
+---
+
+import { Playground } from 'docz'
+import DevelopmentServices from '../src/components/developmentServices.js'
+
+## Development-services
+
+<Playground>
+  <DevelopmentServices />
+</Playground>

docs/icons.mdx

@@ -0,0 +1,18 @@
+---
+name: Icons
+---
+
+import { Playground } from 'docz'
+import ReactIcon from '../src/components/icons/React.js'
+
+## React Icon
+<Playground>
+  <ReactIcon width='200px'/>
+</Playground>
+
+### Props
+
+| Props  | Description |
+|:-------|:------|
+| width  | Sets the width of the icon |
+| Height | Sets the Height of the icon |

docs/libraries.mdx

@@ -0,0 +1,12 @@
+---
+name: Libraries
+---
+
+import { Playground } from 'docz'
+import Libraries from '../src/components/libraries.js'
+
+## Libraries
+
+<Playground>
+  <Libraries />
+</Playground>

docs/link.mdx

@@ -8,14 +8,14 @@ import {Playground} from 'docz'
 
 ## PlainLink
 <Playground>
-  <PlainLink to='/docz-pagination'>
+  <PlainLink to=''>
     Pagination
   </PlainLink>
 </Playground>
 
 ## CategoryLink
 <Playground>
-  <CategoryLink to='/docz-pagination'>
+  <CategoryLink to=''>
     Category
   </CategoryLink>
 </Playground>