1.0.0 • Published 3 years ago

@gold.au/searchbox v1.0.0

Weekly downloads
-
License
MIT
Repository
github
Last release
3 years ago

@gold.au/searchbox

Contents


Install

yarn add @gold.au/searchbox
npm install @gold.au/searchbox

⬆ back to top


Dependency graph

/searchbox
├─ /core
├─ /text-inputs
│  └─ /core
└─ /buttons
   └─ /core

⬆ back to top


Tests

The visual test: https://auds.service.gov.au/packages/searchbox/tests/site/

⬆ back to top


Release History

  • v0.2.3 - Display search icon for XS breakpoint when responsive (Fix based on the new grid breakpoints)
  • v0.2.2 - Increase size for icon
  • v0.2.1 - Add styling for secondary buttons
  • v0.2.0 - Update padding on button, fix JSdoc
  • v0.1.0 - 💥 Initial version

⬆ back to top


License

Copyright (c) Commonwealth of Australia. Licensed under MIT.

⬆ back to top

};


Usage

⬆ back to top


React

Usage:

import AUsearchbox from '@gold.au/searchbox';

<AUsearchbox 
	label="Search" 
	btnText="Search"
	responsive={true}
	id="def-search"
	btnProps={{ onClick: () => console.log('hello'), className: 'blah', type: 'button' }}
/>

All props:


<AUsearchbox 
	label="Search"                        {/* Text of the label */}
	btnText="Search"                      {/* Text on the button */}
	dark={true}                           {/* Dark variation */}
	responsive={true}                     {/* Responsive variation, text turns to icon on smaller devices*/}
	icon={false}                          {/* Icon only, hides text on button */}
	id="def-search"                       {/* ID of the text input, required */}
	className=""                          {/* Additional class, optional */}
	wrapper="form"                        {/* Wrapper component. Can be a div or form. */}
	btnProps= {{type: 'button'}}          {/* Additonal props to be spread into the button */}
	inputProps= {{type: 'text'}}          {/* Additonal props to be spread into the text input */}
/>