πŸ›  Component code and tests for the design system
Clone or download
alex-page Merge pull request #540 from govau/develop
Active states no longer links for side nav and main nav, bug fix a11ycolor
Latest commit f3a2e4a Oct 24, 2018

README.md

GOV.AU UI-Kit

The UI-Kit for the Australian Government Design System.

Documentation

Full documentation at designsystem.gov.au


Visual unit tests

Production CircleCI Staging CircleCI
https://uikit.service.gov.au https://uikit.staging.service.gov.au
user: uikit, pass: uikit

Contents


How to use

The GOV.AU UI-Kit is distributed through the npm ecosystem and can only be installed through the npm command. Npm requires node.js and the UI-Kit 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.

⬆ 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 guides@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/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/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/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/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


License

Copyright (c) Commonwealth of Australia. Licensed under MIT.

⬆ back to top

};