add primary and secondary theme to button search

assets/scss/01-atoms/_button-search.scss

@@ -1,4 +1,4 @@
-.ma__button-search {
+@mixin ma-button-search ($background-color, $color) {
   border: 2px solid;
   display: inline-block;
   letter-spacing: $letter-spacing-large;
@@ -19,26 +19,43 @@
     transition: fill .4s;
     width: 20px;
   }
-}
 
-//theme
-.ma__button-search {
-  background-color: $c-white;
-  border-color: $c-bd-input;
-  color: $c-primary-alt;
+
+  background-color: $background-color;
+  @if $background-color==$c-white {
+    border-color: $c-bd-input !important;
+  } @else {
+    border-color: $background-color !important;
+  }
+  color: $color;
   font-size: 14px;
   font-weight: 700;
 
   &:hover {
-    background-color: $c-primary-alt;
-    border-color: $c-primary-alt;
-    color: $c-font-inverse;
+    background-color: $color;
+    @if $color==$c-white {
+      border-color: $c-bd-input !important;
+    } @else {
+      border-color: $color !important;
+    }
+    color: $background-color;
 
-    svg {
-      fill: $c-font-inverse;
+    & > svg {
+      fill: $background-color;
     }
   }
-  svg {
-    fill: $c-primary-alt;
+  & > svg {
+    fill: $color;
+  }
+}
+
+.ma__button-search {
+
+  //primary button search
+  @include ma-button-search($c-primary-alt, $c-white);
+
+  //secondary button search
+  &--secondary {
+    @include ma-button-search($c-white, $c-primary-alt);
   }
 }

assets/scss/02-molecules/_header-search.scss

@@ -25,56 +25,32 @@ $bp-header-search-reduce-button: "max-width: 700px";
   }
 
   .ma__button-search {
-    border: none;
-    border-left: 2px solid;
-    display: block;
-    height: $header-search-height;
-    padding-top: 0;
-    padding-bottom: 0;
-    position: absolute;
-      right: 0;
-      top: 0;
-
-    @media ($bp-x-small-max) {
-      padding-left: 10px;
-    }
+    &, &--secondary {
+      border: 2px solid;
+      //border-left: 2px solid;
+      display: block;
+      height: $header-search-height;
+      padding-top: 0;
+      padding-bottom: 0;
+      position: absolute;
+        right: 0;
+        top: 0;
+
+      @media ($bp-x-small-max) {
+        padding-left: 10px;
+      }
 
-    @media ($bp-header-search-reduce-button) {
-      span {
-        display: none;
+      @media ($bp-header-search-reduce-button) {
+        span {
+          display: none;
+        }
       }
     }
+
   }
 
   .ma__narrow-template & {
     margin-bottom: 75px;
     max-width: 400px;
   }
 }
-
-//theme
-.ma__header-search {
-
-  .ma__button-search {
-
-    background-color: transparent;
-    border-color: $c-bd-input;
-
-    &:hover {
-      background: $c-primary-alt;
-      border-color: $c-primary-alt;
-    }
-
-    // not the button in navigation
-    .ma__header__search & {
-
-      @media ($bp-small-max) {
-        background-color: $c-white;
-
-        &:hover {
-          background: $c-primary-alt;
-        }
-      }
-    }
-  }
-}

assets/scss/03-organisms/_header.scss

@@ -105,20 +105,22 @@ body {
 
         // not the button in navigation
         .ma__button-search {
-
-          @media ($bp-small-max) {
-            @include ma-valign-block;
-            border-width: 2px;
-            border-style: solid;
-            display: inline-block;
-            position: static;
-            transition: opacity .4s;
-            vertical-align: middle;
-
-            .show-menu & {
-              opacity: 0;
+          &, &--secondary {
+            @media ($bp-small-max) {
+              @include ma-valign-block;
+              border-width: 2px;
+              border-style: solid;
+              display: inline-block;
+              position: static;
+              transition: opacity .4s;
+              vertical-align: middle;
+
+              .show-menu & {
+                opacity: 0;
+              }
             }
           }
+
         }
       }
 

assets/scss/03-organisms/_organization-navigation.scss

@@ -10,7 +10,7 @@ $menu-transition-time: 0.3s;
   @media ($bp-x-small-min) {
     margin-top: -40px;
     margin-bottom: 40px;
-  } 
+  }
 
   &.stuck {
     position: fixed;
@@ -45,7 +45,7 @@ $menu-transition-time: 0.3s;
       align-items: center;
       padding: 0 1rem;
     }
-  
+
     @media ($bp-x-large-min) {
       max-width: 1250px;
       padding: 0;
@@ -70,21 +70,21 @@ $menu-transition-time: 0.3s;
 
     .mobile-toggle-label {
       overflow: hidden;
-      position: relative; 
+      position: relative;
       line-height: 1.2em;
-      // max-height = line-height (1.2) * lines max number (2) 
-      max-height: 2.4em; 
+      // max-height = line-height (1.2) * lines max number (2)
+      max-height: 2.4em;
       max-width: 90%;
       margin-right: -1em;
       padding-right: 1em;
-    
+
       &::before {
         content: '...';
         position: absolute;
         right: 0;
         bottom: 0;
       }
-    
+
       &::after {
         content: '';
         position: absolute;
@@ -95,7 +95,7 @@ $menu-transition-time: 0.3s;
         background: $c-gray-lightest;
       }
     }
-    
+
     .mobile-toggle-icon {
       position: relative;
       display: block;
@@ -105,7 +105,7 @@ $menu-transition-time: 0.3s;
       background-color: transparent;
       color: $c-primary-alt;
       transition: $menu-transition-time;
-  
+
       &::after {
         content: '\00d7';
         font-size: 2.1rem;
@@ -156,7 +156,7 @@ $menu-transition-time: 0.3s;
       order: 2;
       border-bottom: 0;
       padding: 0;
-      
+
       .form-open & {
         position: absolute;
         width: 100%;
@@ -181,13 +181,13 @@ $menu-transition-time: 0.3s;
     }
 
     &--wrapper {
-     
+
       @media ($bp-large-min) {
         max-width: 0;
         pointer-events: none;
         opacity: 0;
         transition: 0s;
-        
+
         .form-open & {
           max-width: $max-width;
           width: 100%;
@@ -212,7 +212,7 @@ $menu-transition-time: 0.3s;
       @media ($bp-large-extended-min) {
         font-size: 1.2rem;
       }
-      
+
       svg {
         fill: $c-white;
 
@@ -226,7 +226,6 @@ $menu-transition-time: 0.3s;
 
         @media ($bp-large-min) {
           display: inline;
-          color: $c-primary-alt;
         }
       }
 
@@ -248,7 +247,7 @@ $menu-transition-time: 0.3s;
       font-size: 1rem;
       font-weight: 700;
       padding-left: 35px;
-      
+
       @media ($bp-large-min) {
         display: block;
         font-size: 1.125rem;
@@ -264,7 +263,7 @@ $menu-transition-time: 0.3s;
         padding-right: 1.5rem;
         padding-left: 1rem;
         font-weight: 500;
-        
+
         &::after {
           content: '\00d7';
           font-size: 2.1rem;

patternlab/styleguide/source/_data/headerSearch.json

@@ -2,6 +2,10 @@
   "headerSearch" : {
     "placeholder":"Search Mass.gov",
     "id":"header-search",
-    "label": "Search terms"
+    "label": "Search terms",
+    "buttonSearch" : {
+      "text": "Search",
+      "usage": "secondary"
+    }
   }
 }

patternlab/styleguide/source/_patterns/01-atoms/01-buttons/button-search-as-secondary.md

@@ -0,0 +1,16 @@
+### Description
+This is a variant of the [Button Search](./?p=atoms-button-search) pattern showing an example styled as a secondary button.
+
+### Status
+* Stable as of 5.0.0
+
+### Variables
+~~~
+buttonSearch: {
+  text:
+    type: string / required
+  usage:
+    type: string / optional
+    options: '' or 'secondary'
+}
+~~~

patternlab/styleguide/source/_patterns/01-atoms/01-buttons/button-search.md

@@ -1,5 +1,5 @@
 ### Description
-A Button used for keyword search.
+A Button used for keyword search. By default, `usage` is set to primary for search as a primary action on the page or else set `usage` to `'secondary'`, see variant [Button Search As Secondary](./?p=atoms-button-search-as-secondary).
 
 ### Status
 * Stable as of 5.0.0
@@ -9,5 +9,8 @@ A Button used for keyword search.
 buttonSearch: {
   text:
     type: string / required
+  usage:
+    type: string / optional
+    options: '' or 'secondary'
 }
 ~~~

patternlab/styleguide/source/_patterns/01-atoms/01-buttons/button-search.twig

@@ -1,7 +1,8 @@
 {% if not buttonSearch %}
-  {% set buttonSearch = {"text":"Search"} %}
+  {% set buttonSearch = {"text":"Search", "usage": "secondary"} %}
 {% endif %}
-<button type="submit" class="ma__button-search">
+{% set buttonClasses = buttonSearch.usage ? "ma__button-search--" ~ buttonSearch.usage : "ma__button-search" %}
+<button type="submit" class="{{ buttonClasses }}">
   <span class="ma__button-search__label">{{ buttonSearch.text }}</span>
   {{ icon('search') }}
 </button>

patternlab/styleguide/source/_patterns/01-atoms/01-buttons/button-search~as-secondary.json

@@ -0,0 +1,6 @@
+{
+  "buttonSearch": {
+    "text": "Search",
+    "usage": "secondary"
+  }
+}

patternlab/styleguide/source/_patterns/02-molecules/header-search.twig

@@ -8,6 +8,7 @@
         class="ma__header-search__input"
         placeholder="{{headerSearch.placeholder}}"
         type="text" />
+    {% set buttonSearch = headerSearch.buttonSearch %}
     {% include "@atoms/01-buttons/button-search.twig" %}
   </form>
 </section>

react/src/components/atoms/buttons/ButtonWithIcon/ButtonWithIcon.knob.options.js

@@ -11,5 +11,10 @@ export default {
     button: 'button',
     submit: 'submit',
     reset: 'reset'
+  },
+  // currently only button search has usage classes
+  usage: {
+    '': 'primary (default)',
+    secondary: 'secondary'
   }
 };

react/src/components/atoms/buttons/ButtonWithIcon/ButtonWithIcon.stories.js

@@ -46,7 +46,8 @@ storiesOf('atoms/buttons', module)
     'ButtonSearch',
     withInfo(`<div>${buttonWithIconReadme}</div>`)(() => {
       const props = {
-        onClick: action('ButtonWithIcon clicked')
+        onClick: action('ButtonWithIcon clicked'),
+        usage: select('ButtonWithIcon.usage', buttonWithIconOptions.usage, '')
       };
 
       // Set the icon prop to the actual element based on knob selection.