@terminus/ui

Terminus UI Library

The library of UI components used for Terminus applications.

---

Table of Contents

• Library Purpose
• Documentation
  • Versioned Documentation and Demos
• Available Features
  • Components
  • Pipes
  • Services
    • Available Validators
  • Constants
  • Style Helpers
• Installation
  • Fonts and Typefaces
  • Global Styles
• SCSS Helpers
• Contributing
• Contributors
• Project Resources

Library Purpose

This library was created to assist Terminus engineers in maintaining a consistent experience across applications while following a unified design language.

The library is open source with the hopes that others may find solutions and ideas here, as we have done while browsing so many other repositories. While we want to make decisions that are best for everyone, in the end, the needs of the Terminus engineering team must come first.

If a deviation makes sense for the feature itself, but not for Terminus, we support (and will assist in) abstracting the functionality out for generalization.

This library is heavily based on Material Design currently. This provides us a way to rely on very well thought out usability and accessibility decisions for areas we have not yet addressed internally. While we hold Material in high regard, we do not believe that all of their decisions are best for the Terminus UI specifically.

Documentation

The available features table contains links for functional and usage documentation for each feature.

Versioned Documentation and Demos

• latest
  • Latest TypeScript Documentation
  • Latest Demos

Available Features

• 🔨 started
• ✅ available
• 💩 deprecated

Components

Feature	Notes	Status	Demo	Docs	Usage
autocomplete	Deprecated. See selection-list	💩	Demo	Docs	Usage
autofocus	Focus a focusable element on load	✅	Demo	Docs	Usage
badge	See chip	✅	Demo
button		✅	Demo	Docs
card	Presentational card	✅	Demo	Docs	Usage
chart	Charts, graphs etc	✅	Demo	Docs	Usage
chip	Chip	✅	Demo	Docs	Usage
checkbox		✅	Demo	Docs	Usage
cohort-date-range	CohortDateRange	✅	Demo	Docs	Usage
confirmation	Add a confirmation step to any ts-button	✅	Demo	Docs	Usage
copy	Component to easily copy string values	✅	Demo	Docs	Usage
csv entry	Manually enter CSV values	✅	Demo	Docs	Usage
datepicker	See TsInputComponent	✅	Demo	Docs	Usage
date-range	Dual inputs with calendar pop-ups	✅	Demo	Docs	Usage
drawer	Slide-out drawer panel	✅	Demo	Docs	Usage
expansion-panel	Expansion panel with accordion & stepper functionality	✅	Demo	Docs	Usage
file-upload	File upload with drag and drop	✅	Demo	Docs	Usage
icon	Supported icons: https://material.io/icons	✅	Demo	Docs	Usage
icon-button	Icon only button	✅	Demo	Docs	Usage
input	Input with masking, datepicker, etc	✅	Demo	Docs	Usage
link		✅	Demo	Docs	Usage
loading overlay	Overlay with loading spinner	✅	Demo	Docs
login form	Email/password with 'remember me' checkbox	✅	Demo	Docs	Usage
logo	Variations of the official logo, certain colors available	✅	Demo	Docs	Usage
menu		✅	Demo	Docs	Usage
navigation	Global navigation menu	✅	Demo	Docs	Usage
paginator	Paging controls for collections	✅	Demo	Docs	Usage
pipes	A collection of pipes for Angular	✅	Demo	Docs
popover	Popover with templates	✅	Demo	Docs	Usage
radio-group		✅	Demo	Docs	Usage
scrollbars	Custom scrollbars for both axis'	✅	Demo	Docs	Usage
search	Input with search capabilities	✅	Demo	Docs
select	Deprecated. See selection-list	💩	Demo	Docs	Usage
selection-list	Classic select dropdown / autocomplete	✅	Demo	Docs	Usage
spacing	Helpers for consistent spacing	✅	Demo	Docs
sort	Used by table for column sorting	✅	(see table demo)	Docs	Usage
table		✅	Demo	Docs	Usage
tabs	Horizontal tab interface	✅	Demo	Docs	Usage
textarea	See input	✅	(see input demo)
toggle	Toggle switch	✅	Demo	Docs	Usage
tooltip	Simple tooltip	✅	Demo	Docs

Pipes

📚 Pipes Documentation
🎪 Pipes Demo

