Documentation changes

s-bauer · Feb 3, 2019 · 2e16605 · 2e16605
1 parent 567b1a8
commit 2e16605
Show file tree

Hide file tree

Showing 7 changed files with 187 additions and 58 deletions.
diff --git a/packages/documentation/src/components/Card.vue b/packages/documentation/src/components/Card.vue
@@ -0,0 +1,53 @@
+<template>
+    <div class="card">
+        <div v-if="title" id="card-titlebar">
+            <h5>{{title}}</h5>
+        </div>
+        <div id="card-content">
+            <slot/>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+    import {Vue, Component, Prop} from "vue-property-decorator";
+
+    @Component({
+        components: {},
+    })
+    export default class Card extends Vue {
+        @Prop(String) private title?: string;
+    }
+</script>
+
+<style scoped>
+    .card {
+        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
+        transition: 0.3s;
+        margin: 20px 5px;
+        background-color: #fbfbfb;
+    }
+
+    .card:hover {
+        box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
+    }
+
+    #card-content {
+        padding: 20px 10px 10px 10px;
+    }
+
+    #card-titlebar {
+        width: 100%;
+        display: flex;
+        flex-wrap: nowrap;
+        justify-content: center;
+        align-items: center;
+        background-color: #004578;
+        color: white;
+    }
+
+    h5 {
+        padding: 2px 0;
+        margin: 0;
+    }
+</style>
diff --git a/packages/documentation/src/components/OverviewItem.vue b/packages/documentation/src/components/OverviewItem.vue
@@ -1,8 +1,5 @@
 <template>
-    <div class="card">
-        <div id="titlebar">
-            <h5>{{title}}</h5>
-        </div>
+    <Card :title="title">
         <div id="settings" v-if="availableOptions.length > 0">
             <component v-for="option of availableOptions"
                        v-model="option.value"
@@ -14,10 +11,11 @@
         <div id="content" :style="contentStyle">
             <slot v-bind="currentProps"></slot>
         </div>
-    </div>
+    </Card>
 </template>
 
 <script lang="ts">
+    import Card                   from "@/components/Card.vue";
     import BooleanToggle          from "./DemoInputs/ToggleInput.vue";
     import StringInput            from "./DemoInputs/StringInput.vue";
     import {Component, Vue, Prop} from "vue-property-decorator";
@@ -43,6 +41,7 @@
 
     @Component({
         components: {
+            Card,
             OfficeToggle,
             OfficeIcon,
             OfficeTextField,
@@ -81,42 +80,16 @@
 </script>
 
 <style scoped>
-    h5 {
-        padding: 2px 0;
-        margin: 0;
-    }
-
-    .card {
-        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
-        transition: 0.3s;
-        margin: 20px 5px;
-        background-color: #f9f9f9;
-    }
-
-    .card:hover {
-        box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
-    }
-
-    #titlebar {
-        width: 100%;
-        display: flex;
-        flex-wrap: nowrap;
-        justify-content: center;
-        align-items: center;
-        background-color: #004578;
-        color: white;
-    }
-
     #content {
-        padding: 20px 10px 10px 10px;
+        margin-top: 15px;
     }
 
     #settings {
-        padding: 10px 10px 20px 10px;
         display: flex;
         flex-direction: row;
         flex-wrap: wrap;
         border-bottom: 1px solid rgba(0,0,0,0.2);
+        padding-bottom: 15px;
     }
 </style>
 

diff --git a/packages/documentation/src/views/components/Button/OfficeButton.vue b/packages/documentation/src/views/components/Button/OfficeButton.vue
@@ -1,31 +1,73 @@
 <template>
     <div>
-        <OverviewItem title="Button" :options="options">
+        <OverviewItem title="Playground" :options="options">
             <template slot-scope="props">
                 <OfficeButton v-bind="props"></OfficeButton>
             </template>
         </OverviewItem>
+
+        <Card title="Examples" id="example-card">
+            <div id="example-button-container">
+                <OfficeButton label="Default Button"></OfficeButton>
+                <OfficeButton primary label="Primary Button"></OfficeButton>
+                <OfficeButton checked label="Checked Button"></OfficeButton>
+                <OfficeButton primary checked label="Primary Checked Button"></OfficeButton>
+                <OfficeButton disabled label="Disabled Button"></OfficeButton>
+            </div>
+            <div id="example-code">
+                <OfficeLabel>Code:</OfficeLabel>
+                <highlight-code lang="vue" style="text-align: left">
+                    {{ exampleCode }}
+                </highlight-code>
+            </div>
+        </Card>
     </div>
 </template>
 
 <script lang="ts">
