diff --git a/assets/scss/01-atoms/_button-search.scss b/assets/scss/01-atoms/_button-search.scss index 4a7551e965..f8f9139c1a 100644 --- a/assets/scss/01-atoms/_button-search.scss +++ b/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); } } diff --git a/assets/scss/02-molecules/_header-search.scss b/assets/scss/02-molecules/_header-search.scss index 43afb1bea3..ec07e8da97 100644 --- a/assets/scss/02-molecules/_header-search.scss +++ b/assets/scss/02-molecules/_header-search.scss @@ -25,25 +25,28 @@ $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 & { @@ -51,30 +54,3 @@ $bp-header-search-reduce-button: "max-width: 700px"; 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; - } - } - } - } -} diff --git a/assets/scss/03-organisms/_header.scss b/assets/scss/03-organisms/_header.scss index 856f88fd5b..8beb1cc529 100644 --- a/assets/scss/03-organisms/_header.scss +++ b/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; + } } } + } } diff --git a/assets/scss/03-organisms/_organization-navigation.scss b/assets/scss/03-organisms/_organization-navigation.scss index 370f6aa110..ab71546c91 100644 --- a/assets/scss/03-organisms/_organization-navigation.scss +++ b/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; diff --git a/changelogs/DP-10514.txt b/changelogs/DP-10514.txt new file mode 100644 index 0000000000..f6a936d20d --- /dev/null +++ b/changelogs/DP-10514.txt @@ -0,0 +1,6 @@ +___DESCRIPTION___ +Minor +Added +- (React, Patternlab) DP-1234: Add primary `.ma__button-search` and secondary `.ma__button-search--secondar` usage themes to button search #261 +Fixed +- (Patternlab) DP-1234: Fix and unify button search hover styles in organization-navigation search #261 diff --git a/patternlab/styleguide/source/_data/headerSearch.json b/patternlab/styleguide/source/_data/headerSearch.json index a282131a1c..af9f3279ef 100644 --- a/patternlab/styleguide/source/_data/headerSearch.json +++ b/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" + } } } diff --git a/patternlab/styleguide/source/_patterns/01-atoms/01-buttons/button-search-as-secondary.md b/patternlab/styleguide/source/_patterns/01-atoms/01-buttons/button-search-as-secondary.md new file mode 100644 index 0000000000..e15c806ca3 --- /dev/null +++ b/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' +} +~~~ diff --git a/patternlab/styleguide/source/_patterns/01-atoms/01-buttons/button-search.md b/patternlab/styleguide/source/_patterns/01-atoms/01-buttons/button-search.md index 4279dd63b6..d513147770 100644 --- a/patternlab/styleguide/source/_patterns/01-atoms/01-buttons/button-search.md +++ b/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' } ~~~ diff --git a/patternlab/styleguide/source/_patterns/01-atoms/01-buttons/button-search.twig b/patternlab/styleguide/source/_patterns/01-atoms/01-buttons/button-search.twig index 381c51c6ed..2756a4db22 100644 --- a/patternlab/styleguide/source/_patterns/01-atoms/01-buttons/button-search.twig +++ b/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 %} - diff --git a/patternlab/styleguide/source/_patterns/01-atoms/01-buttons/button-search~as-secondary.json b/patternlab/styleguide/source/_patterns/01-atoms/01-buttons/button-search~as-secondary.json new file mode 100644 index 0000000000..af29dea497 --- /dev/null +++ b/patternlab/styleguide/source/_patterns/01-atoms/01-buttons/button-search~as-secondary.json @@ -0,0 +1,6 @@ +{ + "buttonSearch": { + "text": "Search", + "usage": "secondary" + } +} diff --git a/patternlab/styleguide/source/_patterns/02-molecules/header-search.twig b/patternlab/styleguide/source/_patterns/02-molecules/header-search.twig index f7934f6137..448700adbc 100644 --- a/patternlab/styleguide/source/_patterns/02-molecules/header-search.twig +++ b/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" %} diff --git a/react/backstop/data/bitmaps_reference/vrt_atoms_buttons_ButtonSearch_0_document_0_small_atom.png b/react/backstop/data/bitmaps_reference/vrt_atoms_buttons_ButtonSearch_0_document_0_small_atom.png index 8432fb365b..66c5daf221 100644 Binary files a/react/backstop/data/bitmaps_reference/vrt_atoms_buttons_ButtonSearch_0_document_0_small_atom.png and b/react/backstop/data/bitmaps_reference/vrt_atoms_buttons_ButtonSearch_0_document_0_small_atom.png differ diff --git a/react/backstop/data/bitmaps_reference/vrt_molecules_HeaderSearch_HeaderSearch_0_document_0_phone.png b/react/backstop/data/bitmaps_reference/vrt_molecules_HeaderSearch_HeaderSearch_0_document_0_phone.png index e9ff120aba..6dacae91f7 100644 Binary files a/react/backstop/data/bitmaps_reference/vrt_molecules_HeaderSearch_HeaderSearch_0_document_0_phone.png and b/react/backstop/data/bitmaps_reference/vrt_molecules_HeaderSearch_HeaderSearch_0_document_0_phone.png differ diff --git a/react/backstop/data/bitmaps_reference/vrt_molecules_HeaderSearch_HeaderSearch_0_document_1_tablet.png b/react/backstop/data/bitmaps_reference/vrt_molecules_HeaderSearch_HeaderSearch_0_document_1_tablet.png index 5bd7e7f9ec..4f925d86c0 100644 Binary files a/react/backstop/data/bitmaps_reference/vrt_molecules_HeaderSearch_HeaderSearch_0_document_1_tablet.png and b/react/backstop/data/bitmaps_reference/vrt_molecules_HeaderSearch_HeaderSearch_0_document_1_tablet.png differ diff --git a/react/backstop/data/bitmaps_reference/vrt_molecules_HeaderSearch_HeaderSearch_with_postInputFilter_0_document_0_phone.png b/react/backstop/data/bitmaps_reference/vrt_molecules_HeaderSearch_HeaderSearch_with_postInputFilter_0_document_0_phone.png index 26ed9c6cdb..d21df9e6d1 100644 Binary files a/react/backstop/data/bitmaps_reference/vrt_molecules_HeaderSearch_HeaderSearch_with_postInputFilter_0_document_0_phone.png and b/react/backstop/data/bitmaps_reference/vrt_molecules_HeaderSearch_HeaderSearch_with_postInputFilter_0_document_0_phone.png differ diff --git a/react/backstop/data/bitmaps_reference/vrt_molecules_HeaderSearch_HeaderSearch_with_postInputFilter_0_document_1_tablet.png b/react/backstop/data/bitmaps_reference/vrt_molecules_HeaderSearch_HeaderSearch_with_postInputFilter_0_document_1_tablet.png index fc8b666347..ef2e3965d3 100644 Binary files a/react/backstop/data/bitmaps_reference/vrt_molecules_HeaderSearch_HeaderSearch_with_postInputFilter_0_document_1_tablet.png and b/react/backstop/data/bitmaps_reference/vrt_molecules_HeaderSearch_HeaderSearch_with_postInputFilter_0_document_1_tablet.png differ diff --git a/react/backstop/data/bitmaps_reference/vrt_organisms_SearchBanner_SearchBanner_0_document_0_phone.png b/react/backstop/data/bitmaps_reference/vrt_organisms_SearchBanner_SearchBanner_0_document_0_phone.png index 5f97fc7e1f..89a1bd71a5 100644 Binary files a/react/backstop/data/bitmaps_reference/vrt_organisms_SearchBanner_SearchBanner_0_document_0_phone.png and b/react/backstop/data/bitmaps_reference/vrt_organisms_SearchBanner_SearchBanner_0_document_0_phone.png differ diff --git a/react/backstop/data/bitmaps_reference/vrt_organisms_SearchBanner_SearchBanner_0_document_1_tablet.png b/react/backstop/data/bitmaps_reference/vrt_organisms_SearchBanner_SearchBanner_0_document_1_tablet.png index 037dfec327..fa6fd8bd1d 100644 Binary files a/react/backstop/data/bitmaps_reference/vrt_organisms_SearchBanner_SearchBanner_0_document_1_tablet.png and b/react/backstop/data/bitmaps_reference/vrt_organisms_SearchBanner_SearchBanner_0_document_1_tablet.png differ diff --git a/react/backstop/data/bitmaps_reference/vrt_organisms_SearchBanner_SearchBanner_with_postInputFilter_0_document_0_phone.png b/react/backstop/data/bitmaps_reference/vrt_organisms_SearchBanner_SearchBanner_with_postInputFilter_0_document_0_phone.png index 64fa6d06c3..57b85e0bb7 100644 Binary files a/react/backstop/data/bitmaps_reference/vrt_organisms_SearchBanner_SearchBanner_with_postInputFilter_0_document_0_phone.png and b/react/backstop/data/bitmaps_reference/vrt_organisms_SearchBanner_SearchBanner_with_postInputFilter_0_document_0_phone.png differ diff --git a/react/backstop/data/bitmaps_reference/vrt_organisms_SearchBanner_SearchBanner_with_postInputFilter_0_document_1_tablet.png b/react/backstop/data/bitmaps_reference/vrt_organisms_SearchBanner_SearchBanner_with_postInputFilter_0_document_1_tablet.png index f790f6b430..26d57e6b4a 100644 Binary files a/react/backstop/data/bitmaps_reference/vrt_organisms_SearchBanner_SearchBanner_with_postInputFilter_0_document_1_tablet.png and b/react/backstop/data/bitmaps_reference/vrt_organisms_SearchBanner_SearchBanner_with_postInputFilter_0_document_1_tablet.png differ diff --git a/react/src/components/atoms/buttons/ButtonWithIcon/ButtonWithIcon.knob.options.js b/react/src/components/atoms/buttons/ButtonWithIcon/ButtonWithIcon.knob.options.js index c6711fa337..9b22c4c1c2 100644 --- a/react/src/components/atoms/buttons/ButtonWithIcon/ButtonWithIcon.knob.options.js +++ b/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' } }; diff --git a/react/src/components/atoms/buttons/ButtonWithIcon/ButtonWithIcon.stories.js b/react/src/components/atoms/buttons/ButtonWithIcon/ButtonWithIcon.stories.js index 4bdc8fad35..5ab7e57a6b 100644 --- a/react/src/components/atoms/buttons/ButtonWithIcon/ButtonWithIcon.stories.js +++ b/react/src/components/atoms/buttons/ButtonWithIcon/ButtonWithIcon.stories.js @@ -46,7 +46,8 @@ storiesOf('atoms/buttons', module) 'ButtonSearch', withInfo(`
${buttonWithIconReadme}
`)(() => { 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. diff --git a/react/src/components/atoms/buttons/ButtonWithIcon/index.js b/react/src/components/atoms/buttons/ButtonWithIcon/index.js index 78fc5c4084..d0d8270feb 100644 --- a/react/src/components/atoms/buttons/ButtonWithIcon/index.js +++ b/react/src/components/atoms/buttons/ButtonWithIcon/index.js @@ -1,5 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; +import classNames from 'classnames'; import Icon from '../../icons/Icon'; import './style.css'; @@ -22,30 +23,23 @@ class ButtonWithIcon extends React.Component { } render() { const { - classes, canExpand, expanded, capitalized, iconSize, iconColor, icon, type + classes, canExpand, expanded, capitalized, iconSize, iconColor, icon, type, usage } = this.props; - let classNames = classes.join(' '); - if (canExpand) { - classNames += ' ma__button-icon--expandable'; - if (expanded) { - classNames += ' ma__button-icon--expanded'; - } - } - if (capitalized) { - classNames += ' ma__button-capitalized'; - } - if (iconSize === 'small' || icon.props.name === 'chevron') { - classNames += ' ma__icon-small'; - } - if (iconColor === 'green') { - classNames += ' ma__icon-green'; - } - if (icon.props.name === 'search') { - classNames += ' ma__button-search'; - } + // concat a space at the end of custom classes + let buttonClasses = classes ? `${classes.join(' ')} ` : ''; + buttonClasses += classNames({ + 'ma__button-icon': true, + 'ma__button-icon--expandable': canExpand, + 'ma__button-icon--expanded': canExpand && expanded, + 'ma__button-capitalized': capitalized, + 'ma__icon-small': iconSize === 'small' || icon.props.name === 'chevron', + 'ma__icon-green': iconColor, + 'ma__button-search': icon.props.name === 'search', + 'ma__button-search--secondary': icon.props.name === 'search' && usage === 'secondary' + }); const buttonProps = { type, - className: `ma__button-icon ${classNames}`, + className: buttonClasses, onClick: this.handleClick, tabIndex: 0 }; @@ -84,7 +78,9 @@ ButtonWithIcon.propTypes = { /** The aria-label property is used to provide the label to any assistive * technologies. This is useful if the text value is not descriptive of the * button's functionality. */ - ariaLabel: PropTypes.string + ariaLabel: PropTypes.string, + /** Button usage */ + usage: PropTypes.oneOf(['', 'secondary']) }; ButtonWithIcon.defaultProps = { @@ -96,7 +92,8 @@ ButtonWithIcon.defaultProps = { capitalized: false, iconSize: '', iconColor: '', - ariaLabel: 'search' + ariaLabel: 'search', + usage: '' }; export default ButtonWithIcon; diff --git a/react/src/components/atoms/buttons/ButtonWithIcon/style.scss b/react/src/components/atoms/buttons/ButtonWithIcon/style.scss index 96f7fd19eb..65e7f79f80 100644 --- a/react/src/components/atoms/buttons/ButtonWithIcon/style.scss +++ b/react/src/components/atoms/buttons/ButtonWithIcon/style.scss @@ -1,4 +1,5 @@ @import 'global'; +@import "01-atoms/button-search"; .ma__button-icon { background-color: $c-white; diff --git a/react/src/components/molecules/HeaderSearch/HeaderSearch.scss b/react/src/components/molecules/HeaderSearch/HeaderSearch.scss index 0cc1a59f67..889d8480c9 100644 --- a/react/src/components/molecules/HeaderSearch/HeaderSearch.scss +++ b/react/src/components/molecules/HeaderSearch/HeaderSearch.scss @@ -19,20 +19,27 @@ } } } + .ma__form { display: flex; - //overwrite needs to port back to shared scss - .ma__button-search { - border: 2px solid $c-overcast-gray !important; + } + + //overwrite needs to port back to shared scss + .ma__button-search { + &, &--secondary { + border: 2px solid !important; //override header-search button search border styles position: relative !important; - margin-left: -2px; - background-color: $c-white !important; - &:hover { - background-color: $c-primary-alt !important; - } + margin-left: -2px !important; + } + & { + @include ma-button-search($c-primary-alt, $c-white); + } + &--secondary { + @include ma-button-search($c-white, $c-primary-alt); } } + &__input { padding-right: 0 !important; } diff --git a/react/src/components/molecules/HeaderSearch/HeaderSearch.stories.js b/react/src/components/molecules/HeaderSearch/HeaderSearch.stories.js index 68cc2d6493..6d4b272ac2 100644 --- a/react/src/components/molecules/HeaderSearch/HeaderSearch.stories.js +++ b/react/src/components/molecules/HeaderSearch/HeaderSearch.stories.js @@ -21,7 +21,11 @@ storiesOf('molecules/HeaderSearch', module).addDecorator(withKnobs) buttonSearch: { onClick: action('Button clicked'), ariaLabel: text('HeaderSearch.buttonSearch.ariaLabel', 'Search'), - text: text('HeaderSearch.buttonSearch.text', 'Search') + text: text('HeaderSearch.buttonSearch.text', 'Search'), + usage: select('HeaderSearch.buttonSearch.usage', { + '': 'primary (default)', + secondary: 'secondary' + }, '') }, onSubmit: action('Form submitted'), onChange: action('Text input modified'), @@ -65,7 +69,11 @@ storiesOf('molecules/HeaderSearch', module).addDecorator(withKnobs) buttonSearch: { onClick: action('Button clicked'), ariaLabel: text('HeaderSearch.buttonSearch.ariaLabel', 'Search'), - text: text('HeaderSearch.buttonSearch.text', 'Search') + text: text('HeaderSearch.buttonSearch.text', 'Search'), + usage: select('HeaderSearch.buttonSearch.usage', { + '': 'primary (default)', + secondary: 'secondary' + }, '') }, onSubmit: action('Form submitted'), onChange: action('Text input modified'), diff --git a/react/src/components/molecules/HeaderSearch/index.js b/react/src/components/molecules/HeaderSearch/index.js index 8e54355c1b..29f51bf8a4 100644 --- a/react/src/components/molecules/HeaderSearch/index.js +++ b/react/src/components/molecules/HeaderSearch/index.js @@ -82,7 +82,8 @@ HeaderSearch.defaultProps = { label: 'Search terms', placeholder: 'Search Mass.gov', buttonSearch: { - ariaLabel: 'search' + ariaLabel: 'search', + usage: 'secondary' } }; diff --git a/react/src/components/organisms/Header/Header.stories.js b/react/src/components/organisms/Header/Header.stories.js index 776c492d4d..d5d240b928 100644 --- a/react/src/components/organisms/Header/Header.stories.js +++ b/react/src/components/organisms/Header/Header.stories.js @@ -56,7 +56,8 @@ storiesOf('organisms', module).addDecorator(withKnobs) onClick: (e) => { action('Search button clicked')(e); e.preventDefault(); - } + }, + usage: 'secondary' }, onSubmit: action('Form submitted'), onChange: action('Text input modified')