✨ Add parameter hints for node parameters N8N-2841 (#2704)

* 🔨 base functionality done

* :fix: changes accordingly to review

* :fix: replaced div with n8n-text

* :fix: return wrong deleted color variable

* add mock examples for testing

* add slack node test param

* 🔨 changed font size of hint, added top margin

* 🔨 updated comments and function name

* 🔨 updated parameterHint to hint

* 🔨 updated text color, set compact to true, changed inputLabelHint to hint

* 🔨 updated components styles

* 🔨 replaced mini with xsmall

* :fix: fixed line height

* :fix: changed line height to 1.25

* :hummer: removed mock data

* 🔨 changed xsmall line-height

* ⚡ update to merge hint

Co-authored-by: Mutasem <mutdmour@gmail.com>

packages/editor-ui/src/components/ParameterInputExpanded.vue

@@ -23,18 +23,21 @@
 		<div class="errors" v-if="showRequiredErrors">
 			{{ $locale.baseText('parameterInputExpanded.thisFieldIsRequired') }} <a v-if="documentationUrl" :href="documentationUrl" target="_blank" @click="onDocumentationUrlClick">{{ $locale.baseText('parameterInputExpanded.openDocs') }}</a>
 		</div>
+		<input-hint :class="$style.hint" :hint="$locale.credText().hint(parameter)" />
 	</n8n-input-label>
 </template>
 
 <script lang="ts">
 import { IUpdateInformation } from '@/Interface';
 import ParameterInput from './ParameterInput.vue';
+import InputHint from './ParameterInputHint.vue';
 import Vue from 'vue';
 
 export default Vue.extend({
 	name: 'ParameterInputExpanded',
 	components: {
 		ParameterInput,
+		InputHint,
 	},
 	props: {
 		parameter: {
@@ -94,3 +97,9 @@ export default Vue.extend({
 	},
 });
 </script>
+
+<style lang="scss" module>
+	.hint {
+		margin-top: var(--spacing-4xs);
+	}
+</style>