Merge pull request #3129 from Safelite/feature/CASH-1684

Feature/CASH 1684
This commit is contained in:
Chris 2026-04-03 08:48:57 -04:00 committed by GitHub
commit 80d6896908
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 35 additions and 4 deletions

View file

@ -85,6 +85,7 @@
ref="alertMSRNotCoveredByInsurance" ref="alertMSRNotCoveredByInsurance"
class="mt-5 mb-5" class="mt-5 mb-5"
v-if="isMSRFeeNotCoveredByInsurance" v-if="isMSRFeeNotCoveredByInsurance"
:leftAlignCopy="true"
:manualHeadline="MSRFeeAlertHeadlineText" :manualHeadline="MSRFeeAlertHeadlineText"
:manualCopy="MSRFeeAlertBodyText" :manualCopy="MSRFeeAlertBodyText"
:showWarningIcon="true" :showWarningIcon="true"

View file

@ -1,6 +1,6 @@
<template> <template>
<div <div
class="alert fade show text-center mb-0 py-2 px-4 border-0" class="alert fade show mb-0 py-2 px-4 border-0"
role="alert" role="alert"
v-on="{ 'close.bs.alert': onAlertClose }" v-on="{ 'close.bs.alert': onAlertClose }"
:class="[ :class="[
@ -8,8 +8,9 @@
this.alertClass, this.alertClass,
this.cssClassNameForCmsWidget, this.cssClassNameForCmsWidget,
this.hasBorder ? 'bordered' : '', this.hasBorder ? 'bordered' : '',
this.leftAlignCopy ? 'text-start' : 'text-center',
]"> ]">
<p class="mx-6 my-0 fw-bold alert-heading"> <p class="my-0 fw-bold alert-heading" :class="leftAlignCopy ? 'mx-4' : 'mx-6'">
<img v-if="showInfoIcon" :src="infoIcon" alt="Info Icon" class="info-icon" /> <img v-if="showInfoIcon" :src="infoIcon" alt="Info Icon" class="info-icon" />
<img <img
v-if="showWarningIcon" v-if="showWarningIcon"
@ -74,6 +75,7 @@ export default {
hasBorder: Boolean, hasBorder: Boolean,
isDismissible: Boolean, isDismissible: Boolean,
alertClass: String, alertClass: String,
leftAlignCopy: Boolean,
/* /*
alertClass class names: alertClass class names:
alert-success (green) alert-success (green)
@ -220,13 +222,41 @@ export default {
} }
&.alert-warning { &.alert-warning {
background-color: $yellow-100; background-color: $yellow-100;
.alert-heading {
color: $yellow-600;
&.bordered {
border-color: $yellow-400;
}
&.text-start {
.alert-heading {
display: flex;
align-items: center;
color: $black;
font-weight: 700;
.warning-icon {
margin-right: 0.5rem;
}
}
hr {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
border-color: $yellow-400;
}
}
&.text-center {
.alert-heading {
color: $yellow-600;
}
}
.alert-heading {
.warning-icon { .warning-icon {
height: 1rem; height: 1rem;
} }
} }
svg { svg {
fill: $yellow-600; fill: $yellow-600;
width: 1rem; width: 1rem;