Merge branch 'links'

# Conflicts:
#	src/models/QuestionModel.js

Author: phre1

examples/questionnaire/Example.vue

@@ -69,7 +69,7 @@
 
   // Import necessary components and classes
   import FlowForm from '../../src/components/FlowForm.vue'
-  import QuestionModel, { QuestionType, ChoiceOption } from '../../src/models/QuestionModel'
+  import QuestionModel, { QuestionType, ChoiceOption, LinkOption } from '../../src/models/QuestionModel'
   import LanguageModel from '../../src/models/LanguageModel'
   // If using the npm package, use the following line instead of the ones above.
   // import FlowForm, { QuestionModel, QuestionType, ChoiceOption, LanguageModel } from '@ditdot-dev/vue-flow-form'
@@ -88,7 +88,7 @@
         questions: [
           new QuestionModel({
             id: 'first_name',
-            tagline: "Hi! Welcome to our demo survey 😊",
+            tagline: 'Hi! Welcome to our demo survey 😊',
             title: 'What is your first name?',
             type: QuestionType.Text,
             required: true,
@@ -97,7 +97,7 @@
           new QuestionModel({
             id: 'email',
             tagline: "Nice to meet you 👀, let's continue",
-            title: "Provide an example email.",
+            title: 'Provide an example email.',
             type: QuestionType.Email,
             required: true,
             placeholder: 'Start typing here...'
@@ -118,7 +118,7 @@
           }),
           new QuestionModel({
             id: 'multiple_choice',
-            tagline: "FYI, You can always go back 👈, use the up arrow on the bottom.",
+            tagline: 'FYI, You can always go back 👈, use the up arrow on the bottom.',
             title: 'Multiple choice question:',
             helpTextShow: false,
             type: QuestionType.MultipleChoice,
@@ -168,7 +168,7 @@
           }),
           new QuestionModel({
             id: 'choose_path',
-            tagline: "Where would you like to go? 🤔",
+            tagline: 'Where would you like to go? 🤔',
             title: 'Choose your path:',
             type: QuestionType.Dropdown,
             multiple: false,
@@ -199,7 +199,7 @@
           }),
           new QuestionModel({
             id: 'path_b',
-            tagline: "Path B",
+            tagline: 'Path B',
             title: 'Hmm, are you sure?',
             helpText: 'Path A sounds like a winner! 😉',
             type: QuestionType.MultipleChoice,

examples/quiz/Example.vue

@@ -107,7 +107,7 @@
           }),
           new QuestionModel({
             id: 'html_1',
-            title: "Which of the following are valid input field types? ",
+            title: 'Which of the following are valid input field types?',
             helpText: 'Choose all answers that apply.',
             type: QuestionType.MultipleChoice,
             required: true,

src/assets/css/common.css

@@ -333,6 +333,24 @@ span.f-answered{
   height: auto;
 }
 
+/*links*/
+
+a.f-link, 
+.field-submittype .section-wrap a {
+  margin-right: 10px;
+  color: inherit;
+  border-bottom: 1px solid;
+  white-space: pre-wrap;
+}
+
+a.f-link:hover, 
+a.f-link:active,  
+.field-submittype .section-wrap a:hover, 
+.field-submittype .section-wrap a:active {
+ color: inherit; 
+ border-bottom: none;
+}
+
 /*typography*/
 li,
 p,

src/components/Question.vue

@@ -49,7 +49,19 @@
             />
           </div>
         </div>
-        <p v-if="question.description" class="description">{{ question.description }}</p>
+        <p v-if="question.description || question.descriptionLink" class="description">
+          {{ question.description }}
+          <a
+            v-for="(link, index) in question.descriptionLink" 
+            class="f-link" 
+            v-bind:key="'m' + index"
+            v-bind:href="link.url"
+            v-bind:target="link.target"
+          >
+            {{ link.text || link.url }}
+          </a>
+        </p>
+
       </div>
       <div class="animate fade-in f-enter" v-if="showOkButton()">
         <button 
@@ -85,7 +97,7 @@
   */
 
   import LanguageModel from '../models/LanguageModel'
-  import QuestionModel, { QuestionType } from '../models/QuestionModel'
+  import QuestionModel, { QuestionType, LinkOption } from '../models/QuestionModel'
   import FlowFormDropdownType from './QuestionTypes/DropdownType.vue'
   import FlowFormEmailType from './QuestionTypes/EmailType.vue'
   import FlowFormLongTextType from './QuestionTypes/LongTextType.vue'

src/main.js

@@ -1,6 +1,6 @@
 // Import vue component
 import FlowForm from './components/FlowForm.vue'
-import QuestionModel, { QuestionType, ChoiceOption } from './models/QuestionModel'
+import QuestionModel, { QuestionType, ChoiceOption, LinkOption } from './models/QuestionModel'
 import LanguageModel from './models/LanguageModel'
 
 // IE11 Object.assign polyfill
@@ -36,5 +36,6 @@ export {
   QuestionModel,
   QuestionType,
   ChoiceOption,
+  LinkOption,
   LanguageModel
 }

src/models/QuestionModel.js

@@ -47,6 +47,16 @@ export class ChoiceOption {
   }
 }
 
+export class LinkOption {
+  constructor(options) {
+    this.url = ''
+    this.text = ''
+    this.target = '_blank'
+
+    Object.assign(this, options)
+  }
+}
+
 export default class QuestionModel {
   constructor(options) {
     this.id = null
@@ -73,6 +83,7 @@ export default class QuestionModel {
     this.inline = false
     this.helpText = null
     this.helpTextShow = true
+    this.descriptionLink = []
 
     Object.assign(this, options)
 
@@ -115,4 +126,4 @@ export default class QuestionModel {
 
     this.index = index
   }
-}
+}