Vision Component Library

Vision is Flywheel's Design System with the goal of unifying the look and feel of all applications throughout Flywheel. This is a collection of scss styles and angular components for aiding and simplifying frontend work.

Installation

To use vision first install it from npm

$ npm install --save @flywheel-io/vision

Then you need to do some scss setup, in your global scss stylesheet add:

@use '@flywheel-io/vision' as vision;

@include vision.icons; // adds the icon font face and glyph classes
@include vision.colors; // defines the colors vision relies on

// optional inclusions
@include vision.mat-theme; // uses the vision angular material theme
@include vision.global-typography; // adds global styles for text elements

For more info on colors and theming check out the colors docs

And just like that, you're ready to use vision! 🥳

Using Components

Vision components are standalone: import the ones you use into the imports of the component that uses them

import { FwAlertComponent } from '@flywheel-io/vision';

@Component({
  imports: [
    FwAlertComponent,
    ...anyOtherFwComponentsYouMightNeed,
  ],
  ...

Then add it to your html

<fw-alert description="Look I'm an alert"></fw-alert>

For more details on using specific components, including their class name and selector, you can check out its docs page in the storybook