Start using new formatting for all tokens in docs

arielsalminen · Nov 19, 2017 · af5afd5 · af5afd5
1 parent a183191
commit af5afd5
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 30 deletions.
diff --git a/docs/components/FontSize.vue b/docs/components/FontSize.vue
@@ -1,11 +1,13 @@
 <template>
   <component :is="type" class="font-sizes">
-    <div v-for="token in designTokens" class="font" />
+    <div v-for="prop in tokens" class="font" v-if="prop.category === 'font-size'" :style="{ fontSize: prop.value }">
+      ${{prop.name.replace(/_/g, "-")}} <span>({{prop.value}})</span>
+    </div>
   </component>
 </template>
 
 <script>
-import designTokens from "@/assets/tokens/tokens.json";
+import designTokens from "@/assets/tokens/tokens.raw.json";
 
 export default {
   name: "FontSize",
@@ -15,9 +17,15 @@ export default {
       default: "div"
     }
   },
+  methods: {
+    orderData: function(data) {
+      let byName = _.orderBy(data, "category");
+      return byName;
+    }
+  },
   data() {
     return {
-      designTokens
+      tokens: this.orderData(designTokens.props)
     };
   }
 };
@@ -36,16 +44,10 @@ export default {
     color: $color-rich-black;
     margin-bottom: $space-small;
     font-style: normal;
-  }
-  @each $property, $value in $tokens-map {
-    $i: index(($tokens-map), ($property $value));
-    @if str_index($property, "font-size") {
-      .font:nth-of-type(#{$i}) {
-        font-size: $value;
-        &::before {
-          content: "$#{$property}";
-        }
-      }
+    span {
+      margin-left: 10px;
+      font-style: italic;
+      opacity: 0.5;
     }
   }
 </style>

diff --git a/docs/components/Spacing.vue b/docs/components/Spacing.vue
@@ -1,11 +1,15 @@
 <template>
   <component :is="type" class="spacing">
     <div v-for="token in designTokens" class="space" />
+
+    <div v-for="prop in tokens" class="space" v-if="prop.category === 'space'" :style="{ lineHeight: prop.value, height: prop.value }">
+      ${{prop.name.replace(/_/g, "-")}} <span>({{prop.value}})</span>
+    </div>
   </component>
 </template>
 
 <script>
-import designTokens from "@/assets/tokens/tokens.json";
+import designTokens from "@/assets/tokens/tokens.raw.json";
 
 export default {
   name: "Spacing",
@@ -15,9 +19,15 @@ export default {
       default: "div"
     }
   },
+  methods: {
+    orderData: function(data) {
+      let byName = _.orderBy(data, "category");
+      return byName;
+    }
+  },
   data() {
     return {
-      designTokens
+      tokens: this.orderData(designTokens.props)
     };
   }
 };
@@ -29,27 +39,20 @@ export default {
     width: 100%;
   }
   .space {
+    box-shadow: $box-shadow-tiny-inset;
+    margin-bottom: $space-tiny;
     font-size: $font-size-tiny;
     font-family: $font-family-text;
     color: $color-rich-black;
+    background: #f4f6f8;
     text-align: center;
     position: relative;
     float: left;
     width: 100%;
-  }
-  @each $property, $value in $tokens-map {
-    $i: index(($tokens-map), ($property $value));
-    @if str_index($property, "space") {
-      .space:nth-of-type(#{$i}) {
-        border: 1px solid rgba(92,106,196,.07);
-        margin-bottom: $space-tiny;
-        background: #f4f6f8;
-        line-height: $value;
-        height: $value;
-        &::before {
-          content: "$#{$property}";
-        }
-      }
+    span {
+      margin-left: 5px;
+      font-style: italic;
+      opacity: 0.5;
     }
   }
 </style>

diff --git a/src/assets/tokens/tokens.raw.json b/src/assets/tokens/tokens.raw.json
@@ -364,4 +364,4 @@
       "name": "line-height-heading"
     }
   }
-}
+}