The components for the Australian Government Design System.
Full documentation at designsystem.gov.au
Production |
Staging |
---|---|
https://auds.service.gov.au | https://auds.staging.service.gov.au |
user: auds , pass: auds |
The design system components are distributed through the npm ecosystem. Npm requires node.js
and the components needs node.js 8 or higher.
If you are not familiar with npm
and want to use the design system, we have created a download page to help.
Once on the page you can select the components you wish to use and choose how you want do download them.
- CSS minified will bundle the CSS of the components into a single file to be used directly in HTML.
- CSS modules are used with modern JavaScript allowing you to import styles specific component styles.
- SASS modules will create multiple SASS files that can be imported into a main.scss file.
- JavaScript minified will bundle the JavaScript of the components together and minify them for use directly in HTML.
- JavaScript modules are used when you want to break a part the components functionality.
- React modules allow the components to be imported directly into React.
To install a module make sure you have a package.json
file in the root of your project folders. (You can generate one by running npm init
.)
Inside your working folder install any module and pancake will make sure you have all assets ready to use.
Run npm install @gov.au/body
to install the body module. To install several modules, chain them like:
npm install @gov.au/body @gov.au/header @gov.au/footer @gov.au/buttons
An even better experience is using Syrup. Install it globally via
npm install -g @gov.au/syrup
. More info coming soon.
View our frequently asked questions page to see common questions from the community.
If you canβt find an answer to a question you have please email us at designsystem@dta.gov.au or join our conversation on slack.
We use the below checklist to ensure new modules or updates to existing modules have a certain level of quality:
- Semantic HTML and non semantic test?
- No JavaScript fallback?
- SVG fallback, functional without SVG?
- IE9, IE10, IE11 legacy test
- IE8 functional test
- Accessibility colour contrast
- Keyboard accessible
- Tested with screen reader
- Accessibility expert review
- Never nest anything that is not either an overwrite or a child element.
-
font-family
and textcolor
on elements that donβt require body - Using
AU-space()
withunit
for spacing everywhere but in font-sizes; no magic numbers - No hardcoded colors, use
$AU-color-
or$AU-colordark-
vars. - Sass focus mixin
AU-focus()
orAU-focus( 'dark' )
- Using
AU-fontgrid()
forfont-size
andline-height
to snap typography to the grid. - Print style sheets
-
var AU = AU || {};
in top? - Each module has itβs own name-space prefixed with
AU
e.g.:AU.modulename.function1
,AU.modulename.function2
- Keep public API small, use private functions where you can
- Export out private function for tests only
if( typeof module !== 'undefined' )
- Export entire module in the end:
if( typeof module !== 'undefined' ) { module.exports = AU; }
so react can use it. - Provide sane defaults for parameters where you can
- Add jest unit tests where you can
- Document public API in the readme.
-
dependencies
-peerDependencies
check - Delete/enable js object and settings for pancake plugins
All components have to work on the below browsers:
Browser | Version | Platform | Engine |
---|---|---|---|
Internet Explorer | 8 | Windows 7 | Trident |
Internet Explorer | 9 | Windows 7 | Trident |
Internet Explorer | 10 | Windows 7 | Trident |
Internet Explorer | 11 | Windows 8.1 | Trident |
Edge | Latest | Windows 10 | EdgeHTML |
Firefox | Latest | OS X | Gecko |
Firefox | Latest | Windows 10 | Gecko |
Firefox | Latest | Android 6 | Gecko |
Chrome | Latest | OS X | Blink |
Chrome | Latest | Windows 10 | Blink |
Chrome | Latest | Android 4.0 | Blink |
Chrome | Latest | Android 6 | Blink |
Safari | Latest (11) | OS X | WebKit |
Safari | Latest - 1 ( 10 ) | iOS | WebKit |
Samsung | G S8 | ||
Samsung | G S7 | ||
Samsung | G S6 | ||
Chrome | pixel 7.1 | ||
Native browser | Lumia 930 8.1 | ||
Chome +1 | |||
Safari +1 | |||
Firefox +1 |
@gov.au/core
npm install @gov.au/core
See the visual test file for core
See the readme file for core
No dependencies
@gov.au/accordion
npm install @gov.au/accordion
See the visual test file for accordion
See the readme file for accordion
Dependencies:
ββ animate
ββ core
@gov.au/animate
npm install @gov.au/animate
See the visual test file for animate
See the readme file for animate
No dependencies
@gov.au/body
npm install @gov.au/body
See the visual test file for body
See the readme file for body
Dependencies:
ββ core
@gov.au/breadcrumbs
npm install @gov.au/breadcrumbs
See the visual test file for breadcrumbs
See the readme file for breadcrumbs
Dependencies:
ββ core
ββ link-list
ββ core
ββ body
ββ core
@gov.au/buttons
npm install @gov.au/buttons
See the visual test file for buttons
See the readme file for buttons
Dependencies:
ββ core
@gov.au/callout
npm install @gov.au/callout
See the visual test file for callout
See the readme file for callout
Dependencies:
ββ core
@gov.au/card
npm install @gov.au/card
See the visual test file for card
See the readme file for card
Dependencies:
ββ core
@gov.au/control-input
npm install @gov.au/control-input
See the visual test file for control-input
See the readme file for control-input
Dependencies:
ββ core
@gov.au/cta-link
npm install @gov.au/cta-link
See the visual test file for cta-link
See the readme file for cta-link
Dependencies:
ββ core
@gov.au/direction-links
npm install @gov.au/direction-links
See the visual test file for direction-links
See the readme file for direction-links
Dependencies:
ββ core
@gov.au/footer
npm install @gov.au/footer
See the visual test file for footer
See the readme file for footer
Dependencies:
ββ core
@gov.au/form
npm install @gov.au/form
See the visual test file for form
See the readme file for form
Dependencies:
ββ core
@gov.au/grid-12
npm install @gov.au/grid-12
See the visual test file for grid-12
See the readme file for grid-12
Dependencies:
ββ core
@gov.au/header
npm install @gov.au/header
See the visual test file for header
See the readme file for header
Dependencies:
ββ core
@gov.au/headings
npm install @gov.au/headings
See the visual test file for headings
See the readme file for headings
Dependencies:
ββ core
@gov.au/inpage-nav
npm install @gov.au/inpage-nav
See the visual test file for inpage-nav
See the readme file for inpage-nav
Dependencies:
ββ core
ββ link-list
ββ core
ββ body
ββ core
@gov.au/keyword-list
npm install @gov.au/keyword-list
See the visual test file for keyword-list
See the readme file for keyword-list
Dependencies:
ββ core
ββ link-list
ββ core
ββ body
ββ core
@gov.au/link-list
npm install @gov.au/link-list
See the visual test file for link-list
See the readme file for link-list
Dependencies:
ββ core
ββ body
ββ core
@gov.au/main-nav
npm install @gov.au/main-nav
See the visual test file for main-nav
See the readme file for main-nav
Dependencies:
ββ core
ββ animate
ββ link-list
ββ core
ββ body
ββ core
@gov.au/page-alerts
npm install @gov.au/page-alerts
See the visual test file for page-alerts
See the readme file for page-alerts
Dependencies:
ββ core
ββ body
ββ core
@gov.au/progress-indicator
npm install @gov.au/progress-indicator
See the visual test file for progress-indicator
See the readme file for progress-indicator
Dependencies:
ββ core
@gov.au/responsive-media
npm install @gov.au/responsive-media
See the visual test file for responsive-media
See the readme file for responsive-media
Dependencies:
ββ core
@gov.au/searchbox
npm install @gov.au/searchbox
See the visual test file for searchbox
See the readme file for searchbox
Dependencies:
ββ core
ββ text-inputs
β ββ core
ββ buttons
ββ core
@gov.au/select
npm install @gov.au/select
See the visual test file for select
See the readme file for select
Dependencies:
ββ core
@gov.au/side-nav
npm install @gov.au/side-nav
See the visual test file for side-nav
See the readme file for side-nav
Dependencies:
ββ core
ββ animate
ββ accordion
β ββ animate
β ββ core
ββ link-list
ββ core
ββ body
ββ core
@gov.au/skip-link
npm install @gov.au/skip-link
See the visual test file for skip-link
See the readme file for skip-link
Dependencies:
ββ core
@gov.au/table
npm install @gov.au/table
See the visual test file for table
See the readme file for table
Dependencies:
ββ core
@gov.au/tags
npm install @gov.au/tags
See the visual test file for tags
See the readme file for tags
Dependencies:
ββ core
@gov.au/text-inputs
npm install @gov.au/text-inputs
See the visual test file for text-inputs
See the readme file for text-inputs
Dependencies:
ββ core
Visual tests have been built into each module and can be seen in either of the README.md
files of each module or in the listing above.
We have also integrated pa11y for accessibility testing and are using jest for javascript
tests.
Run all tests with the npm test script:
npm run test