feat: deprecate "component" in favor of "as"

Closes #33

Author: gregberge

docs/advanced/CustomComponent.mdx

@@ -12,14 +12,14 @@ Sometimes you may want to use a component but the resulting HTML tag is not the
 
 You can do it using two approaches.
 
-## Use "component" property
+## Use "as" property
 
-Every components accepts a `component` property, it defines the base component used in each component.
+Every components accepts a `as` property, it defines the base component used in each component.
 
 An example of an `Alert` that uses `span` as a component.
 
 <Playground>
-  <Alert component="span" variant="primary">
+  <Alert as="span" variant="primary">
     A span alert
   </Alert>
 </Playground>

docs/components/Typography.mdx

@@ -58,10 +58,10 @@ HTML component is automatically determined from variant. You can customize it us
   }}
 </Playground>
 
-### Using `component` property
+### Using `as` property
 
 <Playground>
-  <Typography variant="h4" component="div">
+  <Typography variant="h4" as="div">
     div displayed as h4
   </Typography>
 </Playground>

src/styled-engine/emotion.js

@@ -70,7 +70,7 @@ export const patchStyledAPI = (StyledComponent, BaseComponent) => {
   )
   StyledComponent.withComponent = component => {
     const NewStyledComponent = originalWithComponent(props => (
-      <BaseComponent component={component} {...props} />
+      <BaseComponent as={component} {...props} />
     ))
 
     patchStyledAPI(NewStyledComponent, BaseComponent)

src/styled-engine/styled-components.js

@@ -30,9 +30,7 @@ export const patchStyledAPI = (StyledComponent, BaseComponent) => {
     StyledComponent,
   )
   StyledComponent.withComponent = component => {
-    const CustomComponent = props => (
-      <BaseComponent component={component} {...props} />
-    )
+    const CustomComponent = props => <BaseComponent as={component} {...props} />
     const NewStyledComponent = originalWithComponent(CustomComponent)
     patchStyledAPI(NewStyledComponent, BaseComponent)
     return NewStyledComponent

src/utils/createComponent.js

@@ -34,12 +34,22 @@ function createComponent(getConfig) {
       render() {
         const {
           className,
-          component: Component = defaultComponent,
+          as,
+          component,
           theme,
           baseRef,
           ...props
         } = this.props
 
+        const Component = as || component || defaultComponent
+
+        if (component && process.env.NODE_ENV !== 'production') {
+          // eslint-disable-next-line no-console
+          console.warn(
+            'Smooth UI: "component" prop is deprecated and will be removed in v6, please use "as" instead.',
+          )
+        }
+
         const renderProps = {
           ref: baseRef,
           Component,