Feature/site search

assets/js/components/site-search.js

@@ -0,0 +1,26 @@
+'use strict';
+
+require('classlist-polyfill');
+
+function init(siteSearchInputSelector) {
+  var siteSearchInput = document.querySelectorAll(siteSearchInputSelector).item(0);
+  var formChangeEvents = 'propertychange input';
+  _addEventListener(siteSearchInput, formChangeEvents, _onFormChange);
+}
+
+function _onFormChange(event) {
+  let element = event.target;
+  element.classList.toggle();
+}
+
+function _addEventListener(elem, triggers, callback) {
+  if (typeof window.addEventListener === undefined) {
+    elem.addEventListener(triggers, callback);
+  } else {
+    elem.attachEvent(triggers, callback);
+  }
+}
+
+module.exports = {
+  init: init
+};

assets/js/ui-kit.js

@@ -1,19 +1,23 @@
-var smoothScroll = require('smoothscroll');
-var responsiveNav = require('responsive-nav');
-var Velocity = require('velocity-animate');
+'use strict';
 
 (function (document) {
 
-  initResponsiveNav = function(elementSelector) {
+  var smoothScroll = require('smoothscroll');
+  var responsiveNav = require('responsive-nav');
+  var Velocity = require('velocity-animate');
+  var SiteSearch = require('./components/site-search.js');
+
+   function initResponsiveNav(elementSelector) {
     if (document.querySelector(elementSelector)) {
       responsiveNav(elementSelector);
     }
   }
 
-  initAccordions = function(elems) {
+   function initAccordions(elems) {
     for (var i = 0; i < elems.length; i++) {
       var toggle = elems[i].querySelector('.accordion-button, summary');
       var panel = elems[i].querySelector('.accordion-panel');
+      var panelLabel;
 
       if (elems[i].getAttribute('data-label')) {
         panelLabel = elems[i].getAttribute('data-label');
@@ -27,22 +31,22 @@ var Velocity = require('velocity-animate');
     }
   }
 
-  initToggle = function(elem, toggle, panel, label) {
+   function initToggle(elem, toggle, panel, label) {
     toggle.targetElem = elem;
     toggle.targetPanel = panel;
     toggle.setAttribute('aria-controls', label);
     toggle.addEventListener('click', togglePanel);
   }
 
-  initPanel = function(elem, panel, label) {
+   function initPanel(elem, panel, label) {
     elem.id = label;
 
     if (elem.getAttribute('aria-expanded') === 'false') {
       slidePanel(panel, true);
     }
   }
 
-  togglePanel = function(event) {
+   function togglePanel(event) {
     var toggle = event.target,
         elem = event.target.targetElem,
         panel = event.target.targetPanel,
@@ -56,7 +60,7 @@ var Velocity = require('velocity-animate');
     slidePanel(panel, expanded);
   }
 
-  slidePanel = function(panel, bool) {
+   function slidePanel(panel, bool) {
     Velocity(panel, bool ? 'slideUp' : 'slideDown', { duration: 300 });
   }
 
@@ -68,6 +72,8 @@ var Velocity = require('velocity-animate');
     initResponsiveNav('.local-nav-demo');
 
     initAccordions(document.querySelectorAll('.accordion, details'));
+
+    SiteSearch.init('.js-search-input');
   });
 
 })(document);

assets/sass/_components.scss

@@ -8,6 +8,7 @@
 @import 'components/navigation';
 @import 'components/page-footer';
 @import 'components/page-header';
+@import 'components/site-search';
 @import 'components/tables';
 @import 'components/accordions';
 @import 'components/typography';

assets/sass/components/_site-search.scss

@@ -0,0 +1,185 @@
+
+/*
+Site search
+
+Search helps people find things on your site.
+
+Style guide: Site search
+*/
+
+/*
+Site search input
+
+JavaScript is required for pseudo placeholder label, but no-js will fall back gracefully
+
+Markup: templates/site-search.html
+
+Style guide: Site search.1 Input
+*/
+
+
+// Responsive site-search box
+//============================
+
+// Tested:
+//-----------------
+//  Browser Pass: Chrome, FF.49, Opera.36, ie.E-8, iPhone.6-5
+//  Browser Semi-pass: ie7 (functions but layout is broken)
+//  HTML validated: W3C & WCAG
+//  WCAG: Approved by A11y SME
+
+//Notes:
+//-----------------
+// - JS required for psudo placeholder label, but no-js will fall back gracefully
+// - JS written jQuery, rewrite if required
+
+// Expected HTML:
+//-----------------
+// <div class="site-search">
+//   <form id="search" class="" action="/search" role="search">
+//       <label for="site-search-text">Search GOV.AU</label>
+//       <div class="site-search-border">
+//         <input type="search" name="q" id="site-search-text" title="Search" class="search-input" />
+//         <input class="submit" type="submit" value="Search" />
+//       </div>
+//   </form>
+// </div><!--site-search-->
+
+// Expected JS (jQuery):
+//-----------------
+// $( document ).ready(function() {
+//   //If search-input has value add class that moves it in front of label
+//   $('#site-search-text').on("propertychange input", function(){ // input = ie9+, propertychange < ie9
+//     element = $(this);
+//     if( element.val() ) {
+//       element.addClass('has-value');
+//     } else {
+//       element.removeClass('has-value');
+//     }
+//   });
+// });
+
+
+//VARS
+//=================
+$site-search-border:                          solid 1px; //none;
+$site-search-font-colour:                     $navy;
+$site-search-label-colour:                    $non-white; //Only seen with no JS
+$site-search-background-colour:               $non-white;
+$site-search-background-colour--hover:        darken($non-white, 5%);
+$site-search-button-background-colour:        $non-white;
+$site-search-button-background-colour--hover: darken($non-white, 5%);
+$site-search-outline--focus:                  $light-aqua;
+
+.site-search {
+  color: $site-search-font-colour;
+
+  form {
+    position: relative; // for psudo placeholder label
+    // height: 3em; //No height ie7. position:relative ?
+  }
+
+  input {
+    //both text-input and button
+    transition-timing-function: $transition-easing;
+    transition-duration: $transition-timing-fast;
+    transition-property: background-color;
+  }
+
+  label {
+    // Acts as a psudo placeholder with JS, or normal label if no JS
+    // see JS related styles below nested parent
+    height: 3em;
+    line-height: 3em;
+    margin: 0;
+    cursor: text;
+  }
+
+  .site-search-border {
+    // Provides an option for a border around the search-box and a place to put the clearfix that doesn't interfere with other elements.
+    // This CSS is not on the form or .site-search parent because the label should not be included
+    @include clearfix;
+
+    border: $site-search-border;
+    border-radius: $base-border-radius;
+    //width: 100%;
+    padding-right: 3em;
+  }
+
+  .search-input {
+    -webkit-appearance: none; //Cause iPhone
+    position: relative; //For z-index on focus if JS
+    z-index: 1; //For z-index on focus if JS
+    display: block;
+    width: 100%;
+    float: left;
+    border: none;
+    padding: 0;
+    text-indent: 1em;
+    line-height: 3em;
+    height: 3em;
+    background-color: $site-search-background-colour;
+    border-radius: $base-border-radius 0 0 $base-border-radius;
+
+    &:hover {
+      background-color: $site-search-background-colour--hover;
+    }
+
+    &:focus {
+      outline: solid 3px $site-search-outline--focus;
+    }
+
+    &:focus,
+    &.has-value { // Class is added with JS
+      z-index: 3; //For z-index on focus
+    }
+
+    &:hover:focus  {
+      background-color: $site-search-background-colour;
+    }
+  } //.search-input
+
+
+  .submit {
+    position: relative; //For z-index on focus if JS
+    z-index: 1; //For z-index on focus if JS
+    border: none;
+    float: right;
+    margin: 0;
+    margin-right: -3em;
+    padding: 0;
+    width: 3em;
+    height: 3em;
+    text-indent: -99em;
+    background-color: $site-search-button-background-colour;
+    border-radius: 0 $base-border-radius $base-border-radius 0;
+
+    @include inline-background-image('search--navy');
+    background-size: 20px auto; //Resize the SVG img as it has no height (could be set in SVG meta but this is safer)
+    background-repeat: no-repeat;
+    background-position: center center;
+
+    &:hover {
+      background-color: $site-search-button-background-colour--hover;
+    }
+
+    &:focus {
+      outline: solid 3px $site-search-outline--focus;
+      z-index: 3;
+    }
+
+  } //.submit
+} //.site-search
+
+
+.no-js .site-search label {
+  color: $site-search-label-colour;
+}
+
+.js .site-search label {
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 2; //For z-index on focus if JS
+  text-indent: 1em;
+}

assets/sass/components/templates/site-search.html

@@ -0,0 +1,9 @@
+<div class="site-search">
+  <form id="search" class="" action="#" role="search">
+      <label for="site-search-text">Search GOV.AU</label>
+      <div class="site-search-border">
+        <input type="search" name="q" title="Search" class="search-input js-search-input" />
+        <input class="submit" type="submit" value="Search" />
+      </div>
+  </form>
+</div><!--site-search-->