@lansforsakringar/core-components

v1.2.0

Published

15 days ago

Länsförsäkrginar Design System Core Components

0High
0Medium
0Low

web-components Länsforsakringar design-system components

LFDS Core Components

LFDS is Länsförsäkringar's design system core components distributed as composable Web Components.

Using Components

Bundling

Install

The design system is published on NPM and can be installed as a package. It also has a peer dependency on lit so you need to install that as well. This is so to prevent conflicting version of lit being used in the same application, and leaves the choice of which version of lit to use to you.

npm install @lansforsakringar/core-components lit

You then need to import the components in your application for them to be available.

import '@lansforsakringar/core-components'

Styles

You'll also need to import the global styles in your application. This includes the global CSS variables and fonts. If you are using build tools like Vite or Webpack, you can import the CSS file directly in your JavaScript.

import '@lansforsakringar/core-components/index.css'

Or in your CSS if you are using a CSS preprocessor like PostCSS.

@import '@lansforsakringar/core-components';

If you are not using a build tool, you can either load the styles from a CDN, see Script/Link Tag, or copy the neccessary files and serve them yourself, see CLI.

React

The design system includes a React build that can be used to render the components in a React application. To use the React components you also need to install the @lit/react peer dependency.

npm install @lansforsakringar/core-components lit @lit/react

import { LfuiButton } from '@lansforsakringar/core-components/react'

export default function App() {
  return (
    <LfuiButton onLfClick={() => console.log('clicked')}>Click me</LfuiButton>
  )
}

Bundler plugins

For convenience, the design system provides plugins for popular bundlers that can be used to serve these assets.

Vite

The design system provides a Vite plugin that will copy the assets to the provided assetDir relative to the Vite out directory, or during development serve them as if they were local files in the public folder.

// vite.config.js
import { lfui } from '@lansforsakringar/core-components/vite'

export default {
  plugins: [lfui({ assetDir: 'lfui-assets' })]
}

Webpack

The design system also provides a Webpack plugin that will copy the assets to the provided assetDir relative to the Webpack output directory, or during development serve them as if they were local asset resources.

// webpack.config.js
const LFUIPlugin = require('@lansforsakringar/core-components/webpack')

module.exports = {
  plugins: [new LFUIPlugin({ assetDir: 'lfui-assets' })]
}

On build, the assets will be copied over to the provided assetDir relative to the Vite out directory.

Selfhosted

If you are not using a bundler or want to serve the assets in a different way, you can copy them to your web server and serve them yourself, see CLI.

CLI

This packages comes with a CLI for common tasks like exporting assets.

Export

The export command will take all JS/CSS entry points, including their associated dependencies and assets, and copies them to a directory of your choice.

$ lfui export --out dist/lfui

Assuming that the "dist" folder is publicly accessible on your server, you can reference the files like this in your application:

<!doctype html>
<html>
  <head>
    <script type="module" src="/lfui/main.js"></script>
    <link rel="stylesheet" href="/lfui/main.css" />
  </head>
  <body>
    <lfui-button>Click me</lfui-button>
  </body>
</html>

Authoring Components in This Package

If you are building or modifying components here, start with these docs in the repo root:

docs/components-authoring.md — How we structure, style, and wire components (what and why).
docs/your-first-component.md — Step-by-step tutorial with full code.
docs/component-checklist.md — Minimal PR-ready checklist.