update workforce page with search bar

_includes/datasets/workforce.html

@@ -39,7 +39,8 @@ <h3 class="challenge__text-title">{{topic.title}}</h3>
 {% endfor %}
 
 <div class="datasets">
-  <div class="datasets__container grid-container">
+  <div id="data-to-filter" class="datasets__container grid-container">
+    <input type="text" id="myInput" onkeyup="searchDatasets()" placeholder="Type some keywords">
     <div class="datasets__row grid-row">
       {% for data in datasets %}
       <div class="datasets__card grid-col-12 tablet:grid-col-4 {{data.problem-statement}} ">

_sass/banner.scss

@@ -9,10 +9,19 @@
   &__header-text {
     font-size: $font-size-xxs;
   }
+  &__header-flag {
+    float: left ;
+    margin-right: 8px;
+    width: 16px; }
+  }
   @include media-sm {
     display: block;
   }
-}
+  @media all and (min-width: 40em) {
+    .usa-banner__header-flag {
+      margin-right: 8px;
+      padding-top: 0; }
+  }
 
 .usa-accordion {
   color: $color-white;

_sass/data-kits.scss

@@ -174,3 +174,44 @@
     transform: translateX(2px);
   }
 }
+
+
+    .usa-banner__content{
+      display: hidden;
+    }
+
+/* Re-style usa banner */
+
+.usa-accordion {
+  margin: 0;
+  list-style-type: none;
+  background-color: #13192F;
+  color: #ffffff;
+  opacity: .75;
+  padding: 4px 0;
+  width: 100%;
+  font-family: $font-sans;}
+
+  .usa-banner__header-text {
+    font-size: 11px;
+    font-weight: 500;
+  }
+/* Decrease margin between kit cover and kit captions */
+
+  /* Style Return arrow */
+
+  .return-arrow {
+    float: left ;
+    margin-right: 8px;
+    width: 16px; }
+    @media all and (min-width: 40em) {
+      .usa-banner__header-flag {
+        margin-right: 8px;
+        padding-top: 0; } }
+.data-kit .data-kit__container .data-kit__stats {
+  bottom: 2rem;
+}
+
+.data-kit .data-kit__container .data-kit__upcoming {
+  bottom: 2rem;
+}

_sass/search.scss

@@ -0,0 +1,151 @@
+.usa-banner__content{
+    display: hidden;
+  }
+
+  /* Search bar */
+
+  #myInput {
+    background-image: url('../../assets/search.svg'); /* Add a search icon to input */
+    background-position: 20px 14px; /* Position the search icon */
+    background-repeat: no-repeat; /* Do not repeat the icon image */
+    width: 100%; /* Full-width */
+    font-size: 16px; /* Increase font-size */
+    padding: 14px 14px 14px 50px; /* Add some padding */
+    border: none;
+    border-radius: 4px;
+    background-color: #08325F;
+    margin-bottom: 1rem; /* Add some space below the input */
+    margin-top: 3rem;
+    color: #fff;
+    font-weight: 500;
+  }
+
+
+
+  #myUL {
+    /* Remove default list styling */
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+  }
+
+  #myUL li a {
+    border: 1px solid #ddd; /* Add a border to all links */
+    margin-top: -1px; /* Prevent double borders */
+    background-color: #f6f6f6; /* Grey background color */
+    padding: 12px; /* Add some padding */
+    text-decoration: none; /* Remove default text underline */
+    font-size: 18px; /* Increase the font-size */
+    color: black; /* Add a black text color */
+    display: block; /* Make it into a block element to fill the whole list */
+  }
+
+  #myUL li a:hover:not(.header) {
+    background-color: #eee; /* Add a hover effect to all links, except for headers */
+  }
+
+/* Color placeholder text */
+
+::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
+color: #AFBDCB;
+opacity: 1;
+font-weight: 500; /* Firefox */
+}
+
+:-ms-input-placeholder { /* Internet Explorer 10-11 */
+color: #AFBDCB;
+font-weight: 500;
+}
+
+::-ms-input-placeholder { /* Microsoft Edge */
+color: #AFBDCB;
+font-weight: 500;
+}
+
+/* Remove bottom margin from CAR */
+
+.challenge__container {
+padding: 3.5rem 0 0 0;
+}
+
+/* Re-style usa banner */
+
+html {
+background-color: #13192F;
+}
+
+.usa-accordion {
+margin-bottom: 0 ;
+margin-top: 0 ;
+list-style-type: none;
+padding-left: 0;
+background-color: #13192F;
+color: #fff;
+opacity: .75;
+margin: 0;
+padding: 4px 0;
+width: 100%;
+font-family: "Silka", Source Sans Pro Web, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif;
+line-height: auto ; }
+
+.usa-banner__header-text {
+  font-size: 11px;
+  font-weight: 500;
+}
+
+.usa-banner__header-flag {
+  float: left ;
+  margin-right: 8px;
+  width: 16px; }
+  @media all and (min-width: 40em) {
+    .usa-banner__header-flag {
+      margin-right: 8px;
+      padding-top: 0; } }
+
+
+      /* Style Return arrow */
+
+      .return-arrow {
+        float: left ;
+        margin-right: 8px;
+        width: 16px; }
+        @media all and (min-width: 40em) {
+          .usa-banner__header-flag {
+            margin-right: 8px;
+            padding-top: 0; } }
+
+/* Bold Dataset card titles */
+
+.datasets__card-email {
+  padding: 7px 9px 5px 9px;
+  right: 15px;
+  bottom: -1.1rem;
+}
+
+.datasets__card-title {
+  font-weight: 700;
+}
+
+.datasets__card-email {
+  font-weight: 500;
+}
+
+.datasets__card-email span {
+    display: inline-block;
+    color: #000;
+    text-decoration: none;
+}
+
+.datasets__card-email span::after {
+    content: '';
+    display: block;
+    width: 0;
+    height: 2px;
+    background: #000;
+    transition: width .3s;
+}
+
+.datasets__card-email:hover span::after {
+    width: 100%;
+    //transition: width .3s;
+}

