The Australian Government Design System has been decommissioned Visit our community page for more information

Australian Government Design System Components

The components for the Australian Government Design System.

Documentation

Full documentation at designsystem.gov.au

Installation

Prerequisites

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.

Installing modules

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.

⬆ back to top

Frequently asked questions

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.

⬆ back to top

Checklist and browser support

We use the below checklist to ensure new modules or updates to existing modules have a certain level of quality:

Checklist

General checks

Semantic HTML and non semantic test?
No JavaScript fallback?
SVG fallback, functional without SVG?
IE9, IE10, IE11 legacy test
IE8 functional test

Accessibility checks

Accessibility colour contrast
Keyboard accessible
Tested with screen reader
Accessibility expert review

CSS / Sass

Never nest anything that is not either an overwrite or a child element.
font-family and text color on elements that don’t require body
Using AU-space() with unit 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() or AU-focus( 'dark' )
Using AU-fontgrid() for font-size and line-height to snap typography to the grid.
Print style sheets

JavaScript

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.

package.json

dependencies - peerDependencies check
Delete/enable js object and settings for pancake plugins

Browser support

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

⬆ back to top

Modules

@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

⬆ back to top

Tests

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

⬆ back to top

Related repositories

⬆ back to top

govau/design-system-components

Australian Government Design System Components

Documentation

Installation

Prerequisites

Installing modules

Frequently asked questions

Checklist and browser support

Checklist

General checks

Accessibility checks

CSS / Sass

JavaScript

package.json

Browser support

Modules

Tests

Related repositories