Merge branch 'codebender828-master'

Author: liqueflies

README.md

@@ -171,7 +171,7 @@ Remember to register `ThemeProvider` locally.
 
 Add your `ThemeProvider` component:
 
-```JSX
+```vue
   <theme-provider :theme="{
     primary: 'palevioletred'
   }">
@@ -230,6 +230,26 @@ const TomatoButton = StyledButton.extend`
 export default TomatoButton;
 ```
 
+### Polymorphic `as` prop
+If you want to keep all the styling you've applied to a component but just switch out what's being ultimately rendered (be it a different HTML tag or a different custom component), you can use the "as" prop to do this at runtime. Another powerful feature of the `as` prop is that it preserves styles if the lowest-wrapped component is a `StyledComponent`.
+
+**Example**
+In `Component.js`
+```js
+//  Renders a div element by default.
+const Component = styled('div', {})``
+```
+Using the `as` prop in another template/component would be as shown below.
+```vue
+<template>
+  <!-- Component will render a button instead of a div -->
+  <Component as="button" color="red">
+    Button
+  </Component>
+</template>
+```
+This sort of thing is very useful in use cases like a navigation bar where some of the items should be links and some just buttons, but all be styled the same way.
+
 ### withComponent
 Let's say you have a `button` and an `a` tag. You want them to share the exact same style. This is achievable with `.withComponent`.
 ```JSX

example/index.html

@@ -75,12 +75,16 @@ <h1>Basic Example</h1>
       background: ${props => props.theme.tertiary};
     `;
 
-    const W3 = styled.default(W2)`
-      &:hover {
-        background: ${props => props.theme.primary};
-      }
+    // Custom Wrapper
+    const W3 = styled.default(Wrapper, {
+      color: String,
+      bg: String
+    })`
+      color: ${props => props.color};
+      background-color: ${props => props.bg};
     `
 
+
     const StyledInput = styled.default.input`
       display: block;
       width: 100%;
@@ -106,19 +110,39 @@ <h1>Basic Example</h1>
       margin: 1.5em 0;
       background-color: ${props => props.theme.primary};
       opacity: ${props => props.visible ? 1: 0};
+
+      &:focus {
+        outline: none;
+        border: solid 3px ${props => props.theme.primary};
+      }
     `
 
     const SuperBtn = styled.default(Btn, { visible: Boolean, big: Boolean })`
       font-size: ${props => props.big ? 0.8 : 1}em;
     `
 
+    const CustomBtn = styled.default(Btn, {
+      color: String,
+      bg: String
+    })`
+      color: ${props => props.color};
+      background-color: ${props => props.bg};
+
+      &:focus {
+        outline: none;
+        border: solid 3px ${props => props.color};
+      }
+    `
+
     new Vue({
       el: '#container',
       data: {
         text1: 'Hello World, this is my first styled component!',
         text2: 'Hello World, this is my first styled component!',
         animated1: false,
-        animated2: false
+        animated2: false,
+        element: 'div',
+        setElement: 'div'
       },
       template: `
       <theme-provider :theme="{
@@ -136,18 +160,44 @@ <h1>Basic Example</h1>
           <styled-input v-model="text2" />
           <super-btn visible @click="animated2 = !animated2"> An extension of Styled Button </super-btn>
         </w-2>
+        <w-3
+          bg="#c6f7e6"
+        >
+        <custom-title :visible="true">Change Rendered Elements with "as" prop.</custom-title>
+          <h3>Enter any HTML element and see the element rendered by the styled component change 👇🏽</h3>
+          <styled-input @keydown.enter="updateElement" placeholder="Enter an HTML element! Like 'button' or 'section'" v-model="element" />
+          <custom-btn
+            visible
+            :as="setElement"
+            role="button"
+            tabindex="0"
+            color="#42a786"
+            bg="papayawhip"
+            aria-label="Btn rendered as div"
+            @keydown.space="updateElement"
+          >
+            I am the "btn" component rendered as a "{{ setElement }}" using the \`as\` prop! 🎉
+          </custom-btn>
+        </w-3>
       </theme-provider>`,
       components: {
         CustomTitle,
         Wrapper,
         W2,
+        W3,
         H2,
         Btn,
         SuperBtn,
+        CustomBtn,
         SuperCustomTitle,
         StyledInput,
         'theme-provider': styled.ThemeProvider,
       },
+      methods: {
+        updateElement() {
+          this.setElement = this.element
+        }
+      }
     });
     </script>
   </body>

package-lock.json

@@ -1,5 +1,6 @@
 import css from '../constructors/css'
 import normalizeProps from '../utils/normalizeProps'
+import isVueComponent from '../utils/isVueComponent'
 
 export default (ComponentStyle) => {
   const createStyledComponent = (target, rules, props) => {
@@ -18,6 +19,7 @@ export default (ComponentStyle) => {
         }
       },
       props: {
+        as: [String, Object],
         value: null,
         ...currentProps,
         ...prevProps
@@ -38,7 +40,8 @@ export default (ComponentStyle) => {
         }
 
         return createElement(
-          target,
+          // Check if target is StyledComponent to preserve inner component styles for composition
+          isVueComponent(target) ? target : this.$props.as || target,
           {
             class: [this.generatedClassName],
             props: this.$props,

src/models/StyledComponent.js

@@ -0,0 +1,51 @@
+import Vue from 'vue'
+import expect from 'expect'
+import { resetStyled, expectCSSMatches } from './utils'
+
+let styled
+
+describe('"as" polymorphic prop', () => {
+  beforeEach(() => {
+    styled = resetStyled()
+  })
+
+  it('should render "as" polymorphic prop element', () => {
+    const Base = styled.div`
+      color: blue;
+    `
+    const b = new Vue({
+      render: (h) => h(Base, {
+        props: {
+          as: 'button'
+        }
+      })
+    }).$mount()
+    expect(b.$el.tagName.toLowerCase()).toEqual('button')
+  })
+
+
+  it('should append base class to new components composing lower level styled components', () => {
+    const Base = styled.div`
+      color: blue;
+    `
+    const Composed = styled(Base, {
+      bg: String,
+    })`
+      background: ${props => props.bg};
+    `
+
+    const b = new Vue(Base).$mount()
+    const c = new Vue({
+      render: (h) => h(Composed, {
+        props: {
+          bg: 'yellow',
+          as: 'dialog'
+        }
+      })
+    }).$mount()
+
+    expect(c.$el.tagName.toLowerCase()).toEqual('dialog')
+    expect(c.$el._prevClass.includes(b.$el._prevClass)).toBeTruthy()
+    expectCSSMatches('.a{color: blue;} .b{background:yellow;}')
+  })
+})