add field description and title

app/javascript/submission_form/date_step.vue

@@ -1,11 +1,21 @@
 <template>
   <div dir="auto">
-    <div class="flex justify-between items-center w-full mb-2">
+    <div
+      class="flex justify-between items-center w-full"
+      :class="{ 'mb-2': !field.description }"
+    >
       <label
         :for="field.uuid"
         class="label text-2xl"
-      >{{ field.name && showFieldNames ? field.name : t('date') }}
-        <template v-if="!field.required">({{ t('optional') }})</template>
+      >
+        <MarkdownContent
+          v-if="field.title"
+          :string="field.title"
+        />
+        <template v-else>
+          {{ field.name && showFieldNames ? field.name : t('date') }}
+          <template v-if="!field.required">({{ t('optional') }})</template>
+        </template>
       </label>
       <button
         class="btn btn-outline btn-sm !normal-case font-normal"
@@ -15,6 +25,13 @@
         {{ t('set_today') }}
       </button>
     </div>
+    <div
+      v-if="field.description"
+      class="mb-3 px-1"
+      dir="auto"
+    >
+      <MarkdownContent :string="field.description" />
+    </div>
     <AppearsOn :field="field" />
     <div class="text-center">
       <input
@@ -33,11 +50,13 @@
 <script>
 import { IconCalendarCheck } from '@tabler/icons-vue'
 import AppearsOn from './appears_on'
+import MarkdownContent from './markdown_content'
 
 export default {
   name: 'DateStep',
   components: {
     IconCalendarCheck,
+    MarkdownContent,
     AppearsOn
   },
   inject: ['t'],