From 707fde7b9166177844db6155960f114ecab938fb Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Fri, 28 Jan 2022 16:24:41 -0500
Subject: [PATCH] WIP CSR-257

---
 .../funnel-footer/funnel-footer.spec.js       |   1 +
 .../funnel-footer/funnel-footer.vue           |  40 +++
 src/layouts/component-test/component-test.vue | 246 ++++++++++--------
 src/ux-components/button-main/button-main.vue |   4 +-
 .../list-button-horizontal.vue                |   1 +
 src/ux-components/text-link/text-link.vue     |   6 +
 6 files changed, 182 insertions(+), 116 deletions(-)
 create mode 100644 src/common-components/funnel-footer/funnel-footer.spec.js
 create mode 100644 src/common-components/funnel-footer/funnel-footer.vue

diff --git a/src/common-components/funnel-footer/funnel-footer.spec.js b/src/common-components/funnel-footer/funnel-footer.spec.js
new file mode 100644
index 000000000..3d0843e10
--- /dev/null
+++ b/src/common-components/funnel-footer/funnel-footer.spec.js
@@ -0,0 +1 @@
+test.todo("some test to be written in the future");
diff --git a/src/common-components/funnel-footer/funnel-footer.vue b/src/common-components/funnel-footer/funnel-footer.vue
new file mode 100644
index 000000000..acd362709
--- /dev/null
+++ b/src/common-components/funnel-footer/funnel-footer.vue
@@ -0,0 +1,40 @@
+<template>
+<div class="container-fluid g-2 mb-6">
+  <div class="row">
+    <div class="col-12">
+      <h4>this should scroll</h4>
+    </div>
+  </div>
+  <div class="container-fluid fixed-bottom g-4 bg-light py-4">
+    <div class="row">
+      <div class="col">
+        <buttonMain
+        isPrimary
+        buttonText="Review Appointment Details"
+        loaderColor="white"
+        sizeInRem="1"
+        isFloat
+        />
+        <textLink
+        navigation=true
+        text="back"
+        />
+      </div>
+    </div>
+  </div>
+</div>
+</template>
+
+<script>
+
+import textLink from "@/ux-components/text-link/text-link";
+import buttonMain from "@/ux-components/button-main/button-main";
+
+export default {
+  name: "funnelFooter",
+  components: {
+    textLink,
+    buttonMain
+  },
+};
+</script>
diff --git a/src/layouts/component-test/component-test.vue b/src/layouts/component-test/component-test.vue
index 7363ec3d4..a122485e9 100644
--- a/src/layouts/component-test/component-test.vue
+++ b/src/layouts/component-test/component-test.vue
@@ -46,6 +46,31 @@
         />
       </div>
     </div>
+    <div class="row my-4">
+      <div class="col">
+        <h4 class="m-0 p-2 bg-light rounded">Links</h4>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col my-3">
+        <textLink
+        navigation=true
+        text="Navigation Link"
+        /><br><br>
+        <textLink
+        text="Default Link"
+        /><br><br>
+        <textLink
+        textSmall=true
+        text="Small Link"
+        /><br><br>
+        <textLink
+        footer=true
+        text="Footer Link"
+        href="https://google.com"
+        />
+      </div>
+    </div>
     <div class="row my-4">
       <div class="col">
         <h4 class="m-0 p-2 bg-light rounded">List Card</h4>
@@ -626,31 +651,6 @@
         />
       </div>
     </div>
-    <div class="row my-4">
-      <div class="col">
-        <h4 class="m-0 p-2 bg-light rounded">Links</h4>
-      </div>
-    </div>
-    <div class="row">
-      <div class="col my-3">
-        <textLink
-          navigation=true
-          text="Navigation Link"
-        /><br><br>
-        <textLink
-          text="Default Link"
-        /><br><br>
-        <textLink
-          textSmall=true
-          text="Small Link"
-        /><br><br>
-        <textLink
-          footer=true
-          text="Footer Link"
-          href="https://google.com"
-        />
-      </div>
-    </div>
     <div class="row my-4">
       <div class="col">
         <h4 class="m-0 p-2 bg-light rounded">Typography</h4>
@@ -796,95 +796,109 @@
         <h4 class="m-0 p-2 bg-light rounded">Button Question</h4>
       </div>
     </div>
