@liveperson-design-system/components NPM

LivePerson Design System Web Components

This project uses Stencil to create Web Components. For more details please check Stencil Docs

Installing

You can install LPDS components with NPM or Yarn.

YARN: yarn add @liveperson-design-system/components
NPM: npm i @liveperson-design-system/components

How to use

Project with a Framework

First, you have to define custom elements. To do this you can import defineCustomElements function from @liveperson-design-system/components/loader

import { defineCustomElements } from '@liveperson-design-system/components/loader';

defineCustomElements();

If you need additional Polyfills use applyPolyfills function

import { applyPolyfills, defineCustomElements } from '@liveperson-design-system/components/loader';

applyPolyfills().then(() => {
  defineCustomElements();
});

Project without a Framework

If you're using a simple HTML page, you can add your component via a script tag. For example, if we published a component to npm, we could load the component through the unpkg CDN like this:

<html>
  <head>
    <script src="https://unpkg.com/@liveperson-design-system/components"></script>
  </head>
  <body>
    <lp-button>Button</lp-button>
  </body>
</html>

Alternatively, if you wanted to take advantage of ES Modules, you could include the components using an import statement. Note that type="module" only works in modern browsers (not available in IE11 or Edge 12-18).

<html>
  <head>
    <script type="module">
      import { defineCustomElements } from 'https://unpkg.com/@liveperson-design-system/components/loader/index.es2017.js';
      defineCustomElements();
    </script>
  </head>
  <body>
    <lp-button>Button</lp-button>
  </body>
</html>