+
+
{{
questionText
}}
-
@@ -30,14 +40,55 @@
\ No newline at end of file
diff --git a/src/layouts/vehicle-make/make-question/make-question.vue b/src/layouts/vehicle-make/make-question/make-question.vue
index ac6ff45bb..eaa6b7306 100644
--- a/src/layouts/vehicle-make/make-question/make-question.vue
+++ b/src/layouts/vehicle-make/make-question/make-question.vue
@@ -3,6 +3,9 @@
:questionText="questionText"
:answers="makes"
groupName="Choose Vehicle Make"
+ textPosition="text-start"
+ :isVehicleQuestion="true"
+ :loaderEnabled="true"
v-model="modelValue"
/>
diff --git a/src/layouts/vehicle-model/model-question/model-question.vue b/src/layouts/vehicle-model/model-question/model-question.vue
index 68d23bc16..bb50872d6 100644
--- a/src/layouts/vehicle-model/model-question/model-question.vue
+++ b/src/layouts/vehicle-model/model-question/model-question.vue
@@ -3,6 +3,9 @@
:questionText="questionText"
:answers="models"
groupName="Choose Vehicle Model"
+ textPosition="text-start"
+ :isVehicleQuestion="true"
+ :loaderEnabled="true"
v-model="modelValue"
/>
diff --git a/src/layouts/vehicle-style/style-question/style-question.vue b/src/layouts/vehicle-style/style-question/style-question.vue
index a9bbd9fbf..d14b39599 100644
--- a/src/layouts/vehicle-style/style-question/style-question.vue
+++ b/src/layouts/vehicle-style/style-question/style-question.vue
@@ -3,6 +3,9 @@
:questionText="questionText"
:answers="styles"
groupName="Choose Vehicle Style"
+ textPosition="text-start"
+ :isVehicleQuestion="true"
+ :loaderEnabled="true"
v-model="modelValue"
/>
diff --git a/src/layouts/vehicle-year/year-question/year-question.vue b/src/layouts/vehicle-year/year-question/year-question.vue
index 6399abb0c..98538a361 100644
--- a/src/layouts/vehicle-year/year-question/year-question.vue
+++ b/src/layouts/vehicle-year/year-question/year-question.vue
@@ -3,6 +3,9 @@
:questionText="questionText"
:answers="years"
groupName="Choose Vehicle Year"
+ :isVehicleQuestion="true"
+ textPosition="text-start"
+ :loaderEnabled="true"
v-model="modelValue"
/>
diff --git a/src/router/index.js b/src/router/index.js
index b1aa88493..7633f9d1a 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -3,9 +3,8 @@ import { storeActions } from "@/constants/store-actions.js";
import { lazyLoadComponent } from "@/router/dynamic-routing/component-loader.js";
import { routingTable } from "@/router/router-constants/routing-table.js";
import ComponentTest from "@/layouts/component-test/component-test.vue";
-
+import FormTest from "@/layouts/form-test/form-test.vue";
import AddressPOC from "@/layouts/address-poc/address-poc.vue";
-
import NotFound from "@/layouts/not-found/not-found.vue";
import store from "@/store";
@@ -20,6 +19,11 @@ const routes = [
name: "ComponentTest",
component: ComponentTest,
},
+ {
+ path: "/form-test", // This is a temporary route for testing.
+ name: "FormTest",
+ component: FormTest,
+ },
{
path: "/address-poc", // This is a temporary route for testing.
name: "AddressPOC",
diff --git a/src/styles/common-list-styles.scss b/src/styles/common-list-styles.scss
index d1a27d428..2af95f21a 100644
--- a/src/styles/common-list-styles.scss
+++ b/src/styles/common-list-styles.scss
@@ -12,6 +12,8 @@
box-shadow: 0 0 0 2px $blue;
}
&:checked + label {
+ color: $black;
+ font-weight: 500;
background: $blue-100;
box-shadow: 0 0 0 1px $blue;
}
@@ -20,6 +22,7 @@
}
}
label {
+ color: $gray-600;
position: relative;
background: $white;
transition: all 150ms linear;
diff --git a/src/styles/common-styles.scss b/src/styles/common-styles.scss
index 5e1993716..ba18099ff 100644
--- a/src/styles/common-styles.scss
+++ b/src/styles/common-styles.scss
@@ -14,8 +14,35 @@ body {
color: $blue;
text-decoration: none;
border-bottom: 1px solid $blue;
+ line-height: 26px;
+ padding: 0 0 4px 0;
+ font-weight: 500;
&:hover {
- color: $blue-400;
+ color: $blue-700;
+ }
+ &.small {
+ line-height: 24px;
+ &:hover {
+ color: $blue-700;
+ }
+ }
+ &.navigation-link {
+ color: $black;
+ border-bottom: 1px solid $black;
+ line-height: 26px;
+ }
+ &.footer-link {
+ color: $gray-500;
+ text-decoration: none;
+ border-bottom: 1px solid transparent;
+ line-height: 20px;
+ padding: 0 0 2px 0;
+ font-weight: 400;
+ font-size: .75rem;
+ &:hover {
+ border-bottom: 1px solid $gray-500;
+ padding: 0 0 2px 0;
+ }
}
}
.pointer {
diff --git a/src/ux-components/list-button-horizontal/list-button-horizontal.spec.js b/src/ux-components/list-button-horizontal/list-button-horizontal.spec.js
index e6d47f3fb..91e4e1f6c 100644
--- a/src/ux-components/list-button-horizontal/list-button-horizontal.spec.js
+++ b/src/ux-components/list-button-horizontal/list-button-horizontal.spec.js
@@ -183,37 +183,4 @@ describe("list-button-horizontal.vue", () => {
});
- it("Should return first item if first item in group", async () => {
- // Act
- const wrapper = shallowMount(listButtonHorizontal, {
- propsData: {
- positionInGroup: 1
- },
- });
-
- // Assert
-
- const label = wrapper.find("label");
-
- expect(label.attributes('class')).toContain("first-item");
-
- });
-
- it("Should return last item if last item in group", async () => {
- // Act
- const wrapper = shallowMount(listButtonHorizontal, {
- propsData: {
- positionInGroup: 3,
- totalInGroup: 3
- },
- });
-
- // Assert
-
- const label = wrapper.find("label");
-
- expect(label.attributes('class')).toContain("last-item");
-
- });
-
});
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 c4f8d995c..9bdeee4b8 100644
--- a/src/ux-components/list-button-horizontal/list-button-horizontal.vue
+++ b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
@@ -1,41 +1,39 @@
-
-
-