-    <buttonQuestion
-    :answers="checkboxAnswers"
-    :isMultiSelect="true"
-    ariaLabelBy="checkbox"
-    groupName="checkbox-list"
-    questionText="List Button as checkbox"
-   />
-   <buttonQuestion
-    :answers="radioAnswers"
-    ariaLabelBy="radio"
-    groupName="radio-list"
-    questionText="List Button as radio"
-   />
-    <buttonQuestion
-    :answers="horizontalCheckboxAnswers"
-    buttonType="listButtonHorizontal"
-    :isMultiSelect="true"
-    isColumn
-    ariaLabelBy="checkbox"
-    groupName="checkbox-list-horizontal"
-    questionText="List Button Horizontal as checkbox"
-   />
-   <buttonQuestion
-    :answers="horizontalRadioAnswers"
-    buttonType="listButtonHorizontal"
-    isColumn
-    ariaLabelBy="radio"
-    groupName="radio-list-horizontal"
-    questionText="List Button Horizontal as radio"
-    sizeInRem="1"
-   />
-   <buttonQuestion
-    :answers="listCardCheckBox"
-    buttonType="listCard"
-    isMultiSelect
-    ariaLabelBy="check_card"
-    groupName="check-list-card"
-    questionText="List Card as checkbox"
-   />
-   <buttonQuestion
-    :answers="listCardRadio"
-    buttonType="listCard"
-    ariaLabelBy="radio_card"
-    groupName="radio-card"
-    questionText="List Card as radio"
-   />
-   <buttonQuestion
-    isMultiSelect
-    isWide
-    :answers="listCardCheckBoxHorizontal"
-    buttonType="listCard"
-    ariaLabelBy="horizontal_check_card"
-    groupName="horizontal_check-card"
-    questionText="List Card Horizontal as checkbox"
-   />
-   <buttonQuestion
-    isMultiSelect
-    isWide
-    :answers="listCardCheckBoxHorizontalSubText"
-    buttonType="listCard"
-    ariaLabelBy="horizontal_check_card-st"
-    groupName="horizontal_check-card-st"
-    questionText="With Subtext"
-   />
-   <buttonQuestion
-    isWide
-    :answers="listRadioHorizontal"
-    buttonType="listCard"
-    ariaLabelBy="horizontal_radio_card"
-    groupName="horizontal_cradio-card"
-    questionText="List Card Horizontal as radio"
-   />
-   <buttonQuestion
-    isWide
-    :answers="listRadioHorizontalSubText"
-    buttonType="listCard"
-    ariaLabelBy="horizontal_radio_card-st"
-    groupName="horizontal_cradio-card-st"
-    questionText="With Subtext"
-   />
-   <buttonQuestion
-    isMultiSelect
-    isRow
-    :answers="listCardGroup"
-    buttonType="listCard"
-    ariaLabelBy="horizontal_radio_card-group"
-    groupName="horizontal_cradio-card-group"
-    questionText="In column layout"
-   />
+    <div class="row">
+      <div class="col">
+        <buttonQuestion
+        :answers="checkboxAnswers"
+        :isMultiSelect="true"
+        ariaLabelBy="checkbox"
+        groupName="checkbox-list"
+        questionText="List Button as checkbox"
+        />
+        <buttonQuestion
+        :answers="radioAnswers"
+        ariaLabelBy="radio"
+        groupName="radio-list"
+        questionText="List Button as radio"
+        />
+        <buttonQuestion
+        :answers="horizontalCheckboxAnswers"
+        buttonType="listButtonHorizontal"
+        :isMultiSelect="true"
+        isColumn
+        ariaLabelBy="checkbox"
+        groupName="checkbox-list-horizontal"
+        questionText="List Button Horizontal as checkbox"
+        />
+        <buttonQuestion
+        :answers="horizontalRadioAnswers"
+        buttonType="listButtonHorizontal"
+        isColumn
+        ariaLabelBy="radio"
+        groupName="radio-list-horizontal"
+        questionText="List Button Horizontal as radio"
+        sizeInRem="1"
+        />
+        <buttonQuestion
+        :answers="listCardCheckBox"
+        buttonType="listCard"
+        isMultiSelect
+        ariaLabelBy="check_card"
+        groupName="check-list-card"
+        questionText="List Card as checkbox"
+        />
+        <buttonQuestion
+        :answers="listCardRadio"
+        buttonType="listCard"
+        ariaLabelBy="radio_card"
+        groupName="radio-card"
+        questionText="List Card as radio"
+        />
+        <buttonQuestion
+        isMultiSelect
+        isWide
+        :answers="listCardCheckBoxHorizontal"
+        buttonType="listCard"
+        ariaLabelBy="horizontal_check_card"
+        groupName="horizontal_check-card"
+        questionText="List Card Horizontal as checkbox"
+        />
+        <buttonQuestion
+        isMultiSelect
+        isWide
+        :answers="listCardCheckBoxHorizontalSubText"
+        buttonType="listCard"
+        ariaLabelBy="horizontal_check_card-st"
+        groupName="horizontal_check-card-st"
+        questionText="With Subtext"
+        />
+        <buttonQuestion
+        isWide
+        :answers="listRadioHorizontal"
+        buttonType="listCard"
+        ariaLabelBy="horizontal_radio_card"
+        groupName="horizontal_cradio-card"
+        questionText="List Card Horizontal as radio"
+        />
+        <buttonQuestion
+        isWide
+        :answers="listRadioHorizontalSubText"
+        buttonType="listCard"
+        ariaLabelBy="horizontal_radio_card-st"
+        groupName="horizontal_cradio-card-st"
+        questionText="With Subtext"
+        />
+        <buttonQuestion
+        isMultiSelect
+        isRow
+        :answers="listCardGroup"
+        buttonType="listCard"
+        ariaLabelBy="horizontal_radio_card-group"
+        groupName="horizontal_cradio-card-group"
+        questionText="In column layout"
+        />
+      </div>
+    </div>
+    <div class="row my-4">
+      <div class="col">
+        <h4 class="m-0 p-2 bg-light rounded">Funnel Footer</h4>
+      </div>
+    </div>
+    <div class="row my-2">
+      <div class="col">
+        <funnelFooter/>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -900,6 +914,7 @@ import listButtonHorizontal from "@/ux-components/list-button-horizontal/list-bu
 import checkbox from "@/ux-components/checkbox/checkbox";
 import buttonQuestion from "@/common-components/button-question/button-question";
 import textLink from "@/ux-components/text-link/text-link";
