@fagforbundet/ngx-components

This package makes available the components and global styles needed for most of Fagforbundet's projects.

Styles

Global styles should be made available with classes where feasible (i.e. .ff-checkbox, .ff-button, .ff-dropdown, etc.). The class name combined with the ff- prefix ensures the availability of styles, while also ensuring low probability of hijacking any elements or other styles.

The styles folder contains these folders:

• abstracts -> Contains styles and variables for design tokens and other things that normally won't affect anything directly
• base -> Contains a file containing style references for everything one might need when adding the library to a project. Next to this file one can also find some barrel import files for cleanliness
• components -> Contains styles for design components (i.e. checkbox, button, dropdown, etc.)
• layouts -> Contains styles for layouts. These are often containers for different scenarios (i.e. page layouts, grids, misc. containers, etc. (not component specific layouts (i.e. menu-boxes)))
• utilities -> Contains utility styles (i.e. outlines, skeletons, etc.)
• vendor -> Contains references / imports of styles from vendors that the package depends on

The _index.scss file imports and forwards all relevant styles for use in other projects. To make the variables and mixins available in your application, @use the package:

@use '@fagforbundet/ngx-components' as ff;

To make the global styles (classes) available in your application @include the base mixin:

@use '@fagforbundet/ngx-components' as ff;

@include ff.base();

Variables

This package makes available variables for common design tokens. All variables are prefixed with ff-, and semantic variables are also prefixed with something that denotes the context (i.e. border-clr- or btn-clr-);

Component styles

Component specific styles should "live" in the component's own stylesheet, so that the component becomes self-contained. If the component requires the styles of any external package, these styles should be added to the _vendor.scss file to avoid including the same styles more than once. Two or more components should never require different versions of the same external package.

Fonts

Font files are present in this project for anyone who might need them, but Google Fonts serve them as well.

HTML

<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600;700&display=swap" rel="stylesheet">

CSS

@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600;700&display=swap');

Components

This package also includes all the common components needed to make any interface that Fagforbundet might need. In addition, there are a couple of so-called "bundles", used for common tasks. The bundles are:

• Auth Bundle -> used for everything related to authenticating with the frontend
• Helpers Bundle -> contains helpers for miscellaneous
• Request Bundle -> consolidates the way requests are defined and used
• Storage Bundle -> consolidates data storage in the browser and in memory