Building chooser as a web components

[shailee-m]

Fixes

Fixes #366 by @brylie
Fixes #374

Description

Wraps in vue component wrapper and builds into a web component. Added new build command for the same

Checklist

• My pull request has a descriptive title (not a vague title like Update index.md).
• My pull request targets the default branch of the repository (main or master).
• My commit messages follow [best practices][best_practices].
• My code follows the established code style of the repository.
• I added or updated tests for the changes I made (if applicable).
• I added or updated documentation (if applicable).
• I tried running the project locally and verified that there are no
  visible errors.

[shailee-m]

@brylie I have also added a fix for the unit test cases and integration test cases that were failing. For the unit test cases it required a babel plugin to use some webpack functionality.

All integration test cases were failing as the queries were done outside the iframe. I have created a wrapper for selecting iframe. Should I add in the docs too?

For this, you will have to change the test pipeline commands. Use npm run build-component && npm run test-component

[brylie]

Yes, please update the docs. With the web component approach, theiframe should no longer be necessary, so let's remove the iframe if possible.

Could you also include a demo/example code showing how to use the Chooser web component in a standard HTML page?

[shailee-m]

@brylie Used this in custom html to integrate it

<script src="https://unpkg.com/vue"></script>
<script src="http://127.0.0.1:8081/license-chooser.js"></script>

<license-chooser></license-chooser>

https://watch.screencastify.com/v/EY5fr35JFMkitbczuRyR

[brylie]

Used this in custom html to integrate it

Go ahead and add the example code to the project README, assuming we will use unpkg as CDN instead of localhost.

[shailee-m]

Used this in custom html to integrate it

Go ahead and add the example code to the project README, assuming we will use unpkg as CDN instead of localhost.

done

[brylie]

Due to node-gyp errors. I am not even able to install the node modules for this project.

Could you please include the contents of the dist/ folder in this pull request so I can test the files locally?

[brylie]

Could you please include the contents of the dist/ folder in this pull request so I can test the files locally?

[brylie]

Once we publish the new @creativecommons/vocabulary-components package, we can use it in this project instead of @creativecommons/vue-vocabulary. Likewise, we will be able to add dist/ back to .gitignore, since we should be able to build the project now (using node 14 at the least). After replacing node-sass with sass, the project should build successfully with node 16.

[brylie]

Hei @shailee-m. The Vocabulary Components package now has a 0.1.0 release:

https://www.npmjs.com/package/@creativecommons/vocabulary-components

Let's use vocabulary-components as a dependency here, instead of vue-vocabulary.

[shailee-m]

Hei @shailee-m. The Vocabulary Components package now has a 0.1.0 release:

https://www.npmjs.com/package/@creativecommons/vocabulary-components

Let's use vocabulary-components as a dependency here, instead of vue-vocabulary.

@brylie removed dist folder and added vocabulary-components as dependency

[shailee-m]

@brylie added assets, and fonts dependency. Also, created this PR to move assets to cc-assets folder

creativecommons/cc-assets#3

[brylie]

Also, created this PR to move assets to cc-assets folder

Let's keep the "degrees of openness" image in this project for now or link directly to a version hosted on the Wikimedia Commons.

https://commons.m.wikimedia.org/wiki/File:Ordering_of_Creative_Commons_licenses_from_most_to_least_permissive.png

FontAwesome icons, like the info circle should be imported directly from FontAwesome.

[brylie]

At least one of the FontAwesome icons is displayed really large, seen below. If this isn't trivial to fix in the current pull request, we can open a follow-up bug fix.

Steps to reproduce:

1. in license step 1, choose "Yes. I know the license I need."
2. in step 2, choose a license
3. view the "Recommended License" section, below the license icons

[shailee-m]

At least one of the FontAwesome icons is displayed really large, seen below. If this isn't trivial to fix in the current pull request, we can open a follow-up bug fix.

Steps to reproduce:

1. in license step 1, choose "Yes. I know the license I need."
2. in step 2, choose a license
3. view the "Recommended License" section, below the license icons

done