Added back button component
This commit is contained in:
Jason Wheeler
parent
564d1e51c9
commit
e02070fa39
5 changed files with 134 additions and 6 deletions
|
|
@ -1,3 +0,0 @@
|
|||
<svg viewBox="0 0 22 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M18.5146 17.9893C20.5557 17.9893 21.5811 16.9834 21.5811 14.9619V3.03809C21.5811 1.0166 20.5557 0.0107422 18.5146 0.0107422H10.0283C8.88574 0.0107422 7.89941 0.303711 7.09863 1.15332L1.34668 7.12988C0.711914 7.78418 0.418945 8.37012 0.418945 8.98535C0.418945 9.59082 0.702148 10.1865 1.34668 10.8408L7.1084 16.7881C7.91895 17.6279 8.89551 17.9795 10.0381 17.9795L18.5146 17.9893ZM9.35449 13.2529C8.91504 13.2529 8.55371 12.8818 8.55371 12.4326C8.55371 12.2178 8.63184 12.0127 8.78809 11.8662L11.6494 9.00488L8.78809 6.14355C8.63184 5.9873 8.55371 5.79199 8.55371 5.57715C8.55371 5.11816 8.91504 4.77637 9.35449 4.77637C9.5791 4.77637 9.76465 4.84473 9.91113 5.00098L12.792 7.87207L15.6826 4.99121C15.8486 4.8252 16.0342 4.75684 16.249 4.75684C16.6885 4.75684 17.0498 5.1084 17.0498 5.55762C17.0498 5.78223 16.9717 5.95801 16.8154 6.13379L13.9443 9.00488L16.8057 11.8564C16.9521 12.0127 17.04 12.208 17.04 12.4326C17.04 12.8818 16.6787 13.2529 16.2295 13.2529C16.0049 13.2529 15.7998 13.1553 15.6436 13.0088L12.792 10.1377L9.94043 13.0088C9.78418 13.165 9.5791 13.2529 9.35449 13.2529Z" fill="#727676"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.2 KiB |
|
|
@ -0,0 +1,21 @@
|
|||
import { shallowMount } from "@vue/test-utils";
|
||||
import buttonBack from "./button-back";
|
||||
|
||||
describe("back button", () => {
|
||||
test("renders a button", () => {
|
||||
// Arrange
|
||||
const myFunction = () => {};
|
||||
|
||||
// Act
|
||||
const wrapper = shallowMount(buttonBack, {
|
||||
propsData: {
|
||||
backButtonAction: myFunction,
|
||||
backButtonAccessibleText: "something",
|
||||
},
|
||||
});
|
||||
|
||||
// Assert
|
||||
expect(wrapper.find("button").exists()).toBe(true);
|
||||
wrapper.unmount();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,82 @@
|
|||
<template>
|
||||
<button
|
||||
@click="handleClick"
|
||||
class="back-button-wrapper"
|
||||
:aria-label="backButtonAccessibleText"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="34px"
|
||||
height="30px"
|
||||
viewBox="-2.2 -6 30 30"
|
||||
>
|
||||
<g id="Layer_3">
|
||||
<path
|
||||
class="outer"
|
||||
fill="#FFFFFF"
|
||||
d="M19.934-1.434h-8.486c-1.683,0-2.999,0.528-4.021,1.614L1.685,6.146C0.78,7.079,0.338,8.027,0.338,9.041
|
||||
c0,1.028,0.444,1.979,1.359,2.908l5.753,5.938c1.054,1.093,2.403,1.647,4.007,1.647l8.475,0.01c2.861,0,4.568-1.692,4.568-4.528
|
||||
V3.094C24.5,0.259,22.793-1.434,19.934-1.434L19.934-1.434z"
|
||||
/>
|
||||
</g>
|
||||
<g id="Layer_2">
|
||||
<path
|
||||
class="inner"
|
||||
fill="#727676"
|
||||
d="M19.934,17.989c2.041,0,3.066-1.006,3.066-3.028V3.039c0-2.022-1.025-3.028-3.066-3.028h-8.486
|
||||
c-1.143,0-2.129,0.292-2.929,1.143L2.766,7.13C2.131,7.784,1.838,8.37,1.838,8.985c0,0.605,0.283,1.201,0.928,1.855l5.762,5.947
|
||||
c0.811,0.84,1.787,1.191,2.93,1.191L19.934,17.989z M10.773,13.253c-0.439,0-0.801-0.371-0.801-0.82
|
||||
c0-0.215,0.078-0.42,0.235-0.566l2.861-2.861l-2.861-2.862c-0.156-0.156-0.234-0.352-0.234-0.566c0-0.458,0.362-0.801,0.801-0.801
|
||||
c0.224,0,0.41,0.069,0.556,0.225l2.881,2.872l2.891-2.881c0.166-0.166,0.353-0.234,0.566-0.234c0.439,0,0.801,0.352,0.801,0.801
|
||||
c0,0.225-0.078,0.4-0.234,0.576l-2.871,2.871l2.861,2.852c0.146,0.156,0.234,0.352,0.234,0.576c0,0.449-0.361,0.82-0.811,0.82
|
||||
c-0.225,0-0.43-0.098-0.586-0.244l-2.852-2.871l-2.852,2.871C11.203,13.165,10.999,13.253,10.773,13.253z"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "buttonBack",
|
||||
props: {
|
||||
backButtonAccessibleText: {
|
||||
type: String,
|
||||
required: true,
|
||||
default: "",
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
handleClick() {
|
||||
this.$emit("click-event");
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.back-button-wrapper {
|
||||
padding: 0;
|
||||
position: relative;
|
||||
top: -1px;
|
||||
margin-left: 2px;
|
||||
border: none;
|
||||
background: none;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
|
||||
svg .outer {
|
||||
fill: $white;
|
||||
stroke-width: 2.5px;
|
||||
stroke: $blue;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
transform: translate(-2.7px, -1.8px) scale(1.2);
|
||||
}
|
||||
}
|
||||
&:focus-visible {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -5,23 +5,39 @@
|
|||
<span>
|
||||
{{ content }}
|
||||
</span>
|
||||
<buttonBack
|
||||
v-if="hasBackButton"
|
||||
:backButtonAccessibleText="backButtonAccessibleText"
|
||||
@click-event="clickEvent"
|
||||
/>
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import buttonBack from "@/common-components/site-sub-header/button-back/button-back";
|
||||
|
||||
|
||||
export default ({
|
||||
name: "siteSubHeader",
|
||||
props: {
|
||||
cmsWidgetName: String,
|
||||
hasBackButton: Boolean,
|
||||
backButtonAccessibleText: String,
|
||||
},
|
||||
computed: {
|
||||
content()
|
||||
{
|
||||
return this.getCmsContent(this.cmsWidgetName, "SubHeaderText")
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
clickEvent() {
|
||||
this.$emit("click-event");
|
||||
},
|
||||
},
|
||||
components: { buttonBack },
|
||||
})
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,12 @@
|
|||
<div class="select-car">
|
||||
<div class="select-car-form rounded text-center">
|
||||
<vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="true"/>
|
||||
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
|
||||
<siteSubHeader
|
||||
cmsWidgetName="SiteSubHeaderWidget"
|
||||
:hasBackButton="true"
|
||||
@click-event="backButtonAction"
|
||||
backButtonAccessibleText = "Change vehicle year"
|
||||
/>
|
||||
<div class="fade-on-route-transition">
|
||||
<makeQuestion
|
||||
class="fade-on-route-transition"
|
||||
|
|
@ -64,7 +69,14 @@
|
|||
);
|
||||
});
|
||||
},
|
||||
|
||||
methods: {
|
||||
backButtonAction() {
|
||||
this.$router.navigate(
|
||||
this.navigationScenarios.CLICKED_BACK,
|
||||
this.$route
|
||||
);
|
||||
},
|
||||
},
|
||||
components: {
|
||||
makeQuestion,
|
||||
siteHeader,
|
||||
|
|
|
|||
Loading…
Reference in a new issue