-    import {DemoInputTypes} from "@/components/DemoInputs/DemoInputTypes";
+    import Card                         from "@/components/Card.vue";
+    import {DemoInputTypes}             from "@/components/DemoInputs/DemoInputTypes";
     import OverviewItem, {IItemOptions} from "@/components/OverviewItem.vue";
-    import {Component, Vue} from "vue-property-decorator";
-    import {OfficeButton} from "office-vue-fabric";
+    import OfficeLabel                  from "office-vue-fabric/src/Label/OfficeLabel.vue";
+    import {Component, Vue}             from "vue-property-decorator";
+    import {OfficeButton}               from "office-vue-fabric";
+    import exampleCode                  from "./buttons.example";
 
     @Component({
         components: {
+            OfficeLabel,
             OverviewItem,
             OfficeButton,
+            Card
         },
     })
     export default class extends Vue {
+        private exampleCode = exampleCode;
+
         private options: IItemOptions = {
             disabled: {type: DemoInputTypes.BooleanToggle},
-            primary: {type: DemoInputTypes.BooleanToggle, value: true},
-            checked: {type: DemoInputTypes.BooleanToggle},
-            label: {type: DemoInputTypes.StringInput, value: "Default Button", options: {width: "150px"}},
+            primary:  {type: DemoInputTypes.BooleanToggle, value: true},
+            checked:  {type: DemoInputTypes.BooleanToggle},
+            label:    {type: DemoInputTypes.StringInput, value: "Default Button", options: {width: "150px"}},
         };
     }
 </script>
+
+<style scoped>
+    #example-code {
+        border-top: 1px solid rgba(0,0,0,0.2);
+        margin-top: 25px;
+        padding-top: 25px;
+    }
+
+    #example-code .ms-Label {
+        margin-left: 5px;
+    }
+
+    #example-button-container .ms-Button {
+        width: 250px;
+        display: inline-block;
+        margin-right: 15px;
+        margin-bottom: 15px;
+    }
+</style>
diff --git a/packages/documentation/src/views/components/Button/buttons.example b/packages/documentation/src/views/components/Button/buttons.example
@@ -0,0 +1,5 @@
+<OfficeButton label="Default Button"></OfficeButton>
+<OfficeButton primary label="Primary Button"></OfficeButton>
+<OfficeButton checked label="Checked Button"></OfficeButton>
+<OfficeButton primary checked label="Primary Checked Button"></OfficeButton>
+<OfficeButton disabled label="Disabled Button"></OfficeButton>
diff --git a/packages/documentation/src/views/components/Overview.vue b/packages/documentation/src/views/components/Overview.vue
@@ -24,7 +24,9 @@
 <style scoped>
     #content {
         position: relative;
-        padding: 2em;
-        margin-left: 221px;
+        padding: 2em 2em 2em 221px;
+        max-width: 1200px;
+        min-width: 600px;
+        margin: auto;
     }
 </style>
diff --git a/packages/documentation/src/views/components/TextField/OfficeTextField.vue b/packages/documentation/src/views/components/TextField/OfficeTextField.vue
@@ -1,39 +1,85 @@
 <template>
     <div>
-        <OverviewItem title="Text Field" :options="options">
+        <OverviewItem title="Playground" :options="options">
             <template slot-scope="props">
                 <OfficeTextField v-bind="props"></OfficeTextField>
             </template>
         </OverviewItem>
+
+        <Card title="Examples" id="example-card">
+            <div id="example-container">
+                <OfficeTextField label="Sample Input"></OfficeTextField>
+                <OfficeTextField label="Disabled Input" disabled></OfficeTextField>
+                <OfficeTextField label="Sample Input with Icon" :iconProps="{iconName: 'edit'}"></OfficeTextField>
+                <OfficeTextField label="Sample Input with Prefix and Suffix" prefix="http://" suffix=".com"></OfficeTextField>
+                <OfficeTextField label="Borderless Input" borderless></OfficeTextField>
+                <OfficeTextField label="Underlined Input" underlined></OfficeTextField>
+                <OfficeTextField label="Error Input" errorMessage="Invalid Input"></OfficeTextField>
+                <OfficeTextField label="Multiline Input with auto height" multiline autoAdjustHeight></OfficeTextField>
+            </div>
+            <div id="example-code">
+                <OfficeLabel>Code:</OfficeLabel>
+                <highlight-code lang="vue" style="text-align: left">
+                    {{ exampleCode }}
+                </highlight-code>
+            </div>
+        </Card>
     </div>
 </template>
 
 <script lang="ts">
