From a6b58be7dba250404ace55f2130d32b32e533875 Mon Sep 17 00:00:00 2001
From: Yvonne Tang <ytang2@stanford.edu>
Date: Tue, 26 Mar 2019 12:03:32 -0700
Subject: [PATCH 1/2] Refactor site-search so the icon can be turned into
 inline CSS by Webpack (#350)

* 349: first pass using search icon as background image

* 349: use sr helper class on button to hide text visually instead

* 349: unit fixup and put max width on example wrapper instead

* Update site-search.twig
---
 core/css/decanter.css                         | 17 +++++++----------
 .../components/site-search/_site-search.scss  | 19 +++++++------------
 .../components/site-search/site-search.json   |  3 +--
 .../components/site-search/site-search.twig   | 11 ++++++-----
 kss/builder/decanter/kss-assets/css/kss.css   |  3 +++
 kss/builder/decanter/scss/_site-search.scss   |  9 +++++++++
 kss/builder/decanter/scss/kss.scss            |  1 +
 7 files changed, 34 insertions(+), 29 deletions(-)
 create mode 100644 kss/builder/decanter/scss/_site-search.scss

diff --git a/core/css/decanter.css b/core/css/decanter.css
index 13cf4c68e..e41d26b1e 100644
--- a/core/css/decanter.css
+++ b/core/css/decanter.css
@@ -8733,9 +8733,9 @@ a {
   -moz-osx-font-smoothing: grayscale;
   padding: 0.6rem 2rem;
   display: inline-block;
-  height: 40px;
+  height: 4rem;
   max-width: 100%;
-  border-radius: 30px;
+  border-radius: 3rem;
   font-size: 1.6rem; }
   .su-site-search__input::-webkit-input-placeholder {
     color: #2e2d29;
@@ -8764,16 +8764,13 @@ a {
   margin-top: 0;
   margin-right: 0;
   margin-bottom: 0;
-  background-color: transparent;
+  background: url("../img/icon-search.svg") no-repeat 0 0;
   opacity: .6;
   position: absolute;
-  top: 11px;
-  right: 12px;
-  width: auto; }
-  .su-site-search__submit img {
-    display: inline-block;
-    max-width: 24px;
-    max-height: 24px; }
+  top: 1.1rem;
+  right: 1.2rem;
+  width: 24px;
+  height: 25px; }
   .su-site-search__submit:hover, .su-site-search__submit:active, .su-site-search__submit:focus {
     background-color: transparent;
     opacity: 1; }
diff --git a/core/scss/components/site-search/_site-search.scss b/core/scss/components/site-search/_site-search.scss
index f5d454e54..611981e14 100644
--- a/core/scss/components/site-search/_site-search.scss
+++ b/core/scss/components/site-search/_site-search.scss
@@ -18,9 +18,9 @@
   @include padding(.6rem 2rem);
 
   display: inline-block;
-  height: 40px;
+  height: 4rem;
   max-width: 100%;
-  border-radius: 30px;
+  border-radius: 3rem;
   font-size: 1.6rem;
 
   &::placeholder {
@@ -37,18 +37,13 @@
   @include padding(0);
   @include margin(0 0 0 null);
 
-  background-color: transparent;
+  background: url("#{$image-path}/icon-search.svg") no-repeat 0 0;
   opacity: .6;
   position: absolute;
-  top: 11px;
-  right: 12px;
-  width: auto;
-
-  img {
-    display: inline-block;
-    max-width: 24px;
-    max-height: 24px;
-  }
+  top: 1.1rem;
+  right: 1.2rem;
+  width: 24px;
+  height: 25px;
 
   &:hover,
   &:active,
diff --git a/core/templates/components/site-search/site-search.json b/core/templates/components/site-search/site-search.json
index 475e8eb1b..7ce069fda 100644
--- a/core/templates/components/site-search/site-search.json
+++ b/core/templates/components/site-search/site-search.json
@@ -3,6 +3,5 @@
   "method": "get",
   "search_label": "Search this site",
   "placeholder": "Search this site",
-  "search_input_name": "search-field",
-  "search_icon_src": "../../../img/icon-search.svg"
+  "search_input_name": "search-field"
 }
diff --git a/core/templates/components/site-search/site-search.twig b/core/templates/components/site-search/site-search.twig
index 966bdb6fa..17f714b6a 100644
--- a/core/templates/components/site-search/site-search.twig
+++ b/core/templates/components/site-search/site-search.twig
@@ -12,10 +12,11 @@
  * - method: Method of the form
  * - search_label: Custom screen reader label
  * - search_input_name: Name for the search input field. Also used as the ID of the search input field and the "for" attribute of the label.
- * - input_attributes: Additional HTML attributes for the search input field
+ * - search_input_attributes: Additional HTML attributes for the search input field
  * - placeholder: Placeholder text for the search input field
- * - button_attributes: Additional HTML attributes for the submit button
- * - search_icon_src: The href property of the search icon image
+ * - search_button_attributes: Additional HTML attributes for the submit button
+ * - search_button_name: The name for the form element. Defaults to 'search'
+ * - search_button_text: The user facing text for the button. Defaults to 'Submit Search'
  * - additional_fields: Any additional fields for the search form, e.g., hidden input fields
  *
  */
@@ -23,8 +24,8 @@
 <div {{- attributes }} class="su-site-search {{ modifier_class }}" role="search">
  <form action="{{ action }}" method="{{ method }}" accept-charset="UTF-8">
   <label class="su-site-search__sr-label" for="{{ search_input_name|default('search-field') }}">{{ search_label|default('Search this site') }}</label>
-  <input {{- input_attributes }} type="text" id="{{ search_input_name|default('search-field') }}" name="{{ search_input_name|default('search-field') }}" class="su-site-search__input" placeholder="{{- placeholder -}}" maxlength="128">
-  <button {{- button_attributes }} type="submit" name="submit" class="su-site-search__submit" aria-label="Search"><img src="{{ search_icon_src }}" alt="Search button" /></button>
+  <input {{- search_input_attributes }} type="text" id="{{ search_input_name|default('search-field') }}" name="{{ search_input_name|default('search-field') }}" class="su-site-search__input" placeholder="{{- placeholder -}}" maxlength="128">
+  <button {{- search_button_attributes }} type="submit" name="{{ search_button_name|default('search') }}" class="su-site-search__submit su-sr-only-text" aria-label="Search">{{ search_button_text|default('Submit Search') }}</button>
   {#- Any additional eg. hidden input fields -#}
   {{- additional_fields -}}
  </form>
diff --git a/kss/builder/decanter/kss-assets/css/kss.css b/kss/builder/decanter/kss-assets/css/kss.css
index 68fe5c388..0cf527922 100644
--- a/kss/builder/decanter/kss-assets/css/kss.css
+++ b/kss/builder/decanter/kss-assets/css/kss.css
@@ -1914,6 +1914,9 @@ ol.linenums {
   font-weight: normal;
   color: #56554d; }
 
+#kssref-components-site-search .kss-modifier__wrapper {
+  max-width: 40rem; }
+
 #kssref-components-skiplinks .kss-modifier__example {
   z-index: 11222; }
 
diff --git a/kss/builder/decanter/scss/_site-search.scss b/kss/builder/decanter/scss/_site-search.scss
new file mode 100644
index 000000000..04fb8fc82
--- /dev/null
+++ b/kss/builder/decanter/scss/_site-search.scss
@@ -0,0 +1,9 @@
+@charset 'UTF-8';
+
+// The site-search component
+
+#kssref-components-site-search {
+  .kss-modifier__wrapper {
+    max-width: 40rem;
+  }
+}
diff --git a/kss/builder/decanter/scss/kss.scss b/kss/builder/decanter/scss/kss.scss
index b2816c48e..f8d688ddf 100644
--- a/kss/builder/decanter/scss/kss.scss
+++ b/kss/builder/decanter/scss/kss.scss
@@ -55,5 +55,6 @@
   'prettify',
   'print',
   'sidebar',
