57 lines
1.1 KiB
Vue
57 lines
1.1 KiB
Vue
<template>
|
|
<div class="text-form-with-help-text">
|
|
<h3 class="text-form-with-help-text__heading">
|
|
<span class="text-form-with-help-text__title">{{ title }}</span>
|
|
<helpful-tooltip :text="helpText" />
|
|
</h3>
|
|
<text-form
|
|
:value="v"
|
|
@change-text="$emit('change', $event)"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import TextForm from '@/components/content-forms/TextForm';
|
|
import HelpfulTooltip from '@/components/HelpfulTooltip';
|
|
|
|
export default {
|
|
props: ['title', 'value', 'helpText'],
|
|
|
|
components: {
|
|
TextForm,
|
|
HelpfulTooltip
|
|
},
|
|
|
|
computed: {
|
|
v() {
|
|
return {
|
|
text: this.value
|
|
};
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import "@/styles/_variables.scss";
|
|
@import "@/styles/_functions.scss";
|
|
|
|
.text-form-with-help-text {
|
|
margin-bottom: 30px;
|
|
|
|
&__heading {
|
|
margin-bottom: 15px;
|
|
display: flex;
|
|
justify-items: center;
|
|
align-items: center;
|
|
}
|
|
|
|
&__title {
|
|
font-size: toRem(22px);
|
|
font-weight: 600;
|
|
margin-right: 8px;
|
|
}
|
|
}
|
|
</style>
|