Add "available since" notice based on meta information

jacobmllr95 · jacobmllr95 · commit ca75259bdb6a · 2020-03-28T18:52:18.000+01:00
diff --git a/docs/components/main-docs.js b/docs/components/main-docs.js
@@ -11,6 +11,10 @@ export default {
       type: String,
       default: ''
     },
+    meta: {
+      type: Object,
+      default: null
+    },
     tag: {
       type: String,
       default: 'main'
@@ -23,6 +27,12 @@ export default {
     titleLead() {
       return this.docs.titleLead || ''
     },
+    availableSince() {
+      const { version } = this.meta || {}
+      return version
+        ? `Available in BootstrapVue since <code class="text-nowrap">${version}</code>.`
+        : ''
+    },
     body() {
       return this.docs.body || this.readme
     },
@@ -36,7 +46,15 @@ export default {
       props: { play: false },
       domProps: { innerHTML: this.titleLead }
     })
-    // CarbonAd
+    // Available since section
+    let $availableSinceSection = h()
+    if (this.availableSince) {
+      $availableSinceSection = h(Section, {
+        props: { play: false },
+        domProps: { innerHTML: this.availableSince }
+      })
+    }
+    // Carbon Ad
     const $carbonAd = h(CarbonAd, { key: `ad-${this.docPath}` })
     // Quick links
     const $quickLinks = h(QuickLinks, { key: `quick-${this.docsPath}` })
@@ -48,6 +66,7 @@ export default {
 
     return h(Main, { props: { tag: this.tag }, staticClass: 'bd-main' }, [
       $leadSection,
+      $availableSinceSection,
       $carbonAd,
       $quickLinks,
       $bodySection,
diff --git a/docs/pages/docs/components/_slug.js b/docs/pages/docs/components/_slug.js
@@ -36,8 +36,17 @@ export default {
       // Component importing information
       h(Importdoc, { props: { meta: this.meta } })
     ])
-    return h(MainDocs, { staticClass: 'bd-components', props: { readme: this.readme } }, [
-      $referenceSection
-    ])
+
+    return h(
+      MainDocs,
+      {
+        staticClass: 'bd-components',
+        props: {
+          readme: this.readme,
+          meta: this.meta
+        }
+      },
+      [$referenceSection]
+    )
   }
 }
diff --git a/docs/pages/docs/directives/_slug.js b/docs/pages/docs/directives/_slug.js
@@ -27,8 +27,17 @@ export default {
       // Directive importing information
       h(Importdoc, { props: { meta: this.meta } })
     ])
-    return h(MainDocs, { staticClass: 'bd-components', props: { readme: this.readme } }, [
-      $referenceSection
-    ])
+
+    return h(
+      MainDocs,
+      {
+        staticClass: 'bd-components',
+        props: {
+          readme: this.readme,
+          meta: this.meta
+        }
+      },
+      [$referenceSection]
+    )
   }
 }
diff --git a/docs/pages/docs/misc/_slug.js b/docs/pages/docs/misc/_slug.js
@@ -23,6 +23,12 @@ export default {
     return { meta, readme }
   },
   render(h) {
-    return h(MainDocs, { staticClass: 'bd-components', props: { readme: this.readme } })
+    return h(MainDocs, {
+      staticClass: 'bd-components',
+      props: {
+        readme: this.readme,
+        meta: this.meta
+      }
+    })
   }
 }
diff --git a/docs/pages/docs/reference/_slug.js b/docs/pages/docs/reference/_slug.js
@@ -18,6 +18,12 @@ export default {
     return { meta, readme }
   },
   render(h) {
-    return h(MainDocs, { staticClass: 'bd-components', props: { readme: this.readme } })
+    return h(MainDocs, {
+      staticClass: 'bd-components',
+      props: {
+        readme: this.readme,
+        meta: this.meta
+      }
+    })
   }
 }
diff --git a/src/components/aspect/README.md b/src/components/aspect/README.md
@@ -7,8 +7,6 @@
 
 ## Overview
 
-The `<b-aspect>` component was introduced in BootstrapVue `v2.9.0`.
-
 The default [aspect](<https://en.wikipedia.org/wiki/Aspect_ratio_(image)>) ratio is `1:1` (ratio of
 `1`), which makes the height always be at least the same as the width. The `aspect` prop can be used
 to specify an arbitrary aspect ratio (i.e. `1.5`) or a ratio as a string such as `'16:9'` or
