govuk_publishing_components 13.5.4 → 13.6.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 93fab2d996e30368c246e96ba84d3c6f8034c619dee13791b3f209ae67ded1cb
-  data.tar.gz: fbaff11c00bd6487bc157fc927a173011cfc32857c7476705182d7ab724c1d1e
+  metadata.gz: 74c6e51c7088b181de04ef57ae76940aefae824b491ad96fd968803e88b7a898
+  data.tar.gz: 43288c76f2513aa1026a39994d6d4bbb199965c4cbdacafa891f33f2ed13814c
 SHA512:
-  metadata.gz: fad9c0567d6e603a133066c0a03f4a31419b51baf7e04a2e618d1d5efd5f2b0d20019fff7814d79685b4f011685a73530182741107077b481f1f91a6941be6fc
-  data.tar.gz: 90d2b3b7226d9e831789704b7477684c90e9469ec94316a87b59c1fb8a43cd7bb16d59342250469c184fa5fcea4618f2091591dfb46063c30633f813a88d5ce3
+  metadata.gz: f043abefc18b6ac6ed2b9784de8db39c7d509414b01b2d54f45587a467361eca99ea7a695bb1761c522f02270076b779b48d3370aa88f0e6e42124059711d077
+  data.tar.gz: 1333493ea99ea646a7573948912ac95ae8b5c78a73df9d6b21c124536b173f37603274a15d68a372431acbb292b9fe546ee900808367b20f24ca9b8ee68aa980

data/app/assets/javascripts/component_guide/filter-components.js

@@ -0,0 +1,32 @@
+(function() {
+  window.GOVUK = window.GOVUK || {};
+
+  window.GOVUK.FilterComponents = function filterList(searchTerm) {
+    var itemsToFilter = document.querySelectorAll('.component-list li');
+
+    for (var i = 0; i < itemsToFilter.length; i++ ) {
+      var currentComponent = itemsToFilter[i];
+      var componentText = currentComponent.innerText.toLowerCase();
+
+      if (componentText.includes(searchTerm.toLowerCase())) {
+        currentComponent.classList.remove('component-guide-hidden');
+      } else {
+        currentComponent.classList.add('component-guide-hidden');
+      }
+    }
+  };
+
+  var formElement = document.querySelector('[data-module=filter-components]');
+
+  if (formElement) {
+    var searchField = formElement.querySelector('input');
+
+    // We don't want the form to submit/refresh the page on enter key
+    formElement.addEventListener('submit', function(e) { e.preventDefault(); });
+
+    searchField.addEventListener('input', function(e) {
+      var searchTerm = searchField.value;
+      window.GOVUK.FilterComponents(searchTerm);
+    });
+  }
+})();

data/app/assets/stylesheets/component_guide/application.scss

@@ -24,10 +24,23 @@
   }
 }
 
+.component-search {
+  display: none;
+
+  .js-enabled & {
+    display: block;
+    margin-top: $govuk-gutter * 2;
+  }
+}
+
 .component-body {
   margin-bottom: $govuk-gutter * 1.5;
 }
 
+.component-guide-hidden {
+  display: none;
+}
+
 .component-doc {
   @include govuk-font($size: 16);
 

data/app/views/govuk_publishing_components/component_guide/index.html.erb

@@ -10,6 +10,12 @@
   <p>See the <a href="https://github.com/alphagov/govuk_publishing_components">govuk_publishing_components gem</a> for further details, or <a href="https://docs.publishing.service.gov.uk/manual/components.html#component-guides">a list of all component guides</a>.</p>
 </div>
 
+<form role="search" data-module="filter-components" class="component-search">
+  <%= render "govuk_publishing_components/components/search", {
+    label_text: "Search components"
+  } %>
+</form>
+
 <h2 class="component-doc-h2">Components in this application</h2>
 
 <ul class="component-list">

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = '13.5.4'.freeze
+  VERSION = '13.6.0'.freeze
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: govuk_publishing_components
 version: !ruby/object:Gem::Version
-  version: 13.5.4
+  version: 13.6.0
 platform: ruby
 authors:
 - GOV.UK Dev
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2019-01-07 00:00:00.000000000 Z
+date: 2019-01-09 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: govspeak
@@ -304,6 +304,7 @@ files:
 - app/assets/images/govuk_publishing_components/search-button.png
 - app/assets/javascripts/component_guide/accessibility-test.js
 - app/assets/javascripts/component_guide/application.js
+- app/assets/javascripts/component_guide/filter-components.js
 - app/assets/javascripts/component_guide/vendor/axe.min.js
 - app/assets/javascripts/component_guide/vendor/matches-polyfill.min.js
 - app/assets/javascripts/component_guide/visual-regression.js