Heading improvements and consistency

Author: m-mohr

CHANGELOG.md

@@ -17,6 +17,9 @@ This release contains a large number of changes. It lists only the major changes
 	- `Processes`
 	- `SearchableList`
 	- `ServiceType`
+- `BillingPlans`: 
+	- New properties `heading` and `headingTag`
+	- Shows a heading by default
 - `Description`: New property `allowHTML` to enable HTML rendering embedded in Markdown files
 - `FileFormats`, `ServiceTypes` and `UdfRuntimes`:
 	- New properties `searchTerm`, `sort`, `allowExpand`, `heading`
@@ -25,7 +28,7 @@ This release contains a large number of changes. It lists only the major changes
 	- Expands on click to show details about the file format / service type / UDF runtime
 - `ObjectTree`: New property `collapseAfter` to set the number of array elements or object properties to show by default. This can now be used to show all, too.
 - `SupportedFeatures`: 
-	- New property `heading`
+	- New properties `heading` and `headingTag`
 	- Shows a heading by default
 - `UdfRuntime`: Added slots `title`, `badges` and `before-description`
 

components/BillingPlans.vue

@@ -1,12 +1,7 @@
 <template>
 	<section class="vue-component billing-plans">
-		<div class="billing-currency">
-			<template  v-if="currency !== null">
-				<strong>Currency:</strong> {{ currency }}
-			</template>
-			<template v-else>No billing information provided.</template>
-		</div>
-		<h4>Plans</h4>
+		<component v-if="heading" :is="headingTag">{{ heading }}</component>
+		<strong>Plans</strong>
 		<ul v-if="currency !== null && plans.length">
 			<li v-for="(plan, key) in plans" :key="key">
 				<strong class="plan-name">
@@ -21,7 +16,13 @@
 				<Description v-if="plan.description" :description="plan.description" :compact="true" />
 			</li>
 		</ul>
-		<div v-else>No plans available.</div>
+		<p v-else>No plans available.</p>
+		<div class="billing-currency">
+			<template  v-if="currency !== null">
+				<strong>Currency:</strong> {{ currency }}
+			</template>
+			<template v-else>No billing information provided.</template>
+		</div>
 	</section>
 </template>
 
@@ -37,6 +38,14 @@ export default Utils.enableHtmlProps({
 		billing: {
 			type: Object,
 			default: () => ({})
+		},
+		heading: {
+			type: String,
+			default: 'Billing'
+		},
+		headingTag: {
+			type: String,
+			default: 'h2'
 		}
 	},
 	computed: {

components/Capabilities.vue

@@ -10,12 +10,8 @@
 			</span></div>
 		</section>
 		<Description v-if="capabilities.description" :description="capabilities.description" />
-		<h3>Supported functionalities</h3>
-		<SupportedFeatures :endpoints="capabilities.endpoints" />
-		<template v-if="capabilities.billing">
-			<h3>Billing</h3>
-			<BillingPlans :billing="capabilities.billing" />
-		</template>
+		<SupportedFeatures :endpoints="capabilities.endpoints" headingTag="h3" />
+		<BillingPlans v-if="capabilities.billing" :billing="capabilities.billing" headingTag="h3" />
 		<LinkList :links="capabilities.links" heading="More information" headingTag="h3" />
 	</div>
 </template>

components/JsonSchema.vue

@@ -3,20 +3,24 @@
 		<template v-if="visible">
 			<div v-if="isProcessGraph" class="schemaProcessGraph">
 				<div class="process-graph-parameters">
-					<p class="schema-attrs">{{ formatKey('type') }}: <span class="data-type">process</span></p>
+					<p class="schema-attrs">{{ formatKey('type') }}: <span class="data-type">child process</span></p>
+					<p title="The parameters that can be used in the process.">
+						<strong>Child Process Parameters:</strong>
+					</p>
 					<template v-if="hasParameters">
-						<p><strong>These parameters are passed to the process:</strong></p>
 						<ProcessParameter v-for="(param, i) in schema.parameters" :key="i" :parameter="param" :processUrl="processUrl" />
 					</template>
-					<strong v-else>No parameters are passed to the process.</strong>
+					<p v-else>No parameters defined.</p>
+					<p title="Describes what must be returned by the process.">
+						<strong>Child Process Return Value:</strong>
+					</p>
 					<template v-if="hasReturns">
-						<p><strong>The process must return:</strong></p>
 						<Description v-if="schema.returns.description" :description="schema.returns.description" :processUrl="processUrl" />
 						<div class="json-schema-container" v-if="schema.returns.schema">
 							<JsonSchema :schema="schema.returns.schema" />
 						</div>
 					</template>
-					<strong v-else>Not defined by the process.</strong>
+					<p v-else>No constraints defined.</p>
 				</div>
 			</div>
 			<div v-else-if="showRow('object')" class="schemaObjectElement">

components/SupportedFeatures.vue

@@ -1,9 +1,9 @@
 <template>
     <div class="vue-component features">
-        <h2 v-if="heading">
+		<component v-if="heading" :is="headingTag">
             {{ heading }}
             ({{ supportedFeatureCount }}/{{ totalCount }})
-        </h2>
+        </component>
         <ul>
             <li v-for="(status, feature) in supportedFeatures" :key="feature">
                 <span v-text="status.icon" :class="status.className" :title="status.tooltip"></span> {{ feature }}
@@ -26,6 +26,10 @@ export default Utils.enableHtmlProps({
 		heading: {
 			type: String,
 			default: 'Supported Functionalities'
+		},
+		headingTag: {
+			type: String,
+			default: 'h2'
 		}
     },
     data() {