Merge branch 'master' into 90-basic-webpack

* master: remove reference to search icon in main-nav twig and json; add documentation to Noto Sans (#359) Refactor site-search so the icon can be turned into inline CSS by Webpack (#350)
SU-SWS · Mar 26, 2019 · 9ef8264 · 9ef8264
2 parents e8ef2e2 + bf6a773
commit 9ef8264
Show file tree

Hide file tree

Showing 10 changed files with 38 additions and 35 deletions.
diff --git a/core/dist/css/decanter.css b/core/dist/css/decanter.css
diff --git a/core/src/scss/components/site-search/_site-search.scss b/core/src/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/src/templates/components/main-nav/main-nav.json b/core/src/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/src/templates/components/main-nav/main-nav.twig b/core/src/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/src/templates/components/site-search/site-search.json b/core/src/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/src/templates/components/site-search/site-search.twig b/core/src/templates/components/site-search/site-search.twig
@@ -12,19 +12,20 @@
  * - 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
  *
  */
 #}
 <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/core/src/templates/core/fonts/fonts.twig b/core/src/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>

diff --git a/kss/builder/decanter/kss-assets/css/kss.css b/kss/builder/decanter/kss-assets/css/kss.css
diff --git a/kss/builder/decanter/scss/_site-search.scss 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
@@ -55,5 +55,6 @@
   'prettify',
   'print',
   'sidebar',
+  'site-search',
   'skiplinks',
   'toolbar';