README
@wgnhs/elements
Generic Layout Web Components for WGNHS apps
Usage
Package includes baseline css and variables. You can replace variables with your own project specific copy.
<link rel="stylesheet" href="css/variables.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@wgnhs/elements@^0/dist/css/reset.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@wgnhs/elements@^0/dist/css/typography.css" />
Using scripts, include common first:
<script src="https://cdn.jsdelivr.net/npm/@wgnhs/elements@^0/dist/common.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@wgnhs/elements@^0/dist/layout.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@wgnhs/elements@^0/dist/router.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@wgnhs/elements@^0/dist/pdf.min.js"></script>
Components
Common
Contains baseline styles in both CSS and Constructable Stylesheets, packaged lit-element dependency, and small utility functions to quickly generate unique ID's and dispatch events.
- lit-element
- styles
- reset
- typography
- utils
Layout
Contains basic structural building blocks for UIs.
- app-collapsible
- app-sidebar
- app-spinner
- interact
- button-link
- toggle-switch
- in-radio
Router
Contains a general purpose front-end router based off of UI-Router.
- site-router
Contains an in-browser PDF renderer and controls. Based off of Mozilla's PDF.js
- pdf-view
Requires import of library:
<!-- Load PDF renderer -->
<script src="https://cdn.jsdelivr.net/npm/pdfjs-dist@2.2.228/build/pdf.min.js"></script>
<!-- Load WGNHS PDF viewer -->
<script src="https://cdn.jsdelivr.net/npm/@wgnhs/elements@^0/dist/common.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@wgnhs/elements@^0/dist/pdf.min.js"></script>
Development
This project requires NodeJS 8+ installed on your development system. We recommend using the latest LTS version.
Setup
npm install
After cloning the repository, bring up a terminal in the repository's root directory and run npm install
to download the dependencies.
Running
npm start
The npm start
command is configured to build the project, then serve the project
at http://127.0.0.1:8081/wgnhs-elements/
The server will watch for source changes and automatically refresh the browser.
Creating your own components
Replace {{class-name}}
with a CamelCase
name and {{tag-name}}
with the corresponding dash-separated
name
import { LitElement, html, css } from 'lit-element';
import { styles } from 'wgnhs-common';
export class {{class-name}} extends LitElement {
static get properties() {
return {
};
}
constructor() {
super();
}
static get styles() {
return [
...styles,
css`
`];
}
render() {
return html`
`;
}
}
customElements.define('{{tag-name}}', {{class-name}});
Building
npm run build
The distributable folder dist/
can be generated by runnning npm run build
Publishing GitHub Pages
npm run pages
The command npm run pages
will build the source code, and commit the dist/
folder to the gh-pages
branch of the repository. It will also push
the branch to the git remote named origin
Releasing
A baseline release process is implemented in npm scripts:
npm run release
The command will:
- install dependencies
- run a fresh build
- configure publishing options
- version to the next
patch
version - push the newly created commit and tag
- publish to npm
- push ghpages content