@gold.au/searchbox

Contents

• Install
• Dependency graph
• Tests
• Release History
• License

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

• React

⬆ 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 */}
/>