npm

Need private packages and team management tools?Check out npm Orgs. »

@gov.au/searchbox

0.2.2 • Public • Published

@gov.au/searchbox

Contents


Install

yarn add @gov.au/searchbox
npm install @gov.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.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 '@gov.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 */}
/>

install

npm i @gov.au/searchbox

Downloadsweekly downloads

56

version

0.2.2

license

MIT

repository

Gitgithub

last publish

collaborators

  • avatar
  • avatar
  • avatar
  • avatar
Report a vulnerability