Replace PDM logo

src/components/AudioTrack/layouts/Row.vue

@@ -58,7 +58,7 @@
                 {{ $t('interpunct') }}
               </template>
             </div>
-            <License :license="audio.license" />
+            <VLicense :license="audio.license" />
           </div>
         </div>
       </div>
@@ -80,11 +80,11 @@
 <script>
 import { computed } from '@nuxtjs/composition-api'
 import AudioThumbnail from '~/components/AudioThumbnail/AudioThumbnail.vue'
-import License from '~/components/License/License.vue'
+import VLicense from '~/components/License/VLicense.vue'
 
 export default {
   name: 'Row',
-  components: { AudioThumbnail, License },
+  components: { AudioThumbnail, VLicense },
   props: ['audio', 'size'],
   setup(props) {
     /* Utils */

src/components/License/License.vue → src/components/License/VLicense.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="license text-dark-charcoal-70 flex flex-row items-center gap-2">
+  <div class="license flex flex-row items-center gap-2">
     <div class="flex gap-1">
       <VIcon
         v-if="isCC"
@@ -27,7 +27,7 @@ import { computed } from '@nuxtjs/composition-api'
 import VIcon from '~/components/VIcon/VIcon.vue'
 
 import {
-  ALL_LICENCES,
+  ALL_LICENSES,
   CC_LICENSES,
   LICENSE_ICON_MAPPING,
 } from '~/constants/license.js'
@@ -45,7 +45,7 @@ import sa from '~/assets/licenses/sa.svg'
  * license.
  */
 export default {
-  name: 'License',
+  name: 'VLicense',
   components: { VIcon },
   props: {
     /**
@@ -55,14 +55,16 @@ export default {
     license: {
       type: String,
       required: true,
-      validator: (val) => ALL_LICENCES.includes(val),
+      validator: (val) => ALL_LICENSES.includes(val),
     },
   },
   setup(props) {
     const icons = computed(() =>
       props.license.split(/[-\s]/).map((term) => LICENSE_ICON_MAPPING[term])
     )
-    const isCC = computed(() => CC_LICENSES.includes(props.license))
+    const isCC = computed(
+      () => CC_LICENSES.includes(props.license) || props.license === 'cc0'
+    )
 
     return {
       ccLogo,

src/components/License/meta/License.stories.mdx → src/components/License/meta/VLicense.stories.mdx

@@ -6,21 +6,21 @@ import {
   Story,
 } from '@storybook/addon-docs'
 
-import License from '~/components/License/License'
+import VLicense from '~/components/License/VLicense'
 
-<Meta title="Components/License" component={License} />
+<Meta title="Components/VLicense" component={VLicense} />
 
 export const Template = (args, { argTypes }) => ({
-  template: `<License v-bind="$props" />`,
-  components: { License },
+  template: `<VLicense v-bind="$props" />`,
+  components: { VLicense },
   props: Object.keys(argTypes),
 })
 
-# License
+# VLicense
 
-<Description of={License} />
+<Description of={VLicense} />
 
-<ArgsTable of={License} />
+<ArgsTable of={VLicense} />
 
 It can display CC licenses.
 

src/constants/license.js

@@ -9,7 +9,7 @@ export const CC_LICENSES = [
 
 export const NON_CC_LICENSES = ['cc0', 'pdm']
 
-export const ALL_LICENCES = [...CC_LICENSES, ...NON_CC_LICENSES]
+export const ALL_LICENSES = [...CC_LICENSES, ...NON_CC_LICENSES]
 
 export const LICENSE_ICON_MAPPING = {
   by: 'by',