Merge branch 'release/css-props' of https://github.com/chakra-ui/chakra-ui-vue into release/css-props

Author: codebender828

.all-contributorsrc

@@ -162,7 +162,8 @@
       "avatar_url": "https://avatars3.githubusercontent.com/u/15808?v=4",
       "profile": "https://github.com/freality",
       "contributions": [
-        "code"
+        "code",
+        "test"
       ]
     },
     {
@@ -173,6 +174,15 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "be-codified",
+      "name": "Žiga Vukčevič",
+      "avatar_url": "https://avatars1.githubusercontent.com/u/10107183?v=4",
+      "profile": "http://www.be-codified.com",
+      "contributions": [
+        "doc"
+      ]
     }
   ],
   "contributorsPerLine": 7,

README.md

@@ -211,8 +211,9 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
   <tr>
     <td align="center"><a href="https://github.com/Anmol270900"><img src="https://avatars2.githubusercontent.com/u/43845658?v=4" width="50px;" alt=""/><br /><sub><b>Anmol</b></sub></a><br /><a href="https://github.com/chakra-ui/chakra-ui-vue/commits?author=Anmol270900" title="Documentation">📖</a></td>
     <td align="center"><a href="https://github.com/vishnumohanrk"><img src="https://avatars3.githubusercontent.com/u/51525368?v=4" width="50px;" alt=""/><br /><sub><b>Vishnumohan R K</b></sub></a><br /><a href="https://github.com/chakra-ui/chakra-ui-vue/commits?author=vishnumohanrk" title="Documentation">📖</a></td>
-    <td align="center"><a href="https://github.com/freality"><img src="https://avatars3.githubusercontent.com/u/15808?v=4" width="50px;" alt=""/><br /><sub><b>Ken Love</b></sub></a><br /><a href="https://github.com/chakra-ui/chakra-ui-vue/commits?author=freality" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/freality"><img src="https://avatars3.githubusercontent.com/u/15808?v=4" width="50px;" alt=""/><br /><sub><b>Ken Love</b></sub></a><br /><a href="https://github.com/chakra-ui/chakra-ui-vue/commits?author=freality" title="Code">💻</a> <a href="https://github.com/chakra-ui/chakra-ui-vue/commits?author=freality" title="Tests">⚠️</a></td>
     <td align="center"><a href="http://www.linkedin.com/in/schalch"><img src="https://avatars3.githubusercontent.com/u/13435327?v=4" width="50px;" alt=""/><br /><sub><b>Guilherme Schalch</b></sub></a><br /><a href="https://github.com/chakra-ui/chakra-ui-vue/commits?author=gbschalch" title="Code">💻</a></td>
+    <td align="center"><a href="http://www.be-codified.com"><img src="https://avatars1.githubusercontent.com/u/10107183?v=4" width="50px;" alt=""/><br /><sub><b>Žiga Vukčevič</b></sub></a><br /><a href="https://github.com/chakra-ui/chakra-ui-vue/commits?author=be-codified" title="Documentation">📖</a></td>
   </tr>
 </table>
 

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

@@ -51,7 +51,12 @@ const CReset = {
     }
   },
   props: {
-    config: Function
+    config: {
+      type: Function,
+      validator (value) {
+        return typeof value === 'function'
+      }
+    }
   },
   created () {
     const { color, bg, borderColor, placeholderColor } = this.styleConfig[this.colorMode]

packages/chakra-ui-core/src/CReset/tests/CReset.test.js

@@ -0,0 +1,40 @@
+import CReset from '../'
+import { render } from '@/tests/test-utils'
+
+const renderComponent = (props) => {
+  const inlineAttrs = (props && props.inlineAttrs) || ''
+  const base = {
+    components: { CReset },
+    template: `<CReset data-testid="reset" ${inlineAttrs} />`,
+    ...props
+  }
+  return render(base)
+}
+
+describe('CReset.vue', () => {
+  it('should render correctly', () => {
+    const { asFragment } = renderComponent()
+
+    expect(asFragment()).toMatchSnapshot()
+  })
+
+  it('should inject global styles', () => {
+    renderComponent()
+
+    expect(document.head).toMatchSnapshot()
+  })
+
+  it('should accept config prop', () => {
+    const inlineAttrs = ':config="cssResetConfig"'
+    const cssResetConfig = (_, defaults) => {
+      const { light } = defaults
+      return {
+        ...defaults, light: { ...light, bg: 'pink', color: 'indigo' }
+      }
+    }
+
+    renderComponent({ inlineAttrs, methods: { cssResetConfig } })
+
+    expect(document.head).toMatchSnapshot()
+  })
+})