Merge pull request #3 from vtex-components/feature/as

Allow Button to use reakit's composition

Author: matheusps

README.md

@@ -20,7 +20,7 @@ yarn add reakit theme-ui
 
 ```tsx
 import React from 'react'
-import Button from '@vtex-component/button'
+import Button from '@vtex-components/button'
 
 function Example() {
   return <Button>Button Label</Button>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vtex-components/button",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "VTEX button component",
   "author": "vtex",
   "license": "MIT",

src/Button.stories.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import { ThemeProvider } from 'theme-ui'
 import { withA11y } from '@storybook/addon-a11y'
 import { withKnobs, text, color, boolean } from '@storybook/addon-knobs'
+import { Checkbox, useCheckboxState } from 'reakit'
 
 import Button from '.'
 
@@ -45,6 +46,26 @@ export function TheSXProp() {
   )
 }
 
+export function TheAsProp() {
+  const checkbox = useCheckboxState()
+
+  return (
+    <ThemeProvider
+      theme={{
+        colors: {
+          background: '#FFFFFF',
+          primary: '#2F323A',
+          secondary: '#4F5D75',
+        },
+      }}
+    >
+      <Checkbox {...checkbox} as={Button}>
+        {checkbox.state ? '😄 Happy' : '😞 Sad'}
+      </Checkbox>
+    </ThemeProvider>
+  )
+}
+
 export function Theming() {
   const theme = {
     colors: {

src/index.tsx

@@ -7,8 +7,8 @@ import {
 
 type Props = A11yProps & ThemeAwareProps
 
-function Button(props: Props, ref: Ref<HTMLButtonElement>) {
-  return <A11yButton {...props} ref={ref} as={ThemeAwareButton} />
+function Button({ as, ...props }: Props, ref: Ref<HTMLButtonElement>) {
+  return <A11yButton {...props} ref={ref} as={as ?? ThemeAwareButton} />
 }
 
 export { A11yProps, ThemeAwareProps }