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

Fix alert icon alignment so that it aligns with first line of multiline alert header

Browse source
This commit is contained in:
Alex Humphries 2026-01-30 17:14:22 -05:00
parent 18661e3fd2
commit a7dd2c983c
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,
]">
<div class="alert-header">
<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 class="alert-icon-container">
<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">
{{ alertHeadline }}
</span>
@ -19,10 +31,18 @@
class="btn-collapse"
type="button"
@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="{ '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>
</button>
<button
@ -36,13 +56,16 @@
viewBox="0 0 23.7 23.7"
xml:space="preserve">
<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>
</button>
</div>
<div class="alert-body"
<div
v-show="alertCopy"
:id="collapseId">
:id="collapseId"
class="alert-body">
<template
v-for="paragraph in splitAlertCopyForParagraphTag"
:key="paragraph">
@ -69,9 +92,7 @@
:text="getRouterLinkDisplayTextFromCopy(copy)"
href="#!"
:data-bs-target="'#' + getRouterLinkRouteFromCopy(copy)"
@click-event="
$emit('textLinkClicked', getRouterLinkRouteFromCopy(copy))
" />
@clickEvent="$emit('textLinkClicked', getRouterLinkRouteFromCopy(copy))" />
</span>
<span
v-else
@ -132,10 +153,11 @@ export default {
},
startCollapsed: Boolean
},
emits: ['textLinkClicked'],
data() {
return {
collapsed: this.startCollapsed || false,
collapseElement: null,
collapseElement: null
};
},
computed: {
@ -159,7 +181,7 @@ export default {
return this.isCollapsible
? `${this.cmsWidgetName}-collapse`
: null;
},
}
},
mounted() {
this.ensureAlertIsInViewPort();
@ -198,7 +220,7 @@ export default {
} else {
this.collapseElement.show();
}
},
}
}
};
</script>
@ -210,13 +232,18 @@ export default {
margin-bottom: 2rem;
.alert-header {
display: flex;
align-items: center;
align-items: flex-start;
justify-content: center;
flex-direction: row;
padding: .75rem 1rem .75rem 1rem;
font-weight: 600;
color: $black;
}
.alert-icon-container {
display: flex;
align-items: center;
height: 1.625rem;
}
.alert-icon {
min-width: 1rem;
max-height: 1rem;
@ -259,7 +286,7 @@ export default {
padding: .5rem 1rem .75rem 1rem;
border-top: 1px solid;
color: $darker-gray;
line-height: 26px;
line-height: 1.625rem;
font-weight: 400;
}
&.alert-info {