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

Merge pull request #192 from Safelite/CSR-257-funnel-footer-updates

Browse source 
CSR-257 update how button and text link wrap and stack.
This commit is contained in:
bmauger 2022-02-04 14:00:58 -05:00 committed by GitHub
commit 0fe50fb780
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 79 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
src/common-components/funnel-footer/funnel-footer.spec.js
View file

@ -5,9 +5,17 @@ describe("funnel-footer.vue", () => {
it("Should return footer-link class", async () => {
// Act
try {
const r = {
test:"testing",
clientHeight: 10,
classList: {
add: jest.fn(() => ''),
remove: jest.fn()
},
};
global.document.getElementById = jest.fn().mockImplementation(()=> {
return {}
return r;
});
const wrapper = mount(funnelFooter, {
@ -22,9 +30,8 @@ describe("funnel-footer.vue", () => {
// Expect
expect(link.attributes('class')).toContain("footer-link");
expect(global.document.getElementById).toBeCalled();
} catch(error) {
console.log(error);
}
expect(r.classList.add).toBeCalledWith("justify-content-end");
expect(r.classList.remove).toBeCalledWith("justify-content-start");
});
@ -57,4 +64,32 @@ describe("funnel-footer.vue", () => {
expect(input.attributes("class")).toContain("btn-primary");
});
it("Should return class justify-content-end if paddingHeight < 80px", async () => {
global.document.getElementById = jest.fn().mockImplementation(()=> {
return {
test:"testing",
clientHeight: 10,
classList: {
add: jest.fn(),
remove: jest.fn()
}
}
});
// Act
const wrapper = mount(funnelFooter, {
propsData: {
footer: true
},
});
const infoBox = document.getElementById('infoBox');
// Assert
const stacked = wrapper.find("#stacked");
wrapper.vm.paddingHeight = 100;
// Expect
expect(stacked.attributes('class')).toContain("justify-content-end");
});
});

31
src/common-components/funnel-footer/funnel-footer.vue
View file

@ -26,15 +26,16 @@
</div>
</div>
<div class="container-fluid fixed-bottom g-4 bg-light py-4" id="infoBox">
<div class="row">
<div class="col">
<div class="row d-flex flex-row-reverse align-items-center">
<div class="col d-flex justify-content-end" id="stacked">
<buttonMain
isPrimary
buttonText="Review Appointment Details"
buttonText="Button test"
loaderColor="white"
sizeInRem="1"
isFloat
/>
</div>
<div class="col">
<textLink
navigation=true
text="back"
@ -68,6 +69,7 @@ export default {
setTimeout(function(){ // Give it a moment to set the date
document.getElementById('years').innerHTML += new Date().getFullYear();
}, 100);
this.checkHeight();
},
beforeUnmount() {
window.removeEventListener('resize', this.onResize);
@ -75,7 +77,28 @@ export default {
methods: {
onResize() {
this.paddingHeight = document.getElementById("infoBox").offsetHeight;
this.checkHeight();
},
checkHeight() {
const parentHeight = document.getElementById('infoBox').clientHeight;
const wrapper2 = document.getElementById('stacked');
console.log(parentHeight);
console.log(wrapper2);
if (parentHeight > 80) {
wrapper2.classList.add("justify-content-start");
wrapper2.classList.remove("justify-content-end");
} else {
wrapper2.classList.add("justify-content-end");
wrapper2.classList.remove("justify-content-start");
}
}
}
};
</script>
<style lang="scss">
button {
min-width: 200px;
width: 100%;
}
</style>

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

@ -76,7 +76,7 @@
<div class="row g-2">
<listCard
isMultiSelect
buttonImage="windshield-damage.svg"
buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
buttonLabel="Windshield"
altText=""
buttonID="List Card Checkbox 1"
@ -94,7 +94,7 @@
/>
<listCard
isMultiSelect
buttonImage="windshield-damage.svg"
buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
buttonLabel="Windshield"
altText=""
buttonID="List Card Checkbox 3"
@ -115,7 +115,7 @@
<legend class="sr-only">Functioning as Checkbox</legend>
<listCard
isMultiSelect
buttonImage="windshield-damage.svg"
buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
buttonLabel="Windshield"
altText=""
buttonID="List Card Checkbox"
@ -132,7 +132,7 @@
<legend class="sr-only">Checkbox no Description</legend>
<listCard
isMultiSelect
buttonImage="windshield-damage.svg"
buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
buttonLabel="Windshield"
altText=""
buttonID="List Card Checkbox b"
@ -149,7 +149,7 @@
<legend class="sr-only">Functioning as Radio Button</legend>
<listCard
isRadio
buttonImage="windshield-damage.svg"
buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
buttonLabel="Windshield"
altText=""
buttonID="List Card Radio Button"
@ -166,7 +166,7 @@
<legend class="sr-only">Radio Button no Description</legend>
<listCard
isRadio
buttonImage="windshield-damage.svg"
buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
buttonLabel="Windshield"
altText=""
buttonID="List Card Radio Button b"
@ -184,7 +184,7 @@
<listCard
isMultiSelect
isWide
buttonImage="windshield-damage.svg"
buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
buttonLabel="Windshield"
altText=""
buttonID="List Card Horizontal Checkbox"
@ -219,7 +219,7 @@
<legend class="sr-only">Horizontal Radio Button</legend>
<listCard
isWide
buttonImage="back-glass-damage.svg"
buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
buttonLabel="Rear Window"
altText=""
buttonID="List Card Horizontal Radio Button"
@ -236,7 +236,7 @@
<legend class="sr-only">Radio Button no Description</legend>
<listCard
isWide
buttonImage="windshield-damage.svg"
buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
buttonLabel="Windshield"
altText=""
buttonID="List Card Horizontal Radio Button b"

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

@ -50,7 +50,7 @@ export default {
border-radius: $border-radius-lg;
color: $white;
transition: all 150ms linear;
white-space: nowrap;
justify-content: center;
&:hover {
background: linear-gradient(
270deg,

7
src/ux-components/text-link/text-link.vue
View file

@ -29,8 +29,7 @@ export default {
<style lang="scss">
a {
color: $blue;
text-decoration: none;
border-bottom: 1px solid $blue;
text-underline-offset: 0.5em;
line-height: 26px;
padding: 0 0 4px 0;
font-weight: 500;
@ -45,7 +44,6 @@ a {
}
&.navigation-link {
color: $black;
border-bottom: 1px solid $black;
line-height: 26px;
display: inline-flex;
text-transform: capitalize;
@ -54,14 +52,13 @@ a {
&.footer-link {
color: $gray-600;
text-decoration: none;
border-bottom: 1px solid transparent;
line-height: 20px;
padding: 0 0 2px 0;
font-weight: 400;
font-size: 0.75rem;
&:hover {
border-bottom: 1px solid $gray-500;
padding: 0 0 2px 0;
text-decoration: underline;
}
}
}