feat(card): support left and right image placement (#1981)

toadkicker · tmorehouse · commit 66194a6a3c49 · 2018-10-25T23:49:42.000-03:00
feat(card): support left and right image placement
diff --git a/docs/assets/css/styles.css b/docs/assets/css/styles.css
@@ -101,3 +101,12 @@ pre.editable.live:after {
   min-height: 10rem;
   background-color: rgba(255, 0, 0, .1);
 }
+
+.card-img-left {
+   border-top-left-radius: calc(0.25rem - 1px);
+   border-bottom-left-radius: calc(0.25rem - 1px);
+ }
+.card-img-right {
+  border-top-right-radius: calc(0.25rem - 1px);
+  border-bottom-right-radius: calc(0.25rem - 1px);
+}
diff --git a/src/components/card/README.md b/src/components/card/README.md
@@ -100,6 +100,7 @@ card is changed.
 
 ```html
 <div>
+    <h4>Top and Bottom</h4>
     <b-card-group deck>
         <b-card img-src="https://placekitten.com/1000/300"
                 img-alt="Card image"
@@ -114,10 +115,38 @@ card is changed.
             <p class="card-text">
                 Some quick example text to build on the card and make up the bulk of the card's content.
             </p>
-        </b-card>
-    </b-card-group>
+        </b-card>                
+  </b-card-group>
+  <br>
+  <h4>Left and Right (or Start and End)</h4>
+      <b-card img-src="https://placekitten.com/300/300"
+              img-alt="Card image"
+              img-left
+              class="mb-3">
+          <p class="card-text">
+              Add to your css: <br>
+              <code>
+                .card-img-left { <br>
+                &nbsp;&nbsp;border-top-left-radius: calc(0.25rem - 1px); <br>
+                &nbsp;&nbsp;border-bottom-left-radius: calc(0.25rem - 1px); <br>
+                }
+              </code>
+          </p>
+      </b-card>
+      <b-card img-src="https://placekitten.com/300/300"
+              img-alt="Card image"
+              img-right>
+          <p class="card-text">
+              Add to your css: <br>
+              <code>
+                .card-img-right { <br>
+                &nbsp;&nbsp;border-top-right-radius: calc(0.25rem - 1px); <br>
+                &nbsp;&nbsp;border-bottom-right-radius: calc(0.25rem - 1px); <br>
+                }
+              </code>
+          </p>
+      </b-card>
 </div>
-
 <!-- card-img-1.vue -->
 ```
 
@@ -126,7 +155,7 @@ Place the image in the background of the card by setting the boolean prop `overl
 ```html
 <div>
   <b-card overlay
-          img-src="https://picsum.photos/900/250/?image=36"
+          img-src="https://picsum.photos/900/250/?image=3"
           img-alt="Card Image"
           text-variant="white"
           title="Image Overlay"
diff --git a/src/components/card/card-img.js b/src/components/card/card-img.js
@@ -1,4 +1,4 @@
-import { mergeData } from 'vue-functional-data-merge'
+import {mergeData} from 'vue-functional-data-merge'
 
 export const props = {
   src: {
@@ -18,6 +18,32 @@ export const props = {
     type: Boolean,
     default: false
   },
+  left: {
+    type: Boolean,
+    default: false
+  },
+  start: {
+    type: Boolean,
+    default: false
+    // alias of 'left'
+  },
+  right: {
+    type: Boolean,
+    default: false
+  },
+  end: {
+    type: Boolean,
+    default: false
+    // alias of 'right'
+  },
+  height: {
+    type: String,
+    default: null
+  },
+  width: {
+    type: String,
+    default: null
+  },
   fluid: {
     type: Boolean,
     default: false
@@ -27,20 +53,24 @@ export const props = {
 export default {
   functional: true,
   props,
-  render (h, { props, data, slots }) {
+  render (h, {props, data, slots}) {
     let staticClass = 'card-img'
     if (props.top) {
       staticClass += '-top'
+    } else if (props.right || props.end) {
+      staticClass += '-right'
     } else if (props.bottom) {
       staticClass += '-bottom'
+    } else if (props.left || props.start) {
+      staticClass += '-left'
     }
 
     return h(
       'img',
       mergeData(data, {
         staticClass,
-        class: { 'img-fluid': props.fluid },
-        attrs: { src: props.src, alt: props.alt }
+        class: {'img-fluid': props.fluid},
+        attrs: {src: props.src, alt: props.alt, height: props.height, width: props.width}
       })
     )
   }
diff --git a/src/components/card/card.js b/src/components/card/card.js
@@ -40,6 +40,7 @@ export default {
     // The order of the conditionals matter.
     // We are building the component markup in order.
     let childNodes = []
+    let staticClass = 'card'
     const $slots = slots()
     let img = props.imgSrc
       ? h(CardImg, {
@@ -50,13 +51,15 @@ export default {
         )
       })
       : null
-
-    if (img) {
-      // Above the header placement.
-      if (props.imgTop || !props.imgBottom) {
-        childNodes.push(img)
+    if (img && !props.imgBottom) {
+      childNodes.push(img)
+      if (props.imgLeft || props.imgStart) {
+        staticClass += ' flex-row'
+      } else if (props.imgRight || props.imgEnd) {
+        staticClass += ' flex-row-reverse'
       }
     }
+
     if (props.header || $slots.header) {
       childNodes.push(
         h(CardHeader, { props: pluckProps(headerProps, props) }, $slots.header)
@@ -74,15 +77,15 @@ export default {
         h(CardFooter, { props: pluckProps(footerProps, props) }, $slots.footer)
       )
     }
+
     if (img && props.imgBottom) {
-      // Below the footer placement.
       childNodes.push(img)
     }
 
     return h(
       props.tag,
       mergeData(data, {
-        staticClass: 'card',
+        staticClass: staticClass,
         class: {
           [`text-${props.align}`]: Boolean(props.align),
           [`bg-${props.bgVariant}`]: Boolean(props.bgVariant),
diff --git a/src/components/card/card.spec.js b/src/components/card/card.spec.js
@@ -85,6 +85,16 @@ describe('card', async () => {
     })
   })
 
+  it('should add flex-row to a img-left or img-right image', async () => {
+    const { app } = window
+    const node = app.$refs['img_card']
+    const childNodes = [...node.childNodes]
+    const imgEl = childNodes.find(el => el.tagName && el.tagName === 'IMG')
+
+    expect(imgEl).toBeDefined()
+    expect(imgEl.classList).toEqual(expect.objectContaining(/^flex-row/))
+  })
+
   it("should use the 'tag' for element tag", async () => {
     const { app: { $refs } } = window
     const $titleCard = $refs.card_group.querySelector('#title-tag-test')
