Merge pull request #29 from viljamis/feature/component-status-view

Component Statuses, Overview

docs/components/status/Components.vue

@@ -0,0 +1,168 @@
+<template>
+  <div class="component-status">
+    <ul class="status-list">
+      <li>
+        <svg-icon name="ready" fill="#7cb518" size="16px" />
+        <p>Ready</p>
+      </li>
+      <li>
+        <svg-icon name="review" :fill="tokens.color_ucla_gold.value" size="16px" />
+        <p>Under review</p>
+      </li>
+      <li>
+        <svg-icon name="deprecated" :fill="tokens.color_vermilion.value" size="16px" />
+      <p>Deprecated</p>
+      </li>
+      <li>
+        <svg-icon name="prototype" :fill="tokens.color_bleu_de_france.value" size="16px" />
+        <p>Prototype</p>
+      </li>
+      <li>
+        <span>—</span>
+        <p>Not applicable</p>
+      </li>
+    </ul>
+    <table>
+      <thead>
+        <tr>
+          <th>Component Name</th>
+          <th>Added In</th>
+          <th>Status</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="component in components" class="component">
+          <td v-if="component.name">{{component.name}}</td>
+          <td v-else>N/A</td>
+          <td v-if="component.addedInVersion">{{component.addedInVersion}}</td>
+          <td v-else>N/A</td>
+          <td v-if="component.version">
+            <svg-icon
+              v-if="component.version === 'ready'"
+              name="ready"
+              fill="#7cb518"
+              size="16px"
+            />
+            <svg-icon
+              v-if="component.version === 'under-review' || component.version === 'review'"
+              name="review"
+              :fill="tokens.color_ucla_gold.value"
+              size="16px"
+            />
+            <svg-icon
+              v-if="component.version === 'prototype'"
+              name="prototype"
+              :fill="tokens.color_bleu_de_france.value"
+              size="16px"
+            />
+            <svg-icon
+              v-if="component.version === 'deprecated'"
+              name="deprecated"
+              :fill="tokens.color_vermilion.value"
+              size="16px"
+            />
+          </td>
+          <td v-else>—</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script>
+import designTokens from "@/assets/tokens/tokens.raw.json"
+import _ from "lodash"
+
+export default {
+  name: "Components",
+  methods: {
+    getComponents: function() {
+      const contexts = [
+        require.context("@/elements/", true, /\.vue$/),
+        require.context("@/patterns/", true, /\.vue$/),
+        require.context("@/templates/", true, /\.vue$/),
+      ]
+
+      const components = []
+      contexts.forEach(context => {
+        context.keys().forEach(key => components.push(context(key).default))
+      })
+
+      return components
+    },
+    orderData: function(data) {
+      return _.orderBy(data, "name", "asc")
+    },
+  },
+  data() {
+    return {
+      components: this.orderData(this.getComponents()),
+      tokens: designTokens.props,
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.component-status {
+  @include reset;
+  font-family: $font-family-heading;
+  font-weight: $font-weight-regular;
+  line-height: $line-height-heading;
+  color: $color-rich-black;
+  margin-bottom: $space-small;
+  font-style: normal;
+  table {
+    border-collapse: collapse;
+    border-spacing: 0;
+    width: 100%;
+  }
+  thead th {
+    padding: $space-small $space-large $space-small $space-small;
+    background: tint($color-bleu-de-france, 90%);
+    font-size: $font-size-small;
+    font-weight: $font-weight-bold;
+    color: $color-oxford-blue;
+    text-align: left;
+  }
+  tr {
+    border-bottom: 1px solid #dfe3e6;
+    &:last-child {
+      border: 0;
+    }
+  }
+  td {
+    font-size: $font-size-small;
+    padding: $space-small $space-large $space-small $space-small;
+    &:first-child {
+      font-weight: $font-weight-bold;
+      white-space: nowrap;
+    }
+  }
+  .status-list {
+    margin: 0 0 $space-small;
+    padding: 0;
+    list-style: none;
+    flex-direction: row;
+    align-items: center;
+    display: flex;
+    li {
+      margin: 0 $space-base 0 0;
+      color: tint($color-rich-black, 30%);
+      font-size: $font-size-small;
+      align-items: center;
+      display: flex;
+      svg,
+      span {
+        margin: -2px calc(#{$space-small} / 2) 0 0;
+      }
+    }
+  }
+}
+</style>
+
+<docs>
+  ```jsx
+  <components />
+  ```
+</docs>

docs/elements.md

@@ -1,4 +1,4 @@
 **Elements** are the smallest basic structures of a UI. They can not be broken
 down any further. Buttons, links and inputs are good examples. Elements utilize
 _Tokens_. _(Everything you see here is user editable, to change or remove this
-text, see `/docs/elements.md`)_
+text, see [/docs/elements.md](https://github.com/viljamis/vue-design-system/blob/master/docs/elements.md))_

docs/overview.md

@@ -0,0 +1,2 @@
+This is **[Vue Design System’s](https://vueds.com/)** demo documentation and component library. It serves as a resource that helps to define a common visual language for the components of this application. This library was built for our internal needs, but it can also be used to teach new hires about our approach to interface design and front-end development. Feel free to reach out if you have any questions or improvement ideas. _(everything you see here is
+user editable, to change or remove this text, see [/docs/overview.md](https://github.com/viljamis/vue-design-system/blob/master/docs/overview.md))_

docs/patterns.md

@@ -1,3 +1,3 @@
 **Patterns** are UI patterns that fall on the more complex side of the spectrum.
 Patterns consist of both _Elements_ and _Tokens_. _(everything you see here is
-user editable, to change or remove this text, see `/docs/patterns.md`)_
+user editable, to change or remove this text, see [/docs/patterns.md](https://github.com/viljamis/vue-design-system/blob/master/docs/patterns.md))_

docs/principles.md

@@ -1,7 +1,7 @@
 **Principles** are a set of established design principles that are at the heart
 of the design system. They should guide us when working with _Tokens_,
 _Elements_, _Patterns_ and _Templates_. _(Everything you see here is user
-editable, to change or remove this text, see `/docs/principles.md`. The
+editable, to change or remove this text, see [/docs/principles.md](https://github.com/viljamis/vue-design-system/blob/master/docs/principles.md). The
 principles below are just an example, you should replace them.)_
 
 1. **Design is how it works**

docs/styleguide.styles.css

@@ -100,7 +100,8 @@ div[class^="rsg--search"] input::-webkit-input-placeholder {
 
 #Color-container div[data-preview],
 #FontSize-container div[data-preview],
-#Spacing-container div[data-preview] {
+#Spacing-container div[data-preview],
+#Components-container div[data-preview] {
   background: transparent;
   padding: 0;
   border: 0;
@@ -125,14 +126,17 @@ thead[class^="rsg--tableHead"] {
 #vue-design-system + div[class^="rsg--toolbar"],
 #principles + div[class^="rsg--toolbar"],
 #content + div[class^="rsg--toolbar"],
-#guidelines + div[class^="rsg--toolbar"],
+#overview + div[class^="rsg--toolbar"],
+#components + div[class^="rsg--toolbar"],
 #tokens + div[class^="rsg--toolbar"],
 #color + div[class^="rsg--toolbar"],
 #fontsize + div[class^="rsg--toolbar"],
 #spacing + div[class^="rsg--toolbar"],
 #elements + div[class^="rsg--toolbar"],
 #patterns + div[class^="rsg--toolbar"],
 #templates + div[class^="rsg--toolbar"],
+#Components-container div[class^="rsg--tabs"],
+#Components-container .react-codemirror2,
 #Spacing-container div[class^="rsg--tabs"],
 #Spacing-container .react-codemirror2,
 #FontSize-container div[class^="rsg--tabs"],
@@ -245,6 +249,7 @@ strong a[class^="rsg--link"] {
 
 /* Hide status labels from token examples */
 #Color-container .status,
+#Components-container .status,
 #FontSize-container .status,
 #Spacing-container .status {
   display: none;

docs/templates.md

@@ -1,4 +1,4 @@
 **Templates** exist to document the layout and structure of a section or the
 entirety of an interface. Templates can consist of all three things mentioned
 above: _Patterns_, _Elements_ and _Tokens_. _(Everything you see here is user
-editable, to change or remove this text, see `/docs/templates.md`)_
+editable, to change or remove this text, see [/docs/templates.md](https://github.com/viljamis/vue-design-system/blob/master/docs/templates.md))_

docs/tokens.md

@@ -1,3 +1,3 @@
 **Tokens** are the visual design atoms of the design system. Specifically, they
 are named entities that store visual design attributes. _(Everything you see
-here is user editable, to change or remove this text, see `/docs/tokens.md`)_
+here is user editable, to change or remove this text, see [/docs/tokens.md](https://github.com/viljamis/vue-design-system/blob/master/docs/tokens.md))_

src/ExampleComponent.vue

@@ -22,11 +22,12 @@ export default {
    * STATUS:        COLOR:     DESCRIPTION:
    *
    * deprecated     Red        Component is deprecated
-   * prototype      Red        Do not implement!
-   * wip            Yellow     Work-in-progress
+   * prototype      Yellow     Prototype, do not implement!
+   * under-review   Yellow     Component is currently being reviewed
    * ready          Green      Ready to be used
    */
   version: "prototype",
+  addedInVersion: "1.0.0",
   /**
    * Prop definitions should be as detailed as possible, specifying at least
    * type(s). See examples below:

src/elements/Heading.vue

@@ -11,6 +11,7 @@
 export default {
   name: "Heading",
   version: "prototype",
+  addedInVersion: "1.0.0",
   props: {
     /**
      * The heading level used for the heading.

src/elements/SvgIcon.vue

@@ -12,7 +12,8 @@ const req = require.context("@/assets/icons/", true, /^\.\/.*\.svg$/)
  */
 export default {
   name: "SvgIcon",
-  version: "wip",
+  version: "review",
+  addedInVersion: "1.0.0",
   props: {
     /**
      * The name of the icon to display

src/elements/TextLink.vue

@@ -11,6 +11,7 @@
 export default {
   name: "TextLink",
   version: "ready",
+  addedInVersion: "1.0.0",
   props: {
     /**
      * The URL for the link

src/elements/TextStyle.vue

@@ -11,6 +11,7 @@
 export default {
   name: "TextStyle",
   version: "ready",
+  addedInVersion: "1.0.0",
   props: {
     /**
      * The html element name used for the text

src/elements/Wrapper.vue

@@ -10,7 +10,8 @@
  */
 export default {
   name: "Wrapper",
-  version: "wip",
+  version: "review",
+  addedInVersion: "1.0.0",
   props: {
     /**
      * The html element name used for the wrapper

src/patterns/NavBar.vue

@@ -11,6 +11,7 @@
 export default {
   name: "NavBar",
   version: "ready",
+  addedInVersion: "1.0.0",
   model: {
     prop: "active",
   },

src/templates/Index.vue

@@ -18,6 +18,7 @@
 export default {
   name: "Index",
   version: "deprecated",
+  addedInVersion: "1.0.0",
   metaInfo: {
     title: "Vue Design System",
     htmlAttrs: {