@terminus/ui v8.22.1-beta-charts-1
Terminus UI Library
The library of UI components used for Terminus applications.
Table of Contents
- Library Purpose
- Documentation
- Available Features
- Installation
- 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.
Available Features
- :hammer: started
- :white_check_mark: available
- :hankey: deprecated
Components
| Feature | Notes | Status | Demo | Docs | Usage |
|---|---|---|---|---|---|
| alert | |||||
| autocomplete | Input with autocomplete | :white_check_mark: | Demo | Docs | Usage |
| autofocus | Focus a focusable element on load | :white_check_mark: | Demo | Docs | Usage |
| badge | |||||
| button | :white_check_mark: | Demo | Docs | ||
| breadcrumbs | |||||
| card | :white_check_mark: | Demo | Docs | Usage | |
| chart | Charts, graphs etc | :white_check_mark: | Demo | Docs | Usage |
| chip | |||||
| checkbox | :white_check_mark: | Demo | Docs | Usage | |
| confirmation | Add a confirmation step to any ts-button | :white_check_mark: | Demo | Docs | Usage |
| copy | :white_check_mark: | Demo | Docs | ||
| csv entry | Manually enter CSV values | :white_check_mark: | Demo | Docs | Usage |
| datepicker | Input with calendar pop-up | :white_check_mark: | Demo | Docs | Usage |
| date-range | Dual inputs with calendar pop-ups | :white_check_mark: | Demo | Docs | Usage |
| dialog | |||||
| divider | |||||
| expansion | |||||
| file-upload | File upload with drag and drop | :white_check_mark: | Demo | Docs | Usage |
| input mask | Custom masks for inputs (phone, zip, etc) | :white_check_mark: | Demo | Docs | Usage |
| icon | Supported icons: https://material.io/icons | :white_check_mark: | Demo | Docs | Usage |
| icon-button | :white_check_mark: | Demo | Docs | Usage | |
| input | :white_check_mark: | Demo | Docs | Usage | |
| link | :white_check_mark: | Demo | Docs | Usage | |
| loading overlay | Overlay with loading spinner | :white_check_mark: | Demo | Docs | |
| login form | Email/password with 'remember me' checkbox | :white_check_mark: | Demo | Docs | |
| menu | :white_check_mark: | Demo | Docs | Usage | |
| navigation | Global navigation menu | :white_check_mark: | Demo | Docs | |
| paginator | Paging controls for collections | :white_check_mark: | Demo | Docs | Usage |
| pipes | A collection of pipes for Angular | :white_check_mark: | Demo | Docs | |
| progress | |||||
| progression | i.e. Stepper, wizard | ||||
| radio-group | :white_check_mark: | Demo | Docs | Usage | |
| scrollbars | Custom scrollars for both axis' | :white_check_mark: | Demo | Docs | Usage |
| search | input with search capabilities | :white_check_mark: | Demo | Docs | |
| select | :white_check_mark: | Demo | Docs | ||
| spacing | Helpers for consistent spacing | :white_check_mark: | Demo | Docs | |
| sort | Used by table for column sorting | :white_check_mark: | (see table demo) | Docs | Usage |
| table | :white_check_mark: | Demo | Docs | Usage | |
| tabs | |||||
| toggle | :white_check_mark: | Demo | Docs | ||
| tooltip | :white_check_mark: | Demo | Docs |
Pipes
:books: Pipes Documentation :circus_tent: Pipes Demo
| Pipe | Notes | Status |
|---|---|---|
tsDate | short, medium, extended, timestamp | :white_check_mark: |
tsRoundNumber | Round a number to a specific precision | :white_check_mark: |
tsSentenceCase | Convert string casing to sentence-case | :white_check_mark: |
tsTimeAgo | Human-readable time span | :white_check_mark: |
tsTitleCase | Title Case A String | :white_check_mark: |
Services
| Feature | Notes | Status | Demo | Docs | Usage |
|---|---|---|---|---|---|
| Validators | Expose custom validation methods for reactive forms | :white_check_mark: | Demo | Docs | Usage |
Available Validators
| Name | Purpose |
|---|---|
creditCard | A credit card number 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 |
greaterThanOrEqual | A number must be greater than or equal to another value |
lessThan | A number must be less than another value |
lessThanOrEqual | A number must be less than or equal to another value |
lowercase | A value must contain a minimum amount of lowercase characters |
minDate | A date must be after a minimum date |
maxDate | A date must be before a maximum date |
password | A password must meet certain requirements |
url | A URL must be valid |
Constants
| Feature | Notes | Status | Demo | Docs | Usage |
|---|---|---|---|---|---|
TS_SPACING | Expose our spacing sizes in TypeScript | :white_check_mark: | Demo |
Style Helpers
| Feature | Notes | Status | Docs |
|---|---|---|---|
| animation | :hammer: | ||
| assets | :hammer: | ||
| breakpoints | :white_check_mark: | Docs | |
| colors | :white_check_mark: | Docs | |
| cursors | :white_check_mark: | Docs | |
| layout | :white_check_mark: | Docs | |
| shadows | :white_check_mark: | Docs | |
| spacing | :white_check_mark: | Docs | |
| typography | :white_check_mark: | Docs | |
| z-index | :white_check_mark: | Docs |
Installation
Install the library and required dependencies:
$ yarn add @terminus/ui @terminus/ngx-tools @angular/flex-layout@6.0.0-beta.15 date-fns@2.0.0-alpha.7Global 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💻 |
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.
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago