Prerequisite

The components package has @fortawesome/fontawesome-svg-core and @fortawesome/pro-regular-svg-icons as dependencies. These packages require a custom NPM registry and a package manager token to be installed.

Create a file named .npmrc in the root of your project, or wherever your package.json is located, with the content below. Replace FONT_AWESOME_PACKAGE_MANAGER_TOKEN with the actual token, which can be found on https://fontawesome.com/account

@fortawesome:registry=https://npm.fontawesome.com/
//npm.fontawesome.com/:_authToken=FONT_AWESOME_PACKAGE_MANAGER_TOKEN

Install

Once you've created the .npmrc file for Font Awesome, you're ready to install the packages:

npm install @twikit/ds-components
npm install @twikit/ds-tokens
npm install @twikit/ds-css

If you've already installed the packages, but want to update to the latest version:

npm install @twikit/ds-components@latest
npm install @twikit/ds-tokens@latest
npm install @twikit/ds-css@latest

Include

The fastest way to get started with the design system, is to include a <script> tag for the minified bundle of the components and a <style> tag for both the CSS custom properties and, optionally, the CSS framework to the head of your document:

<script type="module" src="/node_modules/@twikit/ds-components/dist/bundle.js"></script>
<link rel="stylesheet" href="/node_modules/@twikit/ds-tokens/dist/css/tw.tokens.css" />
<link rel="stylesheet" href="/node_modules/@twikit/ds-css/dist/tw.css" />

You can also include a minified bundle for specific components, for instance:

<script type="module" src="/node_modules/@twikit/ds-components/dist/badge.js"></script>
<script type="module" src="/node_modules/@twikit/ds-components/dist/button.js"></script>

Import

If you want more control over bundling, tree shaking and so on, you can import the component modules instead. This is generally a good idea when building applications with Angular, React and so on.

To import all components:

import '@twikit/ds-components';

Or specific components:

import '@twikit/ds-components/dist/src/badge/src/badge.js';
import '@twikit/ds-components/dist/src/button/src/button.js';

You will also want to import the CSS custom properties and, optionally, the CSS framework:

@import "~@twikit/ds-tokens/dist/css/tw.tokens.css";
@import "~@twikit/ds-css/dist/tw.css";

Import

The CSS custom properties and, optionally, the CSS framework should be added to styles.scss as shown in the Installation > Import section above. To use the components in Angular, you will need to import @twikit/ds-components and add CUSTOM_ELEMENTS_SCHEMA to schemas in app.module.ts:

import '@twikit/ds-components';
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@NgModule({
  ...
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})

export class AppModule {}

Reactive Forms

In order to use the components as form elements in a ReactiveForm, add the ngDefaultControl attribute to each component:

<tw-input
  label="Name"
  formControlName="name"
  ngDefaultControl
></tw-input>

Checkbox & Toggle

Because of a discrepency in how Angular handles the current state of a checkbox, you need to set the form value manually using the (change) event of <tw-checkbox> and <tw-toggle> in order to make it work.

# app.component.html

<tw-checkbox
  label="I agree"
  formControlName="agree"
  (change)="handleChange($event)
  ngDefaultControl
></tw-checkbox>

# app.component.ts

handleChange(event: any) {
  const checked = event.target.checked;
  this.form.get('agree')?.setValue(checked);
}