LFDS Core Components for React

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

Using Components

Install

The design system is published on NPM and can be installed as a package.

npm install @lansforsakringar/core-components-react

Import Individual Components

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

export default function MyBytton() {
  return <LfdsButton>Click me</LfdsButton>
}

Styles

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-react/index.css'

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

@import '@lansforsakringar/core-components-react';

Assets

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 <LfdsConfig> element, setting the lfAssetPath attribute to the public path where assets are served.

import { LFDSConfig } from '@lansforsakringar/core-components-react'
import { createRoot } from 'react-dom/client'

function App() {
  return (
    <LfdsConfig lfAssetPath="/lfds-assets">
      {/* Your application goes here */}
    </LfdsConfig>
  )
}

const root = createRoot(document.body)
root.render(<App />)

Vite

For convenience, the design system provides a Vite plugin that can be used to serve these assets.

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

export default {
  plugins: [lfdsVite({ assetDir: 'lfds-assets' })],
}

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

Copy

If you are not using Vite or want to serve the assets in a different way, you can copy the assets from the package to your public folder.

cp -r node_modules/@lansforsakringar/core-components/dist/core-components/assets public/lfds-assets