diff --git a/src/components/calendar/README.md b/src/components/calendar/README.md
@@ -4,7 +4,7 @@
 > selection widget, which can be used to control other components, or can be used to create
 > customized date picker inputs.
 
-## Oveview
+## Overview
 
 `<b-calendar>` is WAI-ARIA accessibility compliant, optimized for keyboard control (arrow, page
 up/down, home, and end keys). Internationalization is also supported, and default's to the browser's
@@ -13,8 +13,6 @@ or page's locale, if no locale(s) are specified.
 If you need a date picker as a custom form control input, use the
 [`<b-form-datepicker>`](/docs/components/form-datepicker) component instead.
 
-`<b-calendar>` was introduced in BootstrapVue `v2.5.0`.
-
 ```html
 <template>
   <b-row>
diff --git a/src/components/form-datepicker/README.md b/src/components/form-datepicker/README.md
@@ -11,8 +11,6 @@ inputs vary in presentation, accessibility, and in some instances are not suppor
 `<b-form-datepicker>` provides a consistent and accessible interface across all browser platforms
 and devices.
 
-The `<b-form-datepicker>` component was introduced in BootstrapVue release `v2.5.0`.
-
 ```html
 <template>
   <div>
diff --git a/src/components/form-spinbutton/README.md b/src/components/form-spinbutton/README.md
@@ -6,8 +6,6 @@
 
 ## Overview
 
-`<b-form-spinbutton>` was introduced in BootstrapVue `v2.5.0`.
-
 The component `<b-form-spinbutton>` is
 [WAI-ARIA compliant](https://www.w3.org/TR/wai-aria-practices-1.2/#spinbutton), allowing for
 [keyboard control](#accessibility), and supports both horizontal (default) and vertical layout.
diff --git a/src/components/form-timepicker/README.md b/src/components/form-timepicker/README.md
@@ -11,8 +11,6 @@ vary in presentation, accessibility, and in some instances are not supported by
 `<b-form-timepicker>` provides a consistent and accessible interface across all browser platforms
 and devices.
 
-The `<b-form-timepicker>` component was introduced in BootstrapVue release `v2.6.0`.
-
 ```html
 <template>
   <div>
diff --git a/src/components/overlay/README.md b/src/components/overlay/README.md
@@ -6,8 +6,6 @@
 
 ## Overview
 
-The component `<b-overlay>` was introduced in BootstrapVue version `v2.7.0`.
-
 `<b-overlay>` can be used to obscure almost anything. [Example use cases](#use-case-examples) would
 be forms, tables, delete confirmation dialogs, or anywhere you need to signal that the application
 is busy performing a background task, to signal that a certain component is unavailable, or to
diff --git a/src/components/time/README.md b/src/components/time/README.md
@@ -13,8 +13,6 @@ page's locale, if no locale(s) are specified.
 If you need a time picker as a custom form control input, use the
 [`<b-form-timepicker>`](/docs/components/form-timepicker) component instead.
 
-The component `<b-time>` was introduced in BootstrapVue `v2.6.0`.
-
 ```html
 <template>
   <b-row>

Original file line number	Diff line number	Diff line change
`@@ -23,6 +23,12 @@ export default {`
`23`	`23`	`return { meta, readme }`
`24`	`24`	`},`
`25`	`25`	`render(h) {`
`26`		`- return h(MainDocs, { staticClass: 'bd-components', props: { readme: this.readme } })`
	`26`	`+ return h(MainDocs, {`
	`27`	`+ staticClass: 'bd-components',`
	`28`	`+ props: {`
	`29`	`+ readme: this.readme,`
	`30`	`+ meta: this.meta`
	`31`	`+ }`
	`32`	`+ })`
`27`	`33`	`}`
`28`	`34`	`}`
Original file line number	Diff line number	Diff line change
`@@ -18,6 +18,12 @@ export default {`
`18`	`18`	`return { meta, readme }`
`19`	`19`	`},`
`20`	`20`	`render(h) {`
`21`		`- return h(MainDocs, { staticClass: 'bd-components', props: { readme: this.readme } })`
	`21`	`+ return h(MainDocs, {`
	`22`	`+ staticClass: 'bd-components',`
	`23`	`+ props: {`
	`24`	`+ readme: this.readme,`
	`25`	`+ meta: this.meta`
	`26`	`+ }`
	`27`	`+ })`
`22`	`28`	`}`
`23`	`29`	`}`