Kontur Branding

This repo contain universal components for branding Kontur products:

• <kontur-logo></kontur-logo> (docs)
• <kontur-spinner></kontur-spinner>(docs)

Based on Stencil

Stencil is a compiler for building fast web apps using Web Components.

Stencil combines the best concepts of the most popular frontend frameworks into a compile-time rather than run-time tool.
Stencil generates 100% standards-based Web Components that run in any browser supporting the Custom Elements v1 spec, so they work in any major framework or with no framework at all.

How to use this components

Script tag

• Put a script tag in the head of your index.html similar to this <script src='https://unpkg.com/@konturio/kontur-branding/dist/[email protected]/component_name.esm.js'></script>, where component_name must be replaced with name of component from list above (you can omit the version (@1.0.0) if you want to always use the latest version).
• Then you can use the element anywhere in your template, JSX, HTML etc

React, Vue, Angular or Ember App

• Run npm install @konturio/kontur-branding --save
• Go to this instruction and select framework from list

Any other app (universal method)

• Run npm install @konturio/kontur-branding --save
• Put a script tag in the head of your index.html similar to this <script src='node_modules/@konturio/kontur-branding/dist/component_name.esm.js'></script> where component_name must be replaced with name of component from list above
• Then you can use the element anywhere in your template, JSX, html etc

In a stencil-starter app

• Run npm install @konturio/kontur-branding --save
• Add an import to the npm packages import '@konturio/kontur-branding'
• Then you can use the element anywhere in your template, JSX, html etc

How to develop

To start run:

npm install
npm start

To build the component for production, run:

npm run build

To run the unit tests for the components, run:

npm test

To create new one component run

npm generate

Naming Components

When creating new component tags, use kontur in the component name (ex: <kontur-logo>)