improve component docs, alert docs

aotearoan · Aug 30, 2020 · 80f32f5 · 80f32f5
1 parent 95c8ed9
commit 80f32f5
Show file tree

Hide file tree

Showing 26 changed files with 196 additions and 181 deletions.
diff --git a/package.json b/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.26.0",
+  "version": "0.26.1",
   "main": "dist/@aotearoan/neon.umd.js",
   "types": "dist/@aotearoan/components.d.ts",
   "files": [

diff --git a/public/docs/feedback/alert/NeonAlert.json b/public/docs/feedback/alert/NeonAlert.json
@@ -1,6 +1,6 @@
 {
+  "description": "NeonAlert is a component for presenting temporary notifications to the user. Place the component once inside your app and then use the provided methods to invoke alerts.",
+  "tags": {},
   "displayName": "NeonAlert",
-  "exportName": "default",
-  "description": "",
-  "tags": {}
+  "exportName": "default"
 }
diff --git a/public/docs/layout/tabs/NeonTabs.json b/public/docs/layout/tabs/NeonTabs.json
diff --git a/public/docs/layout/tabs/tab/NeonTab.json b/public/docs/layout/tabs/tab/NeonTab.json
diff --git a/src/app/App.scss b/src/app/App.scss
@@ -12,7 +12,6 @@ $font-family-monospaced: Inconsolata, Consolas, Monaco, 'Andale Mono', 'Ubuntu M
       @import '../../themes/classic/dark';
 
       $color-api-docs-property-name: l3;
-      $background-color-component-header: rgba($background-color-card, 0.25);
 
       // application dark mode SASS
       @import 'sass/api-docs-colors';
@@ -74,7 +73,7 @@ $font-family-monospaced: Inconsolata, Consolas, Monaco, 'Andale Mono', 'Ubuntu M
       @import '../../themes/classic/light';
 
       $color-api-docs-property-name: d2;
-      $background-color-component-header: rgba($background-color-card, 0.75);
+      $background-color-component-header: darken($background-color-card, 2);
 
       // application light mode SASS
       @import 'sass/api-docs-colors';
@@ -150,6 +149,10 @@ $font-family-monospaced: Inconsolata, Consolas, Monaco, 'Andale Mono', 'Ubuntu M
 
         .github-link {
           margin-right: 6 * $base-space;
+
+          @include responsive(mobile-large) {
+            margin-right: 4 * $base-space;
+          }
         }
 
         .top-nav-actions {
@@ -160,7 +163,15 @@ $font-family-monospaced: Inconsolata, Consolas, Monaco, 'Andale Mono', 'Ubuntu M
       .logo-wrapper {
         display: flex;
         flex-direction: row;
-        align-items: flex-end;
+        align-items: center;
+
+        .neon-button {
+          margin-right: 4 * $base-space;
+
+          @include responsive(larger-than-tablet) {
+            display: none;
+          }
+        }
       }
 
       .homepage-link {

diff --git a/src/app/App.ts b/src/app/App.ts
@@ -222,13 +222,9 @@ export default class App extends Vue {
   get layouts() {
     return [
       {
-        breakpoint: NeonResponsive.LargerThanTablet,
+        breakpoint: NeonResponsive.All,
         grid: [['section-content']],
       },
-      {
-        breakpoint: NeonResponsive.Tablet,
-        grid: [['responsive-menu'], ['section-content']],
-      },
     ];
   }
 

diff --git a/src/app/App.vue b/src/app/App.vue
@@ -15,6 +15,21 @@
       <template #top-nav v-if="!simplePage">
         <neon-top-nav>
           <span class="logo-wrapper">
+            <neon-button
+              icon="menu"
+              color="primary"
+              button-style="outline"
+              :size="isMobile ? 's' : 'm'"
+              @click="menuOpen = true"
+            />
+            <neon-drawer :open="menuOpen" @close="menuOpen = false">
+              <div class="neon-side-nav__sticky">
+                <neon-input type="text" v-model="indexFilter" placeholder="Filter" />
+              </div>
+              <div class="neon-side-nav__scrolling">
+                <neon-tree-menu :model="filteredModel" :expand-all="expandAll" @click="onInlineMenuClick" />
+              </div>
+            </neon-drawer>
             <neon-link href="/" class="homepage-link">
               <neon-logo></neon-logo>
             </neon-link>
@@ -62,17 +77,6 @@
           </template>
         </neon-side-nav>
         <neon-grid id="content" :layouts="layouts" class="content">
-          <neon-grid-area id="responsive-menu" v-if="!simplePage">
-            <neon-button icon="menu" label="Menu" color="primary" @click="menuOpen = true" :full-width="true" />
-            <neon-drawer :open="menuOpen" @close="menuOpen = false">
-              <div class="neon-side-nav__sticky">
-                <neon-input type="text" v-model="indexFilter" placeholder="Filter" />
-              </div>
-              <div class="neon-side-nav__scrolling">
-                <neon-tree-menu :model="filteredModel" :expand-all="expandAll" @click="onInlineMenuClick" />
-              </div>
-            </neon-drawer>
-          </neon-grid-area>
           <neon-grid-area id="section-content">
             <transition name="fade" mode="out-in">
               <router-view />

diff --git a/src/app/components/api-docs/ApiDocs.ts b/src/app/components/api-docs/ApiDocs.ts
@@ -1,5 +1,5 @@
 import { Component, Prop, Vue } from 'vue-property-decorator';
-import { NeonCard, NeonCardBody, NeonCardHeader, NeonExpansionIndicator } from '../../../components';
+import { NeonCard, NeonCardBody, NeonCardHeader, NeonNote } from '../../../components';
 import { DocumentationModel, EventModel, PropertyModel, PropTypeModel } from '../ApiModel';
 import { enumList, modelList } from '../../SupportingClasses';
 
@@ -8,7 +8,7 @@ import { enumList, modelList } from '../../SupportingClasses';
     NeonCard,
     NeonCardBody,
     NeonCardHeader,
-    NeonExpansionIndicator,
+    NeonNote,
   },
 })
 export default class ApiDocs extends Vue {
@@ -63,4 +63,20 @@ export default class ApiDocs extends Vue {
     }
     return undefined;
   }
+
+  private get hasDocs() {
+    return this.hasProps || this.hasEvents || this.hasSlots;
+  }
+
+  private get hasProps() {
+    return this.apiModel.props && this.apiModel.props.length > 0;
+  }
+
+  private get hasEvents() {
+    return this.apiModel.events && this.apiModel.events.length > 0;
+  }
+
+  private get hasSlots() {
+    return this.apiModel.slots && this.apiModel.slots.length > 0;
+  }
 }
