github.com/iqoqo/nomad@v0.11.3-0.20200911112621-d7021c74d101/ui/stories/components/search-box.stories.js (about) 1 import hbs from 'htmlbars-inline-precompile'; 2 3 export default { 4 title: 'Components|Search Box', 5 }; 6 7 export let Standard = () => { 8 return { 9 template: hbs` 10 <h5 class="title is-5">Search Box</h5> 11 <SearchBox 12 @searchTerm={{mut searchTerm1}} 13 @placeholder="Search things..." /> 14 <p class="annotation">The search box component is a thin wrapper around a simple input. Although the searchTerm passed to it is a mutable reference, internally search term is debounced. This is to prevent potentially expensive code that depends on searchTerm from recomputing many times as a user types.</p> 15 <p class="annotation">There is no form of the search box component that defers updating the searchTerm reference until the user manually clicks a "Search" button. This can be achieved by placing a button next to the search bar component and using it to perform search, but search should be automatic whenever possible.</p> 16 `, 17 }; 18 }; 19 20 export let Compact = () => { 21 return { 22 template: hbs` 23 <h5 class="title is-5">Compact Search Box</h5> 24 <SearchBox 25 @searchTerm={{mut searchTerm2}} 26 @placeholder="Search things..." 27 @inputClass="is-compact" /> 28 <p class="annotation">Search box provides an inputClass property to control the inner input. This is nice for fitting the search box into smaller spaces, such as boxed-section heads.</p> 29 `, 30 }; 31 };