Fix multiple type rendering issues (#18)

* Add font-weight variable to the attribute label (#15)

* refactor: add variable to adjust attribute label font-weight

* docs: adjust readme formatting

* chore(demo): add APIC-631 raml

* fix: append "Array of" to anyOf type names for scalars

* test: add test for scalar array in union toggles

* fix: if name is undefined, return undefined instead of string

* test: add test for undefined type name

* fix: when array is of scalar type, add "Array of" title

* test: add test for "Array of" title

* fix: array of number not replacing ns string section

* test: add test for array of number data type

* 4.2.5

* 4.2.6

* 4.2.8

* chore(deps): regenerate package-lock.json

Co-authored-by: Ci agent <arc@mulesoft.com>
Co-authored-by: Yuri <RIP95_95@mail.ru>

Author: 3 people

README.md

@@ -58,7 +58,8 @@ Custom property | Description | Default
 ## Usage
 
 ### Installation
-```
+
+```sh
 npm install --save @api-components/api-type-document
 ```
 
@@ -108,6 +109,7 @@ npm start
 ```
 
 ### Running the tests
+
 ```sh
 npm test
 ```

demo/APIC-631/APIC-631.raml

@@ -0,0 +1,20 @@
+#%RAML 1.0
+title: APIC-631
+
+
+types:
+  test1:
+    properties:
+      names1: string[] | nil
+  test2:
+    type: string[] | nil
+  test3:
+    type: string[]
+  test4:
+    properties:
+      names1: string[]
+  test5:
+    type: string[]
+  test8:
+    properties:
+      names8: number[]

demo/apis.json

@@ -9,6 +9,7 @@
   "APIC-289/APIC-289.yaml": "OAS 2.0",
   "APIC-282/APIC-282.raml": "RAML 1.0",
   "APIC-483/APIC-483.raml": "RAML 1.0",
+  "APIC-631/APIC-631.raml": "RAML 1.0",
   "APIC-429/APIC-429.yaml": { "type": "OAS 3.0", "mime": "application/yaml" },
   "new-oas3-types/new-oas3-types.yaml": { "type": "OAS 3.0", "mime": "application/yaml" },
   "oas-api/read-only-properties.yaml": { "type": "OAS 3.0", "mime": "application/yaml" }

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "@api-components/api-type-document",
   "description": "A documentation table for type (resource) properties. Works with AMF data model",
-  "version": "4.2.7",
+  "version": "4.2.8",
   "license": "Apache-2.0",
   "main": "index.js",
   "module": "index.js",

package.json

@@ -652,7 +652,7 @@ export class ApiTypeDocument extends PropertyDocumentMixin(LitElement) {
             .mediaType="${this.mediaType}"
             ?graph="${this.graph}"
           ></property-shape-document>`
-        : ''}
+        : html`<span>Array of:</span>`}
 
       <div class="array-children">
         ${items.map(

src/ApiTypeDocument.js

@@ -419,7 +419,7 @@ const mxFunction = (base) => {
       }
       list = this._resolve(list);
       if (this._hasType(list, this.ns.aml.vocabularies.shapes.ScalarShape)) {
-        return this._computeRangeDataType(list);
+        return `Array of ${this._computeRangeDataType(list)}`;
       }
       return this._computeDisplayName(list, list);
     }

src/PropertyDocumentMixin.js

@@ -181,6 +181,7 @@ export class PropertyShapeDocument extends PropertyDocumentMixin(LitElement) {
       [type] = type;
       let typed = String(type['@id']);
       typed = typed.replace(this.ns.w3.xmlSchema.key, '');
+      typed = typed.replace(this.ns.aml.vocabularies.shapes.toString(), '');
       const stLetter = typed[0].toUpperCase();
       return `${stLetter}${typed.substr(1)}`;
     } catch (_) {
@@ -295,6 +296,9 @@ export class PropertyShapeDocument extends PropertyDocumentMixin(LitElement) {
           shape,
           this.ns.w3.shacl.name
         ));
+        if (name === undefined) {
+          return undefined
+        }
         if (name && name.indexOf('amf_inline_type') === 0) {
           return undefined;
         }

src/PropertyShapeDocument.js

@@ -26,7 +26,7 @@ export default css`
   }
 
   .attribute-label {
-    font-weight: 500;
+    font-weight: var(--api-type-document-property-range-attribute-label-font-weight, 500);
     margin-right: 12px;
   }
 

src/RangeStyles.js

@@ -753,6 +753,7 @@ describe('<api-type-document>', () => {
     ['Compact model - Union types', true],
   ].forEach((item) => {
     describe(String(item[0]), () => {
+      const compact = item[1]
       describe('_typeChanged()', () => {
         let element = /** @type ApiTypeDocument */ (null);
         beforeEach(async () => {
@@ -813,6 +814,51 @@ describe('<api-type-document>', () => {
           assert.equal(u2.label, 'PropertyExamples', 'Union2 has name');
         });
       });
+
+      describe('APIC-631', () => {
+        let element = /** @type ApiTypeDocument */ (null);
+
+        beforeEach(async () => {
+          element = await basicFixture();
+        });
+
+        it('should render union toggle as "Array of String"', async () => {
+          const data = await AmfLoader.loadType('test2', compact, 'APIC-631');
+          element.amf = data[0];
+          element._typeChanged(element._resolve(data[1]));
+          await nextFrame();
+          const firstToggle = element.shadowRoot.querySelectorAll('.union-toggle')[0]
+          assert.equal(firstToggle.textContent.toLowerCase(), 'array of string');
+        });
+
+        it('should not render type name as "undefined" for inline type', async () => {
+          const data = await AmfLoader.loadType('test3', compact, 'APIC-631');
+          element.amf = data[0];
+          element.type = data[1]
+          await aTimeout(100);
+          const propertyName = element.shadowRoot.querySelector('property-shape-document').shadowRoot.querySelector('span.property-name');
+          assert.notExists(propertyName);
+        });
+
+        it('should render "Array of:" in title for scalar array', async () => {
+          const data = await AmfLoader.loadType('test3', compact, 'APIC-631');
+          element.amf = data[0];
+          element.type = data[1]
+          await aTimeout(100);
+          const firstSpan = element.shadowRoot.querySelector('span');
+          assert.exists(firstSpan);
+          assert.equal(firstSpan.textContent, 'Array of:');
+        });
+
+        it('should render "Array of number" data type', async () => {
+          const data = await AmfLoader.loadType('test8', compact, 'APIC-631');
+          element.amf = data[0];
+          element.type = data[1]
+          await aTimeout(100);
+          const dataType = element.shadowRoot.querySelector('property-shape-document').shadowRoot.querySelector('span.data-type');
+          assert.equal(dataType.textContent, 'Array of Number');
+        });
+      });
     });
   });