Move modals to a separate component and replace markdown in locales with HTML

README.md

@@ -1,11 +1,11 @@
 # chooser
 
-The Creative Commons License Chooser is meant to help people learn about CC licenses, and select the license that best fits their needs. The new version in this repo places greater importance on usability and an educational experience of the six CC licenses.
+The Creative Commons License Chooser is meant to help people learn about CC licenses, and select the license that best fits their needs. The new version in this repo places greater importance on usability, and an educational experience of the six CC licenses.
 
 ## About
 Repository containing the source code for the new Creative Commons License Chooser. The new chooser is still in beta, and a beta deployment can be found [here](https://chooser-beta.creativecommons.org/).
 
-This site is built using [Vue.js](https://vuejs.org/) (and vue-cli), and [Buefy](https://buefy.org/), among other things.
+This site is built using [Vue.js](https://vuejs.org/) (and vue-cli).
 
 #### Roadmap
 
@@ -26,7 +26,7 @@ You should now have the application running and accessible at http://localhost:8
 ## Contributing
 For information on contributing, please see [Creative Commons' Contribution Guidelines](https://opensource.creativecommons.org/contributing-code/)
 
-If you create a PR for your work, but you are not finished yet, please include `WIP:` in the beginning of your PR title. When your work on your PR is completed and you are ready for a final review, please remove the `WIP:` prefix from the title to indicate that your work is done.
+If you create a PR for your work, but you are not finished yet, please include `WIP:` in the beginning of your PR title. When your work on your PR is completed, and you are ready for a final review, please remove the `WIP:` prefix from the title to indicate that your work is done.
 
 Here's a [handy link](https://github.com/creativecommons/chooser/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc+label%3A%22help+wanted%22+-label%3A%22in+progress%22) that will show you all open issues in this repo that have the `help wanted` tag, but do not have the `in progress` tag.
 All issues in this list are up for grabs!
@@ -46,6 +46,6 @@ To run e2e tests, you must have Java installed. [[download Java here](https://ja
 The Chooser uses PostCSS plugin for PurgeCSS to make CSS bundle size smaller. It automatically removes unused CSS based on the classes found in the final built bundle. Some styles for dynamic components or dynamically-imported files can also be removed. If you find that the built site misses some styles, you can manually add the necessary classes or Regex expressions to the `safelist` array in the `postcss.config.js` file.
 
 ## Deployment
-The chooser is deployed to GitHub Pages. The source files for the beta deployment are contained in the `./docs/` dir, and are live. Any changes to this dir's contents will be automatically deployed, so please take care when making modifications to this location.
+The chooser is deployed to GitHub Pages. The source files for the beta deployment are contained in the `./docs/` dir, and are live. Any changes to this directory's contents will be automatically deployed, so please take care when making modifications to this location.
 
-To update the dist bundle, run ```$ npm run build```. This and copy the generated files from `./dist/` to `./docs/`, taking care to not delete the CNAME file in `./docs/`.
+To update the dist bundle, run ```$ npm run build```. This will also automatically copy the generated files from `./dist/` to `./docs/`.

package.json

@@ -22,13 +22,10 @@
     "dependencies": {
         "@creativecommons/vocabulary": "^2020.11.3",
         "@creativecommons/vue-vocabulary": "^2020.11.3",
-        "@fullhuman/postcss-purgecss": "^3.1.3",
-        "@linusborg/vue-simple-portal": "^0.1.4",
         "@sentry/vue": "^5.29.2",
         "bulma": "^0.9.1",
         "clipboard": "^2.0.6",
         "core-js": "^3.6.5",
-        "markdown-it": "^12.0.3",
         "node-sass": "^4.14.1",
         "sass-loader": "^8.0.2",
         "vue": "^2.6.10",
@@ -39,6 +36,7 @@
         "vuex": "^3.5.1"
     },
     "devDependencies": {
+        "@fullhuman/postcss-purgecss": "^3.1.3",
         "@vue/cli-plugin-babel": "^4.4.6",
         "@vue/cli-plugin-e2e-nightwatch": "^4.4.6",
         "@vue/cli-plugin-eslint": "^4.4.6",

src/App.vue

@@ -34,7 +34,7 @@
                         @restart="restart"
                         @done="done"
                     />
-                    <help-section />
+                    <help-section @change="openChooserModal" />
                 </div>
                 <div class="column right-column">
                     <!-- The right column with the recommended license should be fixed until
@@ -58,13 +58,18 @@
             </div>
         </div>
         <footer-section />
+        <chooser-modal
+            :active-modal="openModal"
+            @close="closeChooserModal"
+        />
     </div>
 </template>
 
 <script>
 // TODO Reduce custom styling in favour of Vocabulary styles
 import { mapMutations } from 'vuex'
 
+import ChooserModal from './components/ChooserModal'
 import HelpSection from './components/HelpSection'
 import Stepper from './components/Stepper'
 import LicenseUseCard from './components/LicenseUseCard'
@@ -80,11 +85,13 @@ export default {
         LicenseDetailsCard,
         LicenseUseCard,
         HeaderSection,
-        FooterSection
+        FooterSection,
+        ChooserModal
     },
     data() {
         return {
             currentStepId: 0,
+            openModal: null,
             showLicense: false,
             shouldShake: false,
             windowWidth: window.innerWidth
@@ -164,6 +171,12 @@ export default {
         },
         onResize() {
             this.windowWidth = window.innerWidth
+        },
+        openChooserModal(modal) {
+            this.openModal = modal
+        },
+        closeChooserModal() {
+            this.openModal = null
         }
     }
 }