WIP CSR-257

2022-01-28 16:24:41 -05:00 · 2022-01-28 16:24:41 -05:00 · 707fde7b91
commit 707fde7b91
parent cb5d11344b
6 changed files with 182 additions and 116 deletions
--- a/src/common-components/funnel-footer/funnel-footer.spec.js
+++ b/src/common-components/funnel-footer/funnel-footer.spec.js
@ -0,0 +1 @@
+test.todo("some test to be written in the future");
--- a/src/common-components/funnel-footer/funnel-footer.vue
+++ 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>
--- 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 {
--- 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%);
    }
--- 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;
--- 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;
				`@ -0,0 +1 @@`
				`test.todo("some test to be written in the future");`