Deprecate vocabulary

.storybook/meta/welcome.stories.mdx

@@ -1,7 +1,10 @@
 import { Meta, Story, Preview } from '@storybook/addon-docs/blocks'
 
-import vocabularySvg from '@creativecommons/vocabulary/assets/logos/products/vocabulary.svg'
-import gitHubCornerSvg from '@creativecommons/vocabulary/assets/github_corner.svg'
+import vocabularySvg from "@creativecommons/cc-assets/logos/products/vocabulary.svg";
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+import { faGithub } from '@fortawesome/free-brands-svg-icons';
+library.add(faGithub);
+
 
 <Meta title = 'Vue Vocabulary/Introduction'/>
 
@@ -16,9 +19,7 @@ import gitHubCornerSvg from '@creativecommons/vocabulary/assets/github_corner.sv
   </p>
 
   <a href="https://github.com/creativecommons/vue-vocabulary" class="github-corner">
-    <svg width="80" height="80" viewBox="0 0 250 250" xmlns="http://www.w3.org/2000/svg">
-      <use href={`${gitHubCornerSvg}#githubcorner`}></use>
-    </svg>
+    <FontAwesomeIcon icon="fa-brand fa-github" />
   </a>
 
   <p class="text-normal">

.storybook/preview.js

@@ -6,7 +6,7 @@ import i18n from '@/i18n'
 import viewports from './viewport'
 import order from './order'
 
-import '@creativecommons/vocabulary/css/vocabulary.css'
+import "@creativecommons/vocabulary-styles/dist/scss/vocabulary.scss";
 
 addParameters({
   options: { storySort: order },

.storybook/theme.js

@@ -1,6 +1,6 @@
 import { create } from "@storybook/theming";
 
-import vocabularySvg from "@creativecommons/vocabulary/assets/logos/products/vocabulary.svg";
+import vocabularySvg from "@creativecommons/cc-assets/logos/products/vocabulary.svg";
 
 export default create({
   // Inherit

package.json

@@ -22,8 +22,13 @@
     "dist/*.{js,css,map}"
   ],
   "dependencies": {
-    "@creativecommons/fonts": "^2020.11.3",
-    "@creativecommons/vocabulary": "^2020.11.3",
+    "@creativecommons/cc-assets": "^0.1.0",
+    "@creativecommons/vocabulary-fonts": "^0.1.1",
+    "@creativecommons/vocabulary-styles": "^0.2.1",
+    "@fortawesome/fontawesome-svg-core": "^1.3.0-beta3",
+    "@fortawesome/free-brands-svg-icons": "^5.15.4",
+    "@fortawesome/free-solid-svg-icons": "^6.0.0-beta3",
+    "@fortawesome/vue-fontawesome": "^2.0.6",
     "@vue/babel-helper-vue-jsx-merge-props": "^1.0.0",
     "@vue/babel-preset-jsx": "^1.1.2",
     "core-js": "^3.6.5",

src/elements/DonateButton/DonateButton.vue

@@ -1,17 +1,26 @@
 <template>
   <VButton class="donate" :size="size">
-    <i class="icon cc-letterheart-filled margin-right-small padding-top-smaller" />
+    <img
+      class="icon margin-right-small padding-top-smaller"
+      :src="ccHeartFilledIcon"
+    />
     <slot default />
   </VButton>
 </template>
 
 <script>
   import VButton from '../VButton/VButton'
   import { sized } from '@/mixins/sized'
+  import ccHeartFilledIcon from '@creativecommons/cc-assets/icons/cc-heart-filled.svg'
 
   export default {
     name: 'DonateButton',
     mixins: [sized],
-    components: { VButton }
+    components: { VButton },
+    data () {
+      return {
+        ccHeartFilledIcon
+      }
+    }
   }
 </script>

src/elements/VCheckbox/VCheckbox.vue

@@ -66,7 +66,7 @@
 </script>
 
 <style lang="scss" scoped>
-@import "~@creativecommons/vocabulary/scss/color.scss";
+@import "~@creativecommons/vocabulary-styles/dist/scss/color.scss";
 .checkbox, .radio {
   display: flex;
   align-items: baseline;

src/elements/VRadio/VRadio.vue

@@ -92,7 +92,7 @@
 </script>
 
 <style lang="scss" scoped>
-@import "~@creativecommons/vocabulary/scss/color.scss";
+@import "~@creativecommons/vocabulary-styles/dist/scss/color.scss";
 // TODO: These styles should be removed when the radio styles are merged into Vocabulary
 .radio {
   display: flex;

src/patterns/AppModal/AppModal.vue

@@ -17,7 +17,7 @@
             @click="$emit('close')"
           >
             <span class="icon has-color-gray is-size-4 is-size-6-touch">
-              <Cross />
+               <font-awesome-icon icon="fa-solid fa-times" />
             </span>
           </button>
         </header>
@@ -29,13 +29,16 @@
 
 <script>
   import { FocusTrap } from 'focus-trap-vue'
-  import Cross from '@creativecommons/fonts/assets/svg/symbols/times.svg?inline'
+  import { library } from '@fortawesome/fontawesome-svg-core'
+  import { faTimes } from '@fortawesome/free-solid-svg-icons'
+  import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+  library.add(faTimes)
 
   export default {
     name: 'AppModal',
     components: {
       FocusTrap,
-      Cross
+      FontAwesomeIcon
     },
     props: {
       /** Required for titlebar AND close button to show */
@@ -58,7 +61,7 @@
 </script>
 
 <style lang="scss" scoped>
-@import '~@creativecommons/vocabulary/scss/color.scss';
+@import "~@creativecommons/vocabulary-styles/dist/scss/color.scss";
 //@import '~@creativecommons/vocabulary/dist/scss/modal.scss';
 @import 'bulma/sass/utilities/_all';
 

src/patterns/VHeader/VHeader.stories.js

@@ -1,5 +1,5 @@
 import VHeader from './VHeader'
-import ChooserLogo from '@creativecommons/vocabulary/assets/logos/products/chooser.svg?inline'
+import ChooserLogo from '@creativecommons/cc-assets/logos/products/chooser.svg?inline'
 import NavItem from './NavItem'
 import NavDropdown from './NavDropdown'
 import { addDescription } from '../../utils/addDescription'

src/patterns/VHeader/VHeader.vue

@@ -47,7 +47,7 @@
  */
   import NavItem from './NavItem'
   import NavDropdown from './NavDropdown'
-  import CCSearchLogo from '@creativecommons/vocabulary/assets/logos/products/search.svg?inline'
+  import CCSearchLogo from '@creativecommons/cc-assets/logos/products/search.svg?inline'
 
   export default {
     name: 'VHeader',
@@ -65,7 +65,7 @@
   }
 </script>
 <style lang="scss" scoped>
-@import "~@creativecommons/vocabulary/scss/vocabulary";
+@import "~@creativecommons/vocabulary-styles/dist/scss/vocabulary.scss";
 
 .logo {
   color: black;