diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue
index 86921e4ee..3a44b7be9 100644
--- a/src/common-components/button-question/button-question.vue
+++ b/src/common-components/button-question/button-question.vue
@@ -32,6 +32,7 @@ import listButton from "@/ux-components/list-button/list-button";
export default {
name: "buttonQuestion",
props: {
+ isMultiSelect: Boolean,
questionText: String,
answers: Array,
modelValue: String,
@@ -58,4 +59,4 @@ export default {
-webkit-overflow-scrolling: touch;
}
}
-
\ No newline at end of file
+
diff --git a/src/layouts/component-test/component-test.vue b/src/layouts/component-test/component-test.vue
index d402e05b2..b1f10e7d5 100644
--- a/src/layouts/component-test/component-test.vue
+++ b/src/layouts/component-test/component-test.vue
@@ -185,24 +185,6 @@
-
-
-
With error
-
- Radio button with error state
-
-
-
-
List Button - Single-Line
@@ -227,8 +209,6 @@
loaderPosition="right"
sizeInRem="1"
screenReaderOnlyText=" opens new window"
- hasError
- errorMessage="Error"
/>
{
loaderPosition: "right",
loaderEnabled: "true",
sizeInRem: "1.5",
- errorMessage: "null",
},
});
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 f68c906ba..97642d2c1 100644
--- a/src/ux-components/list-button-horizontal/list-button-horizontal.vue
+++ b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
@@ -8,7 +8,6 @@
{{buttonLabelSubCopy}}
{{screenReaderOnlyText}}
- {{errorMessage}}
@@ -28,13 +26,12 @@ import loader from "@/ux-components/loader/loader";
export default {
name: "listButtonHorizontal",
props: {
- isMultiSelect: Boolean,
+ isMultiSelect: Boolean, /* Defines use as checkbox */
groupName: String, /* Required, unique for each button GROUP */
buttonID: String, /* Required, unique for each button. Used for button id, label and
*/
buttonLabelSubCopy: String, /* Optional, used for multi-line buttons */
screenReaderOnlyText: String, /* Optional, copy to be read by screenreader */
textPosition: String, /* Optional, use Bootstrap classes: text-start, text-center, text-end. Default (empty) is text-start */
- errorMessage: String, /* Optional, if there is an error message to be displayed */
loaderEnabled: Boolean, /* Optional, need to include this for loader to be used at all */
loaderColor: String, /* Specify color of loader/spinner. Options are blue, red, green, white, black. Default is blue */
loaderPosition: String, /* Specify horizontal position of loader/spinner. Options are center, right, left */
@@ -108,13 +105,6 @@ export default {
+ p {
display: none;
}
- &.error {
- border: 1px solid $danger;
- + p {
- display: flex;
- color: $danger;
- }
- }
&.first-item {
border-bottom-left-radius: 0.5rem;
border-top-left-radius: 0.5rem;
diff --git a/src/ux-components/list-button/list-button.spec.js b/src/ux-components/list-button/list-button.spec.js
index 61f1e7ed9..06c96d1a3 100644
--- a/src/ux-components/list-button/list-button.spec.js
+++ b/src/ux-components/list-button/list-button.spec.js
@@ -11,7 +11,6 @@ describe("list-button.vue", () => {
loaderColor: "blue",
loaderPosition: "right",
sizeInRem: "1.5",
- errorMessage: "null",
},
});
diff --git a/src/ux-components/list-button/list-button.vue b/src/ux-components/list-button/list-button.vue
index 0547f0787..a65833396 100644
--- a/src/ux-components/list-button/list-button.vue
+++ b/src/ux-components/list-button/list-button.vue
@@ -24,14 +24,13 @@ import loader from "@/ux-components/loader/loader";
export default {
name: "listButton",
props: {
- isMultiSelect: Boolean,
+ isMultiSelect: Boolean, /* Defines use as checkbox */
groupName: String, /* Required, unique for each button GROUP */
buttonID: [Number,String], /* Required, unique for each button. Used for button id, label and */
isRequired: Boolean, /* Optional, default is false */
screenReaderOnlyText: String, /* Optional, copy to be read by screenreader */
buttonLabelSubCopy: String, /* Optional, used for multi-line buttons */
textPosition: String, /* Optional, use Bootstrap classes: text-start, text-center, text-end. Default (empty) is text-start */
- errorMessage: String, /* Optional, if there is an error message to be displayed */
loaderColor: String, /* Specify color of loader/spinner. Options are blue, red, green, white, black. Default is blue */
loaderPosition: String, /* Specify horizontal position of loader/spinner. Options are center, right, left */
sizeInRem: [Number,String], /* Specify size of loader/spinner in rem. Example: 1.5 (equals 24px (16x1.5)) */
diff --git a/src/ux-components/list-card/list-card.spec.js b/src/ux-components/list-card/list-card.spec.js
index 3d0843e10..8438e01b9 100644
--- a/src/ux-components/list-card/list-card.spec.js
+++ b/src/ux-components/list-card/list-card.spec.js
@@ -1 +1,188 @@
-test.todo("some test to be written in the future");
+import { shallowMount } from "@vue/test-utils";
+import listCard from "./list-card";
+
+describe("list-card.vue", () => {
+
+ it("Should return input type checkbox if isMultiSelect is true", async () => {
+ // Act
+ const wrapper = shallowMount(listCard, {
+ propsData: {
+ isMultiSelect: true,
+ buttonLabel: "Windshield",
+ buttonID: "List Card Checkbox",
+ groupID: "checkbox-demo-1",
+ groupName: "Checkbox 1",
+ buttonImage: "windshield-damage.svg",
+ },
+ });
+
+ // Assert
+ const input = wrapper.find("input");
+
+ expect(input.attributes().type).toEqual("checkbox");
+ });
+
+ it("Should return input type radio if isRadio is true", async () => {
+ // Act
+ const wrapper = shallowMount(listCard, {
+ propsData: {
+ isRadio: true,
+ buttonLabel: "Windshield",
+ buttonID: "List Card Checkbox",
+ groupID: "radio-demo-1",
+ groupName: "radio 1",
+ buttonImage: "windshield-damage.svg",
+ },
+ });
+
+ // Assert
+ const input = wrapper.find("input");
+
+ expect(input.attributes().type).toEqual("radio");
+ });
+
+ it("Should return input type checkbox if isMultiSelectHorizontal is true", async () => {
+ // Act
+ const wrapper = shallowMount(listCard, {
+ propsData: {
+ isMultiSelectHorizontal: true,
+ buttonLabel: "Windshield",
+ buttonID: "List Card Checkbox",
+ groupID: "radio-demo-1",
+ groupName: "radio 1",
+ buttonImage: "windshield-damage.svg"
+ },
+ });
+
+ // Assert
+ const input = wrapper.find("input");
+
+ expect(input.attributes().type).toEqual("checkbox");
+
+ });
+
+ it("Should return input type radio if isRadioHorizontal is true", async () => {
+ // Act
+ const wrapper = shallowMount(listCard, {
+ propsData: {
+ isRadioHorizontal: true,
+ buttonLabel: "Windshield",
+ buttonID: "List Card Checkbox",
+ groupID: "radio-demo-1",
+ groupName: "radio 1",
+ buttonImage: "windshield-damage.svg"
+ },
+ });
+
+ // Assert
+ const input = wrapper.find("input");
+
+ expect(input.attributes().type).toEqual("radio");
+
+ });
+
+ it("Should return primary label text", async () => {
+ // Act
+ const wrapper = shallowMount(listCard, {
+ propsData: {
+ isRadioHorizontal: true,
+ buttonLabel: "Windshield",
+ buttonID: "List Card Checkbox",
+ groupID: "radio-demo-1",
+ groupName: "radio 1",
+ buttonImage: "windshield-damage.svg"
+ },
+ });
+
+ // Assert
+ const paragraph = wrapper.find("p");
+
+ expect(paragraph.text()).toEqual("Windshield");
+
+ });
+
+ it("Should return secondary (sub) label text", async () => {
+ // Act
+ const wrapper = shallowMount(listCard, {
+ propsData: {
+ isRadioHorizontal: true,
+ buttonLabel: "Windshield",
+ buttonID: "List Card Checkbox",
+ groupID: "radio-demo-1",
+ groupName: "radio 1",
+ buttonImage: "windshield-damage.svg",
+ buttonLabelSubCopy: "Test"
+ },
+ });
+
+ // Assert
+ const paragraph = wrapper.find("p:nth-of-type(2)");
+
+ expect(paragraph.text()).toEqual("Test");
+
+ });
+
+ it("Should return value used for various text settings including the label 'for' and input id", async () => {
+ // Act
+ const wrapper = shallowMount(listCard, {
+ propsData: {
+ isRadioHorizontal: true,
+ buttonLabel: "Windshield",
+ buttonID: "List Card Checkbox",
+ groupID: "radio-demo-1",
+ groupName: "radio 1",
+ buttonImage: "windshield-damage.svg",
+ buttonLabelSubCopy: "Test"
+ },
+ });
+
+ // Assert
+ const label = wrapper.find("label");
+
+ expect(label.attributes().for).toEqual("List Card Checkbox");
+
+ });
+
+ it("Should return input group name used for radio or checkbox", async () => {
+ // Act
+ const wrapper = shallowMount(listCard, {
+ propsData: {
+ isRadioHorizontal: true,
+ buttonLabel: "Windshield",
+ buttonID: "List Card Checkbox",
+ groupID: "radio-demo-1",
+ groupName: "radio 1",
+ buttonImage: "windshield-damage.svg",
+ buttonLabelSubCopy: "Test"
+ },
+ });
+
+ // Assert
+ const input = wrapper.find("input");
+
+ expect(input.attributes().name).toEqual("radio 1");
+
+ });
+
+ it("Should return aria-required state", async () => {
+ // Act
+ const wrapper = shallowMount(listCard, {
+ propsData: {
+ isRadioHorizontal: true,
+ buttonLabel: "Windshield",
+ buttonID: "List Card Checkbox",
+ groupID: "radio-demo-1",
+ groupName: "radio 1",
+ buttonImage: "windshield-damage.svg",
+ isRequired: true
+ },
+ });
+
+ // Assert
+ const input = wrapper.find("input");
+
+ expect(input.attributes()["aria-required"]).toEqual("true");
+
+ });
+
+});
diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue
index fe17af9db..68b1c80b0 100644
--- a/src/ux-components/list-card/list-card.vue
+++ b/src/ux-components/list-card/list-card.vue
@@ -1,38 +1,38 @@
-
+
{{buttonLabel}}
- {{buttonLabelSubCopy}}
+ {{buttonLabelSubCopy}}
-
+
{{buttonLabel}}
- {{buttonLabelSubCopy}}
+ {{buttonLabelSubCopy}}
-
+
{{buttonLabel}}
-
{{buttonLabelSubCopy}}
+
{{buttonLabelSubCopy}}
-
+
{{buttonLabel}}
-
{{buttonLabelSubCopy}}
+
{{buttonLabelSubCopy}}
@@ -48,22 +48,19 @@ export default {
isMultiSelectHorizontal: Boolean, //Defines use as horizontal checkbox
isRadioHorizontal: Boolean, //Defines use as horizontal radio button
//end must choose
- buttonImage: String,//Optional: File name of image
+ buttonImage: String,//Required: File name of image
buttonLabel: String,//Required: Label text
+ isRequired: Boolean, //Required: is aria-required required or not?
altText: String,//Leave empty. Screen readers read the buttonLabel text. If alt has content, it will repeat unnecessarily.
buttonID: String,//Required: Unique
- groupName: String,//Rquired: Unique
- buttonLabelSubCopy: String,//Optional: sub text
- hasError: Boolean//Used to show error state
- },
+ groupName: String,//Required: Unique
+ buttonLabelSubCopy: String,//Optional: sub tex
+ }
};