Skip to content

GetTerminus/terminus-ui

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

Terminus UI Library


🚨 ATTENTION: THIS REPO HAS MOVED 🚨

We have moved to separately published packages from a monorepo.

This will:

  • provide caching to vastly improve build time
  • provide better dependency management between packages (requiring less downloads for some users)
  • provide an easier debugging environment
  • give us the option to support multiple frameworks (such as React or WebComponents)
  • give us a mature toolset that we don't have to maintain
  • allow consumers to update various UI components without opting in to all changes across all components at once

Please update any bookmarks to point to the new repo: https://github.com/GetTerminus/terminus-oss

Tips on migrating to the new packages can be found here: Migration guide.

New API docs location: https://github.com/GetTerminus/terminus-ui

🚨


The library of UI components used for Terminus applications.

codecov DavidDM DavidDM Dev
semantic-release Renovate MIT License ZenHub
NPM version Github release Library size
components pipes services style helpers validators


Table of Contents

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

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.