-    import {DemoInputTypes} from "@/components/DemoInputs/DemoInputTypes";
-    import OverviewItem, {IItemOptions} from "@/components/OverviewItem.vue";
-    import {Component, Vue} from "vue-property-decorator";
-    import {OfficeTextField} from "office-vue-fabric";
+    import Card                           from "@/components/Card.vue";
+    import {DemoInputTypes}               from "@/components/DemoInputs/DemoInputTypes";
+    import OverviewItem, {IItemOptions}   from "@/components/OverviewItem.vue";
+    import {Component, Vue}               from "vue-property-decorator";
+    import {OfficeTextField, OfficeLabel} from "office-vue-fabric";
+    import exampleCode                    from "./textfields.example";
+
 
     @Component({
         components: {
             OfficeTextField,
             OverviewItem,
+            Card,
+            OfficeLabel,
         },
     })
     export default class extends Vue {
+        private exampleCode = exampleCode;
+
         private options: IItemOptions = {
-            disabled: {type: DemoInputTypes.BooleanToggle},
-            multiline: {type: DemoInputTypes.BooleanToggle},
-            required: {type: DemoInputTypes.BooleanToggle},
-            resizable: {type: DemoInputTypes.BooleanToggle},
-            underlined: {type: DemoInputTypes.BooleanToggle},
-            borderless: {type: DemoInputTypes.BooleanToggle},
+            disabled:         {type: DemoInputTypes.BooleanToggle},
+            multiline:        {type: DemoInputTypes.BooleanToggle},
+            required:         {type: DemoInputTypes.BooleanToggle},
+            resizable:        {type: DemoInputTypes.BooleanToggle},
+            underlined:       {type: DemoInputTypes.BooleanToggle},
+            borderless:       {type: DemoInputTypes.BooleanToggle},
             autoAdjustHeight: {type: DemoInputTypes.BooleanToggle},
-            iconProps: {type: DemoInputTypes.BooleanToggle, options: {value: {iconName: "edit"}}},
-            label: {type: DemoInputTypes.StringInput, value: "Example Input", options: {width: "250px"}},
-            errorMessage: {type: DemoInputTypes.StringInput, value: "This input is invalid!", options: {width: "250px"}},
-            prefix: {type: DemoInputTypes.StringInput, value: ""},
-            suffix: {type: DemoInputTypes.StringInput, value: ""},
+            iconProps:        {type: DemoInputTypes.BooleanToggle, options: {value: {iconName: "edit"}}},
+            label:            {type: DemoInputTypes.StringInput, value: "Example Input", options: {width: "250px"}},
+            errorMessage:     {
+                type:    DemoInputTypes.StringInput,
+                value:   "This input is invalid!",
+                options: {width: "250px"}
+            },
+            prefix:           {type: DemoInputTypes.StringInput, value: ""},
+            suffix:           {type: DemoInputTypes.StringInput, value: ""},
         };
     }
 </script>
+
+<style scoped>
+    #example-container .ms-TextField {
+        margin-bottom: 5px;
+    }
+
+    #example-code {
+        border-top: 1px solid rgba(0,0,0,0.2);
+        margin-top: 25px;
+        padding-top: 25px;
+    }
+
+    #example-code .ms-Label {
+        margin-left: 5px;
+    }
+</style>
diff --git a/packages/documentation/src/views/components/TextField/textfields.example b/packages/documentation/src/views/components/TextField/textfields.example
@@ -0,0 +1,8 @@
+<OfficeTextField label="Sample Input"></OfficeTextField>
+<OfficeTextField label="Disabled Input" disabled></OfficeTextField>
+<OfficeTextField label="Sample Input with Icon" :iconProps="{iconName: 'edit'}"></OfficeTextField>
+<OfficeTextField label="Sample Input with Prefix and Suffix" prefix="http://" suffix=".com"></OfficeTextField>
+<OfficeTextField label="Borderless Input" borderless></OfficeTextField>
+<OfficeTextField label="Underlined Input" underlined></OfficeTextField>
+<OfficeTextField label="Error Input" errorMessage="Invalid Input"></OfficeTextField>
+<OfficeTextField label="Multiline Input with auto height" multiline autoAdjustHeight></OfficeTextField>