@lansforsakringar/core-components
Advanced tools
LFDS is Länsförsäkringar's design system core components distributed as composable Web Components.
The design system is published on NPM and can be installed as a package.
npm install @lansforsakringar/core-components
When using a bundler like Vite or Webpack, you have two options for importing and registering the components.
By importing the bare module, components will load lazily as they are rendered on the page, making sure that no unused code is loaded.
import '@lansforsakringar/core-components'
If you have more specific needs, e.g. your own lazy loading behavior, you can import the individual components and register them as custom elements.
import {
LfdsButton,
defineCustomElement,
} from '@lansforsakringar/core-components/lfds-button.js'
defineCustomElement(LfdsButton)
You'll also need to import the global styles in your application. 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.
The design system make use of static assets e.g. images, fonts etc. These files are included in the distributed packages and need to be served by the consuming application.
The design systems needs to be configured so that it knowns where you are serving the assets from. This is done by wrapping your application (or parts of) with the <lfds-config> element, setting the lf-asset-path attribute to the public path where assets are served.
<!doctype html>
<html>
<head>
<script type="module" src="/my-app.js"></script>
</head>
<body>
<lfds-config lf-asset-path="/lfds-assets">
<!-- Your application goes here -->
</lfds-config>
</body>
</html>
For convenience, the design system provides a Vite plugin that can be used to serve these assets.
// vite.config.js
import { lfds } from '@lansforsakringar/core-components/vite'
export default {
plugins: [lfds({ assetDir: 'lfds-assets' })],
}
On build, the assets will be copied over to the provided assetDir relative to the Vite out directory.
If you are not using Vite or want to serve the assets in a different way, you can copy them to your web server and serve them yourself, see CLI.
Typically web components are only rendered on the client, not the server. This is due to the fact that the web component runtime is not available on the server.
However, there are many benefits to server side rendering, e.g. SEO, accessibility, and resiliance, to name a few. Because not everyone has JavaScript. For this we have the @lansforsakringar/core-components/hydrate module.
This module will let you render the components on the server and send the static HTML to the client.
import { renderToString } from '@lansforsakringar/core-components/hydrate'
const html = await renderToString(`<lfds-button>Click me</lfds-button>`)
You can read more about hydration in the Stencil documentation.
This packages comes with a CLI for common tasks like exporting assets.
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.
$ lfds export --out dist/lfds
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="/lfds/lfds.esm.js"></script>
<link rel="stylesheet" href="/lfds/lfds.css">
</head>
<body>
<lfds-config lf-asset-path="/lfds/assets">
<!-- Your application goes here -->
</lfds-config>
</body>
</html>
You can also load individual components just like Manually Registering Components.
<script type"module">
import {
LfdsButton,
defineCustomElement,
} from '/lfds/components/lfds-button.js'
defineCustomElement(LfdsButton)
</script>
FAQs
Länsförsäkrginar Design System Core Components
We found that @lansforsakringar/core-components demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Socket and Seal Security collaborate to fix a critical npm overrides bug, resolving a three-year security issue in the JavaScript ecosystem's most popular package manager.
Security News
TypeScript is porting its compiler to Go, delivering 10x faster builds, lower memory usage, and improved editor performance for a smoother developer experience.
Research
Security News
The Socket Research Team has discovered six new malicious npm packages linked to North Korea’s Lazarus Group, designed to steal credentials and deploy backdoors.