Glossary is a WIP. Added 18F glossary to OD. Basic styling accomplished.

_includes/glossary.html

@@ -0,0 +1,8 @@
+<button class="js-glossary-toggle glossary-toggle">Glossary</button>
+<div id="glossary" class="glossary" aria-describedby="glossary-title" aria-hidden="true">
+  <button title="Close glossary" class="js-glossary-close glossary-close"><span class="usa-sr-only">Hide glossary</span></button>
+  <h2 id="glossary-title">Glossary</h2>
+  <label class="glossary-search" for="glossary-search">Filter glossary terms</label>
+  <input id="glossary-search" class="js-glossary-search" type="search" placeholder="e.g. Committee">
+  <ul class="js-glossary-list"></ul>
+</div>

_layouts/default.html

@@ -11,7 +11,7 @@
         {{ content }}
       </div>
     </main>
-
+    {% include glossary.html %}
     {% include footer.html %}
     <script src="{{site.baseurl}}/assets/js/bundle.js" charset="utf-8"></script>
   </body>

_sass/_module.scss

@@ -8,6 +8,7 @@
 @import 'module/contributors';
 @import 'module/election-header';
 @import 'module/footer';
+@import 'module/glossary';
 @import 'module/header';
 @import 'module/header-nav';
 @import 'module/hero';

_sass/base/_fonts.scss

@@ -1,5 +1,6 @@
 $font-family-sans-serif: 'Roboto', sans-serif !default;
 
+$font-weight-lightest: 100;
 $font-weight-light: 300;
 $font-weight-normal: 400;
 $font-weight-bold: 700;

_sass/module/_footer.scss

@@ -2,7 +2,7 @@
   @extend %section-border--major;
   @include font-size($font-size-small);
   background-color: $color-grey-5;
