Review Widget

- See npm package here

- This webcomponent follows the open-wc recommendation.

Installation

yarn install

Linting and formatting

To scan the project for linting and formatting errors, run

yarn run lint

To automatically fix linting and formatting errors, run

yarn run format

Testing with Web Test Runner

To execute a single test run:

yarn run test

To run the tests in interactive watch mode run:

yarn run test:watch

Tooling configs

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

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

Development Notes

Publishing

Make sure you have access to the G2 NPM account.

To publish a new version of the widget, update the version number in package.json and commit the changes.

  npm login

then

  yarn start
  yarn build
  yarn publish

Staging

This only works with chubbywombat in it's current state.

1. Build and publish using instructions above
2. Update review-widget version in UE package.json and run yarn install
3. Deploy to chubbywombat with updates
4. When using tags outside of the my g2 preview, use the 'env' attribute to point to the correct environment, The preview on my g2 does this automatically. 5. <review-widget widget-id="<WIDGET_UUID>" env="staging"></review-widget>

Local

  yarn start
  yarn build

  <script src="http://localhost:8000/build-modern/components/review-widget.js"></script>
  <review-widget widget-id="<WIDGET_UUID>" env="development"></review-widget> 

The env attribute is necessary to ensure api calls are made to your local UE server (development).

You'll need to run yarn build after every change

Testing in UE

UE includes this widget in package.json. To update UE to use this local version, you can use yarn link:

From the UE directory, create a link to this directory with:

  > yarn link --relative ../review-widget

Update any HTML tags to point to the local widget.

  <script src="https://www.g2.test/assets/review_widget.js"></script>
  <review-widget widget-id="<WIDGET_UUID>" env="development"></review-widget> 

Enable Shadow dom in Chrome inspect

1. Open Dev tool by pressing F12
2. Click on the cog icon in the right top
3. Enable option "Show Shadow DOM" under Elements category
4. Go to Elements panel and you will see the component DOM with all styles