? Component code and tests for the Australian Government design system
The Australian Government Design System has been decommissioned Visit our community page for more information
The components for the Australian Government Design System.
Full documentation at designsystem.gov.au
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.
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 [email protected] 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:
font-family
and text color
on elements that don’t require bodyAU-space()
with unit
for spacing everywhere but in font-sizes; no magic numbers$AU-color-
or $AU-colordark-
vars.AU-focus()
or AU-focus( 'dark' )
AU-fontgrid()
for font-size
and line-height
to snap typography to the grid.var AU = AU || {};
in top?AU
e.g.: AU.modulename.function1
, AU.modulename.function2
if( typeof module !== 'undefined' )
if( typeof module !== 'undefined' ) { module.exports = AU; }
so react can use it.dependencies
- peerDependencies
checkAll 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 |
npm install @gov.au/core
npm install @gov.au/accordion
├─ animate
└─ core
npm install @gov.au/animate
npm install @gov.au/body
└─ core
npm install @gov.au/breadcrumbs
├─ core
└─ link-list
├─ core
└─ body
└─ core
npm install @gov.au/buttons
└─ core
npm install @gov.au/callout
└─ core
npm install @gov.au/card
└─ core
npm install @gov.au/control-input
└─ core
npm install @gov.au/cta-link
└─ core
npm install @gov.au/direction-links
└─ core
npm install @gov.au/footer
└─ core
npm install @gov.au/form
└─ core
npm install @gov.au/grid-12
└─ core
npm install @gov.au/header
└─ core
npm install @gov.au/headings
└─ core
npm install @gov.au/inpage-nav
├─ core
└─ link-list
├─ core
└─ body
└─ core
npm install @gov.au/keyword-list
├─ core
└─ link-list
├─ core
└─ body
└─ core
npm install @gov.au/link-list
├─ core
└─ body
└─ core
npm install @gov.au/main-nav
├─ core
├─ animate
└─ link-list
├─ core
└─ body
└─ core
npm install @gov.au/page-alerts
├─ core
└─ body
└─ core
npm install @gov.au/progress-indicator
└─ core
npm install @gov.au/responsive-media
└─ core
npm install @gov.au/searchbox
├─ core
├─ text-inputs
│ └─ core
└─ buttons
└─ core
npm install @gov.au/select
└─ core
npm install @gov.au/side-nav
├─ core
├─ animate
├─ accordion
│ ├─ animate
│ └─ core
└─ link-list
├─ core
└─ body
└─ core
npm install @gov.au/skip-link
└─ core
npm install @gov.au/table
└─ core
npm install @gov.au/tags
└─ core
npm install @gov.au/text-inputs
└─ 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