genk-step-progress-bar

Multi step and dynamic progress bar built with Lit-Element. This webcomponent follows the open-wc recommendation.

Table of Contents

1. Installation
   • Built With
2. Usage
   • Available Props
   • Available CSS variables
   • Events
3. Linting
4. Testing
5. Tooling configs
6. Local Demo
7. Contact

Installation

npm install genk-step-progress-bar --save

Built With

• Node.js (v18.0.0)
• Lit

Usage

<script type="module">
  import 'genk-step-progress-bar/genk-step-progress-bar.js';
</script>

<genk-step-progress-bar .steps=${ARRAY}></genk-step-progress-bar>

Available Props

Required

• steps (Array) - Array of Objects with Badge and/or Label key-values

Optional

• activeStep (Number) - Initial active step, 1 by default

Available CSS variables

Colors

--genk-spb-clr-primary
--genk-spb-clr-secondary
--genk-spb-clr-dark
--genk-spb-clr-grey
--genk-spb-clr-light

Dimensions

--genk-spb-width
--genk-spb-badge-size

Transitions

--genk-spb-transition-duration
--genk-spb-transition-delay
--genk-spb-transition-timing-function

Linting

To scan the project for linting and formatting errors, run

npm run lint

To automatically fix linting and formatting errors, run

npm run format

Testing

To execute a single test run:

npm run test

To run the tests in interactive watch mode run:

npm run test:watch

Tooling configs

For most of the tools, the configuration is in the package.json to minimize the amount of files in your project.

If you customize the configuration a lot, you can consider moving them to individual files.

Local Demo

npm run start

To run a local development server with web-dev-server that serves the basic demo located in demo/index.html

Contact

Pablo Álamo - LinkedIn - [e-mail]

Project Link: https://gitlab.com/pablodevs1/lit-steps-progress-bar

(back to top)