@lansforsakringar/core-components
Advanced tools
LFDS is Länsförsäkringar's design system core components distributed as composable Web Components.
You can import the design system using a script tag. Many CDN's distribute packages published to npm, for example jsDelivr. You should define the exact version you want to use to avoid breaking changes.
<script
type="module"
src="https://cdn.jsdelivr.net/npm/@lansforsakringar/core-components@VERSION"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lansforsakringar/core-components@VERSION/index.css">
If you prefer to host them yourself, you can export the package to a directory and serve it from your own server, see CLI.
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 assetPath 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 assetPath="/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.
Just like with the script tag, assets can be served from a CDN. All assets are configured to be served from the /assets path relative to the package.
<lfds-config
assetPath="https://cdn.jsdelivr.net/npm/@lansforsakringar/core-components@VERSION/assets">
<!-- Your application goes here -->
</lfds-config>
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 assetPath="/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
The npm package @lansforsakringar/core-components receives a total of 16 weekly downloads. As such, @lansforsakringar/core-components popularity was classified as not popular.
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.