Add declaration token support to the Details section

src/components/DocumentationTopic/PrimaryContent/PropertyListKeyType.vue

@@ -9,39 +9,50 @@
 -->
 
 <template>
- <div class="type">{{ typeOutput }}</div>
+  <div class="type">
+    <template v-for="(type, index) in types">
+      <DeclarationToken v-if="type.kind" class="type-child token-type" v-bind="type" :key="index" />
+      <span
+        v-else
+        :key="index"
+        class="type-child simple-type"
+      >{{ normaliseType(type) }}</span><template
+       v-if="index + 1 < typesCount"
+      >
+        <template v-if="twoOrLess"> or </template>
+        <template
+          v-else>, <template v-if="index === typesCount - 2">or </template>
+        </template>
+      </template>
+    </template>
+  </div>
 </template>
 
 <script>
+import DeclarationToken
+  from 'docc-render/components/DocumentationTopic/PrimaryContent/DeclarationToken.vue';
+
 export default {
   name: 'PropertyListKeyType',
+  components: { DeclarationToken },
   props: {
     types: {
       type: Array,
       required: true,
     },
   },
   computed: {
-    englishTypes() {
-      return this.types.map(({
-        arrayMode,
-        baseType = '*',
-      }) => (arrayMode ? (
+    typesCount: ({ types }) => types.length,
+    twoOrLess: ({ typesCount }) => typesCount <= 2,
+  },
+  methods: {
+    normaliseType({ arrayMode, baseType = '*' }) {
+      return arrayMode ? (
         `array of ${this.pluralizeKeyType(baseType)}`
       ) : (
         baseType
-      )));
+      );
     },
-    typeOutput() {
-      if (this.englishTypes.length > 2) {
-        return [this.englishTypes.slice(0, this.englishTypes.length - 1).join(', '),
-          this.englishTypes[this.englishTypes.length - 1],
-        ].join(', or ');
-      }
-      return this.englishTypes.join(' or ');
-    },
-  },
-  methods: {
     pluralizeKeyType(type) {
       switch (type) {
       case 'dictionary':

tests/unit/components/DocumentationTopic/PrimaryContent/PropertyListKeyType.spec.js

@@ -9,7 +9,10 @@
 */
 
 import { shallowMount } from '@vue/test-utils';
-import PropertyListKeyType from 'docc-render/components/DocumentationTopic/PrimaryContent/PropertyListKeyType.vue';
+import PropertyListKeyType
+  from 'docc-render/components/DocumentationTopic/PrimaryContent/PropertyListKeyType.vue';
+import DeclarationToken
+  from 'docc-render/components/DocumentationTopic/PrimaryContent/DeclarationToken.vue';
 
 const mountWithProps = propsData => shallowMount(PropertyListKeyType, { propsData });
 const mountWithTypes = (types = []) => mountWithProps({ types });
@@ -33,6 +36,31 @@ describe('PropertyListKeyType', () => {
     );
   });
 
+  it('detects declaration tokens and renders them', () => {
+    const wrapper = mountWithTypes([
+      { arrayMode: true, baseType: 'dictionary' },
+      { kind: 'text', text: '[string]' },
+      { arrayMode: false, baseType: 'other' },
+      { arrayMode: false },
+    ]);
+    const children = wrapper.findAll('.type-child');
+    expect(children).toHaveLength(4);
+    expect(children.at(0).classes()).toContain('simple-type');
+    expect(children.at(0).text()).toBe('array of dictionaries');
+    expect(children.at(1).classes()).toContain('token-type');
+    expect(children.at(1).is(DeclarationToken)).toBe(true);
+    expect(children.at(1).props()).toEqual({
+      identifier: undefined,
+      kind: 'text',
+      text: '[string]',
+      tokens: [],
+    });
+    expect(children.at(2).classes()).toContain('simple-type');
+    expect(children.at(2).text()).toBe('other');
+    expect(children.at(3).classes()).toContain('simple-type');
+    expect(children.at(3).text()).toBe('*');
+  });
+
   it('adds commas correctly depending on number of types', () => {
     const types = [
       { baseType: 'string' },
@@ -47,11 +75,7 @@ describe('PropertyListKeyType', () => {
       types[0],
       types[1],
     ]).text()).toBe('string or number');
-    expect(mountWithTypes([
-      types[0],
-      types[1],
-      types[2],
-    ]).text()).toBe('string, number, or boolean');
+    expect(mountWithTypes(types).text()).toBe('string, number, or boolean');
   });
 
   it('uses "*" as a wildcard placeholder for the base type', () => {