-  padding-bottom: $spacing-base * 2;
+  padding-bottom: $spacing-base * 6;
 
   a {
     text-decoration: none;

_sass/module/_glossary.scss

@@ -0,0 +1,175 @@
+// Borrowed from FEC
+$background-color: $color-lochmara-blue;
+
+.glossary {
+//  @include transition(right, .3s);
+  background-color: $background-color;
+  bottom: 0;
+  color: $color-white;
+  max-width: 30rem;
+  overflow-y: scroll;
+  padding: 3rem;
+  position: fixed;
+  top: 0;
+  width: 75%;
+  z-index: $z-header-nav;
+
+  &[aria-hidden='true'] {
+    display: block;
+    right: -100%;
+    transition: .5s;
+  }
+
+  &[aria-hidden='false'] {
+    right: 0;
+    transition: .3s;
+  }
+
+  h2 {
+    color: $color-white;
+  }
+
+  .label {
+    color: $color-white;
+  }
+
+  p {
+    color: $color-white;
+  }
+
+  ul {
+    padding-left: 0;
+    list-style: none;
+  }
+
+  [data-term]::after {
+    background-image: url('./images/down-arrow-white.svg');
+    fill: $color-white;
+  }
+}
+
+.glossary-close {
+  background-color: $background-color;
+  background-image: url('data:image/svg+xml;charset=utf8, %3Csvg%20%20fill%3D%27%23ffffff%27%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M15.053%205.856a1.234%201.234%200%200%200-1.747-1.745l-3.9%203.895h.353L5.857%204.11a1.234%201.234%200%200%200-1.746%201.745l3.9%203.896v-.353l-3.9%203.895a1.234%201.234%200%200%200%201.746%201.745l3.9-3.895h-.353l3.9%203.895c.23.23.543.36.874.36a1.234%201.234%200%200%200%20.873-2.105l-3.9-3.895v.354l3.9-3.894z%22%2F%3E%3C%2Fsvg%3E');
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-size: 50%;
+  border: 0;
+  color: $color-white;
+  height: 4rem;
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 4rem;
+
+  &:active,
+  &:hover {
+    background-color: $background-color;
+    color: $color-white;
+  }
+
+  span {
+    position: absolute;
+    left: -999em;
+  }
+}
+
+.glossary__item {
+  margin-bottom: $spacing-base;
+
+  ol,
+  ul {
+    margin-left: $spacing-base * 2;
+  }
+
+  a,
+  a:active,
+  a:visited,
+  a:visited:hover,
+  a:hover {
+    color: $color-lochmara-blue;
+    }
+  }
+
+
+.glossary__term {
+  background-color: $background-color;
+  background-image: url('./images/down-arrow-white.svg');
+  background-position: 100% 50%;
+  background-repeat: no-repeat;
+  border: none;
+  border-bottom: 1px solid $color-white;
+  border-color: $color-white;
+  color: $color-white;
+  padding-left: 0;
+  padding-bottom: $spacing-base;
+  text-align: left;
+  width: 100%;
+  text-transform: capitalize;
+
+
+  &[aria-expanded=true] {
+    background-image: url('./images/up-arrow-white.svg');
+  }
+
+  &:active,
+  &:hover {
+    background-color: $background-color;
+    color: $color-white;
+  }
+}
+
+.glossary__definition {
+  margin-top: $spacing-base * 2;
+  margin-bottom: $spacing-base * 2.5;
+  font-weight: $font-weight-lightest;
+}
+
+.glossary-toggle {
+  background-color: $brand-color;
+  color: $color-white;
+  font-weight: $font-weight-normal;
+  border: none;
+  bottom: 0;
+  margin: 0;
+  padding: 1rem 2rem;
+  position: fixed;
+
+  @media all and (min-width: $grid--small) {
+    right: 2rem;
+  }
+
+  @media print {
+    display: none;
+  }
+}
+
+.glossary-search {
+  padding: 0;
+  padding-top: 1rem;
+  width: calc(100% - 1.4em);
+  font-weight: $font-weight-lightest;
+}
+
+.glossary-search-label {
+  font-size: 1.4rem;
+}
+
+
+// Term classes
+[data-term] {
+  cursor: pointer;
+  text-decoration: underline dotted;
+  white-space: nowrap; // prevent glossary icon from wrapping
+  &::after {
+    content: '';
+    width: 1em;
+    height: 0.7em;
+    background-image: url('./images/down-arrow-white.svg');
+    fill: $color-white;
+    background-repeat: no-repeat;
+    display: inline-block;
+    margin-left: 0.3rem;
+    margin-right: 0.5rem;
+  }
+}

package.json

@@ -44,6 +44,7 @@
     "@babel/preset-react": "^7.0.0",
     "babel-loader": "^8.0.2",
     "document-register-element": "^1.11.0",
+    "glossary-panel": "^1.0.0",
     "lodash": "^4.17.10",
     "moment": "^2.22.2",
     "prop-types": "^15.6.2",

src/components/glossary.jsx

@@ -0,0 +1,18 @@
+const Glossary = require('glossary-panel');
+
+// JSON file of terms and definitions
+// var terms = require('terms');
+
+const terms = [
+  { term: 'adjustments', definition: 'A way to go back and fix past financial statements that were misstated because of a reporting error. Adjustments are used to fix mathematical errors, improper accounting methods, and overlooked facts in past periods.' },
+  { term: 'advocacy group', definition: 'An organized group of people who use various forms of advocacy to influence public opinion and/or policy. For types of groups see https://www.opensecrets.org/527s/types.php.' },
+  { term: 'auto-dialer', definition: 'An electronic device or software that automatically dials telephone numbers. Once the call has been answered, the autodialer either plays a recorded message or connects the call to a live person. Under the California Political Reform Act, certain telephone calls must include a disclaimer. (See FPPC Campaign Manual 8.10-11 for details.)' },
+  { term: 'ballot', definition: 'The piece of paper, containing ballot measures, that a voter fills out on a specific day for a specific locality.' },
+  { term: 'ballot committee', definition: 'According to the SoS, ballot measure committees are committees receiving money for promoting or defeating an initiative, referendum, recall petition, or any measure which has qualified for the ballot. See "How Is A Measure Committee Required To Use Its Funds?" in this document.' },
+];
+
+// Optional configurion objects
+// var selectors = { ... };
+// var classes = { ... };
+
+document.addEventListener('DOMContentLoaded', new Glossary(terms));

src/index.jsx

@@ -1,2 +1,3 @@
 // We need to include our components so they are included in the bundle
 import './components/contributions-table';
+import './components/glossary';