Merging Bryan's changes from develop
This commit is contained in:
Leah Schumann
commit
474d9a34f6
11 changed files with 231 additions and 15 deletions
3
src/assets/img/icons/location-pin.svg
Normal file
3
src/assets/img/icons/location-pin.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12.8 16" xml:space="preserve">
|
||||
<path d="M6.4 0c-.85 0-1.69.18-2.47.52-.78.34-1.49.84-2.07 1.47A7.026 7.026 0 0 0 0 6.75c0 1.77.67 3.48 1.86 4.77l4.02 4.26c.07.07.15.13.23.16.1.04.19.06.29.06.1 0 .19-.02.28-.06.09-.04.17-.09.23-.16l4.02-4.26a6.884 6.884 0 0 0 1.87-4.77c.01-1.78-.66-3.49-1.87-4.77A6.166 6.166 0 0 0 8.86.51C8.09.18 7.25 0 6.4 0zm0 9.13c-.47 0-.93-.14-1.32-.41-.39-.27-.7-.64-.88-1.09-.19-.44-.23-.93-.14-1.4.09-.47.32-.9.65-1.24.33-.34.76-.57 1.22-.66.46-.09.94-.05 1.38.14.44.18.81.49 1.07.89s.4.87.4 1.35c0 .64-.25 1.26-.7 1.71-.44.46-1.05.71-1.68.71z" fill="#8e9292"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 650 B |
|
|
@ -1,3 +1,4 @@
|
|||
<!-- Documented in confluence https://safelite.atlassian.net/wiki/spaces/DC/pages/76644418/Button+Question+Component#Example-of-listButton-as-radio-button -->
|
||||
<template>
|
||||
<div :class="isOverflowScrollable ? 'button_question' : ''">
|
||||
<div v-if="questionText" class="mt-6 mb-4 d-flex">
|
||||
|
|
|
|||
|
|
@ -54,15 +54,11 @@ export default {
|
|||
margin-bottom: .25rem;
|
||||
}
|
||||
.form-select {
|
||||
color: $gray-500;
|
||||
color: $gray-600;
|
||||
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8.89' xml:space='preserve'%3e%3cpath d='M8 8.89c-.24 0-.46-.09-.63-.26L.26 1.53a.901.901 0 0 1 0-1.27C.43.1.66 0 .9 0s.47.1.64.26L8 6.74 14.47.27c.17-.17.4-.27.64-.27s.47.1.63.27c.17.17.26.4.26.64s-.1.47-.27.63l-7.1 7.09a.86.86 0 0 1-.63.26z' fill='%231474a2'/%3e%3c/svg%3e");
|
||||
border: 1px solid $gray-500;
|
||||
border-radius: .5rem;
|
||||
min-height: 3rem;
|
||||
option[selected] {
|
||||
color: $gray-500;
|
||||
background-color: red;
|
||||
}
|
||||
&:focus,
|
||||
&:focus-visible {
|
||||
box-shadow: 0 0 0 2px $blue;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="textbox-question">
|
||||
<div class="textbox-question" :class="hasError ? 'has-error' : ''">
|
||||
<label :for="inputId" class="form-label">{{labelText}}</label>
|
||||
<input v-model="value" v-maska="mask"
|
||||
type="text"
|
||||
|
|
@ -10,8 +10,11 @@
|
|||
:aria-disabled="isDisabled"
|
||||
:disabled="isDisabled"
|
||||
:aria-required="isRequired"
|
||||
autocomplete="off" />
|
||||
<p class="mt-1 mb-0">There has been an error!</p>
|
||||
autocomplete="off"
|
||||
:class="[hasIcon ? 'has-icon' : '', iconRight ? 'icon-right' : '']" />
|
||||
<p class="mt-2 form-test-error" v-if="!suppressError">
|
||||
There has been an error!
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -26,6 +29,10 @@ export default {
|
|||
inputId: String,
|
||||
isDisabled: Boolean,
|
||||
isRequired: Boolean,
|
||||
hasIcon: Boolean,// If input has an icon
|
||||
iconRight: Boolean,// Place icon on right side of text input, otherwise default is left if hasIcon prop is used
|
||||
iconURL: String,
|
||||
hasError: Boolean,
|
||||
mask: {
|
||||
type: String,
|
||||
default: '',
|
||||
|
|
@ -46,6 +53,19 @@ export default {
|
|||
|
||||
<style lang="scss">
|
||||
.textbox-question {
|
||||
input {
|
||||
&.has-icon {
|
||||
background-image: url(~@/assets/img/icons/location-pin.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-position: .75rem 50%;
|
||||
background-size: 1rem auto;
|
||||
padding: 0 0.75rem 0 2.5rem;
|
||||
&.icon-right {
|
||||
background-position: calc(100% - .75rem) 50%;
|
||||
padding: 0 2.5rem 0 0.75rem
|
||||
}
|
||||
}
|
||||
}
|
||||
.form-label {
|
||||
margin-bottom: .25rem;
|
||||
}
|
||||
|
|
@ -72,5 +92,8 @@ export default {
|
|||
box-shadow: 0 0 0 4px $blue-300;
|
||||
}
|
||||
}
|
||||
p {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,138 @@
|
|||
<template>
|
||||
<div class="container-fluid">
|
||||
<h4 class="m-0 p-2 bg-light rounded">List Buttons</h4>
|
||||
|
||||
<buttonQuestion :answers="years" text-position="text-start" questionText="List Button as Radio" groupName="years" />
|
||||
|
||||
<buttonQuestion :answers="checkboxAnswers" isMultiSelect text-position="text-start" questionText="List Button as checkbox" groupName="check-box-answers" />
|
||||
|
||||
<buttonQuestion :answers="checkboxAnswers" isMultiSelect text-position="text-end" questionText="List Button as checkbox text end" groupName="check-box-answers-text-right" />
|
||||
|
||||
<buttonQuestion :answers="years" questionText="List Button as Radio text center (default)" groupName="years-text-center" />
|
||||
|
||||
<buttonQuestion :answers="years" selectingInitiatesLoad questionText="List Button as Radio with spinner" groupName="years-text-spinner" />
|
||||
<span>(Selecting button with spinner will cause page overlay, page refresh needed to select buttons from other groups)</span>
|
||||
|
||||
<h4 class="m-0 p-2 bg-light rounded mt-5">List ButtonHorizontals</h4>
|
||||
|
||||
<buttonQuestion buttonType="listButtonHorizontal" :answers="radioAnswers" questionText="List Button Horizontal as radio" groupName="lbh-radio" />
|
||||
|
||||
<buttonQuestion buttonType="listButtonHorizontal" isMultiSelect :answers="horizontalCheckboxAnswers" questionText="List Button Horizontal as checkbox" groupName="lbh-checkbox" />
|
||||
|
||||
<h4 class="m-0 p-2 bg-light rounded mt-5">List Cards</h4>
|
||||
|
||||
<buttonQuestion buttonType="listCard" :answers="listCardRadio" questionText="List Card as radio" groupName="lc-radio" />
|
||||
|
||||
<buttonQuestion isMultiSelect buttonType="listCard" :answers="listCardCheckBox" questionText="List Card as checkbox" groupName="lc-checkbox" />
|
||||
|
||||
<buttonQuestion buttonType="listCard" :answers="listCardGroup" questionText="List Cards as radios" groupName="lc-mult" />
|
||||
|
||||
<buttonQuestion buttonType="listCard" isMultiSelect :answers="listCardGroup" questionText="List Cards as checkboxes" groupName="lcc-mult" />
|
||||
|
||||
<buttonQuestion isWide buttonType="listCard" :answers="listCardGroup" questionText="List Cards as radios full width (text left image right)" groupName="lc-multWide" />
|
||||
|
||||
<buttonQuestion isWide isMultiSelect buttonType="listCard" :answers="listCardGroup" questionText="List Cards as checkboxes full width (text left image right)" groupName="lcc-multWide" />
|
||||
|
||||
<h4 class="m-0 p-2 bg-light rounded mt-5">Radio</h4>
|
||||
|
||||
<buttonQuestion buttonType="radio" :answers="radioAnswers" questionText="Used with radio" groupName="radio" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import buttonQuestion from "@/common-components/button-question/button-question";
|
||||
|
||||
export default {
|
||||
name: "App",
|
||||
components: {
|
||||
buttonQuestion
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
years: [2023, 2022, 2021, 2020],
|
||||
checkboxAnswers: [
|
||||
"Checkbox Answer 1",
|
||||
"Checkbox Answer 2",
|
||||
"Checkbox Answer 3",
|
||||
],
|
||||
radioAnswers: ["Radio Answer 1", "Radio Answer 2", "Radio Answer 3"],
|
||||
horizontalCheckboxAnswers: ["HCB Answer 1","HCB Answer 2","HCB Answer 3"],
|
||||
horizontalRadioAnswers: ["HR Answer 1", "HR Answer 2", "HR Answer 3"],
|
||||
listCardCheckBox: [
|
||||
{
|
||||
Name: "List-Card-CB",
|
||||
Text: "List Card CB",
|
||||
SubText: "checkbox",
|
||||
ImageId: "53343ce4-5b6a-46aa-a80a-f948c1723955",
|
||||
AnswerImageUrl: "https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3",
|
||||
},
|
||||
],
|
||||
listCardRadio: [
|
||||
{
|
||||
Name: "List-Card-R",
|
||||
Text: "List Card R",
|
||||
SubText: "Radio",
|
||||
ImageId: "53343ce4-5b6a-46aa-a80a-f948c1723955",
|
||||
AnswerImageUrl: "https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3",
|
||||
},
|
||||
],
|
||||
listCardCheckBoxHorizontalSubText: [
|
||||
{
|
||||
Name: "List-Card-CBHst",
|
||||
Text: "List Card CBHst",
|
||||
SubText: "With Subtext",
|
||||
ImageId: "53343ce4-5b6a-46aa-a80a-f948c1723955",
|
||||
AnswerImageUrl: "https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3",
|
||||
},
|
||||
],
|
||||
listCardCheckBoxHorizontal: [
|
||||
{
|
||||
Name: "List-Card-CBH",
|
||||
Text: "List Card CBH",
|
||||
ImageId: "53343ce4-5b6a-46aa-a80a-f948c1723955",
|
||||
AnswerImageUrl: "https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3",
|
||||
},
|
||||
],
|
||||
listRadioHorizontalSubText: [
|
||||
{
|
||||
Name: "List-Card-RHst",
|
||||
Text: "List Card RHst",
|
||||
SubText: "With Subtext",
|
||||
ImageId: "53343ce4-5b6a-46aa-a80a-f948c1723955",
|
||||
AnswerImageUrl: "https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3",
|
||||
},
|
||||
],
|
||||
listRadioHorizontal: [
|
||||
{
|
||||
Name: "List-Card-RH",
|
||||
Text: "List Card RH",
|
||||
ImageId: "53343ce4-5b6a-46aa-a80a-f948c1723955",
|
||||
AnswerImageUrl: "https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3",
|
||||
},
|
||||
],
|
||||
listCardGroup: [
|
||||
{
|
||||
Name: "Side-Window-1",
|
||||
Text: "Side Window",
|
||||
SubText: "With Subtext",
|
||||
ImageId: "53343ce4-5b6a-46aa-a80a-f948c1723955",
|
||||
AnswerImageUrl: "https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3",
|
||||
},
|
||||
{
|
||||
Name: "Side-Window-2",
|
||||
Text: "Side Window",
|
||||
SubText: "With Subtext that is more than one line",
|
||||
ImageId: "53343ce4-5b6a-46aa-a80a-f948c1723955",
|
||||
AnswerImageUrl: "https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3",
|
||||
},
|
||||
{
|
||||
Name: "Side-Window-3",
|
||||
Text: "Side Window",
|
||||
ImageId: "53343ce4-5b6a-46aa-a80a-f948c1723955",
|
||||
AnswerImageUrl: "https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3",
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -27,12 +27,37 @@
|
|||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h6 class="my-4">With Error (class="has-error"):</h6>
|
||||
<h6 class="my-4">With icon aligned left</h6>
|
||||
<textboxQuestion
|
||||
labelText="Text Input Label"
|
||||
placeholderText="Disabled"
|
||||
inputID="test-text-input"
|
||||
hasIcon
|
||||
imgUrl="~@/assets/img/icons/spinner.svg"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h6 class="my-4">With icon aligned right</h6>
|
||||
<textboxQuestion
|
||||
labelText="Text Input Label"
|
||||
placeholderText="Disabled"
|
||||
inputID="test-text-input"
|
||||
hasIcon
|
||||
iconRight
|
||||
imgUrl="~@/assets/img/icons/spinner.svg"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h6 class="my-4">With Error</h6>
|
||||
<textboxQuestion
|
||||
labelText="Text Input Label"
|
||||
placeholderText="Placeholder"
|
||||
inputID="test-text-input"
|
||||
class="has-error"
|
||||
hasError
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@ import ComponentTest from "@/layouts/component-test/component-test.vue";
|
|||
import AddressPOC from "@/layouts/address-poc/address-poc.vue";
|
||||
import FormTest from "@/layouts/form-test/form-test.vue";
|
||||
import NestedRadio from "@/layouts/nested-radio-poc/nested-radio.vue";
|
||||
import buttonQuestionExamples from "@/layouts/button-question-examples/button-question-examples.vue"
|
||||
|
||||
const routes = [
|
||||
{
|
||||
|
|
@ -39,6 +40,11 @@ const routes = [
|
|||
name: "NestedRadio",
|
||||
component: NestedRadio,
|
||||
},
|
||||
{
|
||||
path: "/button-question-examples", // This is a temporary route for testing.
|
||||
name: "buttonQuestionExamples",
|
||||
component: buttonQuestionExamples,
|
||||
},
|
||||
{
|
||||
path: "/",
|
||||
name: "root",
|
||||
|
|
|
|||
|
|
@ -41,9 +41,16 @@ export default {
|
|||
&:checked {
|
||||
background-size: 125%;
|
||||
border: 1px solid $blue;
|
||||
+ label {
|
||||
p {
|
||||
font-weight: 500;
|
||||
font-size: .875rem;
|
||||
color: $black;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:focus {
|
||||
box-shadow: 0 0 0 4px $blue-300;
|
||||
box-shadow: 0 0 0 2.5px $blue;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
|
|
@ -51,5 +58,10 @@ export default {
|
|||
box-shadow: 0 0 0 4px $blue-300;
|
||||
}
|
||||
}
|
||||
p {
|
||||
font-weight: 400;
|
||||
font-size: .875rem;
|
||||
color: $gray-600;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -145,7 +145,7 @@ describe("list-card.vue", () => {
|
|||
|
||||
// Assert
|
||||
const label = wrapper.find("label");
|
||||
expect(label.classes()).toEqual(["d-flex", "w-100", "align-items-center", "px-2", "h-100", "flex-row", "py-r", "ps-3", "pe-8"]);
|
||||
expect(label.classes()).toEqual(["d-flex", "w-100", "align-items-center", "px-2", "h-100", "flex-row", "py-r", "ps-3", "pe-4"]);
|
||||
});
|
||||
|
||||
it("Should return flex row classes if isWide is true and checkboxTop if buttonLabelSubCopy is true", async () => {
|
||||
|
|
@ -167,7 +167,7 @@ describe("list-card.vue", () => {
|
|||
|
||||
// Assert
|
||||
const label = wrapper.find("label");
|
||||
expect(label.classes()).toEqual(["d-flex", "w-100", "align-items-center", "px-2", "h-100", "flex-row", "py-r", "ps-3", "pe-8", "checkboxTop"]);
|
||||
expect(label.classes()).toEqual(["d-flex", "w-100", "align-items-center", "px-2", "h-100", "flex-row", "py-r", "ps-3", "pe-4", "checkboxTop"]);
|
||||
});
|
||||
|
||||
it("Should return flex column classes if isWide is false", async () => {
|
||||
|
|
|
|||
|
|
@ -86,7 +86,7 @@ export default {
|
|||
computed: {
|
||||
getLabelClasses() {
|
||||
if (this.isWide) {
|
||||
let classes = "flex-row py-r ps-3 pe-8";
|
||||
let classes = "flex-row py-r ps-3 pe-4";
|
||||
if (this.buttonLabelSubCopy) {
|
||||
classes += " checkboxTop";
|
||||
}
|
||||
|
|
|
|||
|
|
@ -89,9 +89,16 @@ export default {
|
|||
background-size: 71%;
|
||||
border: 1px solid $blue;
|
||||
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50' xml:space='preserve'%3e%3ccircle cx='25' cy='25' r='25' fill='%231574A1'/%3e%3c/svg%3e");
|
||||
+ label {
|
||||
p {
|
||||
font-weight: 500;
|
||||
font-size: .875rem;
|
||||
color: $black;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:focus {
|
||||
box-shadow: 0 0 0 4px $blue-300;
|
||||
box-shadow: 0 0 0 2.5px $blue;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
|
|
@ -99,5 +106,10 @@ export default {
|
|||
box-shadow: 0 0 0 4px $blue-300;
|
||||
}
|
||||
}
|
||||
p {
|
||||
font-weight: 400;
|
||||
font-size: .875rem;
|
||||
color: $gray-600;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in a new issue