OGCIO Design System

OGCIO-DS contains the code you need to start building a user interface for government platforms and services.

See live examples of OGCIO components, and guidance on when to use them in your service, in the OGCIO Design System.

Contact the team

If you want to know more about OGCIO-DS, you can go to the Contact us page.

Quick start

There are 2 ways to start using OGCIO-DS components in your app.

Once installed, you will be able to use the code from the examples in the OGCIO-DS in your service.

1. Install with npm (recommended)

We recommend installing OGCIO-DS using node package manager (npm).

2. Install using compiled files

You can also install OGCIO-DS by copying our CSS, JavaScript and asset files into your project.

Accessibility

The OGCIO-DS team works hard to ensure that OGCIO-DS is accessible.

Using Frontend will help your service meet level AA of WCAG 2.1. But you must still check that your service meets accessibility requirements, especially if you extend or modify components.

You should also use:

• the JavaScript from OGCIO-DS
• a separate stylesheet if you support Internet Explorer 8

You can also read the accessibility statement for OGCIO-DS

Getting updates

To be notified when there’s a new release, you can watch the ogcio-ds Github repository

Find out how to update with npm.

Licence

Unless stated otherwise, the codebase is released under the MIT License. This covers both the codebase and any sample code in the documentation.

Run locally

You'll need Git and Node.js installed to get this project running.

Note: You will need the active LTS (Long-term support) Node.js version for this project (as specified in .nvmrc)

Fork repository (optional)

If you're an external contributor make sure to fork this project first

Clone repository

git clone git@github.com:ogcio/ogcio-ds.git # or clone your own fork

cd ogcio-ds

Using nvm (optional)

If you work across multiple Node.js projects there's a good chance they require different Node.js and npm versions.

To enable this we use nvm (Node Version Manager) to switch between versions easily.

1. install nvm
2. Run nvm install in the project directory (this will use .nvmrc)

Install npm dependencies

npm install

Start a local server

We use Storybook to serve our components. To build Storybook locally sources (build), use:

npm run storybook:build

To build Storybook dist sources (storybook/dist), use:

npm run build:storybook:dist

If you don't need to build Storybook sources but just serve the pages.

npm run storybook:ci

And to build sources for storybook (under storybook/dist), serve Storybook and watch for changes.

npm run storybook

Storybook will be available in localhost:6006.

Husky Install Script

This repository contains a script to install and uninstall Husky hooks.

Installation

To install Husky hooks, run the following command:

npm run husky:install

Uninstall

To uninstall Husky hooks, run the following command:

npm run husky:uninstall

OGCIO-DS package publishing

• Use conventional commits and squash commits to main
• Versioning and npm package publishing is handled by the Release Please GitHub action

---

Continuous integration

When changes are pushed to main branch on GitHub, Github Actions will:

• Build and publish the package to npm
• Deploy the Storybook website on GH pages
• Deploy the Storybook website to AWS

Contributing

Contributors to OGCIO repositories are expected to follow the Contributor Guide.