create usage cards

src/variables/usage/card/card.js

@@ -0,0 +1,22 @@
+import DefineMap from 'can-define/map/map'
+import Component from 'can-component'
+import template from './card.stache'
+
+export const UsageCardVM = DefineMap.extend('UsageCardVM', {
+  // passed in from parent
+  cardInfo: {},
+
+  isOpen: { default: true },
+
+  checkDetailToggle (el) {
+    this.isOpen = !el.hasAttribute('open')
+  }
+}
+)
+
+export default Component.extend({
+  view: template,
+  leakScope: false,
+  ViewModel: UsageCardVM,
+  tag: 'usage-card'
+})

src/variables/usage/card/card.stache

@@ -0,0 +1,16 @@
+<div class="page-toggle">       
+  {{#if (isOpen)}}
+    <span class="glyphicon-down-open" aria-hidden="true"></span>
+  {{else}}
+    <span class="glyphicon-right-open" aria-hidden="true"></span>
+  {{/if}}
+
+  <details open on:click="checkDetailToggle(scope.element)">
+  <summary>{{cardInfo.pageName}}</summary>
+  <ul>        
+    {{#each(cardInfo.page, item=value)}}
+      <li>{{item}}</li>
+    {{/each}}
+  </ul>
+  </details>
+</div>