From 7162ed88c39d7a488feb1ce987e2371a8500027f Mon Sep 17 00:00:00 2001 From: jbot Date: Tue, 13 Nov 2018 19:44:46 -0800 Subject: [PATCH 1/4] Glossary is a WIP. Added 18F glossary to OD. Basic styling accomplished. --- _includes/glossary.html | 8 ++ _layouts/default.html | 2 +- _sass/_module.scss | 1 + _sass/base/_fonts.scss | 1 + _sass/module/_footer.scss | 2 +- _sass/module/_glossary.scss | 176 +++++++++++++++++++++++++++++ assets/images/down-arrow-white.svg | 3 + assets/images/up-arrow-white.svg | 3 + package-lock.json | 31 ++++- package.json | 1 + src/components/glossary.jsx | 18 +++ src/index.jsx | 1 + 12 files changed, 243 insertions(+), 4 deletions(-) create mode 100644 _includes/glossary.html create mode 100644 _sass/module/_glossary.scss create mode 100644 assets/images/down-arrow-white.svg create mode 100644 assets/images/up-arrow-white.svg create mode 100644 src/components/glossary.jsx diff --git a/_includes/glossary.html b/_includes/glossary.html new file mode 100644 index 00000000000..2841a116dad --- /dev/null +++ b/_includes/glossary.html @@ -0,0 +1,8 @@ + + diff --git a/_layouts/default.html b/_layouts/default.html index b11449ed12e..1803f7263b2 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -11,7 +11,7 @@ {{ content }} - + {% include glossary.html %} {% include footer.html %} diff --git a/_sass/_module.scss b/_sass/_module.scss index 542383aeb5f..248869fd24f 100644 --- a/_sass/_module.scss +++ b/_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'; diff --git a/_sass/base/_fonts.scss b/_sass/base/_fonts.scss index 6dfdc154075..0bf23f0da55 100644 --- a/_sass/base/_fonts.scss +++ b/_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; diff --git a/_sass/module/_footer.scss b/_sass/module/_footer.scss index 69daf817987..e144895d838 100644 --- a/_sass/module/_footer.scss +++ b/_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; diff --git a/_sass/module/_glossary.scss b/_sass/module/_glossary.scss new file mode 100644 index 00000000000..2de3dc10ac1 --- /dev/null +++ b/_sass/module/_glossary.scss @@ -0,0 +1,176 @@ +// 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 !important; + right: -100%; + transition: .5s; + } + + &[aria-hidden='false'] { + right: 0; + transition: .3s; + } + + p { + a, + a:active, + a:visited, + a:visited:hover, + a:hover { + color: $color-lochmara-blue; + } + } + + .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; + } + } + + h2 { + color: $color-white; + } + + .label { + color: $color-white; + } + + p { + color: $color-white; + } + + ul { + padding-left: 0; + list-style: none; + } +} + +.glossary__item { + margin-bottom: $spacing-base; + + ol, + ul { + margin-left: $spacing-base * 2; + } +} + +.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; + } +} + +.glossary [data-term]:after { + background-image: url('./images/down-arrow-white.svg'); + fill: $color-white; +} diff --git a/assets/images/down-arrow-white.svg b/assets/images/down-arrow-white.svg new file mode 100644 index 00000000000..135c2a3b562 --- /dev/null +++ b/assets/images/down-arrow-white.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/images/up-arrow-white.svg b/assets/images/up-arrow-white.svg new file mode 100644 index 00000000000..531ad880769 --- /dev/null +++ b/assets/images/up-arrow-white.svg @@ -0,0 +1,3 @@ + + + diff --git a/package-lock.json b/package-lock.json index cf04cba809b..c082ac1a406 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1271,6 +1271,11 @@ "sprintf-js": "~1.0.2" } }, + "aria-accordion": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/aria-accordion/-/aria-accordion-1.0.0.tgz", + "integrity": "sha1-LcsluobJesINJYw/zccQhj+eoqI=" + }, "aria-query": { "version": "0.7.1", "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-0.7.1.tgz", @@ -2510,7 +2515,7 @@ }, "buffer": { "version": "4.9.1", - "resolved": "http://registry.npmjs.org/buffer/-/buffer-4.9.1.tgz", + "resolved": "https://registry.npmjs.org/buffer/-/buffer-4.9.1.tgz", "integrity": "sha1-bRu2AbB6TvztlwlBMgkwJ8lbwpg=", "requires": { "base64-js": "^1.0.2", @@ -5431,6 +5436,23 @@ "sparkles": "^1.0.0" } }, + "glossary-panel": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/glossary-panel/-/glossary-panel-1.0.0.tgz", + "integrity": "sha1-tHSlMJxyQcLS2uwTtE4F3HDtsfs=", + "requires": { + "aria-accordion": "1.0.0", + "list.js": "1.3.0", + "underscore": "^1.8.3" + }, + "dependencies": { + "underscore": { + "version": "1.9.1", + "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.9.1.tgz", + "integrity": "sha512-5/4etnCkd9c8gwgowi5/om/mYO5ajCaOgdzj/oW+0eQV9WxKBDZw5+ycmKmeaTXjInS/W0BzpGLo2xR2aBwZdg==" + } + } + }, "got": { "version": "8.3.1", "resolved": "https://registry.npmjs.org/got/-/got-8.3.1.tgz", @@ -6967,6 +6989,11 @@ "resolved": "https://registry.npmjs.org/lightercollective/-/lightercollective-0.1.0.tgz", "integrity": "sha512-J9tg5uraYoQKaWbmrzDDexbG6hHnMcWS1qLYgJSWE+mpA3U5OCSeMUhb+K55otgZJ34oFdR0ECvdIb3xuO5JOQ==" }, + "list.js": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/list.js/-/list.js-1.3.0.tgz", + "integrity": "sha1-bJ+cEGpqniaBv0GCPuT8EGehZFw=" + }, "listr": { "version": "0.14.1", "resolved": "https://registry.npmjs.org/listr/-/listr-0.14.1.tgz", @@ -9886,7 +9913,7 @@ }, "readable-stream": { "version": "2.3.6", - "resolved": "http://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz", + "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz", "integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==", "requires": { "core-util-is": "~1.0.0", diff --git a/package.json b/package.json index 28cf43ba220..33ba5e8aca9 100644 --- a/package.json +++ b/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", diff --git a/src/components/glossary.jsx b/src/components/glossary.jsx new file mode 100644 index 00000000000..0108d5aa9c5 --- /dev/null +++ b/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)); diff --git a/src/index.jsx b/src/index.jsx index 051444cb89a..ad06295cf6e 100644 --- a/src/index.jsx +++ b/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'; From 7b19d97a32b5f4dae04df65a31f0ad00cb9fbfc2 Mon Sep 17 00:00:00 2001 From: jbot Date: Tue, 13 Nov 2018 20:11:32 -0800 Subject: [PATCH 2/4] Passing lint --- _sass/module/_glossary.scss | 75 ++++++++++++++++++------------------- 1 file changed, 37 insertions(+), 38 deletions(-) diff --git a/_sass/module/_glossary.scss b/_sass/module/_glossary.scss index 2de3dc10ac1..89b399b1410 100644 --- a/_sass/module/_glossary.scss +++ b/_sass/module/_glossary.scss @@ -15,7 +15,7 @@ $background-color: $color-lochmara-blue; z-index: $z-header-nav; &[aria-hidden='true'] { - display: block !important; + display: block; right: -100%; transition: .5s; } @@ -25,42 +25,6 @@ $background-color: $color-lochmara-blue; transition: .3s; } - p { - a, - a:active, - a:visited, - a:visited:hover, - a:hover { - color: $color-lochmara-blue; - } - } - - .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; - } - } - h2 { color: $color-white; } @@ -79,6 +43,32 @@ $background-color: $color-lochmara-blue; } } +.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; @@ -86,7 +76,16 @@ $background-color: $color-lochmara-blue; 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; From 96f97695106a6310958f6b580cc0c9c76b701bbd Mon Sep 17 00:00:00 2001 From: jbot Date: Tue, 13 Nov 2018 20:16:35 -0800 Subject: [PATCH 3/4] Passing lint x2 --- _sass/module/_glossary.scss | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/_sass/module/_glossary.scss b/_sass/module/_glossary.scss index 89b399b1410..bf77ee372d1 100644 --- a/_sass/module/_glossary.scss +++ b/_sass/module/_glossary.scss @@ -41,6 +41,11 @@ $background-color: $color-lochmara-blue; padding-left: 0; list-style: none; } + + [data-term]::after { + background-image: url('./images/down-arrow-white.svg'); + fill: $color-white; + } } .glossary-close { @@ -156,8 +161,8 @@ $background-color: $color-lochmara-blue; cursor: pointer; text-decoration: underline dotted; white-space: nowrap; // prevent glossary icon from wrapping - &:after { - content: ""; + &::after { + content: ''; width: 1em; height: 0.7em; background-image: url('./images/down-arrow-white.svg'); @@ -168,8 +173,3 @@ $background-color: $color-lochmara-blue; margin-right: 0.5rem; } } - -.glossary [data-term]:after { - background-image: url('./images/down-arrow-white.svg'); - fill: $color-white; -} From 92631956c7fa31dc43e60dbf5621fc981028fd34 Mon Sep 17 00:00:00 2001 From: jbot Date: Tue, 13 Nov 2018 20:18:34 -0800 Subject: [PATCH 4/4] Passing lint x3 --- _sass/module/_glossary.scss | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/_sass/module/_glossary.scss b/_sass/module/_glossary.scss index bf77ee372d1..92784d5c478 100644 --- a/_sass/module/_glossary.scss +++ b/_sass/module/_glossary.scss @@ -82,12 +82,12 @@ $background-color: $color-lochmara-blue; margin-left: $spacing-base * 2; } - a, - a:active, - a:visited, - a:visited:hover, - a:hover { - color: $color-lochmara-blue; + a, + a:active, + a:visited, + a:visited:hover, + a:hover { + color: $color-lochmara-blue; } }