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

Merge branch 'develop' into feature/humphries/INSR-7752

Browse source
This commit is contained in:
Alex Humphries 2026-02-02 11:43:30 -05:00
commit 7d80834ee8
1 changed files with 43 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

59
src/ux-components/alert/alert.vue
View file

@ -8,9 +8,21 @@
cssClassNameForCmsWidget, cssClassNameForCmsWidget,
]"> ]">
<div class="alert-header"> <div class="alert-header">
<svg class="alert-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="21" viewBox="0 0 20 21"> <div class="alert-icon-container">
<path fill-rule="nonzero" d="M10 .5c5.523 0 10 4.477 10 10s-4.477 10-10 10-10-4.477-10-10S4.477.5 10 .5zm.043 13.6a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm.77-9.2h-1.54l-.088.009a.502.502 0 0 0-.299.193.66.66 0 0 0-.125.47l.747 6.806.017.096c.065.249.263.425.495.426l.084-.008c.22-.042.396-.246.427-.51l.793-6.805.004-.102a.651.651 0 0 0-.127-.37.489.489 0 0 0-.388-.205z"/> <svg
</svg> class="alert-icon"
xmlns="http://www.w3.org/2000/svg"
width="20"
height="21"
viewBox="0 0 20 21">
<path
fill-rule="nonzero"
d="M10 .5c5.523 0 10 4.477 10 10s-4.477 10-10 10-10-4.477-10-10S4.477.5 10 .5zm.043 13.6a1
1 0 1 0 0 2 1 1 0 0 0 0-2zm.77-9.2h-1.54l-.088.009a.502.502 0 0 0-.299.193.66.66 0 0
0-.125.47l.747 6.806.017.096c.065.249.263.425.495.426l.084-.008c.22-.042.396-.246.427-.51l.793-6.805.004-.102a.651.651
0 0 0-.127-.37.489.489 0 0 0-.388-.205z" />
</svg>
</div>
<span class="m-0 alert-header-text"> <span class="m-0 alert-header-text">
{{ alertHeadline }} {{ alertHeadline }}
</span> </span>
@ -19,10 +31,18 @@
class="btn-collapse" class="btn-collapse"
type="button" type="button"
@click="toggleCollapse"> @click="toggleCollapse">
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="9" viewBox="0 0 15 9" <svg
xmlns="http://www.w3.org/2000/svg"
width="15"
height="9"
viewBox="0 0 15 9"
class="btn-collapse-icon" class="btn-collapse-icon"
:class="{ 'rotated': !collapsed }"> :class="{ 'rotated': !collapsed }">
<path fill-rule="nonzero" d="M7.5 0a.806.806 0 0 0-.593.265L.246 7.455a.957.957 0 0 0 0 1.28.796.796 0 0 0 1.185 0l6.07-6.55 6.068 6.55a.796.796 0 0 0 1.186 0 .957.957 0 0 0 0-1.28L8.093.265A.806.806 0 0 0 7.5 0"/> <path
fill-rule="nonzero"
d="M7.5 0a.806.806 0 0 0-.593.265L.246 7.455a.957.957 0 0 0 0 1.28.796.796 0 0 0
1.185 0l6.07-6.55 6.068 6.55a.796.796 0 0 0 1.186 0 .957.957 0 0 0 0-1.28L8.093.265A.806.806
0 0 0 7.5 0" />
</svg> </svg>
</button> </button>
<button <button
@ -36,13 +56,16 @@
viewBox="0 0 23.7 23.7" viewBox="0 0 23.7 23.7"
xml:space="preserve"> xml:space="preserve">
<path <path
d="m23.24 2.7-9.15 9.15L23.24 21a1.581 1.581 0 0 1-1.12 2.7c-.42 0-.82-.16-1.12-.46l-9.15-9.15-9.15 9.15c-.3.3-.7.46-1.12.46A1.581 1.581 0 0 1 .46 21l8.47-8.47.68-.68L.46 2.7c-.62-.62-.62-1.62 0-2.24.62-.62 1.62-.62 2.24 0l8.47 8.47.68.68L21 .46a1.57 1.57 0 0 1 2.23 0c.63.62.63 1.62.01 2.24z" /> d="m23.24 2.7-9.15 9.15L23.24 21a1.581 1.581 0 0 1-1.12 2.7c-.42 0-.82-.16-1.12-.46l-9.15-9.15-9.15 9.15c-.3.3-.7.46-1.12.46A1.581
1.581 0 0 1 .46 21l8.47-8.47.68-.68L.46 2.7c-.62-.62-.62-1.62 0-2.24.62-.62 1.62-.62 2.24 0l8.47 8.47.68.68L21
.46a1.57 1.57 0 0 1 2.23 0c.63.62.63 1.62.01 2.24z" />
</svg> </svg>
</button> </button>
</div> </div>
<div class="alert-body" <div
v-show="alertCopy" v-show="alertCopy"
:id="collapseId"> :id="collapseId"
class="alert-body">
<template <template
v-for="paragraph in splitAlertCopyForParagraphTag" v-for="paragraph in splitAlertCopyForParagraphTag"
:key="paragraph"> :key="paragraph">
@ -69,9 +92,7 @@
:text="getRouterLinkDisplayTextFromCopy(copy)" :text="getRouterLinkDisplayTextFromCopy(copy)"
href="#!" href="#!"
:data-bs-target="'#' + getRouterLinkRouteFromCopy(copy)" :data-bs-target="'#' + getRouterLinkRouteFromCopy(copy)"
@click-event=" @clickEvent="$emit('textLinkClicked', getRouterLinkRouteFromCopy(copy))" />
$emit('textLinkClicked', getRouterLinkRouteFromCopy(copy))
" />
</span> </span>
<span <span
v-else v-else
@ -132,10 +153,11 @@ export default {
}, },
startCollapsed: Boolean startCollapsed: Boolean
}, },
emits: ['textLinkClicked'],
data() { data() {
return { return {
collapsed: this.startCollapsed || false, collapsed: this.startCollapsed || false,
collapseElement: null, collapseElement: null
}; };
}, },
computed: { computed: {
@ -159,7 +181,7 @@ export default {
return this.isCollapsible return this.isCollapsible
? `${this.cmsWidgetName}-collapse` ? `${this.cmsWidgetName}-collapse`
: null; : null;
}, }
}, },
mounted() { mounted() {
this.ensureAlertIsInViewPort(); this.ensureAlertIsInViewPort();
@ -198,7 +220,7 @@ export default {
} else { } else {
this.collapseElement.show(); this.collapseElement.show();
} }
}, }
} }
}; };
</script> </script>
@ -210,13 +232,18 @@ export default {
margin-bottom: 2rem; margin-bottom: 2rem;
.alert-header { .alert-header {
display: flex; display: flex;
align-items: center; align-items: flex-start;
justify-content: center; justify-content: center;
flex-direction: row; flex-direction: row;
padding: .75rem 1rem .75rem 1rem; padding: .75rem 1rem .75rem 1rem;
font-weight: 600; font-weight: 600;
color: $black; color: $black;
} }
.alert-icon-container {
display: flex;
align-items: center;
height: 1.625rem;
}
.alert-icon { .alert-icon {
min-width: 1rem; min-width: 1rem;
max-height: 1rem; max-height: 1rem;
@ -259,7 +286,7 @@ export default {
padding: .5rem 1rem .75rem 1rem; padding: .5rem 1rem .75rem 1rem;
border-top: 1px solid; border-top: 1px solid;
color: $darker-gray; color: $darker-gray;
line-height: 26px; line-height: 1.625rem;
font-weight: 400; font-weight: 400;
} }
&.alert-info { &.alert-info {