Bcros Rating Component

A framework-agnostic simple to use web component for collecting user feedback.

Installation

npm

npm i bcros-rating

pnpm

pnpm add bcros-rating

Usage

<script type="module">
  import "bcros-rating";
</script>

<bcros-rating></bcros-rating>

Attributes

• product: The product key required to submit a rating. Ex: product="45823457930457". Default "test".
• label: The aria-label applied to the element. Ex: label="Rate Our Service." Default "Star Rating".
• max: Alter the maximum displayed stars. Ex: max="10". Default "5".
• fifty: Alter the ratings to increment by 0.5 at a time, instead of 1. Ex: fifty. Default "false".
• testing: Using the testing flag along with the test key will submit ratings to the test db. Ex: testing product="436504236502935". Default "false"
• average: Displays the current average rating for the provided product key. Ex: average, Default "false".

Linting and formatting

To automatically fix linting and formatting errors, run

npm run format

Testing with Cypress

Current config only working with Vite 4.1.0 - Cypress may break when updating Vite

To run all Cypress tests from the terminal

npm run cy:run

To open Cypress component test runner in electron

npm run cy:open

Deployment

A '.env.production' file is required in the root folder to publish successfully. Also be sure to update the package.json version. If adding new components, a change to the tsconfig 'include' and vite.config 'entry' will be required. If changing the package name, must also update "exports: { "." : { "import": "package-name-here".js } }" in package.json.

npm run build

npm publish

Local Demo with vite

npm run dev

To run a local development server that serves the basic demo located in index.html

Built With

• Lit - Component Framework
• Cypress - Test Framework
• Vite - Build Tool & Development Server

License

This project is licensed under the MIT License