feat(card): new helper sub-components (#2375)

src/components/card/card-body.js

@@ -1,9 +1,11 @@
 import { mergeData } from 'vue-functional-data-merge'
 import prefixPropName from '../../utils/prefix-prop-name'
 import copyProps from '../../utils/copyProps'
+import pluckProps from '../../utils/pluck-props'
 import { assign } from '../../utils/object'
-import stripScripts from '../../utils/strip-scripts'
 import cardMixin from '../../mixins/card-mixin'
+import BCardTitle, { props as titleProps } from './card-title'
+import BCardSubTitle, { props as subTitleProps } from './card-sub-title'
 
 export const props = assign(
   {},
@@ -13,23 +15,11 @@ export const props = assign(
     bodyClass: {
       type: [String, Object, Array],
       default: null
-    },
-    title: {
-      type: String,
-      default: null
-    },
-    titleTag: {
-      type: String,
-      default: 'h4'
-    },
-    subTitle: {
-      type: String,
-      default: null
-    },
-    subTitleTag: {
-      type: String,
-      default: 'h6'
-    },
+    }
+  },
+  titleProps,
+  subTitleProps,
+  {
     overlay: {
       type: Boolean,
       default: false
@@ -48,16 +38,13 @@ export default {
     let cardContent = children || [ h(false) ]
 
     if (props.title) {
-      cardTitle = h(props.titleTag, {
-        staticClass: 'card-title',
-        domProps: { innerHTML: stripScripts(props.title) }
-      })
+      cardTitle = h(BCardTitle, { props: pluckProps(titleProps, props) })
     }
 
     if (props.subTitle) {
-      cardSubTitle = h(props.subTitleTag, {
-        staticClass: 'card-subtitle mb-2 text-muted',
-        domProps: { innerHTML: stripScripts(props.subTitle) }
+      cardSubTitle = h(BCardSubTitle, {
+        props: pluckProps(subTitleProps, props),
+        class: [ 'mb-2' ]
       })
     }
 
@@ -69,9 +56,7 @@ export default {
           {
             'card-img-overlay': props.overlay,
             [`bg-${props.bodyBgVariant}`]: Boolean(props.bodyBgVariant),
-            [`border-${props.bodyBorderVariant}`]: Boolean(
-              props.bodyBorderVariant
-            ),
+            [`border-${props.bodyBorderVariant}`]: Boolean(props.bodyBorderVariant),
             [`text-${props.bodyTextVariant}`]: Boolean(props.bodyTextVariant)
           },
           props.bodyClass || {}

src/components/card/card-sub-title.js

@@ -0,0 +1,38 @@
+import { mergeData } from 'vue-functional-data-merge'
+import stripScripts from '../../utils/strip-scripts'
+
+export const props = {
+  subTitle: {
+    type: String,
+    default: null
+  },
+  subTitleTag: {
+    type: String,
+    default: 'h6'
+  },
+  subTitleTextVariant: {
+    type: String,
+    default: 'muted'
+  }
+}
+
+// @vue/component
+export default {
+  name: 'BCardSubTitle',
+  functional: true,
+  props,
+  render (h, { props, data, children }) {
+    const domProps = children ? {} : { innerHTML: stripScripts(props.subTitle) }
+    return h(
+      props.subTitleTag,
+      mergeData(data, {
+        staticClass: 'card-subtitle',
+        class: [
+          props.subTitleTextVariant ? `text-${props.subTitleTextVariant}` : null
+        ],
+        domProps
+      }),
+      children
+    )
+  }
+}

src/components/card/card-text.js

@@ -0,0 +1,22 @@
+import { mergeData } from 'vue-functional-data-merge'
+
+export const props = {
+  textTag: {
+    type: String,
+    default: 'p'
+  }
+}
+
+// @vue/component
+export default {
+  name: 'BCardText',
+  functional: true,
+  props,
+  render (h, { props, data, children }) {
+    return h(
+      props.textTag,
+      mergeData(data, { staticClass: 'card-text' }),
+      children
+    )
+  }
+}

src/components/card/card-text.spec.js

@@ -0,0 +1,36 @@
+import CardText from './card-text'
+import { mount } from '@vue/test-utils'
+
+describe('card-text', async () => {
+  it('has root element "p"', async () => {
+    const wrapper = mount(CardText)
+    expect(wrapper.is('p')).toBe(true)
+  })
+
+  it('has class card-text', async () => {
+    const wrapper = mount(CardText)
+    expect(wrapper.classes()).toContain('card-text')
+  })
+
+  it('has custom root element "div" when prop text-tag=div', async () => {
+    const wrapper = mount(CardText, {
+      context: {
+        props: {
+          textTag: 'div'
+        }
+      }
+    })
+    expect(wrapper.is('div')).toBe(true)
+    expect(wrapper.classes()).toContain('card-text')
+  })
+
+  it('accepts custom classes', async () => {
+    const wrapper = mount(CardText, {
+      context: {
+        class: ['foobar']
+      }
+    })
+    expect(wrapper.classes()).toContain('card-text')
+    expect(wrapper.classes()).toContain('foobar')
+  })
+})

src/components/card/card-title.js

@@ -0,0 +1,31 @@
+import { mergeData } from 'vue-functional-data-merge'
+import stripScripts from '../../utils/strip-scripts'
+
+export const props = {
+  title: {
+    type: String,
+    default: null
+  },
+  titleTag: {
+    type: String,
+    default: 'h4'
+  }
+}
+
+// @vue/component
+export default {
+  name: 'BCardTitle',
+  functional: true,
+  props,
+  render (h, { props, data, children }) {
+    const domProps = children ? {} : { innerHTML: stripScripts(props.title) }
+    return h(
+      props.titleTag,
+      mergeData(data, {
+        staticClass: 'card-title',
+        domProps
+      }),
+      children
+    )
+  }
+}

src/components/card/index.js

@@ -1,17 +1,23 @@
 import BCard from './card'
 import BCardHeader from './card-header'
 import BCardBody from './card-body'
+import BCardTitle from './card-title'
+import BCardSubTitle from './card-sub-title'
 import BCardFooter from './card-footer'
 import BCardImg from './card-img'
+import BCardText from './card-text'
 import BCardGroup from './card-group'
 import { registerComponents, vueUse } from '../../utils/plugins'
 
 const components = {
   BCard,
   BCardHeader,
   BCardBody,
+  BCardTitle,
+  BCardSubTitle,
   BCardFooter,
   BCardImg,
+  BCardText,
   BCardGroup
 }
 

src/components/card/package.json

@@ -1,25 +1,28 @@
 {
-    "name": "@bootstrap-vue/card",
-    "version": "1.0.0",
-    "meta": {
-        "title": "Card",
-        "component": "BCard",
-        "components": [
-            "BCardHeader",
-            "BCardFooter",
-            "BCardBody",
-            "BCardImg",
-            "BCardGroup"
-        ],
-        "slots": [
-            {
-                "name": "header",
-                "description": "For custom rendering of header content"
-            },
-            {
-                "name": "footer",
-                "description": "For custom rendering of footer content"
-            }
-        ]
-    }
+  "name": "@bootstrap-vue/card",
+  "version": "1.0.0",
+  "meta": {
+    "title": "Card",
+    "component": "BCard",
+    "components": [
+      "BCardHeader",
+      "BCardFooter",
+      "BCardBody",
+      "BCardTitle",
+      "BCardSubTitle",
+      "BCardImg",
+      "BCardText",
+      "BCardGroup"
+    ],
+    "slots": [
+      {
+        "name": "header",
+        "description": "For custom rendering of header content"
+      },
+      {
+        "name": "footer",
+        "description": "For custom rendering of footer content"
+      }
+    ]
+  }
 }