+import funnelFooter from "@/common-components/funnel-footer/funnel-footer";
 export default {
   name: "App",
   components: {
@@ -913,7 +928,8 @@ export default {
     checkbox,
     funnelHeader,
     buttonQuestion,
-    textLink
+    textLink,
+    funnelFooter
   },
   data() {
     return {
diff --git a/src/ux-components/button-main/button-main.vue b/src/ux-components/button-main/button-main.vue
index 5d89e9afa..2f99ac33a 100644
--- a/src/ux-components/button-main/button-main.vue
+++ b/src/ux-components/button-main/button-main.vue
@@ -1,5 +1,5 @@
 <template>
-  <button :disabled="isDisabled" :aria-disabled="isDisabled" class="btn d-flex align-items-center py-3 px-4" :class="isPrimary ? 'btn-primary' : 'btn-secondary'" @click="clicked()">
+  <button :disabled="isDisabled" :aria-disabled="isDisabled" class="btn d-flex align-items-center py-3 px-4" :class="[isPrimary ? 'btn-primary' : 'btn-secondary',isFloat ? 'float-end' : '']" @click="clicked()">
     <span class="m-0">{{ this.buttonText }}</span>
     <loader class="ms-2" v-if="isLoaderDisplayed" v-bind:style="{ width: `${sizeInRem}rem`, height: `${sizeInRem}rem` }" v-bind:class="[this.loaderColor, this.loaderPosition]" />
   </button>
@@ -16,6 +16,7 @@ export default {
     loaderColor: String,
     loaderPosition: String,
     sizeInRem: [Number, String],
+    isFloat: Boolean
   },
   data() {
     return {
@@ -44,6 +45,7 @@ export default {
     border-radius: $border-radius-lg;
     color: $white;
     transition: all 150ms linear;
+    white-space: nowrap;
     &:hover {
       background: linear-gradient(270deg, rgba(6,87,124,1) 0%, rgba(6,87,124,1) 100%);
     }
diff --git a/src/ux-components/list-button-horizontal/list-button-horizontal.vue b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
index d03a042d7..b4f642451 100644
--- a/src/ux-components/list-button-horizontal/list-button-horizontal.vue
+++ b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
@@ -97,6 +97,7 @@ export default {
     background: $white;
     transition: all 150ms linear;
     border: 1px solid $gray-500;
+    border-radius: 0;
     width: 100%;
     &:hover {
       box-shadow: 0 0 0 4px $blue-100;
diff --git a/src/ux-components/text-link/text-link.vue b/src/ux-components/text-link/text-link.vue
index 15d677c9f..3021dfd91 100644
--- a/src/ux-components/text-link/text-link.vue
+++ b/src/ux-components/text-link/text-link.vue
@@ -51,6 +51,12 @@ a {
     color: $black;
     border-bottom: 1px solid $black;
     line-height: 26px;
+    display: inline-flex;
+    text-transform: capitalize;
+    white-space: nowrap;
+    position: relative;
+    top: 50%;
+    transform: translateY(-50%);
   }
   &.footer-link {
     color: $gray-500;