Telos Design System

An Angular library with a collection of reusable UI components that support product development at Slavic401k. The goal of this project is to ensure consistency throughout our products and improve productivity of the front end team.

Demos and Examples

Please refer to Storybook for examples of components.

Install

npm install participant-design-system -save

Getting started

To start using the library, there are a few steps you need to follow.

1. Import the module

In your app.module.ts, import the ParticipantDesignSystemModule:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { ParticipantDesignSystemModule } from 'participant-design-system';

@NgModule({
  imports: [BrowserModule, ParticipantDesignSystemModule]
})
export class AppModule {}

2. Include global styles

In your angular.json, under architect.build.options.styles, add a path to the library's stylesheet:

{
  "styles": [
    "./node_modules/participant-design-system/styles.scss"
    // or styles-with-bootstrap.scss if you need bootstrap
  ]
}

Now you can Start using the components:

<tds-doughnut-widget
  [data]="[
    { key: 'Type A', value: 15 },
    { key: 'Type B', value: 85 }
  ]"
></tds-doughnut-widget>

3. Design tokens / Sass variables & mixins

To use the design tokens / Sass variables & mixins, add the following config to angular.json under your project

// architect.build.options
{
  "stylePreprocessorOptions": {
    "includePaths": [
      "./node_modules/participant-design-system/styles"
    ]
  }
}

// in your .scss
@import 'exports';

.message {
  font-color: $primary;
}

4. Fonts

In order for the specified fonts (Avenir Next) to display correctly, add the following code to your index.html

<link rel="stylesheet" href="https://s401k-cdn.s3.us-east-2.amazonaws.com/fonts/fonts.css">

5. Critical changes

Changes in breakpoints for CSS and TS files: added XXL (1400px) and changed values for all of them to prevent particular breakpoint include neighboring one. For example 576px changed to 575,98px