From 824e690ab03b7880797ebca8c68af96e8a46f491 Mon Sep 17 00:00:00 2001
From: mcmcgrath13 <m.c.mcgrath13@gmail.com>
Date: Wed, 22 Jul 2020 13:02:39 -0400
Subject: [PATCH 1/3] feat: switch to uswds design system

---
 demo/App.vue                               |  16 ++
 demo/components/PaginatedExplainer.vue     |   6 +-
 demo/main.js                               |  11 +
 package-lock.json                          | 221 +++++++++++++++++++++
 package.json                               |   3 +-
 src/components/Expandable.vue              |  41 ++--
 src/components/Explainer.vue               |  29 +--
 src/components/ExplainerImageHighlight.vue |   4 +-
 8 files changed, 290 insertions(+), 41 deletions(-)
 create mode 100644 demo/App.vue
 create mode 100644 demo/main.js

diff --git a/demo/App.vue b/demo/App.vue
new file mode 100644
index 0000000..3873405
--- /dev/null
+++ b/demo/App.vue
@@ -0,0 +1,16 @@
+<template>
+  <div id="app">
+    <PaginatedExplainer />
+  </div>
+</template>
+
+<script>
+import PaginatedExplainer from './components/PaginatedExplainer.vue'
+
+export default {
+  name: 'App',
+  components: {
+    PaginatedExplainer
+  }
+}
+</script>
diff --git a/demo/components/PaginatedExplainer.vue b/demo/components/PaginatedExplainer.vue
index c7a04e3..bf1c97b 100644
--- a/demo/components/PaginatedExplainer.vue
+++ b/demo/components/PaginatedExplainer.vue
@@ -1,6 +1,6 @@
 <template>
    <div class="container">
-    <div class="level is-mobile paginator px-5">
+    <div class="level is-mobile paginator padding-x-5">
       <div class="level-left">
         <p class="level-item">Page:</p>
         <a
@@ -20,12 +20,14 @@
   </div>
 </template>
 
-<style lang="sass" src="bulma"></style>
+<!-- <style lang="css" src="uswds"></style> -->
 
 <script>
 import Explainer from '@/components/Explainer'
 
 import * as _ from 'lodash';
+import './../../node_modules/uswds/dist/css/uswds.min.css';
+import './../../node_modules/uswds/dist/js/uswds.min.js';
 
 export default {
   name: 'PaginatedExplainer',
diff --git a/demo/main.js b/demo/main.js
new file mode 100644
index 0000000..bef52a6
--- /dev/null
+++ b/demo/main.js
@@ -0,0 +1,11 @@
+import Vue from 'vue'
+import App from './App.vue'
+
+import './../node_modules/uswds/dist/css/uswds.min.css';
+import './../node_modules/uswds/dist/js/uswds.min.js';
+
+Vue.config.productionTip = false
+
+new Vue({
+  render: h => h(App),
+}).$mount('#app')
diff --git a/package-lock.json b/package-lock.json
index 3fbae76..336229a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3805,6 +3805,12 @@
         }
       }
     },
+    "classlist-polyfill": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/classlist-polyfill/-/classlist-polyfill-1.2.0.tgz",
+      "integrity": "sha1-k1vC39lFiodrJ5YXUUY4vKqWSi4=",
+      "dev": true
+    },
     "clean-css": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.3.tgz",
@@ -5504,6 +5510,12 @@
         "domelementtype": "1"
       }
     },
+    "domready": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/domready/-/domready-1.0.8.tgz",
+      "integrity": "sha1-kfJS5Ze2Wvd+dFriTdAYXV4m1Yw=",
+      "dev": true
+    },
     "domutils": {
       "version": "1.7.0",
       "resolved": "https://registry.npmjs.org/domutils/-/domutils-1.7.0.tgz",
@@ -5596,6 +5608,18 @@
       "integrity": "sha512-tyzuKaV2POw2mtqBBzQGNBojMZzH0MRu8bT8T/50x+hWeucyG/9pkgAATy+PcM2ySNM9+8eG2VllY9c6j4i+bg==",
       "dev": true
     },
+    "elem-dataset": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/elem-dataset/-/elem-dataset-1.1.1.tgz",
+      "integrity": "sha1-GPB/p/xx69SbD59jgZywPIJ2V3o=",
+      "dev": true
+    },
+    "element-closest": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/element-closest/-/element-closest-2.0.2.tgz",
+      "integrity": "sha1-cqdAoQdFM4LijfnOXbtajfD5Zuw=",
+      "dev": true
+    },
     "elliptic": {
       "version": "6.5.3",
       "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.3.tgz",
@@ -8196,6 +8220,12 @@
         "verror": "1.10.0"
       }
     },
