Release v0.0.1-60

Package

Installation

Viewsare not available for all of the UI patterns while the package is in pre-release (however, it can be used in production environments). View the source code to inspect them for documentation.

About

The Working Patterns Library was created by leveraging the stylesheet established by the Workforce Data Portal (designed by Blenderbox) and applying design tokens from that project onto a fork of the ACCESS Patterns. This fork was refactored and standardized into a more universal set of patterns for new products with the same structure as ACCESS NYC and Working NYC.

The UI for ACCESS NYC is well established and based on an early version (v1) of the U. S. Web Design System (USWDS). Since the launch of ACCESS NYC, its UI has branched off into its own set of patterns. However, the UX guides for components from the USWDS are still used to guide their implementation in other ACCESS NYC properties.

The contents of the library include;

  • Elements – Web primitives including inputs, buttons, links, tables, icons, etc.

  • Components – Blocks that include elements, arranging them in specific layouts that may be repeated on a page. Cards, questions, alerts, dropdowns, etc.

  • Objects – Blocks with dynamic functionality and may appear once on a page or take up the entire view.

  • Utilities – Design tokens mapped to CSS selectors for modifying the tokens of other patterns depending on the need of the view. The majority of utilities are made available through the customization of a Tailwindcss library.

  • Demonstration Pages – The demo site showcases these patterns in action for teams to reference.

The patterns have been built using the NYCO Patterns Framework and the Patterns CLI.

Figma

The design started from code, however, a Figma file was created to visualize design tokens for both the NYC Opportunity and Workforce Development teams. The Figma file is a companion to the UI Patterns source code. Contents of the Figma file include:

  • Colors – The color scales and how they are applied to the interface as well as alternate color pallets for the interface.

  • Typography – The primary and secondary type designation (Montserrat and Lato), sizing for headings, paragraphs, and block quotes. Additionally, this page includes a guide on how the font sizing mechanism works for different view ports (mobile, tablet, and desktop).

  • Buttons – Styling for different button states and types.

  • Forms – A set of form question types including text, radio, checkbox, toggle, and selects.

  • Icons – A selection of UI icons from the Feather Icon Set as well as two custom UI icons (translate and accessibility). Additionally, icon usage in links and buttons.

  • Logos – Brand and agency logos. Note, these are not the logo source files. See the branding section below for links to the source.

  • Components – Reusable Figma components for additional designs.

  • Assets – Source for various assets including, but not limited to, social media banners and thumbnail icons.

  • Mockups – The file also includes mockups required for different designs.

Demo Pages