dta-auds v0.0.1
Australian Government Design System Components
The components for the Australian Government Design System.
Documentation
Full documentation at designsystem.gov.au
Visual unit tests
Production | Staging |
---|---|
https://auds.service.gov.au | https://auds.staging.service.gov.au |
user: auds , pass: auds |
Contents
How to use
The design system components are distributed through the npm ecosystem and can only be installed through the npm
command.
Npm requires node.js and the components needs node.js 8 or higher.
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.
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.
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 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
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 |
Modules
├─ animate
└─ core
└─ core
├─ core
└─ link-list
├─ core
└─ body
└─ 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
├─ core
├─ animate
├─ accordion
│ ├─ animate
│ └─ core
└─ link-list
├─ core
└─ body
└─ core
└─ core
└─ core
└─ core
└─ core
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
License
Copyright (c) Commonwealth of Australia. Licensed under MIT.
};
5 years ago