Microsite header
Communicate what stage the service is at, connect to Alberta.ca, and gather feedback on your service.
Props
type
GoabServiceLevel
The service type which determines the badge style. "live" shows official government site text, "alpha" and "beta" show development stage badges.
feedbackUrl
string
URL to a feedback page displayed when provided.
feedbackUrlTarget
GoabLinkTarget
Sets the target attribute for the feedback URL link.
Defaults to
blank.
headerUrlTarget
GoabLinkTarget
Sets the target attribute for the header link.
Defaults to
blank.
maxContentWidth
string
Maximum width of the content area.
Defaults to
100%.
testId
string
Sets a data-testid attribute for automated testing.
version
string | React.ReactNode
App or service version displayed on the right side of the header.
Events
onFeedbackClick
() => void
Callback fired when the feedback link is clicked, enables custom feedback handling.
Link the user to give feedback to the service
import { GoabMicrositeHeader } from "@abgov/react-components";
export function LinkTheUserToGiveFeedbackToTheService() {
const onClick = () => {
console.log("Feedback clicked");
alert("Thank you for your feedback!");
};
return <GoabMicrositeHeader type="alpha" onFeedbackClick={onClick} />;
}onFeedbackClick(): void {
console.log("Feedback clicked");
alert("Thank you for your feedback!");
}<goab-microsite-header
type="alpha"
(onFeedbackClick)="onFeedbackClick()"
></goab-microsite-header>document.getElementById("microsite-header").addEventListener("_feedbackClick", () => {
console.log("Feedback clicked");
alert("Thank you for your feedback!");
});<goa-microsite-header type="alpha" id="microsite-header"></goa-microsite-header>Show version number
<GoabMicrositeHeader
type="alpha"
version={
<span>
Slotted <b>version text</b>.
</span>
<span>v1.23</span>
}
/><goab-microsite-header type="alpha" [version]="versionTemplate">
<ng-template #versionTemplate>
<span>Slotted <b>version text</b>.</span>
<span>v1.23</span>
</ng-template>
</goab-microsite-header><goa-microsite-header type="alpha">
<div slot="version">
<span>Slotted <b>version text</b>.</span>
<span>v1.23</span>
</div>
</goa-microsite-header>