kal93 / terminus-ui

📚 The Terminus UI Library.

Terminus UI Library

The library of UI components used for Terminus applications.

---

Table of Contents

• Library Component Documentation
• Primary Library Features
• Available Features
  • Components
  • Pipes
  • Services
  • TypeScript Utilities
  • Style Helpers
• Installation
• Global Styles
• SCSS Helpers
• Development Workflow
• Contributors
• Project Resources

Library Component Documentation

This document covers documentation for building and maintaining the terminus-ui library. For documentation on all components and styles, visit GetTerminus.github.io/terminus-ui.

Primary Library Features

1. Demo app for developing within a real application
2. Testing
   • Unit (cross-browser)
   • JiT integration
   • AoT integration
   • Style regression (TODO)
3. Linting
   • TypeScript
   • SCSS
4. Documentation (docs/)
   • Manual docs for basic project flow (README)
     • Automated Table of Contents updates
     • Automated markdown link checking
   • Generated docs for TypeScript (docs/typescript/)
   • Manual docs for SCSS (with SCSS helpers)
5. Automated semantic versioning & publishing to NPM
6. Enforced commit style
7. Tree-shaking via Rollup.js
8. SCSS variables & functions exposed to the consuming application
9. Code coverage reporting (coverage/)
10. Automated dependency updates

Available Features

• ❌ not started
• 🔨 started
• ✅ available
• 💩 deprecated

Components

Feature	Notes	Status	Demo	Docs	Usage
alert		❌
autocomplete		✅	Demo	Docs	Usage
autofocus	Focus a focusable element on load	✅	Demo	Docs	Usage
badge		❌
button		✅	Demo	Docs
breadcrumbs		❌
card		✅	Demo	Docs	Usage
chip		❌
checkbox		✅	Demo	Docs	Usage
copy		✅	Demo	Docs
datavis		❌
datepicker		✅	Demo	Docs	Usage
date-range		✅	Demo	Docs	Usage
dialog		❌
divider		❌
expansion		❌
file-picker		❌
input-masking		❌
input-messages	Used by input to display validation messages	✅	(see input demo)
icon	Valid icon names: https://material.io/icons	✅	Demo	Docs	Usage
icon-button		✅	Demo	Docs	Usage
input		✅	Demo	Docs
link		✅	Demo	Docs
loading overlay		✅	Demo	Docs
login form		✅	Demo	Docs
menu		✅	Demo	Docs
navigation		✅	Demo	Docs
paginator		✅	Demo	Docs
progress		❌
progression		❌
radio-group		✅	Demo	Docs	Usage
search		✅	Demo	Docs
select		✅	Demo	Docs
spacing	Helpers for consistent spacing	✅	Demo	Docs
sort	Used by table to manage column sorting	✅	(see table demo)	Docs	Usage
table		✅	Demo	Docs	Usage
tabs		❌
toggle		✅	Demo	Docs
tooltip		✅	Demo	Docs

Pipes

Pipe	Notes	Status	Demo
tsDate	short, medium, extended, timestamp	✅	Demo
tsTimeAgo	a human-readable time span	✅	Demo

Services

Feature	Notes	Status
Document	⚠️DEPRECATED⚠️ Provide access to the native document object	💩
Spacing	Expose custom spacing sizes via a service	✅
Validators	Expose custom validation methods for reactive forms	✅
Window	⚠️DEPRECATED⚠️ Provide access to the native window object	💩

TypeScript Utilities

Feature	Notes	Status
Interfaces	Provide TypeScript interfaces for various objects	✅
Types	Provide TypeScript types for various parameters	✅

Style Helpers

Feature	Notes	Status	Docs
animation		🔨
assets		🔨
breakpoints		✅	Docs
colors		✅	Docs
cursors		✅	Docs
layout		✅	Docs
shadows		✅	Docs
spacing		✅	Docs
typography		✅	Docs
z-index		✅	Docs

Installation

Install the library and all required dependencies:

$ yarn add @terminus/ui @terminus/ui @angular/forms @angular/animations @angular/material hammerjs --exact

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'

Development Workflow

View the wiki page.

Contributors

Thanks goes to these wonderful people (emoji key):

Benjamin Charity 💻 📖 ⚠️ 🎨 🤔 👀 🔧	coreyterminator 💻	Wendy 🐛	Brian Malinconico 🐛 🤔	David Harkness 💻	kal93 🐛

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.
• SauceLabs Platforms - Cross-browser unit tests.
• Nucleus - Generates SCSS documentation.
• Doctoc - Generate documentation table of contents.
• CodeCov - Code coverage reporting.