@code.gov/code-gov-style - npm Package Compare versions

Comparing version 1.15.0 to 1.16.0

dist/js/code-gov-web-components.js

@@ -359,2 +359,116 @@ 'use strict';
 customElements.define('filter-tag', FilterTag);
+'use strict';
+
+function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _wrapNativeSuper(Class) { var _cache = typeof Map === "function" ? new Map() : undefined; _wrapNativeSuper = function _wrapNativeSuper(Class) { if (Class === null || !_isNativeFunction(Class)) return Class; if (typeof Class !== "function") { throw new TypeError("Super expression must either be null or a function"); } if (typeof _cache !== "undefined") { if (_cache.has(Class)) return _cache.get(Class); _cache.set(Class, Wrapper); } function Wrapper() { return _construct(Class, arguments, _getPrototypeOf(this).constructor); } Wrapper.prototype = Object.create(Class.prototype, { constructor: { value: Wrapper, enumerable: false, writable: true, configurable: true } }); return _setPrototypeOf(Wrapper, Class); }; return _wrapNativeSuper(Class); }
+
+function isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+
+function _construct(Parent, args, Class) { if (isNativeReflectConstruct()) { _construct = Reflect.construct; } else { _construct = function _construct(Parent, args, Class) { var a = [null]; a.push.apply(a, args); var Constructor = Function.bind.apply(Parent, a); var instance = new Constructor(); if (Class) _setPrototypeOf(instance, Class.prototype); return instance; }; } return _construct.apply(null, arguments); }
+
+function _isNativeFunction(fn) { return Function.toString.call(fn).indexOf("[native code]") !== -1; }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+(function () {
+  var smallUsFlagURI = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAALCAMAAABBPP0LAAAAG1BMVEUdM7EeNLIeM7HgQCDaPh/bPh/bPx/////bPyBEby41AAAAUElEQVQI123MNw4CABDEwD3jC/9/MQ1BQrgeOSkIqYe2o2FZtthXgQLgbHVMZdlsfUQFQnHtjP1+8BUhBDKOqtmfot6ojqPzR7TjdU+f6vkED+IDPhTBcMAAAAAASUVORK5CYII=";
+  var dotGovIconURI = 'data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1NCA1NCI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOiMyMzc4YzM7fS5jbHMtMntmaWxsOm5vbmU7c3Ryb2tlOiMwMDVlYTI7c3Ryb2tlLW1pdGVybGltaXQ6MTA7fTwvc3R5bGU+PC9kZWZzPjx0aXRsZT5kb3QgZ292IGljb248L3RpdGxlPjxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTM2LjUsMjAuOTF2MS4zNkgzNS4xNWEwLjcxLDAuNzEsMCwwLDEtLjczLjY4SDE4LjIzYTAuNzEsMC43MSwwLDAsMS0uNzMtMC42OEgxNi4xNFYyMC45MWwxMC4xOC00LjA3Wm0wLDEzLjU3djEuMzZIMTYuMTRWMzQuNDhhMC43MSwwLjcxLDAsMCwxLC43My0wLjY4aDE4LjlBMC43MSwwLjcxLDAsMCwxLDM2LjUsMzQuNDhaTTIxLjU3LDIzLjYydjguMTRoMS4zNlYyMy42MmgyLjcxdjguMTRIMjdWMjMuNjJoMi43MXY4LjE0aDEuMzZWMjMuNjJoMi43MXY4LjE0aDAuNjNhMC43MSwwLjcxLDAsMCwxLC43My42OHYwLjY4SDE3LjVWMzIuNDVhMC43MSwwLjcxLDAsMCwxLC43My0wLjY4aDAuNjNWMjMuNjJoMi43MVoiLz48Y2lyY2xlIGNsYXNzPSJjbHMtMiIgY3g9IjI3IiBjeT0iMjcuMTIiIHI9IjI2Ii8+PC9zdmc+';
+  var httpsIconURI = 'data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1NCA1NCI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOiM3MTlmMmE7fS5jbHMtMntmaWxsOm5vbmU7c3Ryb2tlOiM1MzgyMDA7c3Ryb2tlLW1pdGVybGltaXQ6MTA7fTwvc3R5bGU+PC9kZWZzPjx0aXRsZT5odHRwcyBpY29uPC90aXRsZT48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik0zNC43MiwzNC44NGExLjI5LDEuMjksMCwwLDEtMS4yOSwxLjI5SDIwLjU3YTEuMjksMS4yOSwwLDAsMS0xLjI5LTEuMjlWMjcuMTJhMS4yOSwxLjI5LDAsMCwxLDEuMjktMS4yOUgyMVYyMy4yNmE2LDYsMCwwLDEsMTIsMHYyLjU3aDAuNDNhMS4yOSwxLjI5LDAsMCwxLDEuMjksMS4yOXY3LjcyWm0tNC4yOS05VjIzLjI2YTMuNDMsMy40MywwLDAsMC02Ljg2LDB2Mi41N2g2Ljg2WiIvPjxjaXJjbGUgY2xhc3M9ImNscy0yIiBjeD0iMjciIGN5PSIyNy4xMiIgcj0iMjYiLz48L3N2Zz4=';
+  /*global HTMLElement*/
+
+  var GovBanner =
+  /*#__PURE__*/
+  function (_HTMLElement) {
+    _inherits(GovBanner, _HTMLElement);
+
+    function GovBanner() {
+      var _this;
+
+      _classCallCheck(this, GovBanner);
+
+      // establish prototype chain
+      _this = _possibleConstructorReturn(this, _getPrototypeOf(GovBanner).call(this));
+      _this.toggleAccordion = _this.toggleAccordion.bind(_assertThisInitialized(_this));
+      _this.isCollapsed = true;
+      return _this;
+    } // fires after the element has been attached to the DOM
+
+
+    _createClass(GovBanner, [{
+      key: "connectedCallback",
+      value: function connectedCallback() {
+        this.render();
+        this.postRenderActions();
+      }
+    }, {
+      key: "postRenderActions",
+      value: function postRenderActions() {
+        this.buttonToggle = this.querySelector('button.usa-accordion__button');
+        this.bannerHeader = this.querySelector('header.usa-banner__header');
+        this.accordionContent = this.querySelector('div.usa-banner__content');
+        this.buttonToggle.addEventListener('click', this.toggleAccordion);
+      }
+    }, {
+      key: "toggleAccordion",
+      value: function toggleAccordion() {
+        if (this.buttonToggle.getAttribute('aria-expanded') === 'true') {
+          this.collapseBanner();
+        } else {
+          this.expandBanner();
+        }
+      }
+    }, {
+      key: "disconnectedCallback",
+      value: function disconnectedCallback() {
+        this.buttonToggle.removeEventListener('click', this.toggleAccordion);
+      }
+    }, {
+      key: "expandBanner",
+      value: function expandBanner() {
+        this.accordionContent.removeAttribute('hidden');
+        this.buttonToggle.setAttribute('aria-expanded', 'true');
+        this.bannerHeader.classList.add('usa-banner__header--expanded');
+        this.isCollapsed = false;
+      }
+    }, {
+      key: "collapseBanner",
+      value: function collapseBanner() {
+        this.accordionContent.setAttribute('hidden', '');
+        this.buttonToggle.setAttribute('aria-expanded', 'false');
+        this.bannerHeader.classList.remove('usa-banner__header--expanded');
+        this.isCollapsed = true;
+      }
+    }, {
+      key: "render",
+      value: function render() {
+        var isCollapsed = this.isCollapsed;
+        var hiddenString = isCollapsed ? 'hidden' : '';
+        var ariaExpandedString = isCollapsed ? 'false' : 'true';
+        this.innerHTML = "\n      <div class=\"usa-banner\">\n        <div class=\"usa-accordion\">\n            <header class=\"usa-banner__header\">\n                <div class=\"usa-banner__inner\">\n                    <div class=\"grid-col-auto\">\n                        <img class=\"usa-banner__header-flag\" src=".concat(smallUsFlagURI, " alt=\"U.S. flag\">\n                    </div>\n                    <div class=\"grid-col-fill tablet:grid-col-auto\">\n                        <p class=\"usa-banner__header-text\">An official website of the United States government</p>\n                        <p class=\"usa-banner__header-action\" aria-hidden=\"true\">Here\u2019s how you know</p>\n                    </div>\n                    <button class=\"usa-accordion__button usa-banner__button\" aria-expanded=").concat(ariaExpandedString, " aria-controls=\"gov-banner\">\n                      <span class=\"usa-banner__button-text\">Here\u2019s how you know</span>\n                    </button>\n                </div>\n            </header>\n            <div class=\"usa-banner__content usa-accordion__content\" id=\"gov-banner\" ").concat(hiddenString, ">\n                <div class=\"grid-row grid-gap-lg\">\n                    <div class=\"usa-banner__guidance tablet:grid-col-6\">\n                        <img class=\"usa-banner__icon usa-media-block__img\" src=").concat(dotGovIconURI, " alt=\"Dot gov\">\n                        <div class=\"usa-media-block__body\">\n                            <p>\n                                <strong>The .gov means it\u2019s official.</strong>\n                                <br> Federal government websites often end in .gov or .mil. Before sharing sensitive information, make sure you\u2019re on a federal government site.\n                            </p>\n                        </div>\n                    </div>\n                    <div class=\"usa-banner__guidance tablet:grid-col-6\">\n                        <img class=\"usa-banner__icon usa-media-block__img\" src=").concat(httpsIconURI, " alt=\"Https\">\n                        <div class=\"usa-media-block__body\">\n                            <p>\n                                <strong>The site is secure.</strong>\n                                <br> The <strong>https://</strong> ensures that you are connecting to the official website and that any information you provide is encrypted and transmitted securely.\n                            </p>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n      </div>\n      ");
+      }
+    }]);
+
+    return GovBanner;
+  }(_wrapNativeSuper(HTMLElement)); // let the browser know about the custom element
+
+  /*global customElements*/
+
+
+  customElements.define('gov-banner', GovBanner);
+})();
 "use strict";
@@ -361,0 +475,0 @@ 'use strict';

package.json

 {
   "name": "@code.gov/code-gov-style",
-  "version": "1.15.0",
+  "version": "1.16.0",
   "description": "Style for code.gov including buttons, banners, and cards. Inspired by and somewhat based on USWDS.",
@@ -13,3 +13,3 @@ "main": "index.js",
     "update-assets": "cp dist/js/* assets/js/. && cp node_modules/prismjs/prism.js assets/js/. && cp node_modules/@webcomponents/custom-elements/custom-elements.min.js.map assets/js/.",
-    "update-custom-elements": "npm install -S @webcomponents/custom-elements && cd node_modules/@webcomponents/custom-elements && npm install && npm build",
+    "update-custom-elements": "npm install -S @webcomponents/custom-elements && cd node_modules/@webcomponents/custom-elements && npm install",
     "update-font": "cd bash_scripts && bash update-font.sh",
@@ -38,3 +38,3 @@ "update-polyfills": "cat ./node_modules/@babel/polyfill/dist/polyfill.min.js ./node_modules/custom-event-polyfill/polyfill.js ./node_modules/@webcomponents/custom-elements/custom-elements.min.js > dist/js/polyfills.js",
     "@babel/polyfill": "^7.0.0",
-    "@code.gov/code-gov-font": "0.7.1",
+    "@code.gov/code-gov-font": "0.8.0",
     "@webcomponents/custom-elements": "^1.2.4",
@@ -41,0 +41,0 @@ "custom-event-polyfill": "^1.0.6",

README.md

 # code-gov-style
 
+[![Build Status](https://circleci.com/gh/GSA/code-gov-style/tree/master.svg?style=svg)](https://circleci.com/gh/GSA/code-gov-style/tree/master)
+
 Style for code.gov including buttons, banners, and cards. Inspired by and somewhat based on USWDS.
@@ -19,3 +21,3 @@
 - In your terminal, run `bundle install` to add all ruby gems
-  - (Note - your Bundler version should be >1.17.3. To install Bundler, run `gem intall bundler` from your terminal)
+  - (Note - your Bundler version should be >1.17.3. To install Bundler, run `gem install bundler` from your terminal)
 - To serve the [Code.gov Style Guide](https://gsa.github.io/code-gov-style/) locally, in your terminal, run `npm run-script serve`
@@ -22,0 +24,0 @@ - This should output what the server address is on your local machine.

No alert changes

Improved metrics

Total package byte prevSize

1255993

increased by1.95%

Number of package files

130

increased by1.56%

Lines of code

3360

increased by6.77%

Number of lines in readme file

73

increased by2.82%

Dependency changes

• + [e-mail]/code-gov-font@0.8.0(transitive)

• - [e-mail]/code-gov-font@0.7.1(transitive)

• [e-mail]/code-gov-font@0.8.0