diff --git a/src/app/components/api-docs/ApiDocs.vue b/src/app/components/api-docs/ApiDocs.vue
@@ -3,8 +3,14 @@
     <neon-card-header>
       <h1>{{ componentName }} API</h1>
     </neon-card-header>
-    <neon-card-body class="api-docs__desktop">
-      <section class="api-docs__section" v-if="apiModel.props && apiModel.props.length > 0">
+    <neon-card-body v-if="!hasDocs || apiModel.description">
+      <p v-if="apiModel.description">{{ apiModel.description }}</p>
+      <neon-note v-if="!hasDocs" color="info"
+        ><strong>Note:</strong>The Vue API for this component contains no properties, events or slots</neon-note
+      >
+    </neon-card-body>
+    <neon-card-body class="api-docs__desktop" v-if="hasDocs">
+      <section class="api-docs__section" v-if="hasProps">
         <h2 class="api-docs__title">Properties</h2>
         <table>
           <thead>
@@ -37,7 +43,7 @@
           </tbody>
         </table>
       </section>
-      <section class="api-docs__section" v-if="apiModel.events && apiModel.events.length > 0">
+      <section class="api-docs__section" v-if="hasEvents">
         <h2 class="api-docs__title">Events</h2>
         <table>
           <thead>
@@ -63,7 +69,7 @@
           </tbody>
         </table>
       </section>
-      <section class="api-docs__section" v-if="apiModel.slots && apiModel.slots.length > 0">
+      <section class="api-docs__section" v-if="hasSlots">
         <h2 class="api-docs__title">Slots</h2>
         <table>
           <thead>
@@ -83,8 +89,8 @@
         </table>
       </section>
     </neon-card-body>
-    <neon-card-body class="api-docs__responsive">
-      <section class="api-docs__section" v-if="apiModel.props && apiModel.props.length > 0">
+    <neon-card-body class="api-docs__responsive" v-if="hasDocs">
+      <section class="api-docs__section" v-if="hasProps">
         <h2 class="api-docs__title">Properties</h2>
         <div v-for="prop in apiModel.props" :key="prop.name" class="api-docs__property">
           <div class="api-docs__attribute">
@@ -107,7 +113,7 @@
           </div>
         </div>
       </section>
-      <section class="api-docs__section" v-if="apiModel.events && apiModel.events.length > 0">
+      <section class="api-docs__section" v-if="hasEvents">
         <h2 class="api-docs__title">Events</h2>
         <div v-for="event in apiModel.events" :key="event.name" class="api-docs__event">
           <div class="api-docs__attribute api-docs__name">{{ event.name }}</div>
@@ -121,7 +127,7 @@
           <div v-if="event.description" v-html="event.description" class="api-docs__attribute api-docs__description" />
         </div>
       </section>
-      <section class="api-docs__section" v-if="apiModel.slots && apiModel.slots.length > 0">
+      <section class="api-docs__section" v-if="hasSlots">
         <h2 class="api-docs__title">Slots</h2>
         <div v-for="slot in apiModel.slots" :key="slot.name" class="api-docs__slot">
           <div class="api-docs__attribute api-docs__name">{{ slot.name }}</div>

diff --git a/src/app/components/example/Example.vue b/src/app/components/example/Example.vue
@@ -3,7 +3,7 @@
     <div v-if="example.title" class="example__title">
       <h3>{{ example.title }}</h3>
     </div>
-    <div class="example__output">
+    <div class="example__output" :class="{ 'example__output--full-width': example.fullWidth }">
       <v-runtime-template :template-props="example.data || {}" :template="example.template" />
     </div>
     <div class="example__code">

diff --git a/src/app/components/pre/AppPre.vue b/src/app/components/pre/AppPre.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="app-pre" ref="wrapper">
-    <!-- @slot pass a pre element here and it will gain formatting and clipboard copy support -->
-    <vue-code-highlight :language="language">
+    <vue-code-highlight :language="language" class="app-pre__container">
+      <!-- @slot pass a pre element here and it will gain formatting and clipboard copy support -->
       <slot></slot>
     </vue-code-highlight>
     <neon-button

diff --git a/src/app/sass/component-docs-colors.scss b/src/app/sass/component-docs-colors.scss
@@ -1,6 +1,6 @@
 .component-documentation {
   &__header {
-    background-color: $background-color-component-header;
+    background-color: $background-color-footer;
     border-bottom: $border-width $border-style $border-color;
   }
 }