Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/govau/design-system-components
🛠 Component code and tests for the Australian Government design system
https://github.com/govau/design-system-components
auds components css design design-systems government javascript react sass
Last synced: 2 months ago
JSON representation
🛠 Component code and tests for the Australian Government design system
- Host: GitHub
- URL: https://github.com/govau/design-system-components
- Owner: govau
- License: mit
- Archived: true
- Created: 2017-01-11T02:50:50.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2021-08-19T23:53:05.000Z (over 3 years ago)
- Last Synced: 2024-04-14T07:47:04.677Z (9 months ago)
- Topics: auds, components, css, design, design-systems, government, javascript, react, sass
- Language: HTML
- Homepage: https://auds.service.gov.au
- Size: 11.1 MB
- Stars: 738
- Watchers: 34
- Forks: 111
- Open Issues: 91
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
> **The Australian Government Design System has been decommissioned [Visit our community page for more information](https://community.digital.gov.au/t/dta-design-system-has-been-decommissioned/4649)**
Australian Government Design System Components
=============
> The components for the Australian Government Design System.
## Documentation
**Full documentation at [designsystem.gov.au](http://designsystem.gov.au/)**
---
## Installation
### Prerequisites
The design system components are distributed through the [npm](https://www.npmjs.com) ecosystem. Npm requires `node.js` and the components needs [node.js](https://nodejs.org/en/) 8 or higher.
If you are not familiar with `npm` and want to use the design system, we have created a [download page](https://designsystem.gov.au/download) 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](https://github.com/govau/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:
```shell
npm install @gov.au/body @gov.au/header @gov.au/footer @gov.au/buttons
```
An even better experience is using [Syrup](https://github.com/govau/pancake/tree/master/packages/pancake-syrup). Install it globally via
`npm install -g @gov.au/syrup`. More info coming soon.
**[⬆ back to top](#contents)**
----------------------------------------------------------------------------------------------------------------------------------------------------------------
## Frequently asked questions
View our [frequently asked questions page](./FAQ.md) 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](http://guides.service.gov.au/join-slack/).
**[⬆ back to top](#contents)**
----------------------------------------------------------------------------------------------------------------------------------------------------------------
## 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
- [x] Semantic HTML and non semantic test?
- [x] No JavaScript fallback?
- [x] SVG fallback, functional without SVG?
- [x] IE9, IE10, IE11 legacy test
- [x] IE8 functional test
#### Accessibility checks
- [x] Accessibility colour contrast
- [x] Keyboard accessible
- [x] Tested with screen reader
- [x] Accessibility expert review
#### CSS / Sass
- [x] Never nest anything that is not either an overwrite or a child element.
- [x] `font-family` and text `color` on elements that don’t require body
- [x] Using `AU-space()` with `unit` for spacing everywhere but in font-sizes; no magic numbers
- [x] No hardcoded colors, use `$AU-color-` or `$AU-colordark-` vars.
- [x] Sass focus mixin `AU-focus()` or `AU-focus( 'dark' )`
- [x] Using `AU-fontgrid()` for `font-size` and `line-height` to snap typography to the grid.
- [x] Print style sheets
#### JavaScript
- [x] `var AU = AU || {};` in top?
- [x] Each module has it’s own name-space prefixed with `AU` e.g.: `AU.modulename.function1`, `AU.modulename.function2`
- [x] Keep public API small, use private functions where you can
- [x] Export out private function for tests only `if( typeof module !== 'undefined' )`
- [x] Export entire module in the end: `if( typeof module !== 'undefined' ) { module.exports = AU; }` so react can use it.
- [x] Provide sane defaults for parameters where you can
- [x] Add [jest](https://facebook.github.io/jest/) unit tests where you can
- [x] Document public API in the readme.
#### package.json
- [x] `dependencies` - `peerDependencies` check
- [x] 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](#contents)**
----------------------------------------------------------------------------------------------------------------------------------------------------------------
## 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:
```shell
├─ 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:
```shell
└─ core
```
----------
@gov.au/breadcrumbs
npm install @gov.au/breadcrumbs
See the visual test file for breadcrumbs
See the readme file for breadcrumbs
Dependencies:
```shell
├─ 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:
```shell
└─ core
```
----------
@gov.au/callout
npm install @gov.au/callout
See the visual test file for callout
See the readme file for callout
Dependencies:
```shell
└─ core
```
----------
@gov.au/card
npm install @gov.au/card
See the visual test file for card
See the readme file for card
Dependencies:
```shell
└─ 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:
```shell
└─ 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:
```shell
└─ 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:
```shell
└─ core
```
----------
@gov.au/footer
npm install @gov.au/footer
See the visual test file for footer
See the readme file for footer
Dependencies:
```shell
└─ core
```
----------
@gov.au/form
npm install @gov.au/form
See the visual test file for form
See the readme file for form
Dependencies:
```shell
└─ 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:
```shell
└─ core
```
----------
@gov.au/header
npm install @gov.au/header
See the visual test file for header
See the readme file for header
Dependencies:
```shell
└─ core
```
----------
@gov.au/headings
npm install @gov.au/headings
See the visual test file for headings
See the readme file for headings
Dependencies:
```shell
└─ 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:
```shell
├─ 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:
```shell
├─ 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:
```shell
├─ 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:
```shell
├─ 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:
```shell
├─ 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:
```shell
└─ 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:
```shell
└─ core
```
----------
@gov.au/searchbox
npm install @gov.au/searchbox
See the visual test file for searchbox
See the readme file for searchbox
Dependencies:
```shell
├─ 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:
```shell
└─ 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:
```shell
├─ 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:
```shell
└─ core
```
----------
@gov.au/table
npm install @gov.au/table
See the visual test file for table
See the readme file for table
Dependencies:
```shell
└─ core
```
----------
@gov.au/tags
npm install @gov.au/tags
See the visual test file for tags
See the readme file for tags
Dependencies:
```shell
└─ 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:
```shell
└─ core
```
----------
**[⬆ back to top](#contents)**
----------------------------------------------------------------------------------------------------------------------------------------------------------------
## 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](#modules).
We have also integrated [pa11y](https://github.com/pa11y/pa11y) for accessibility testing and are using [jest](https://facebook.github.io/jest/) for javascript
tests.
Run all tests with the npm test script:
```shell
npm run test
```
**[⬆ back to top](#contents)**
----------------------------------------------------------------------------------------------------------------------------------------------------------------
## Related repositories
- [govau/design-system-starter](https://github.com/govau/design-system-starter)
- [govau/design-system-site](https://github.com/govau/design-system-site)
- [govau/design-system-sketch-file](https://github.com/govau/design-system-sketch-file)
**[⬆ back to top](#contents)**