Merge pull request #1 from brown-ccv/design-uswds

Design uswds

README.md

@@ -2,21 +2,38 @@
 
 An explainer inspired by [CFPB's home closing site](https://www.consumerfinance.gov/owning-a-home/closing-disclosure/).
 
-## Prerequisites
+## 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
 ```
-npm install -g @vue/cli
-npm install -g @vue/cli-service-global
+
+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';
+```
 
 ## 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

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>

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',

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')