Design System¶
This page gives an overview of the Design System, describing its current
status, where and how it's developed and deployed, and who is responsible for
maintaining it.
Description¶
The Design System (name unconfirmed) is one strand of the DPP (Digital Presence Programme). It is a collection of resources enabling developers and content editors to more easily create web publications, web apps, and websites that are consistent with the university's branding and style guidelines.
It consists of:
- A ReactJS component library.
- An API and example documentation website.
Expected future extensions:
- A website for content editors, with guidelines on content style.
- An assets download section, containing images and other content.
- A Gatsby website template.
Status¶
The Design System is currently pre alpha.
There is not, currently, a fixed timeline for releases as the development of the Design System is being done alongside the Undergraduate Admissions and University Card System projects. However it is hoped that an alpha release will be available around Autumn 2021.
The Design System is likely to factor into future changes to the internal SharePoint and external facing Drupal websites.
Various documents and websites are used to track the progress of the Design System and DPP as a whole, these are available via the DPP Sharepoint Site.
Some other documents are also used:
| Document | Description |
|---|---|
| Working Document | Goals, Scope, Progress on the Design System |
| Miro Board | Used for the weekly team meetings |
Contact¶
Issues discovered in the Design System or new feature requests should be opened as GitLab issues
Urgent technical queries and support should be directed to
devops+design-system@uis.cam.ac.uk and will be picked up by a member of the
team working on the service. To ensure that you receive a response, always
direct requests to devops+design-system@uis.cam.ac.uk rather than reaching out
to team members directly.
Environments¶
The Design System is currently deployed to the following environments:
| Name | URL | Supporting VMs |
|---|---|---|
| NPM Package | @ucam/design-system | |
| Developer Docs | Not yet deployed | GitLab Pages |
Source code¶
Projects relating to the Design System are in a
GitLab Group.
| Repository | Description |
|---|---|
| Design System | A mono-repo containing the Design System and its Documentation Website |
Technologies used¶
The following gives an overview of the technologies Design System is built on.
| Category | Language | Framework(s) |
|---|---|---|
| Design System | Typescript | Material-UI |
| API Documentation | Typescript | Gatsby |
Operational documentation¶
The following gives an overview of how the Design System is deployed and
maintained
How and where the Design System is deployed¶
The Design System is published to NPM, by the ucam-devops-bot (Credentials in 1Password Team Vault).
GitLab pipelines attempt to publish a release whenever there is a change on the master branch. This only succeed if the package.json version has been updated. Upon successful publish, the commit is tagged with the version number.
Deploying a new release¶
To publish a new release, merge a commit to master with a new package.json
version number.
Debugging¶
Debugging and general development instructions are available in the README.
People¶
The project leads for the Digital Presence Programme are Kate Livingstone and Barney Brown
The work-stream lead for the Design System is Chris
Mitchell.
The tech lead for the Design System is Richard
Peach.
The following engineers have experience with the Design System and are able to
respond to support requests or incidents: