@mojdigital/pattern-library v0.0.1-beta.4

MOJ Digital - Pattern Library

A technical implementation of a reusable, code-based pattern library for MOJ Digital services - an extension of the GOV.UK Frontend.

Latest changes

Status

Purpose

To document common ways of solving problems and reduce multiplied effort. To fill the gaps between adhering to GOV.UK Design System guidelines whilst creating internal facing MOJ Digital services.

Indirect benefits:

• a place to share and work in the open
• documents learning that would otherwise have been lost
• creates a common language that people can use when talking about reusable components and design patterns
• modelling standards for Ministry of Justice Digital teams and individuals
• one place for developers and designers to look when searching for solutions (outside the GOV.UK Frontend)
• extra attention to detail

Problem statement

Individual teams within MOJ Digital have limited visibility of what others are working on. At the same time there are gaps in the GOV.UK Design System, particularly around internal services.

Teams often work on common problems within their individual projects and there is no process for documenting what they’ve learnt, this leads to a real danger that silos form.

There's an opportunity to standardise and document each component or pattern we come across so duplicated effort disappears. We learn from other's effort and teams start to solve problems collaboratively. Increasing the opportunities for co-designing, sharing research and supporting one another.

Install using npm

npm i --save @mojdigital/pattern-library

Import the SASS library

Within your project SASS import the MOJ Digital Pattern Library after GOV.UK Frontend:

@import "node_modules/govuk-frontend/all";
@import "node_modules/@mojdigital/pattern-library/all";

Include the necessary JavaScript

TODO.

With special thanks to BrowserStack for providing cross browser testing.