Skip to content

task(#2898): move components examples #410

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
twjeffery merged 1 commit into from
Aug 5, 2025
Merged

task(#2898): move components examples #410

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
15 changes: 2 additions & 13 deletions src/examples/badge/BadgeExamples.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,11 @@
import {
GoabBadge,
GoabBlock,
} from "@abgov/react-components";
import { Sandbox } from "@components/sandbox";
import { ShowStatusInATable } from "@examples/show-status-in-a-table.tsx";
import { ShowMultipleTagsTogether } from "@examples/show-multiple-tags-together.tsx";
import { ShowStatusOnACard } from "@examples/show-status-on-a-card.tsx";
import { SandboxHeader } from "@components/sandbox/sandbox-header/sandboxHeader.tsx";

export default function BadgeExamples() {
return (
<>

<SandboxHeader
exampleTitle="Show status in a table"
figmaExample="https://www.figma.com/design/aIRjvBzpIUH0GbkffjbL04/%E2%9D%96-Patterns-library-%7C-DDD?node-id=6304-22364&t=X0IQW5flDDaj8Vyg-4">
Expand All @@ -21,13 +16,7 @@ export default function BadgeExamples() {
exampleTitle="Show multiple tags together"
figmaExample="https://www.figma.com/design/3pb2IK8s2QUqWieH79KdN7/%E2%9D%96-Component-library-%7C-DDD?node-id=60735-375622&t=tGwTYaG8Orm4iOm7-4">
</SandboxHeader>
<Sandbox>
<GoabBlock gap="xs">
<GoabBadge type="information" content="In progress" />
<GoabBadge type="important" content="Priority" />
<GoabBadge type="emergency" content="Past deadline" />
</GoabBlock>
</Sandbox>
<ShowMultipleTagsTogether />

<SandboxHeader
exampleTitle="Show a status on a card"
Expand Down
34 changes: 34 additions & 0 deletions src/examples/display-numbers-in-a-table-so-they-can-be-scanned-easily.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
import { GoabTable } from "@abgov/react-components";
import { Sandbox } from "@components/sandbox";

export const DisplayNumbersInATableSoTheyCanBeScannedEasily = () => {
return (
<>
<Sandbox fullWidth>
<GoabTable width="100%">
<thead>
<tr>
<th>Col 1</th>
<th>Col 2</th>
<th className="goa-table-number-header">Number Column</th>
</tr>
</thead>
<tbody>
<tr>
<td>Item 1</td>
<td>Item 2</td>
<td className="goa-table-number-column">54</td>
</tr>
<tr>
<td>Item 1</td>
<td>Item 2</td>
<td className="goa-table-number-column">4567</td>
</tr>
</tbody>
</GoabTable>
</Sandbox>
</>
);
};

export default DisplayNumbersInATableSoTheyCanBeScannedEasily;
93 changes: 93 additions & 0 deletions src/examples/hero-banner-with-actions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,93 @@
import { GoabButton, GoabHeroBanner, GoabHeroBannerActions } from "@abgov/react-components";
import { useContext } from "react";
import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
import { Sandbox } from "@components/sandbox";

export const HeroBannerWithActions = () => {
const { version } = useContext(LanguageVersionContext);

function noop() {}

return (
<>
<Sandbox skipRender fullWidth>
{version === "old" && (
<CodeSnippet
lang="html"
tags="angular"
allowCopy={true}
code={`
Comment thread
ArakTaiRoth marked this conversation as resolved.
<goa-hero-banner heading="Supporting public citizens">
Digital services help to support Albertan citizens receive government services.
<div slot="actions">
<goa-button type="start" (_click)="onClick($event)">Call to action</goa-button>
</div>
</goa-hero-banner>
`}
/>
)}

{version === "new" && (
<CodeSnippet
lang="html"
tags="angular"
allowCopy={true}
code={`
<goab-hero-banner heading="Supporting Businesses" [actions]="heroBannerActionTemplate">
Resources are available to help Alberta entrepreneurs and small businesses start, grow and succeed.
<ng-template #heroBannerActionTemplate>
<goab-button type="start">Call to action</goab-button>
</ng-template>
</goab-hero-banner>
`}
/>
)}

{/*React code*/}
{version === "old" && (
<CodeSnippet
lang="html"
tags="react"
allowCopy={true}
code={`
<GoAHeroBanner heading="Supporting Businesses">
Resources are available to help Alberta entrepreneurs and small businesses start, grow and succeed.
<GoAHeroBannerActions>
<GoAButton type="start" onClick={noop}>Call to action</GoAButton>
</GoAHeroBannerActions>
</GoAHeroBanner>
`}
/>
)}
{version === "new" && (
<CodeSnippet
lang="html"
tags="react"
allowCopy={true}
code={`
<GoabHeroBanner heading="Supporting Businesses">
Resources are available to help Alberta entrepreneurs and small businesses start, grow and succeed.
<GoabHeroBannerActions>
<GoabButton type="start">Call to action</GoabButton>
</GoabHeroBannerActions>
</GoabHeroBanner>
`}
/>
)}

<GoabHeroBanner heading="Supporting Businesses">
Resources are available to help Alberta entrepreneurs and small businesses start, grow and
succeed.
<GoabHeroBannerActions>
<GoabButton type="start" onClick={noop}>
Call to action
</GoabButton>
</GoabHeroBannerActions>
</GoabHeroBanner>
</Sandbox>
</>
);
};

export default HeroBannerWithActions;
14 changes: 14 additions & 0 deletions src/examples/hero-banner/HeroBannerExamples.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import { HeroBannerWithActions } from "@examples/hero-banner-with-actions.tsx";
import { SandboxHeader } from "@components/sandbox/sandbox-header/sandboxHeader.tsx";

export const HeroBannerExamples = () => {
return (
<>
<SandboxHeader
exampleTitle="Hero Banner with actions"
figmaExample="https://www.figma.com/design/aIRjvBzpIUH0GbkffjbL04/%E2%9D%96-Patterns-library-%7C-DDD?node-id=6309-93120&t=X0IQW5flDDaj8Vyg-4">
</SandboxHeader>
<HeroBannerWithActions />
</>
);
};
14 changes: 14 additions & 0 deletions src/examples/icon-button/IconButtonExamples.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import { ShowMultipleActionsInACompactTable } from "@examples/show-multiple-actions-in-a-compact-table.tsx";
import { SandboxHeader } from "@components/sandbox/sandbox-header/sandboxHeader.tsx";

export const IconButtonExamples = () => {
return (
<>
<SandboxHeader
exampleTitle="Show multiple actions in a compact table"
figmaExample="https://www.figma.com/design/aIRjvBzpIUH0GbkffjbL04/%E2%9D%96-Patterns-library-%7C-DDD?node-id=6309-127620&t=X0IQW5flDDaj8Vyg-4">
</SandboxHeader>
<ShowMultipleActionsInACompactTable />
</>
);
};
115 changes: 115 additions & 0 deletions src/examples/show-multiple-actions-in-a-compact-table.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,115 @@
import { GoabBadge, GoabBlock, GoabIconButton, GoabTable } from "@abgov/react-components";
import { Sandbox } from "@components/sandbox";

export const ShowMultipleActionsInACompactTable = () => {
return (
<>
<Sandbox fullWidth>
<GoabTable width="100%">
<thead>
<tr>
<th>Status</th>
<th>Name</th>
<th style={{ textAlign: "right" }}>Id Number</th>
<th>Edit | Flag | Send</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<GoabBadge type="information" content="In progress"></GoabBadge>
</td>
<td>Darlene Robertson</td>
<td className="goa-table-number-column">45904</td>
<td>
<GoabBlock>
<GoabIconButton size="small" icon="pencil" ariaLabel="Edit"></GoabIconButton>
<GoabIconButton size="small" icon="flag" ariaLabel="Flag"></GoabIconButton>
<GoabIconButton size="small" icon="mail" ariaLabel="Send"></GoabIconButton>
</GoabBlock>
</td>
<td></td>
</tr>
<tr>
<td>
<GoabBadge type="dark" content="Inactive"></GoabBadge>
</td>
<td>Floyd Miles</td>
<td className="goa-table-number-column">47838</td>
<td>
<GoabBlock>
<GoabIconButton size="small" icon="pencil" ariaLabel="Edit"></GoabIconButton>
<GoabIconButton size="small" icon="flag" ariaLabel="Flag"></GoabIconButton>
<GoabIconButton size="small" icon="mail" ariaLabel="Send"></GoabIconButton>
</GoabBlock>
</td>
<td></td>
</tr>
<tr>
<td>
<GoabBadge type="success" content="Active"></GoabBadge>
</td>
<td>Kathryn Murphy</td>
<td className="goa-table-number-column">34343</td>
<td>
<GoabBlock>
<GoabIconButton size="small" icon="pencil" ariaLabel="Edit"></GoabIconButton>
<GoabIconButton size="small" icon="flag" ariaLabel="Flag"></GoabIconButton>
<GoabIconButton size="small" icon="mail" ariaLabel="Send"></GoabIconButton>
</GoabBlock>
</td>
<td></td>
</tr>
<tr>
<td>
<GoabBadge type="important" content="Recent"></GoabBadge>
</td>
<td>Annette Black</td>
<td className="goa-table-number-column">89897</td>
<td>
<GoabBlock>
<GoabIconButton size="small" icon="pencil" ariaLabel="Edit"></GoabIconButton>
<GoabIconButton size="small" icon="flag" ariaLabel="Flag"></GoabIconButton>
<GoabIconButton size="small" icon="mail" ariaLabel="Send"></GoabIconButton>
</GoabBlock>
</td>
<td></td>
</tr>
<tr>
<td>
<GoabBadge type="success" content="Active"></GoabBadge>
</td>
<td>Esther Howard</td>
<td className="goa-table-number-column">12323</td>
<td>
<GoabBlock>
<GoabIconButton size="small" icon="pencil" ariaLabel="Edit"></GoabIconButton>
<GoabIconButton size="small" icon="flag" ariaLabel="Flag"></GoabIconButton>
<GoabIconButton size="small" icon="mail" ariaLabel="Send"></GoabIconButton>
</GoabBlock>
</td>
<td></td>
</tr>
<tr>
<td>
<GoabBadge type="success" content="Active"></GoabBadge>
</td>
<td>Jane Cooper</td>
<td className="goa-table-number-column">56565</td>
<td>
<GoabBlock>
<GoabIconButton size="small" icon="pencil" ariaLabel="Edit"></GoabIconButton>
<GoabIconButton size="small" icon="flag" ariaLabel="Flag"></GoabIconButton>
<GoabIconButton size="small" icon="mail" ariaLabel="Send"></GoabIconButton>
</GoabBlock>
</td>
<td></td>
</tr>
</tbody>
</GoabTable>
</Sandbox>
</>
);
};

export default ShowMultipleActionsInACompactTable;
18 changes: 18 additions & 0 deletions src/examples/show-multiple-tags-together.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import { GoabBadge, GoabBlock } from "@abgov/react-components";
import { Sandbox } from "@components/sandbox";

export const ShowMultipleTagsTogether = () => {
return (
<>
<Sandbox>
<GoabBlock gap="xs">
<GoabBadge type="information" content="In progress" />
<GoabBadge type="important" content="Priority" />
<GoabBadge type="emergency" content="Past deadline" />
</GoabBlock>
</Sandbox>
</>
);
};

export default ShowMultipleTagsTogether;
Loading