search

CityOfBoston / patterns

The City of Boston pattern library for public-facing websites.
https://patterns.boston.gov/
24 stars 9 forks source link
boston city city-government civic-tech css design-systems doit-boston fractal gov government open-source pattern-library smart-cities testcafe ui ux

readme

City of Boston

This is the pattern library for the City of Boston. It's currently a work in progress, but we're adding to it every day.

This project contains the marks and trade dress of the City of Boston's digital properties and should not be reused without the express permission of the City of Boston.

Build Status BrowserStack Status

Installing

npm install

Development

The pattern library is built using Stylus. We’re using PostCSS, Autoprefixer, and Rucksack as well. When JavaScript is required for the CSS components, we’re using plain JavaScript. All components should work without JavaScript as a default.

Web components are developed in TypeScript using the Stencil tool for compilation, bundling, and polyfills.

To develop against the pattern library, you can run:

npm run dev

This will build the components and watch for changes, and start up a Fractal server on https://localhost:3030/ to show the library.

Node 8 is required for development

Fractal uses a self-signed SSL certificate that is not trusted by browsers. If you’re using Chrome, you can allow invalid local signatures from this config setting: chrome://flags/#allow-insecure-localhost

All new features and changes need to work with our supported browsers.

Testing

Fleet has 2 types of tests:

During development, you can run npm run jest.dev to have Jest watch files and re-run.

To run the browser tests, start up your Fractal server with npm run dev and then run npm run testcafe.dev to start up a remote TestCafe server. It will print a URL that you can open in a web browser, and stay open to re-run tests when they change. You can even open this URL in a VM or on another computer to do testing in different browsers.

A prepush hook will run npm run test, which runs the Jest tests and also the TestCafe tests using a headless Chrome browser.

Check-in / Deployment

PRs should be made against the develop branch.

We have a Heroku pipeline that will automatically deploy per-PR instances of the patterns library. Look in the PR messages for a link.

Percy will also run for all of the Fractal component pages, so you can see if there are any breaking changes in the deploy.

In general, you should push to production immediately after merging the PR. To do a production push, open a new PR from develop -> production and merge it. If the change has significant visual changes, do visual browser testing before merging.

The Travis job will automatically push to S3 and invalidate the CloudFront cache.

Nov 2020: Migrated CI to travis-ci.com. Build history can be found at: https://travis-ci.org/github/CityOfBoston/patterns/branches

Reporting bugs

If you need to submit a bug report for the pattern library, please follow these guidelines. Following these guidelines helps us and the community better understand your report, reproduce the bug, and find related issues.

Prior to submitting a bug

Submitting a bug

Bug report template

## Basic details

URL: [URL]

## Steps to reproduce

1. [FIRST]
2. [SECOND]
3. [THIRD]

## What I think should happen

[Describe your expected behavior here]

## What did happen

[Describe the actual behavior here]

## Browser details

Browser: [Enter browser]
Version: [Enter version]
Ad blocker: [Ad blocker?]

[SCREENSHOT]

Code of Conduct

This project adheres to the Contributor Covenant code of conduct. By participating, you are expected to uphold this code. Please report unacceptable behavior to digital@boston.gov.

Changes/Updates

DEPLOYS