Law Widgets web component library

This is a collection of web components for formatting and adding interactivity to Akoma Ntoso documents.

These are web components, so they work in any major Javascript framework, or with no framework at all.

Components

Content components

• la-akoma-ntoso
• la-gutter
• la-table-of-contents
• la-table-of-contents-controller

Behaviour components

• la-decorate-internal-refs
• la-decorate-external-refs
• la-decorate-terms

Using these component

There are three methods for using these web components:

Script tag

• Put a script tag similar to this <script type="module" src="https://cdn.jsdelivr.net/npm/@lawsafrica/law-widgets@latest/dist/lawwidgets/lawwidgets.esm.js"></script> in the head of your index.html
• Then you can use the element anywhere in your template, JSX, html etc

Node Modules

• Run npm install @lawsafrica/law-widgets --save
• Put a script tag similar to this <script type="module" src="node_modules/@lawsafrica/law-widgets/dist/lawwidgets/lawwidgets.esm.js"></script> in the head of your index.html
• Then you can use the element anywhere in your template, JSX, html etc

Webpack or similar

• Run npm install @lawsafrica/law-widgets --save
• Import the required modules in your app. They will automatically be registered as custom elements.

Example:

import '@lawsafrica/law-widgets/dist/components/la-akoma-ntoso';
import '@lawsafrica/law-widgets/dist/components/la-table-of-contents';

Development

Clone this repository and run:

npm install

Need help? Check out the Stencil docs.

Using Storybook

Development is easiest using Storybook for testing.

Run these commands in separate terminals:

npm run build.watch

npm run storybook

Building for production

To build the component for production, run:

npm run build

Running tests

To run the unit tests for the components, run:

npm run test

Copyright and license

Copyright 2022 Laws.Africa.

Licensed under GNU LGPLv3.