osp-lit-common

This repo contains some general-use components implementing the OSP design language and assorted simple functionality.

API Documentation

Static docs, which may not correspond exactly to your version: https://rmer.info/osp

To run your own synchronized version:

• git clone (this repo)
• (in repo dir) yarn install
• yarn watch
• Visit http://localhost:8080

Writing new web components

• yarn add osp-lit-common
• Follow lit-element and lit-html docs, except inherit from OspElement instead, and use its provided registry in preference to customElements:

import { OspElement } from 'osp-lit-common';

export class OspMyFooComponent extends OspElement {
	// ...
}
OspElement.define(OspMyFooComponent);

Also, in your template, import html and similar utilities from osp-lit-common as well, instead of directly referencing lit-element or lit-html.

More information about this is above in the API documentation.

Using components (in a lit-based app, or in another context like React, Vue, vanilla JS, etc)

TODO: there should be a bundle URL you can link from OSP to get all the common components while taking advantage of the client cache to not duplicate them between pages.

Until that's configured:

• yarn add osp-lit-common
• import components as needed, e.g: import { OspInput } from 'osp-lit-common/src/components/Input'
• Use the corresponding tags as needed in your templates, <osp-input label="Test"></osp-input>