Equator Stencil Web Component Library

A collection of web components for use on any project. These are created using the stencil.js framework.

Web components are framework agnostic so can be used within any build stack. However, for a React or Nextjs project there is a different package which will allow these to be consumed in the same way as any other react component

Usage

To use in a project, you can install via npm:

npm i eqtr-stencil-library

You can then import and define the components you wish to use. Each component comes with its own defineCustomElement function, but it is recommended to rename this to somehting more specific:

import { defineCustomElement as defineEqtrAccordionGroup } from 'eqtr-stencil-library/dist/components/eqtr-accordion-group'
defineEqtrAccordionGroup()

import { defineCustomElement as defineEqtrAccordion } from 'eqtr-stencil-library/dist/components/eqtr-accordion'
defineEqtrAccordion()

These components can then be used on the page like any normal HTML tag:

<eqtr-accordion-group>
    <eqtr-accordion>
        <p slot="button-title" class="font-body text-accordion-heading font-semibold">Title of accordion</p>
        <i slot="inactive-icon" class='accordion-icon'>+</i>
        <i slot="active-icon" class='accordion-icon'>-</i>
        <div class="font-body text-body-medium rich-text">This is the body content of the accordion</div>
    </eqtr-accordion>
    <eqtr-accordion>
        <p slot="button-title" class="font-body text-accordion-heading font-semibold">Title of accordion 2</p>
        <i slot="inactive-icon" class='accordion-icon'>+</i>
        <i slot="active-icon" class='accordion-icon'>-</i>
        <div class="font-body text-body-medium rich-text">This is the body content of the accordion</div>
    </eqtr-accordion>
</eqtr-accordion-group>

Documentation for a specific component can be found in its own folder within the components directory