+    "keyboardevent-key-polyfill": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/keyboardevent-key-polyfill/-/keyboardevent-key-polyfill-1.1.0.tgz",
+      "integrity": "sha1-ijGdjkWhMXL8pWKGNy+QwdTHAUw=",
+      "dev": true
+    },
     "killable": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/killable/-/killable-1.0.1.tgz",
@@ -8394,6 +8424,12 @@
       "integrity": "sha1-+CbJtOKoUR2E46yinbBeGk87cqk=",
       "dev": true
     },
+    "lodash.debounce": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
+      "integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168=",
+      "dev": true
+    },
     "lodash.defaultsdeep": {
       "version": "4.6.1",
       "resolved": "https://registry.npmjs.org/lodash.defaultsdeep/-/lodash.defaultsdeep-4.6.1.tgz",
@@ -8624,6 +8660,12 @@
         }
       }
     },
+    "matches-selector": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/matches-selector/-/matches-selector-1.2.0.tgz",
+      "integrity": "sha512-c4vLwYWyl+Ji+U43eU/G5FwxWd4ZH0ePUsFs5y0uwD9HUEFBXUQ1zUUan+78IpRD+y4pUfG0nAzNM292K7ItvA==",
+      "dev": true
+    },
     "md5.js": {
       "version": "1.3.5",
       "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz",
@@ -14528,6 +14570,18 @@
         "picomatch": "^2.2.1"
       }
     },
+    "receptor": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/receptor/-/receptor-1.0.0.tgz",
+      "integrity": "sha1-v1RHfgOH5Evr84VRILvaWt6gj4s=",
+      "dev": true,
+      "requires": {
+        "element-closest": "^2.0.1",
+        "keyboardevent-key-polyfill": "^1.0.2",
+        "matches-selector": "^1.0.0",
+        "object-assign": "^4.1.0"
+      }
+    },
     "redent": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/redent/-/redent-1.0.0.tgz",
@@ -14830,6 +14884,12 @@
       "integrity": "sha1-six699nWiBvItuZTM17rywoYh0g=",
       "dev": true
     },
+    "resolve-id-refs": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/resolve-id-refs/-/resolve-id-refs-0.1.0.tgz",
+      "integrity": "sha1-MSZiS4h0idqPwK6IljL4QTrGw+w=",
+      "dev": true
+    },
     "resolve-url": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz",
@@ -17029,6 +17089,167 @@
       "integrity": "sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ==",
       "dev": true
     },
