kaskadi / template-kaskadi-element

a template for building kaskadi's custom elements
MIT License
0 stars 0 forks source link
element template

GitHub Actions workflows status

Build status BuildFF status BuildChrome status Publish status Docs generation status

CodeClimate


Repository initialization

When creating a repository from this template an init workflow (see here) will run. This workflow uses kaskadi-cli in order to properly initialize your repository by:

Testing

mocha, chai, standard & karma are available as dev dependencies.

A build workflow (see here) along with individual build-on-chrome and build-on-firefox workflows are running on pull request and will execute your test suite before allowing you to merge your PR. It also has a coverage job already prepared that you can comment out as soon as your testing is in place and your REPORTER_ID is in the repository secrets. This is the ID on Code Climate used for uploading code coverage reports.

Beside running your unit tests, this workflow also runs a static code analysis to find any vulnerability in your code. If a vulnerability is found, a notification will appear in the Security tab of your repository.


Documentation

This repository comes with a generate-docs workflow that generates documentation automatically for you using JSDOC. It'll check the element's file (found in the main field of package.json) for JSDOC-like comments in order to build its documentation. It also checks for any CSS custom variables and lists them in the documentation. See here and there for more information.

If you would like to see the workflow configuration, head here.

You can configure the template used to generate the action documentation here.


Publishing

Publishing to CDN is done automatically via a publish workflow (see here). This workflow will run on push. It uses our internal action action-s3cp and a kaskadi.s3-push configuration field in package.json. See here for more details on how to use this action.

Before publishing, this workflow runs a static code analysis to find any vulnerability in your code. If a vulnerability is found, a notification will appear in the Security tab of your repository.

The workflow will also run your unit tests in order to catch any bugs that could be introduced via hotfixes.


Usage instructions

In another element:

// using the latest version
import 'https://cdn.klimapartner.net/modules/@kaskadi/template-kaskadi-element/template-kaskadi-element.js'
// using a specific version
import 'https://cdn.klimapartner.net/modules/@kaskadi/template-kaskadi-element/release/v1.0.0/template-kaskadi-element.js'

In the browser:

<!-- using the latest version -->
<script type="module" src="https://cdn.klimapartner.net/modules/@kaskadi/template-kaskadi-element/template-kaskadi-element.js"></script>
<!-- using a specific version -->
<script type="module" src="https://cdn.klimapartner.net/modules/@kaskadi/template-kaskadi-element/release/v1.0.0/template-kaskadi-element.js"></script>

Custom element documentation

template-kaskadi-element

Template element for the Kaskadi application.

This is intended to be used as base for building other lit-element components from it.

This element inherits properties from a base class KaskadiElement. To see which properties are available, please refer to KaskadiElement documentation.

Param Type Description
[phrase] string set of localized phrases that can be used for localization via our translate and lang module. This is a stringified object containing language as key (en, de, etc.) and the corresponding phrase as value.

Example

<template-kaskadi-element phrase="${JSON.stringify({ en: 'Hello', de: 'Hallo', fr: 'Bonjour' })}"></template-kaskadi-element>

Custom styles

No custom CSS properties found in this element.