jason/DigitalConsumer.FixMyGlass
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge branch 'develop' into feature/CSR-186_add-logic-to-question-vue

Browse source
This commit is contained in:
Max 2022-01-20 10:12:10 -05:00
commit 0ee6670949
7 changed files with 67 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
public/index.html
View file

@ -7,7 +7,7 @@
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> <link rel="icon" href="<%= BASE_URL %>favicon.ico">
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap" rel="stylesheet">
<title><%= htmlWebpackPlugin.options.title %></title> <title><%= htmlWebpackPlugin.options.title %></title>
</head> </head>
<body> <body>

1
src/common-components/button-question/button-question.vue
View file

@ -105,6 +105,7 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.button_question { .button_question {
color: $black;
height: calc(100vh - 280px); height: calc(100vh - 280px);
.overflow-scroll { .overflow-scroll {

12
src/layouts/component-test/component-test.vue
View file

@ -626,12 +626,18 @@
</div> </div>
<div class="row my-4"> <div class="row my-4">
<div class="col"> <div class="col">
<h4 class="m-0 p-2 bg-light rounded">Text Link</h4> <h4 class="m-0 p-2 bg-light rounded">Links</h4>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col my-3 d-flex align-items-center"> <div class="col my-3">
<a href="#">Text Link</a> <a href="#">Text Link</a> <span>(default text link behavior)</span>
<br><br>
<a class="small" href="#">Text Link Small</a> <span>(.small)</span>
<br><br>
<a class="footer-link" href="#">Footer Link</a> <span>(.footer-link)</span>
<br><br>
<a class="navigation-link" href="#">Navigation Link</a> <span>(.navigation-link)</span>
</div> </div>
</div> </div>
<div class="row my-4"> <div class="row my-4">

38
src/layouts/form-test/form-test.vue
View file

@ -4,9 +4,11 @@
@submit="onSubmit" @submit="onSubmit"
@invalid-submit="onInvalidSubmit" @invalid-submit="onInvalidSubmit"
v-slot="{ values, meta }" v-slot="{ values, meta }"
class="w-50"
> >
<div class="row g-2 mt-6 mx-4"> <div class="row g-2 mt-6 mx-4">
<h2 class="mx-2 mt-4 mb-0">FORM VALIDATION TEST</h2> <h2 class="mx-2 mt-4 mb-0">FORM VALIDATION TEST</h2>
<p class="mx-2">NOTE: This page is testing functionality only; styling will not match Figma mocks.</p>
</div> </div>
<div class="row g-2 mt-6 mx-4"> <div class="row g-2 mt-6 mx-4">
@ -109,7 +111,7 @@
</div> </div>
</div> </div>
<div class="row g-2 mt-6 mx-4"> <!-- <div class="row g-2 mt-6 mx-4">
<div class="col"> <div class="col">
<h4 class="mx-2 mt-4 mb-0">demo4: Enter some numbers (optional)</h4> <h4 class="mx-2 mt-4 mb-0">demo4: Enter some numbers (optional)</h4>
<textInput <textInput
@ -119,7 +121,7 @@
:isRequired="true" :isRequired="true"
/> />
</div> </div>
</div> </div> -->
<div class="row g-2 mt-6 mx-4"> <div class="row g-2 mt-6 mx-4">
<h4 class="mx-2 mt-4 mb-0">demo5: Where's your damage? (Required)</h4> <h4 class="mx-2 mt-4 mb-0">demo5: Where's your damage? (Required)</h4>
@ -201,7 +203,7 @@
<error-message name="demo6"></error-message> <error-message name="demo6"></error-message>
</div> </div>
<div class="row g-2 mt-6 mx-4"> <!-- <div class="row g-2 mt-6 mx-4">
<div class="col"> <div class="col">
<h4 class="mx-2 mt-4 mb-0">Password (Required, enter any string)</h4> <h4 class="mx-2 mt-4 mb-0">Password (Required, enter any string)</h4>
<textInput <textInput
@ -223,7 +225,7 @@
:isRequired="true" :isRequired="true"
/> />
</div> </div>
</div> </div> -->
<div class="row px-3 form-test-error" data-focus-target="demoX"> <div class="row px-3 form-test-error" data-focus-target="demoX">
<error-message name="demoX"></error-message> <error-message name="demoX"></error-message>
@ -253,13 +255,25 @@ import listButtonHorizontal from "@/ux-components/list-button-horizontal/list-bu
export default { export default {
name: "App", name: "App",
data() { data() {
const errorMessages = {
demo: 'Please select chip(s)',
demo2: 'Please select a windshield part',
demo3: 'You entered an invalid VIN. Please check to make sure that you inserted a 17 digit, alpha-numeric number. VINs do not contain the letters I, O or Q.',
demo4: 'Invalid Entry. Must enter only numbers, no letters.',
demo5: 'Please select damage location',
};
return { return {
schema: Yup.object().shape({ schema: Yup.object().shape({
demo: Yup.string().required('Please select chip(s)'), demo: Yup.string().required(errorMessages.demo),
demo2: Yup.array().required('Please select a windshield part'), demo2: Yup.array().required(errorMessages.demo2).min(1, errorMessages.demo2),
demo3: Yup.string().required('Invalid VIN. Please enter X, Y, Z...'), demo3: Yup.string()
demo4: Yup.string().matches('^[0-9]*$', 'Invalid Entry. Must enter only numbers, no letters.'), .uppercase()
demo5: Yup.array().required('Please select damage location'), .required('Please enter a VIN.')
.min(17, errorMessages.demo3)
.max(17, errorMessages.demo3)
.matches('^[^IOQ]+$', errorMessages.demo3),
// demo4: Yup.string().matches('^[0-9]*$', errorMessages.demo4),
demo5: Yup.array().required(errorMessages.demo5).min(1, errorMessages.demo5),
demo6: Yup.string() demo6: Yup.string()
.when('demo5', function (demo5, schema, value) { .when('demo5', function (demo5, schema, value) {
if (demo5) { if (demo5) {
@ -273,9 +287,9 @@ export default {
return schema; return schema;
}), }),
demoX: Yup.string().notRequired(), demoX: Yup.string().notRequired(),
// // PASSWORD EXAMPLE, NOT BEING USED NOW // PASSWORD EXAMPLE, NOT BEING USED NOW
//password: Yup.string().min(6).required(), // password: Yup.string().min(6).required(),
//passwordConfirmation: Yup.string() // passwordConfirmation: Yup.string()
// .required() // .required()
// .oneOf([Yup.ref("password")], "Passwords do not match"), // .oneOf([Yup.ref("password")], "Passwords do not match"),
}).test('repair-replace-conflict', }).test('repair-replace-conflict',

3
src/styles/common-list-styles.scss
View file

@ -12,6 +12,8 @@
box-shadow: 0 0 0 2px $blue; box-shadow: 0 0 0 2px $blue;
} }
&:checked + label { &:checked + label {
color: $black;
font-weight: 500;
background: $blue-100; background: $blue-100;
box-shadow: 0 0 0 1px $blue; box-shadow: 0 0 0 1px $blue;
} }
@ -20,6 +22,7 @@
} }
} }
label { label {
color: $gray-600;
position: relative; position: relative;
background: $white; background: $white;
transition: all 150ms linear; transition: all 150ms linear;

27
src/styles/common-styles.scss
View file

@ -14,8 +14,33 @@ body {
color: $blue; color: $blue;
text-decoration: none; text-decoration: none;
border-bottom: 1px solid $blue; border-bottom: 1px solid $blue;
line-height: 26px;
padding: 0 0 4px 0;
font-weight: 500;
&:hover { &:hover {
color: $blue-400; color: $blue;
font-weight: 700;
}
&.small {
line-height: 24px;
}
&.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 { .pointer {

2
src/ux-components/list-button/list-button.vue
View file

@ -74,7 +74,7 @@ export default {
&.list-button { &.list-button {
input[type="radio"], input[type="radio"],
input[type="checkbox"] { input[type="checkbox"] {
position: static !important; //override bootstrap position: static; //override bootstrap
height: 0; height: 0;
} }
} }