Start adding CGridItem

Author: IHIutch

packages/chakra-ui-core/src/CGrid/CGrid.js

@@ -10,7 +10,65 @@
  */
 
 import { createStyledAttrsMixin } from '../utils'
-import { SNA } from '../config/props/props.types'
+import { SNA, StringArray } from '../config/props/props.types'
+
+/**
+ * @description Map "span" values to accommodate breakpoint values
+ * @param {Array} value
+ * @returns {(String|Array)} String or Array of breakpoint values
+ */
+const spanFn = (value) => {
+  if (Array.isArray(value)) {
+    return value.map(v =>
+      v === 'auto' ? 'auto' : `span ${v}/span ${v}`
+    )
+  } else {
+    return value === 'auto' ? 'auto' : `span ${value}/span ${value}`
+  }
+}
+
+/**
+ * CGridItem component
+ *
+ * A primitive component useful for grid layouts.
+ *
+ * @extends CBox
+ * @see Docs https://vue.chakra-ui.com/grid
+ */
+
+const CGridItem = {
+  name: 'CGridItem',
+  mixins: [createStyledAttrsMixin('CGridItem')],
+  props: {
+    colSpan: { type: StringArray },
+    rowSpan: { type: StringArray },
+    colStart: { type: StringArray },
+    colEnd: { type: StringArray },
+    rowStart: { type: StringArray },
+    rowEnd: { type: StringArray }
+  },
+  computed: {
+    componentStyles () {
+      return {
+        gridColumn: this.colSpan ? spanFn(this.colSpan) : null,
+        gridRow: this.rowSpan ? spanFn(this.rowSpan) : null,
+        gridColumnStart: this.colStart,
+        gridColumnEnd: this.colEnd,
+        gridRowStart: this.rowStart,
+        gridRowEnd: this.rowEnd
+      }
+    }
+  },
+  render (h) {
+    return h('div',
+      {
+        class: this.className,
+        attrs: this.computedAttrs
+      },
+      this.$slots.default
+    )
+  }
+}
 
 /**
  * CGrid component
@@ -61,11 +119,18 @@ const CGrid = {
     }
   },
   render (h) {
-    return h(this.as, {
-      class: this.className,
-      attrs: this.computedAttrs
-    }, this.$slots.default)
+    return h(
+      this.as,
+      {
+        class: this.className,
+        attrs: this.computedAttrs
+      },
+      this.$slots.default
+    )
   }
 }
 
-export default CGrid
+export {
+  CGrid,
+  CGridItem
+}

packages/chakra-ui-core/src/CGrid/CGrid.stories.js

@@ -1,5 +1,5 @@
 import { storiesOf } from '@storybook/vue'
-import { CReset, CGrid, CBox } from '..'
+import { CReset, CGrid, CGridItem, CBox } from '..'
 
 storiesOf('UI | Grid', module)
   .add('Default Grid', () => ({
@@ -17,3 +17,17 @@ storiesOf('UI | Grid', module)
       </div>
     `
   }))
+
+storiesOf('UI | Grid', module)
+  .add('Grid Items', () => ({
+    components: { CReset, CGrid, CGridItem },
+    template: `
+      <div>
+        <CReset />
+        <CGrid w="600px" template-columns="repeat(5, 1fr)" gap="6">
+          <CGridItem col-span="2" h="10" bg="blue.500" />
+          <CGridItem col-start="4" col-end="6" h="10" bg="red.500" />
+        </CGrid>
+      </div>
+    `
+  }))

packages/chakra-ui-core/src/CGrid/index.js

@@ -1,2 +1 @@
-import CGrid from './CGrid'
-export default CGrid
+export * from './CGrid'

packages/chakra-ui-core/src/CSimpleGrid/CSimpleGrid.js

@@ -8,7 +8,7 @@
  * @see Source   https://github.com/chakra-ui/chakra-ui-vue/blob/master/packages/chakra-ui-core/src/CSimpleGrid/CSimpleGrid.js
  */
 
-import CGrid from '../CGrid'
+import { CGrid } from '../CGrid'
 import { SNA } from '../config/props/props.types'
 import { createStyledAttrsMixin } from '../utils'
 import { countToColumns, widthToColumns } from './utils/grid.styles'

packages/chakra-ui-core/src/index.js

@@ -55,7 +55,7 @@ export { default as CFormHelperText } from './CFormHelperText'
 export { default as CFragment } from './CFragment'
 
 // G
-export { default as CGrid } from './CGrid'
+export * from './CGrid'
 
 // H
 export { default as CHeading } from './CHeading'