Legacy LFUI

Legacy, but still very much in use.

Usage

Importing the JavaScript bundle will hook up most components automatically.

import '@lansforsakringar/components'

Some components, however, need to be imported and initalized individually. They can be imported from the main bundle or separetly from the components directory.

// Import from main bundle
import { select } from '@lansforsakringar/components'

// Import from components directory
import select from '@lansforsakringar/components/select'

When it comes to CSS, you have two alternatives for getting started with the framework; either by importing the source files into a SCSS build, or by adding the precompiled files to your HTML document.

Importing from source

Importing the source code gives you access to the full SCSS suit including our variables and mixins – increasing your flexibility when extending the framework with your own styles and layouts.

Import index.scss at the very beginning of your main SCSS file:

@import '@lansforsakringar/components/src/scss/index.scss';

Bundled alternative

If you are using a bundler like Vite or Webpack, you can import the precompiled CSS file directly. Your bundler should handle any assets (eg. fonts) automatically.

@import '@lansforsakringar/components/index.css';

If you are not using a bundler or for whatever reason need to use the precompiled files in your HTML, you can just copy over the dist/lfui directory to your project. This folder contains the compiled CSS and JavaScript files, as well as the fonts.

Dependencies

When importing and compiling the source code, all dependencies are resolved automatically by your build tool. However, please be adviced that when including the compiled files, if you are using the ranged Slider interval variant, you will have to ensure that jQuery is loaded and available in the global scope.

Icons

Icons are not part of this package. Please see the Icons package for documentation on how to install and use.

Contributing

This package has its own Storybook setup for serving and testing during development.

After cloning this repo, install the dependencies and start the server.

npm install
npm dev

Along with starting Storybook, npm start will also rebuild and refresh the page as you work, allowing for quick changes and previews.