_sass/uswds_overrides.scss

@@ -5,5 +5,5 @@
 
 html {
   height: 100vh;
-  background-color: $color-primary;
+  background-color: $color-primary-dark;
 }

assets/css/styles.scss

@@ -20,7 +20,7 @@ $theme-image-path:  '../uswds/img';
 @import "data-kits";
 @import "footer";
 @import "datasets";
-
+@import "search";
 
 // This is the main CSS file. You can write your SCSS/SASS in _sass and import
 // them here. You probably want to load them _after_ uswds in order to override

src/js/app.js

@@ -37,6 +37,55 @@ function filterSelection(c) {
   }
 }
 
+
+function searchDatasets() {
+  var td;
+  var txtValue;
+  var i;
+  var input = document.getElementById("myInput");
+  var filter = input.value.toUpperCase();
+  var table = document.getElementById("data-to-filter");
+  var tr = table.getElementsByClassName("datasets__card");
+
+  for (i = 0; i < tr.length; i++) {
+    // console.log("in the for loop")
+    td = tr[i].getElementsByClassName("datasets__card-title")[0];
+    if (td) {
+      txtValue = td.textContent || td.innerText;
+      if (txtValue.toUpperCase().indexOf(filter) > -1) {
+        tr[i].style.display = "";
+      } else {
+        tr[i].style.display = "none";
+      }
+    }
+  }
+
+  for (i = 0; i < tr.length; i++) {
+    td = tr[i].getElementsByClassName("datasets__card-subtitle")[0];
+    if (td) {
+      txtValue = td.textContent || td.innerText;
+      if (txtValue.toUpperCase().indexOf(filter) > -1) {
+        tr[i].style.display = "";
+      } else {
+        tr[i].style.display = "none";
+      }
+    }
+  }
+
+  for (i = 0; i < tr.length; i++) {
+    td = tr[i].getElementsByClassName("datasets__card-description")[0];
+    if (td) {
+      txtValue = td.textContent || td.innerText;
+      if (txtValue.toUpperCase().indexOf(filter) > -1) {
+        tr[i].style.display = "";
+      } else {
+        tr[i].style.display = "none";
+      }
+    }
+  }
+
+}
+
 // Show filtered elements
 function addClass(element, name) {
   let i, array1, array2;