+  'site-search',
   'skiplinks',
   'toolbar';

From bf6a7730ca847ce32cede9a5675fd48ccf0ee99e Mon Sep 17 00:00:00 2001
From: Yvonne Tang <ytang2@stanford.edu>
Date: Tue, 26 Mar 2019 15:10:23 -0700
Subject: [PATCH 2/2] remove reference to search icon in main-nav twig and
 json; add documentation to Noto Sans (#359)

---
 core/templates/components/main-nav/main-nav.json | 3 +--
 core/templates/components/main-nav/main-nav.twig | 3 +--
 core/templates/core/fonts/fonts.twig             | 4 ++--
 3 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/core/templates/components/main-nav/main-nav.json b/core/templates/components/main-nav/main-nav.json
index dea2880f1..e95b9a934 100644
--- a/core/templates/components/main-nav/main-nav.json
+++ b/core/templates/components/main-nav/main-nav.json
@@ -108,7 +108,6 @@
     "method": "get",
     "search_label": "Search Stanford sites",
     "placeholder": "Search Stanford sites",
-    "search_input_name": "q",
-    "search_icon_src": "/img/icon-search.svg"
+    "search_input_name": "q"
   }
 }
diff --git a/core/templates/components/main-nav/main-nav.twig b/core/templates/components/main-nav/main-nav.twig
index e30d307ba..804e40eba 100644
--- a/core/templates/components/main-nav/main-nav.twig
+++ b/core/templates/components/main-nav/main-nav.twig
@@ -59,8 +59,7 @@
         "method": mobile_search.method,
         "search_label": mobile_search.search_label,
         "placeholder": mobile_search.placeholder,
-        "search_input_name": mobile_search.search_input_name,
-        "search_icon_src": mobile_search.search_icon_src
+        "search_input_name": mobile_search.search_input_name
       }
       only
     %}
diff --git a/core/templates/core/fonts/fonts.twig b/core/templates/core/fonts/fonts.twig
index 83e752b5b..b588f06bf 100644
--- a/core/templates/core/fonts/fonts.twig
+++ b/core/templates/core/fonts/fonts.twig
@@ -54,8 +54,8 @@
 </div>
 
 <div class="su-sanskrit">
-  <h2>Noto Sans</h2>
-  <p class="su-font-lead">Noto Sans is a secondary font.</p>
+  <h2>Noto Sans Devanagari (Sanskrit) Subset</h2>
+  <p class="su-font-lead">Noto Sans is a secondary font. It should only be used when Sanskrit font support is needed.</p>
   <h3>Style Variations</h3>
   <div style="font-weight: 400; font-style: normal;">Regular</div>
   <div style="font-weight: 400; font-style: italic;">Regular Italic</div>