add cssModalHeadlineClass prop to add custom css

This commit is contained in:
Bill Richardson 2024-07-24 16:39:35 -04:00
parent 2d3c799bc1
commit 12bd0ff08c
5 changed files with 24 additions and 13 deletions

View file

@ -10,6 +10,7 @@
alt="" /> alt="" />
<h5 <h5
class="mb-4" class="mb-4"
:class="cssModalHeadlineClass"
v-html="ModalHeadline"></h5> v-html="ModalHeadline"></h5>
<p <p
class="fw-bold mb-2 subheader-text" class="fw-bold mb-2 subheader-text"
@ -34,7 +35,8 @@ export default {
modal modal
}, },
props: { props: {
cmsWidgetName: String cmsWidgetName: String,
cssModalHeadlineClass: String
}, },
computed: { computed: {
ModalName() { ModalName() {
@ -88,6 +90,11 @@ export default {
margin-bottom: 0; margin-bottom: 0;
} }
} }
h5 {
&.text-center {
text-align: center;
}
}
} }
} }
} }

View file

@ -87,6 +87,7 @@
</div> </div>
<contentGroupModal <contentGroupModal
:ref="RECAL_MODAL_REF_NAME" :ref="RECAL_MODAL_REF_NAME"
cssModalHeadlineClass="text-center"
cmsWidgetName="RecalModal" /> cmsWidgetName="RecalModal" />
<contentGroupModal <contentGroupModal
:ref="DEDUCTIBLE_MODAL_REF_NAME" :ref="DEDUCTIBLE_MODAL_REF_NAME"
@ -127,9 +128,9 @@ import coverageStatuses from '@/constants/coverage-statuses';
import coverageType from '@/constants/coverage-type'; import coverageType from '@/constants/coverage-type';
const SAFELITE_PROVIDER = 'Safelite'; const SAFELITE_PROVIDER = 'Safelite';
const RECAL_MODAL_REF_NAME = "RecalModal"; const RECAL_MODAL_REF_NAME = 'RecalModal';
const DEDUCTIBLE_MODAL_REF_NAME = "DeductibleModal"; const DEDUCTIBLE_MODAL_REF_NAME = 'DeductibleModal';
const SITE_FOOTER_REF_NAME = "siteFooter"; const SITE_FOOTER_REF_NAME = 'siteFooter';
export default { export default {
name: 'coverage-statement', name: 'coverage-statement',

View file

@ -43,6 +43,7 @@ ref="theForm"
</div> </div>
<contentGroupModal <contentGroupModal
:ref="RECAL_MODAL_REF_NAME" :ref="RECAL_MODAL_REF_NAME"
cssModalHeadlineClass="text-center"
cmsWidgetName="RecalModal" /> cmsWidgetName="RecalModal" />
<steeringModal <steeringModal
:ref="STEERING_MODAL_REF_NAME" :ref="STEERING_MODAL_REF_NAME"
@ -85,11 +86,11 @@ import bailoutMessage from '@/constants/bailoutMessage';
import contentGroupModal from '@/iss-components/content-group-modal/content-group-modal.vue'; import contentGroupModal from '@/iss-components/content-group-modal/content-group-modal.vue';
const options = { SAFELITE: 'SafeliteOption', TPA: 'TPAOption' }; const options = { SAFELITE: 'SafeliteOption', TPA: 'TPAOption' };
const RECAL_MODAL_REF_NAME = "RecalModal"; const RECAL_MODAL_REF_NAME = 'RecalModal';
const STEERING_MODAL_REF_NAME = "StateSteeringModal"; const STEERING_MODAL_REF_NAME = 'StateSteeringModal';
const SHOP_PREFERENCE_MODAL_REF_NAME = "ShopPreferenceDrawer"; const SHOP_PREFERENCE_MODAL_REF_NAME = 'ShopPreferenceDrawer';
const TPA_RECAL_MODAL_REF_NAME = "TPARecalModal"; const TPA_RECAL_MODAL_REF_NAME = 'TPARecalModal';
const SITE_FOOTER_REF_NAME = "siteFooter"; const SITE_FOOTER_REF_NAME = 'siteFooter';
export default { export default {
name: 'provider-preference', name: 'provider-preference',

View file

@ -96,6 +96,7 @@
" /> " />
<contentGroupModal <contentGroupModal
:ref="RECAL_MODAL_REF_NAME" :ref="RECAL_MODAL_REF_NAME"
cssModalHeadlineClass="text-center"
cmsWidgetName="RecalModal" /> cmsWidgetName="RecalModal" />
<siteFooter <siteFooter
:ref="SITE_FOOTER_REF_NAME" :ref="SITE_FOOTER_REF_NAME"
@ -153,9 +154,9 @@ defineRule('mobile-location-required', (value) => {
}); });
defineRule('selection-required', required(errorMessages.OPTION_REQUIRED)); defineRule('selection-required', required(errorMessages.OPTION_REQUIRED));
const SHOP_QUESTION_REF_NAME = "shopQuestion"; const SHOP_QUESTION_REF_NAME = 'shopQuestion';
const RECAL_MODAL_REF_NAME = "RecalModal"; const RECAL_MODAL_REF_NAME = 'RecalModal';
const SITE_FOOTER_REF_NAME = "siteFooter"; const SITE_FOOTER_REF_NAME = 'siteFooter';
export default { export default {
name: 'service-location', name: 'service-location',

View file

@ -51,6 +51,7 @@
cmsWidgetName="RearWiperModal" /> cmsWidgetName="RearWiperModal" />
<contentGroupModal <contentGroupModal
ref="RecalModal" ref="RecalModal"
cssModalHeadlineClass="text-center"
cmsWidgetName="RecalModal" /> cmsWidgetName="RecalModal" />
</div> </div>
</Form> </Form>