Skip to content
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

Production Release - January 29 / 2025 #307

Merged
merged 18 commits into from
Jan 29, 2025
Merged

Production Release - January 29 / 2025 #307

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
2785e4f
chore(#2146): tabs - add in contextual example
Dec 4, 2024
29bde92
chore(#2125): tooltip - add in contextual example
Dec 17, 2024
0a5a94d
chore(#2121): badge - add in contextual examples
Dec 17, 2024
2d0349f
chore(#2118): callout - add in contextual examples
Dec 17, 2024
1878bb0
chore(#2118): callout - edit contextual example
Dec 18, 2024
62c95de
chore(#2118): callout - fix error
Dec 18, 2024
5cb0722
chore(#2125): tooltip - adjust contextual example
Dec 18, 2024
244b89d
chore(#2125): tooltip - fix errors
Dec 18, 2024
2be5b73
chore(#2121): badge - edit contextual examples
Dec 18, 2024
625b141
chore(#2146): tabs - modify contextual examples
Dec 19, 2024
85de7dd
chore(#2146): tabs - modify contextual examples
Jan 13, 2025
8cd8230
chore: update links in the User Experience Guidelines page
Jan 15, 2025
fdac991
chore: adjustment of content on UX Guidelines page
Jan 15, 2025
96aac54
Merge pull request #302 from mxsoco/chore/ux-guidelines-update-01152025
ArakTaiRoth Jan 17, 2025
b3ef913
Merge pull request #289 from mxsoco/chore/2118-callout-contextual-exa…
ArakTaiRoth Jan 20, 2025
baa939d
Merge pull request #288 from mxsoco/chore/2121-badge-contextual-example
ArakTaiRoth Jan 20, 2025
1908629
Merge pull request #287 from mxsoco/chore/2125-tooltip-contextual-exa…
ArakTaiRoth Jan 20, 2025
6524134
Merge pull request #275 from mxsoco/chore/2146-tabs-contextual-example
ArakTaiRoth Jan 20, 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
281 changes: 281 additions & 0 deletions src/examples/badge/BadgeExamples.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,281 @@
import { GoABadge, GoABadgeType, GoABlock, GoAContainer, GoAButton, GoATable } from "@abgov/react-components";
import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
import { Sandbox } from "@components/sandbox";

const noop = () => {};
const badgeValues = [
{
key: 1,
type: "important",
content: "Pending"
},
{
key: 2,
type: "emergency",
content: "Failed"
},
{
key: 3,
type: "success",
content: "Complete"
},
{
key: 4,
type: "information",
content: "In progress"
},
{
key: 5,
type: "midtone",
content: "Closed"
},
{
key: 6,
type: "success",
content: "Complete"
}
]

export default function CheckboxExamples () {
return (
<>
{/* Examples*/}
<h2 id="component-examples" className="hidden" aria-hidden="true">Examples</h2>

<h3 id="component-example-show-status-table">Show status in a table</h3>
<Sandbox fullWidth skipRender>
<CodeSnippet
lang="typescript"
tags="angular"
allowCopy={true}
code={`
onClick($event: Event) {
console.log("clicked");
}

badgeValues = [
{
type: "important",
content: "Pending",
},
{
type: "emergency",
content: "Failed",
},
{
type: "success",
content: "Complete",
},
{
type: "information",
content: "In progress",
},
{
type: "midtone",
content: "Closed",
},
{
type: "success",
content: "Complete",
},
];
`}
/>

<CodeSnippet
lang="typescript"
tags="angular"
allowCopy={true}
code={`
<goa-table width="100%">
<thead>
<tr>
<th>Status</th>
<th>Name</th>
<th class="goa-table-number-header">File number</th>
<th></th>
</tr>
</thead>

<tbody>
<tr *ngFor="let badge of badgeValues">
<td>
<goa-badge [type]="badge.type" [content]="badge.content" />
</td>
<td>Lorem ipsum dolor sit amet consectetur.</td>
<td class="goa-table-number-column">1234567890</td>
<td>
<goa-button type="tertiary" (_click)="onClick($event)">Assign</goa-button>
</td>
</tr>
</tbody>
<goa-table>
`}
/>

<CodeSnippet
lang="typescript"
tags="react"
allowCopy={true}
code={`
function onClick() {
console.log("clicked");
}

const badgeValues = [
{
key: 1,
type: "important",
content: "Pending"
},
{
key: 2,
type: "emergency",
content: "Failed"
},
{
key: 3,
type: "success",
content: "Complete"
},
{
key: 4,
type: "information",
content: "In progress"
},
{
key: 5,
type: "midtone",
content: "Closed"
},
{
key: 6,
type: "success",
content: "Complete"
}
]
`}
/>

<CodeSnippet
lang="typescript"
tags="react"
allowCopy={true}
code={`
<GoATable width="100%">
<thead>
<tr>
<th>Status</th>
<th>Name</th>
<th className="goa-table-number-header">File number</th>
<th></th>
</tr>
</thead>
<tbody>
{badgeValues.map((badge) => (
<tr key={badge.key}>
<td>
<GoABadge type={badge.type as GoABadgeType} content={badge.content} />
</td>
<td>
Lorem ipsum dolor sit amet consectetur
</td>
<td className="goa-table-number-column">
1234567890
</td>
<td>
<GoAButton type="tertiary" onClick={onClick}}>
Assign
</GoAButton>
</td>
</tr>
))}
</tbody>
</GoATable>
`}
/>
<GoATable width="100%">
<thead>
<tr>
<th>Status</th>
<th>Name</th>
<th className="goa-table-number-header">File number</th>
<th></th>
</tr>
</thead>
<tbody>
{badgeValues.map((badge) => (
<tr key={badge.key}>
<td>
<GoABadge type={badge.type as GoABadgeType} content={badge.content} />
</td>
<td>
Lorem ipsum dolor sit amet consectetur
</td>
<td className="goa-table-number-column">
1234567890
</td>
<td>
<GoAButton type="tertiary" onClick={noop}>
Assign
</GoAButton>
</td>
</tr>
))}
</tbody>
</GoATable>
</Sandbox>

<h3 id="component-example-multiple-tags-together">Show multiple tags together</h3>
<Sandbox>
<GoABlock>
<GoABadge type="information" content="In progress"/>
<GoABadge type="important" content="Priority"/>
<GoABadge type="emergency" content="Past deadline"/>
</GoABlock>
</Sandbox>

<h3 id="component-example-show-status-card">Show a status on a card</h3>
<Sandbox fullWidth skipRender>

<CodeSnippet
lang="typescript"
tags="angular"
allowCopy={true}
code={`
<goa-container type="non-interactive" accent="thick">
<div slot="title">Heading</div>
<div slot="actions">
<goa-badge type="important" content="Priority"></goa-badge>
</div>
Content
</goa-container>
`}
/>

<CodeSnippet
lang="typescript"
tags="react"
allowCopy={true}
code={`
<GoAContainer
type="non-interactive"
accent="thick"
heading="Heading"
actions={<GoABadge type="important" content="Priority"/>}>
Content
</GoAContainer>
`}
/>

<GoAContainer
type="non-interactive"
accent="thick"
heading="Heading"
actions={<GoABadge type="important" content="Priority"/>}>
Content
</GoAContainer>
</Sandbox>
</>
)
}
5 changes: 4 additions & 1 deletion src/routes/components/Badge.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
import { Category, ComponentHeader } from "@components/component-header/ComponentHeader.tsx";
import { GoABadge, GoATab, GoATabs, GoABadgeType, GoABadgeProps } from "@abgov/react-components";
import { ComponentBinding, Sandbox } from "@components/sandbox";
import { Sandbox, ComponentBinding } from "@components/sandbox";
import { useState } from "react";
import {
ComponentProperties,
ComponentProperty,
} from "@components/component-properties/ComponentProperties.tsx";
import { ComponentContent } from "@components/component-content/ComponentContent";
import BadgeExamples from "@examples/badge/BadgeExamples.tsx";

// == Page props ==

Expand Down Expand Up @@ -134,6 +135,8 @@ export default function BadgePage() {
<GoABadge {...badgeProps} />
</Sandbox>
<ComponentProperties properties={componentProperties} />
<BadgeExamples />

</GoATab>

<GoATab
Expand Down
Loading
Loading