Pipe	Notes	Status
tsAbbreviateNumber	Abbreviate a number	✅
tsDate	short, medium, extended, timestamp	✅
tsRoundNumber	Round a number to a specific precision	✅
tsSentenceCase	Convert string casing to sentence-case	✅
tsTimeAgo	Human-readable time span	✅
tsTitleCase	Title Case A String	✅
tsTruncateAt	Truncate a string, start, middle, end	✅

Services

Feature	Notes	Status	Demo	Docs	Usage
Validators	Expose custom validation methods for reactive forms	✅	Demo	Docs	Usage

Available Validators

Name	Purpose	Status
creditCard	A credit card number must be valid	✅
domain	A domain must be valid	✅
email	An email address must be valid	✅
equalToControl	A control's value must be equal to another control's value	✅
greaterThan	A number must be greater than another value	✅
inCollection	A value must be found in a collection	✅
isInRange	A number must be between two numbers	✅
lessThan	A number must be less than another value	✅
lowercase	A value must contain a minimum amount of lowercase characters	✅
maxDate	A date must be before a maximum date	✅
minDate	A date must be after a minimum date	✅
numbers	A value must contain a minimum amount of numbers	✅
password	A password must meet certain requirements	✅
uppercase	A value must contain a minimum amount of uppercase characters	✅
url	A URL must be valid	✅

Constants

Feature	Notes	Status	Demo	Docs	Usage
TS_SPACING	Expose our spacing sizes in TypeScript	✅	Demo

Style Helpers

Feature	Notes	Status	Docs
a11y	Accessibility helpers	✅
animation		🔨
breakpoints	Media query breakpoints	✅	Docs
colors	Base colors	✅	Docs
cursors		✅	Docs
input-placeholder		✅
layout		✅	Docs
opposite-direction	Reverse a direction	✅
shadows	Shadow functions & mixins	✅	Docs
spacing	Control vertical/horizontal spacing	✅	Docs
triangle	Create a triangle using CSS	✅
typography	Typography styles	✅	Docs
z-index	z-index helper	✅	Docs

Installation

Install the library and required dependencies:

# Primary dependencies:
$ yarn add @terminus/ui @terminus/ngx-tools

# Peer dependencies that will need to be installed (needed by UI and tools libraries):
$ yarn add @angular/cdk @angular/material @angular/flex-layout@9.0.0-beta.29 date-fns ngx-perfect-scrollbar \
  @ngrx/effects @ngrx/store popper.js text-mask-core text-mask-addons

# Optional dependencies (needed if using `TsChartComponent`):
$ yarn add @amcharts/amcharts4 @amcharts/amcharts4-geodata

NOTE: @angular/* & @ngrx/* require 9.0.0 or greater.

Fonts and Typefaces

Add the following links to install the body fonts and icon fonts used by the library:

<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Global Styles

To use the global styles, import the CSS file into your stylesheets:

@import '~@terminus/ui/terminus-ui.css';

SCSS Helpers

To use the provided SCSS helper methods/variables/mixins, import the helpers file from @terminus/ui:

@import '~@terminus/ui/helpers';

Contributing

View the contribution documentation and the development documentation.

Contributors

Thanks goes to these wonderful people (emoji key):

Benjamin Charity 💻 📖 ⚠️ 🎨 🤔 👀 🔧	coreyterminator 💻 📖 ⚠️	Wendy 🐛 💻 📖 🤔 🚧 👀 ⚠️	Brian Malinconico 🐛 🤔	David Harkness 💻	kal93 🐛	divyameher 🐛
Devon Peet 🎨 🤔	dean jones 💻 🤔 ⚠️ 🎨 🐛	shani-terminus 🐛 💻 📖 💡 👀 ⚠️ 🤔 🚧 🔧	edwin-terminus 🐛 💻 📖 💡 ⚠️	Irina Ershova 🐛

This project follows the all-contributors specification. Contributions of any kind welcome!

Project Resources

• Semantic Release - Automatically release versioned release to NPM and generate a changelog in the Github tag.
• Commitizen - Interactive cli for enforcing commit message format.
• Commitizen VSCode Plugin - VSCode plugin for commitizen.
• Doctoc - Generate documentation table of contents.
• CodeCov - Code coverage reporting.