+    "uswds": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/uswds/-/uswds-2.8.0.tgz",
+      "integrity": "sha512-LI7ZNbh823ehtThvebwQ5eHNKGY791vcT5d3T9gJ+RY511HgstWLRSEEso7YO/ifjoV/FwuTAtDwQqt7zsXRvA==",
+      "dev": true,
+      "requires": {
+        "classlist-polyfill": "^1.0.3",
+        "del": "^5.1.0",
+        "domready": "^1.0.8",
+        "elem-dataset": "^1.1.1",
+        "lodash.debounce": "^4.0.7",
+        "object-assign": "^4.1.1",
+        "receptor": "^1.0.0",
+        "resolve-id-refs": "^0.1.0"
+      },
+      "dependencies": {
+        "@nodelib/fs.stat": {
+          "version": "2.0.3",
+          "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.3.tgz",
+          "integrity": "sha512-bQBFruR2TAwoevBEd/NWMoAAtNGzTRgdrqnYCc7dhzfoNvqPzLyqlEQnzZ3kVnNrSp25iyxE00/3h2fqGAGArA==",
+          "dev": true
+        },
+        "array-union": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
+          "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==",
+          "dev": true
+        },
+        "braces": {
+          "version": "3.0.2",
+          "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
+          "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+          "dev": true,
+          "requires": {
+            "fill-range": "^7.0.1"
+          }
+        },
+        "del": {
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/del/-/del-5.1.0.tgz",
+          "integrity": "sha512-wH9xOVHnczo9jN2IW68BabcecVPxacIA3g/7z6vhSU/4stOKQzeCRK0yD0A24WiAAUJmmVpWqrERcTxnLo3AnA==",
+          "dev": true,
+          "requires": {
+            "globby": "^10.0.1",
+            "graceful-fs": "^4.2.2",
+            "is-glob": "^4.0.1",
+            "is-path-cwd": "^2.2.0",
+            "is-path-inside": "^3.0.1",
+            "p-map": "^3.0.0",
+            "rimraf": "^3.0.0",
+            "slash": "^3.0.0"
+          }
+        },
+        "dir-glob": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
+          "integrity": "sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==",
+          "dev": true,
+          "requires": {
+            "path-type": "^4.0.0"
+          }
+        },
+        "fast-glob": {
+          "version": "3.2.4",
+          "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.4.tgz",
+          "integrity": "sha512-kr/Oo6PX51265qeuCYsyGypiO5uJFgBS0jksyG7FUeCyQzNwYnzrNIMR1NXfkZXsMYXYLRAHgISHBz8gQcxKHQ==",
+          "dev": true,
+          "requires": {
+            "@nodelib/fs.stat": "^2.0.2",
+            "@nodelib/fs.walk": "^1.2.3",
+            "glob-parent": "^5.1.0",
+            "merge2": "^1.3.0",
+            "micromatch": "^4.0.2",
+            "picomatch": "^2.2.1"
+          }
+        },
+        "fill-range": {
+          "version": "7.0.1",
+          "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
+          "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+          "dev": true,
+          "requires": {
+            "to-regex-range": "^5.0.1"
+          }
+        },
+        "globby": {
+          "version": "10.0.2",
+          "resolved": "https://registry.npmjs.org/globby/-/globby-10.0.2.tgz",
+          "integrity": "sha512-7dUi7RvCoT/xast/o/dLN53oqND4yk0nsHkhRgn9w65C4PofCLOoJ39iSOg+qVDdWQPIEj+eszMHQ+aLVwwQSg==",
+          "dev": true,
+          "requires": {
+            "@types/glob": "^7.1.1",
+            "array-union": "^2.1.0",
+            "dir-glob": "^3.0.1",
+            "fast-glob": "^3.0.3",
+            "glob": "^7.1.3",
+            "ignore": "^5.1.1",
+            "merge2": "^1.2.3",
+            "slash": "^3.0.0"
+          }
+        },
+        "ignore": {
+          "version": "5.1.8",
+          "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.1.8.tgz",
+          "integrity": "sha512-BMpfD7PpiETpBl/A6S498BaIJ6Y/ABT93ETbby2fP00v4EbvPBXWEoaR1UBPKs3iR53pJY7EtZk5KACI57i1Uw==",
+          "dev": true
+        },
+        "is-number": {
+          "version": "7.0.0",
+          "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+          "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+          "dev": true
+        },
+        "is-path-inside": {
+          "version": "3.0.2",
+          "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-3.0.2.tgz",
+          "integrity": "sha512-/2UGPSgmtqwo1ktx8NDHjuPwZWmHhO+gj0f93EkhLB5RgW9RZevWYYlIkS6zePc6U2WpOdQYIwHe9YC4DWEBVg==",
+          "dev": true
+        },
+        "micromatch": {
+          "version": "4.0.2",
+          "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.2.tgz",
+          "integrity": "sha512-y7FpHSbMUMoyPbYUSzO6PaZ6FyRnQOpHuKwbo1G+Knck95XVU4QAiKdGEnj5wwoS7PlOgthX/09u5iFJ+aYf5Q==",
+          "dev": true,
+          "requires": {
+            "braces": "^3.0.1",
+            "picomatch": "^2.0.5"
+          }
+        },
+        "path-type": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
+          "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
+          "dev": true
+        },
+        "rimraf": {
+          "version": "3.0.2",
+          "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
+          "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
+          "dev": true,
+          "requires": {
+            "glob": "^7.1.3"
+          }
+        },
+        "slash": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
+          "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
+          "dev": true
+        },
+        "to-regex-range": {
+          "version": "5.0.1",
+          "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+          "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+          "dev": true,
+          "requires": {
+            "is-number": "^7.0.0"
+          }
+        }
+      }
+    },
     "util": {
       "version": "0.11.1",
       "resolved": "https://registry.npmjs.org/util/-/util-0.11.1.tgz",
diff --git a/package.json b/package.json
index af344ce..931cc9a 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,7 @@
   },
   "main": "dist/vue-png-explainer.common.js",
   "scripts": {
-    "serve": "vue-cli-service serve",
+    "serve": "vue-cli-service serve demo/main.js",
     "build-lib": "vue-cli-service build --target lib src/components/index.js",
     "lint": "vue-cli-service lint",
     "release": "semantic-release --branches main"
@@ -30,6 +30,7 @@
     "node-sass": "^4.14.1",
     "sass-loader": "^9.0.2",
     "semantic-release": "^17.1.1",
+    "uswds": "^2.8.0",
     "vue-template-compiler": "^2.6.11"
   },
   "eslintConfig": {
diff --git a/src/components/Expandable.vue b/src/components/Expandable.vue
index 397463b..aaf25b4 100644
--- a/src/components/Expandable.vue
+++ b/src/components/Expandable.vue
@@ -1,31 +1,31 @@
 <template>
-  <li class="expandable mx-2 my-2">
+  <div class="expandable margin-x-2 margin-y-2">
     <header
-      class="level is-mobile expandable-header mb-0 px-3 py-2"
-      v-bind:class="classObject"
+      class="expandable-header margin-bottom-0 usa-accordion__heading"
       @click="onSelect"
-      @keyup.enter="onSelect"
       @mouseover="setActive(true)"
       @mouseout="setActive(false)"
       @focus="setActive(true)"
       @blur="setActive(false)"
       tabindex="0"
       role="button"
-      :aria-pressed="expanded">
-      <div class="level-left">
-        <h4 class="level-item is-size-4">{{ title }}</h4>
-      </div>
+      :aria-pressed="expanded"
+    >
 
-      <div class="level-right">
-        <p v-if="expanded" class="level-item">hide</p>
-        <p v-else class="level-item">show</p>
-      </div>
+      <button
+        class="usa-accordion__button"
+        v-bind:class="classObject"
+        :aria-expanded="expanded ? 'true' : 'false'"
+        :aria-controls="'a-'+areaid"
+      >
+        {{ title }}
+      </button>
     </header>
 
-    <div v-show="expanded" class="px-3 py-3 has-background-white-ter is-size-6">
+    <div v-show="expanded" :id="'a-'+areaid" class="bg-base-lightest usa-accordion__content usa-prose">
       <slot></slot>
     </div>
-  </li>
+  </div>
 </template>
 
 <script>
@@ -43,6 +43,9 @@ export default {
     activeHover: {
       type: Boolean,
       default: false
+    },
+    areaid: {
+      required: true
     }
   },
   methods: {
@@ -60,9 +63,8 @@ export default {
   computed: {
     classObject: function () {
       return {
-        'has-background-grey-lighter': !this.expanded,
-        'has-background-primary': this.expanded,
-        'active-hover': this.activeHover
+        'bg-base-light': !this.expanded,
+        'bg-primary-light': this.expanded
       }
     }
   }
@@ -73,9 +75,4 @@ export default {
 .expandable-header {
   cursor: pointer;
 }
-
-.active-hover {
-  border-style: solid;
-  border-radius: 4px;
-}
 </style>
diff --git a/src/components/Explainer.vue b/src/components/Explainer.vue
index 7c17430..da3f4aa 100644
--- a/src/components/Explainer.vue
+++ b/src/components/Explainer.vue
@@ -1,21 +1,22 @@
 <template>
-  <div class="columns is-tablet">
-    <div class="column">
-      <ExplainerImage
-        :imageSrc="imageSrc"
-        :areas="areas"
-        :clickedId="clickedId"
-        :activeId="activeId"
-        @change-clicked="setClicked"
-        @change-active="setActive"
-        />
-    </div>
+  <div class="grid-containter">
+    <div class="grid-row">
+      <div class="tablet:grid-col">
+        <ExplainerImage
+          :imageSrc="imageSrc"
+          :areas="areas"
+          :clickedId="clickedId"
+          :activeId="activeId"
+          @change-clicked="setClicked"
+          @change-active="setActive"
+          />
+      </div>
 
-    <div class="column">
-      <ul>
+      <div class="tablet:grid-col usa-accordion usa-accordion--bordered ">
         <Expandable
           v-for="area in areas"
           :key="area.id"
+          :areaid="area.id"
           :title="area.title"
           :expanded="clickedId === area.id"
           :activeHover="activeId === area.id"
@@ -25,7 +26,7 @@
           >
           <span v-html="area.description"></span>
         </Expandable>
-      </ul>
+      </div>
     </div>
   </div>
 </template>
diff --git a/src/components/ExplainerImageHighlight.vue b/src/components/ExplainerImageHighlight.vue
index 7ee8b70..913c62d 100644
--- a/src/components/ExplainerImageHighlight.vue
+++ b/src/components/ExplainerImageHighlight.vue
@@ -54,8 +54,8 @@ export default {
   computed: {
     classObject: function () {
       return {
-        'has-background-primary-light': !this.highlighted,
-        'has-background-primary': this.highlighted,
+        'bg-primary-light': !this.highlighted,
+        'bg-primary': this.highlighted,
         'active-hover': this.activeHover
       }
     }

From c1cf1407c8c62f7c1204d7d0099fa42577337a89 Mon Sep 17 00:00:00 2001
From: mcmcgrath13 <m.c.mcgrath13@gmail.com>
Date: Wed, 22 Jul 2020 13:05:47 -0400
Subject: [PATCH 2/3] docs: update readme, remove bulma from dependencies

---
 README.md         | 24 ++++++++++++++++++++++++
 package-lock.json |  5 -----
 package.json      |  1 -
 3 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/README.md b/README.md
index 43f5f8d..8f7b5b5 100644
--- a/README.md
+++ b/README.md
@@ -2,6 +2,30 @@
 
 An explainer inspired by [CFPB's home closing site](https://www.consumerfinance.gov/owning-a-home/closing-disclosure/).
 
+## Installation:
+
+If you haven't logged into the github package repository, you'll need to run:
+
+```bash
+npm login --repository https://npm.pkg.github.com
+```
+
+If you're using 2FA, you'll need to create a Personal Access Token with all the `repo:` and `read:packages` scopes.
+This will be your password when prompted.
+
+After that is taken care of, you can just run:
+
+```bash
+npm install @brown-ccv/vue-png-explainer
+```
+
+This component is designed to work with the [US Web Design System](https://designsystem.digital.gov/).  Add the below to your `main.js` after importing `Vue` to get styling:
+
+```
+import './../node_modules/uswds/dist/css/uswds.min.css';
+import './../node_modules/uswds/dist/js/uswds.min.js';
+```
+
 ## Prerequisites
 ```
 npm install -g @vue/cli
diff --git a/package-lock.json b/package-lock.json
index 336229a..77d65bc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3432,11 +3432,6 @@
       "integrity": "sha1-hZgoeOIbmOHGZCXgPQF0eI9Wnug=",
       "dev": true
     },
-    "bulma": {
-      "version": "0.9.0",
-      "resolved": "https://registry.npmjs.org/bulma/-/bulma-0.9.0.tgz",
-      "integrity": "sha512-rV75CJkubNUroAt0qCRkjznZLoaXq/ctfMXsMvKSL84UetbSyx5REl96e8GoQ04G4Tkw0XF3STECffTOQrbzOQ=="
-    },
     "bytes": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.0.tgz",
diff --git a/package.json b/package.json
index 931cc9a..3ec541f 100644
--- a/package.json
+++ b/package.json
@@ -15,7 +15,6 @@
     "release": "semantic-release --branches main"
   },
   "dependencies": {
-    "bulma": "^0.9.0",
     "core-js": "^3.6.5",
     "lodash": "^4.17.19",
     "vue": "^2.6.11"

From 4d5924ef251245317381e83991de5b500c641308 Mon Sep 17 00:00:00 2001
From: mcmcgrath13 <m.c.mcgrath13@gmail.com>
Date: Wed, 22 Jul 2020 13:06:46 -0400
Subject: [PATCH 3/3] docs: update prereqs/serve

---
 README.md | 11 ++---------
 1 file changed, 2 insertions(+), 9 deletions(-)

diff --git a/README.md b/README.md
index 8f7b5b5..9578e22 100644
--- a/README.md
+++ b/README.md
@@ -26,21 +26,14 @@ import './../node_modules/uswds/dist/css/uswds.min.css';
 import './../node_modules/uswds/dist/js/uswds.min.js';
 ```
 
-## Prerequisites
-```
-npm install -g @vue/cli
-npm install -g @vue/cli-service-global
-```
-
-
 ## Project setup
 ```
 npm install
 ```
 
-### Compiles and hot-reloads for development (requires vue-cli to be globally installed)
+### Compiles and hot-reloads a demo component for development (requires vue-cli to be globally installed)
 ```
-vue serve demo/components/PaginatedExplainer.vue
+npm run serve
 ```
 
 ### Compiles and minifies for production