fix notification counter page

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@aotearoan/neon",
   "description": "Neon is a design library of components for use with VueJS. It supports light and dark modes and can be extended to support multiple themes",
-  "version": "0.20.1",
+  "version": "0.20.2",
   "main": "dist/@aotearoan/neon.umd.js",
   "types": "dist/@aotearoan/components.d.ts",
   "files": [

src/app/views/presentation/notification-counter/NotificationCounter.ts

@@ -1,18 +1,31 @@
 import { Component, Vue } from 'vue-property-decorator';
-import { NeonCard, NeonCardBody, NeonCardHeader, NeonNotificationCounter } from '../../../../components';
+import { NeonNotificationCounter } from '../../../../components';
+import ComponentDocumentation from '../../../components/component-documentation/ComponentDocumentation.vue';
+import { Menu, MenuModel } from '../../../Menu';
 
 @Component({
   components: {
-    NeonCard,
-    NeonCardHeader,
-    NeonCardBody,
     NeonNotificationCounter,
+    ComponentDocumentation,
   },
 })
 export default class NotificationCounter extends Vue {
-  private example = `<div>
+  private menuModel: MenuModel | null = null;
+
+  private example = `<div class="collection">
   <span class="positioned-element">No value<neon-notification-counter /></span>
   <span class="positioned-element">With value<neon-notification-counter count="9" /></span>
   <span class="positioned-element">Large number<neon-notification-counter count="42" /></span>
 </div>`;
+
+  private examples = [
+    {
+      title: 'Notification counters',
+      template: this.example,
+    },
+  ];
+
+  public mounted() {
+    this.menuModel = Menu.getComponentConfig('NeonNotificationCounter');
+  }
 }

src/app/views/presentation/notification-counter/NotificationCounter.vue

@@ -1,18 +1,10 @@
 <template>
-  <div>
-    <neon-card>
-      <neon-card-header>
-        <h1>Notification Counter</h1>
-      </neon-card-header>
-      <neon-card-body>
-        <p>
-          Place a <span class="neon-monospaced">NeonNotificationCounter</span> inside a positioned flex element and it
-          will position the styled counter in the top right hand corner if the parent.
-        </p>
-      </neon-card-body>
-    </neon-card>
-    <example title="Examples" :template="example"></example>
-  </div>
+  <component-documentation v-if="menuModel" :examples="examples" :model="menuModel">
+    <p>
+      Place a <span class="neon-monospaced">NeonNotificationCounter</span> inside a positioned flex element and it will
+      position the styled counter in the top right hand corner if the parent.
+    </p>
+  </component-documentation>
 </template>
 
 <script lang="ts" src="./NotificationCounter.ts"></script>