Skip to content

feat(#2140): microsite header - added angular and react sample code #412

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
bdfranck merged 5 commits into from
Sep 11, 2025
Merged

feat(#2140): microsite header - added angular and react sample code #412

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
afb9ee9
feat(#2140): microsite header - added angular and react sample code
mxsoco Aug 1, 2025
4fad864
Merge branch 'alpha' into mxsoco/feat-2140
mxsoco Aug 5, 2025
62b6780
feat(#2140): microsite header - removed the "slot" text from Version …
mxsoco Aug 8, 2025
3cd3ac2
Merge branch 'alpha' into mxsoco/feat-2140
mxsoco Aug 13, 2025
6d66863
feat(#2140): microsite header - removed "span" tags to center version…
mxsoco Aug 14, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
124 changes: 123 additions & 1 deletion src/examples/link-the-user-to-give-feedback-to-the-service.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,137 @@
import { GoabMicrositeHeader } from "@abgov/react-components";
import { Sandbox } from "@components/sandbox";
import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
import { useContext } from "react";
import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";

export default function GiveFeedbackLinkExample() {
const {version} = useContext(LanguageVersionContext);
const onClick = () => {
console.log("Feedback clicked");
alert("Thank you for your feedback!");
};

return (
<>

<Sandbox fullWidth>
<Sandbox fullWidth skipRender>

{/*Angular code*/}
{version === "old" && <CodeSnippet
lang="typescript"
tags="angular"
allowCopy={true}
code={`
@Component({
selector: "abgov-microsite-header",
templateUrl: "./microsite-header.component.html",
})
export class MicrositeHeaderComponent {
constructor() {}

handleFeedbackClick(event: Event) {
console.log("Feedback clicked");
alert("Thank you for your feedback!");
}
}
`}
/>}

{/*Angular code*/}
{version === "old" && <CodeSnippet
lang="typescript"
tags="angular"
allowCopy={true}
code={`
<goa-microsite-header
type="alpha"
[hasfeedbackhandler]="true"
(_feedbackClick)="handleFeedbackClick($event)"
></goa-microsite-header>
`}
/>}

{/*Angular code*/}
{version === "new" && <CodeSnippet
lang="typescript"
tags="angular"
allowCopy={true}
code={`
@Component({
selector: "abgov-microsite-header",
templateUrl: "./microsite-header.component.html",
})
export class MicrositeHeaderComponent {
constructor() {}

handleFeedbackClick(event: Event) {
console.log("Feedback clicked");
alert("Thank you for your feedback!");
}
}
`}
/>}

{/*Angular code*/}
{version === "new" && <CodeSnippet
lang="typescript"
tags="angular"
allowCopy={true}
code={`
<goab-microsite-header
type="alpha"
[hasfeedbackhandler]="true"
(_feedbackClick)="handleFeedbackClick($event)"
></goab-microsite-header>
`}
/>}

{/*React code*/}
{version === "old" && <CodeSnippet
lang="typescript"
tags="react"
allowCopy={true}
code={`
const onClick = () => {
console.log("Feedback clicked");
alert("Thank you for your feedback!");
};
`}
/>}

{/*React code*/}
{version === "old" && <CodeSnippet
lang="typescript"
tags="react"
allowCopy={true}
code={`
<GoAMicrositeHeader type="alpha" onFeedbackClick={onClick} />
`}
/>}

{/*React code*/}
{version === "new" && <CodeSnippet
lang="typescript"
tags="react"
allowCopy={true}
code={`
const onClick = () => {
console.log("Feedback clicked");
alert("Thank you for your feedback!");
};
`}
/>}

{/*React code*/}
{version === "new" && <CodeSnippet
lang="typescript"
tags="react"
allowCopy={true}
code={`
<GoabMicrositeHeader type="alpha" onFeedbackClick={onClick} />
`}
/>}

<GoabMicrositeHeader type="alpha" onFeedbackClick={onClick} />
{/* ...React + Angular code snippets here (same as original)... */}
</Sandbox>
Expand Down
62 changes: 56 additions & 6 deletions src/examples/show-version-number.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,70 @@
import { GoabMicrositeHeader } from "@abgov/react-components";
import { Sandbox } from "@components/sandbox";
import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
import { useContext } from "react";
import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";

export default function ShowVersionNumberExample() {
const {version} = useContext(LanguageVersionContext);

return (
<>
<Sandbox fullWidth skipRender>

{/*Angular code*/}
{version === "old" && <CodeSnippet
lang="typescript"
tags="angular"
allowCopy={true}
code={`
<goa-microsite-header type="alpha">
<div slot="version">v1.23</div>
</goa-microsite-header>
`}
/>}

{/*Angular code*/}
{version === "new" && <CodeSnippet
lang="typescript"
tags="angular"
allowCopy={true}
code={`
<goab-microsite-header type="alpha">
<div slot="version">v1.23</div>
</goab-microsite-header>
`}
/>}

{/*React code*/}
{version === "old" && <CodeSnippet
lang="typescript"
tags="react"
allowCopy={true}
code={`
<GoAMicrositeHeader
type="alpha"
version="v1.23"
></GoAMicrositeHeader>
`}
/>}

{/*React code*/}
{version === "new" && <CodeSnippet
lang="typescript"
tags="react"
allowCopy={true}
code={`
<GoabMicrositeHeader
type="alpha"
version="v1.23"
></GoabMicrositeHeader>
`}
/>}

{/* ...React + Angular code snippets here (same as original)... */}
<GoabMicrositeHeader
type="alpha"
version={
<>
<span>Slotted <b>version text</b>.</span>
<span>v1.23</span>
</>
}
version="v1.23"
/>
</Sandbox>
</>
Expand Down