Awesome

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:

⬆ back to top

Modules

├─ animate
└─ core

└─ core

├─ core
└─ link-list
   ├─ core
   └─ body
      └─ core

└─ core

└─ core

└─ core

└─ core

└─ core

└─ core

└─ core

└─ core

└─ core

└─ core

└─ core

├─ core
└─ link-list
   ├─ core
   └─ body
      └─ core

├─ core
└─ link-list
   ├─ core
   └─ body
      └─ core

├─ core
└─ body
   └─ core

├─ core
├─ animate
└─ link-list
   ├─ core
   └─ body
      └─ core

├─ core
└─ body
   └─ core

└─ core

└─ core

├─ core
├─ text-inputs
│  └─ core
└─ buttons
   └─ core

└─ core

├─ core
├─ animate
├─ accordion
│  ├─ animate
│  └─ core
└─ link-list
   ├─ core
   └─ body
      └─ core

└─ core

└─ core

└─ core

└─ 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

• govau/design-system-starter
• govau/design-system-site
• govau/design-system-sketch-file

⬆ back to top