Merge pull request #407 from IHIutch/feat/grid-item

feat: Adds CGridItem

Author: codebender828

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/CGrid/test/CGrid.test.js

@@ -1,10 +1,10 @@
-import CGrid from '..'
+import { CGrid, CGridItem } from '..'
 import { render } from '@/tests/test-utils'
 
 const renderComponent = (props) => {
   const inlineAttrs = (props && props.inlineAttrs) || ''
   const base = {
-    components: { CGrid },
+    components: { CGrid, CGridItem },
     template: `<CGrid ${inlineAttrs}>Grid Me</CGrid>`,
     ...props
   }
@@ -23,3 +23,25 @@ it('should change gap', () => {
 
   expect(asFragment()).toMatchSnapshot()
 })
+
+it('should offset columns', () => {
+  const inlineAttrs = 'col-start="4" col-end="6"'
+  const { asFragment } = renderComponent({
+    template: `
+      <CGrid w="600px" template-columns="repeat(5, 1fr)" gap="6">
+        <CGridItem ${inlineAttrs}>I'm in a grid item</CGridItem>
+      </CGrid>`
+  })
+  expect(asFragment()).toMatchSnapshot()
+})
+
+it('should span columns', () => {
+  const inlineAttrs = 'col-span="2"'
+  const { asFragment } = renderComponent({
+    template: `
+      <CGrid w="600px" template-columns="repeat(5, 1fr)" gap="6">
+        <CGridItem ${inlineAttrs}>I'm in a grid item</CGridItem>
+      </CGrid>`
+  })
+  expect(asFragment()).toMatchSnapshot()
+})

packages/chakra-ui-core/src/CGrid/test/__snapshots__/CGrid.test.js.snap

@@ -11,6 +11,22 @@ exports[`should change gap 1`] = `
 </DocumentFragment>
 `;
 
+exports[`should offset columns 1`] = `
+<DocumentFragment>
+  <div
+    class="css-12kxrxg"
+    data-chakra-component="CGrid"
+  >
+    <div
+      class="css-1i8ejg0"
+      data-chakra-component="CGridItem"
+    >
+      I'm in a grid item
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`should render correctly 1`] = `
 <DocumentFragment>
   <div
@@ -21,3 +37,19 @@ exports[`should render correctly 1`] = `
   </div>
 </DocumentFragment>
 `;
+
+exports[`should span columns 1`] = `
+<DocumentFragment>
+  <div
+    class="css-12kxrxg"
+    data-chakra-component="CGrid"
+  >
+    <div
+      class="css-tuh9u2"
+      data-chakra-component="CGridItem"
+    >
+      I'm in a grid item
+    </div>
+  </div>
+</DocumentFragment>
+`;

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'

website/pages/grid.mdx

@@ -1,4 +1,4 @@
-import SEO from "../components/SEO";
+import SEO from '../components/SEO'
 
 <SEO
   title="Grid"
@@ -15,10 +15,9 @@ comes with helpful style shorthand. It renders a `div` element.
 ## Import
 
 ```js
-import { CGrid } from "@chakra-ui/vue";
+import { CGrid, CGridItem } from '@chakra-ui/vue'
 ```
 
-
 ## Usage
 
 Using the `Grid` component, here are some helpful shorthand props:
@@ -51,6 +50,43 @@ time.
 </c-grid>
 ```
 
+## Spanning Columns
+
+In some layouts, you may need certain grid items to span specific amount of columns or rows instead of an even distribution. To achieve this, you need to pass the `colSpan` prop to the `CGridItem` component to span across columns and also pass the `rowSpan` component to span across rows. You also need to specify the `templateColumns` and `templateRows`.
+
+```vue live=true
+<c-grid w="600px" template-columns="repeat(5, 1fr)" gap="6">
+  <c-grid-item row-span="2" col-span="1" bg="blue.300"" />
+  <c-grid-item col-span="2" bg="red.300" />
+  <c-grid-item col-span="2" bg="red.300" />
+  <c-grid-item col-span="4" bg="blue.300" />
+</c-grid>
+```
+
+## Starting and Ending Lines
+
+Pass the `colStart` and `colEnd` prop to `CGridItem` component to make an element start or end at the `nth` grid position.
+
+```vue live=true
+<c-grid w="600px" template-columns="repeat(5, 1fr)" gap="6">
+  <c-grid-item col-span="2" h="10" bg="blue.500" />
+  <c-grid-item col-start="4" col-end="6" h="10" bg="red.500" />
+</c-grid>
+```
+
 ## Props
 
-> `CGrid` composes the `CBox` component. So it accepts all Box props along with the related CSS grid props. See [Box](/box#props) component for list of props
+> `CGrid` composes the `CBox` component. So it accepts all Box props along with the related CSS grid props. See [Box](/box#props) component for list of props
+
+### `CGridItem` Props
+
+> `CGridItem` composes `CBox` so you can pass all `CBox` props.
+
+| Name     | Type     | Description                                      |
+| -------- | -------- | ------------------------------------------------ |
+| colSpan  | `number` | The number of columns the grid item should span. |
+| colStart | `number` | The column number the grid item should start.    |
+| colEnd   | `number` | The column number the grid item should end.      |
+| rowSpan  | `number` | The number of rows the grid item should span.    |
+| rowStart | `number` | The row number the grid item should start.       |
+| rowEnd   | `number` | The row number the grid item should end.         |