Skip to content

fix(#2845): checkbox lts properties #393

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

fix(#2845): checkbox lts properties #393

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
19 changes: 13 additions & 6 deletions src/examples/checkbox/CheckboxExamples.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,11 @@ import IncludeDescriptionsForItemsInACheckboxList
import SelectOneOrMoreFromAListOfOptions from "@examples/select-one-or-more-from-a-list-of-options.tsx";
import { CheckboxRevealSlotExample } from "@examples/checkbox/CheckboxRevealSlotExample.tsx";
import { SandboxHeader } from "@components/sandbox/sandbox-header/sandboxHeader.tsx";
import { useContext } from "react";
import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";

export const CheckboxExamples = () => {
const { version } = useContext(LanguageVersionContext);
return <>
{/*Checkbox example 1*/}
<SandboxHeader
Expand All @@ -20,11 +23,15 @@ export const CheckboxExamples = () => {
</SandboxHeader>
<SelectOneOrMoreFromAListOfOptions />

{/*Checkbox example 3 - NEW from alpha*/}
<SandboxHeader
exampleTitle="Reveal input based on selection"
figmaExample="https://www.figma.com/design/aIRjvBzpIUH0GbkffjbL04/%E2%9D%96-Patterns-library-%7C-DDD?node-id=6307-131069&m=dev">
</SandboxHeader>
<CheckboxRevealSlotExample />
{version === "new" && (
<>
{/*Checkbox example 3 - NEW from alpha*/}
<SandboxHeader
exampleTitle="Reveal input based on selection"
figmaExample="https://www.figma.com/design/aIRjvBzpIUH0GbkffjbL04/%E2%9D%96-Patterns-library-%7C-DDD?node-id=6307-131069&m=dev">
</SandboxHeader>
<CheckboxRevealSlotExample/>
</>
)}
</>;
}
266 changes: 89 additions & 177 deletions src/examples/checkbox/CheckboxRevealSlotExample.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,184 +1,104 @@
import { GoabCheckbox, GoabFormItem, GoabInput, GoabSpacer } from "@abgov/react-components";
import { GoabCheckbox, GoabFormItem, GoabInput } from "@abgov/react-components";
import { Sandbox } from "@components/sandbox";
import { useContext } from "react";
import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
import { OldComponentBanner } from "@components/old-component-banner/OldComponentBanner.tsx";

export const CheckboxRevealSlotExample = () => {
const { version, language } = useContext(LanguageVersionContext);
return (
<>
{/*Skip rendering because we use reveal that isn't supported by sandbox*/}
<Sandbox fullWidth skipRender>
{/*Angular*/}
{version === "old" && (
<CodeSnippet
lang="typescript"
tags="angular"
allowCopy={true}
code={`
<goa-form-item label="How would you like to be contacted?">
<goa-checkbox name="optionOne" text="Email" value="email" [checked]="optionOneChecked" (_change)="updateContactMethod($event)">
<div slot="reveal">
<goa-form-item label="Email address">
<goa-input name="email" [value]="emailAddress" (_change)="updateEmailAddress($event)"></goa-input>
</goa-form-item>
</div>
</goa-checkbox>
<goa-checkbox name="optionTwo" text="Phone" value="phone" [checked]="optionTwoChecked" (_change)="updateContactMethod($event)">
<div slot="reveal">
<goa-form-item label="Phone number">
<goa-input name="phone" [value]="phoneNumber" (_change)="updatePhoneNumber($event)"></goa-input>
</goa-form-item>
</div>
</goa-checkbox>
<goa-checkbox name="optionThree" text="Text message" value="text" [checked]="optionThreeChecked" (_change)="updateContactMethod($event)">
<div slot="reveal">
<goa-form-item label="Mobile phone number">
<goa-input name="phone" [value]="phoneNumber" (_change)="updatePhoneNumber($event)"></goa-input>
</goa-form-item>
</div>
</goa-checkbox>
</goa-form-item>
`}
/>
)}

{version === "old" && (
<CodeSnippet
lang="typescript"
tags="angular"
allowCopy={true}
code={`
export class ExampleComponent {
phoneNumber = "";
emailAddress = "";
optionOneChecked = false;
optionTwoChecked = false;
optionThreeChecked = false;

updateContactMethod(event: any) {
const value = (event as CustomEvent).detail.value;
if (value === "email") {
this.optionOneChecked = true;
}
if (value === "phone") {
this.optionTwoChecked = true;
}
if (value === "text") {
this.optionThreeChecked = true;
}
}
updatePhoneNumber(event: any) {
this.phoneNumber = (event as CustomEvent).detail.value;
}
updateEmailAddress(event: any) {
this.emailAddress = (event as CustomEvent).detail.value;
}
}
`}
/>
)}

{/*Angular*/}
{version === "new" && (
<CodeSnippet
lang="typescript"
tags="angular"
allowCopy={true}
code={`
<goab-form-item [formGroup]="form" label="How would you like to be contacted?">
<goab-checkbox formControlName="emailContactMethod" text="Email" [reveal]="emailReveal">
<ng-template #emailReveal>
<goab-form-item label="Email address">
<goab-input name="email" formControlName="emailAddress"></goab-input>
</goab-form-item>
</ng-template>
</goab-checkbox>
<goab-checkbox formControlName="phoneContactMethod" text="Phone" [reveal]="phoneNumberReveal">
<ng-template #phoneNumberReveal>
<goab-form-item label="Phone number">
<goab-input name="phone" formControlName="phoneNumber"></goab-input>
</goab-form-item>
</ng-template>
</goab-checkbox>
<goab-checkbox formControlName="textContactMethod" text="Text message" [reveal]="textContactMethodReveal">
<ng-template #textContactMethodReveal>
<goab-form-item label="Mobile phone number">
<goab-input name="phone" formControlName="phoneNumber"></goab-input>
</goab-form-item>
</ng-template>
</goab-checkbox>
</goab-form-item>
`}
/>
)}
<CodeSnippet
lang="typescript"
tags="angular"
allowCopy={true}
code={`
<goab-form-item [formGroup]="form" label="How would you like to be contacted?">
<goab-checkbox formControlName="emailContactMethod" text="Email" [reveal]="emailReveal">
<ng-template #emailReveal>
<goab-form-item label="Email address">
<goab-input name="email" formControlName="emailAddress"></goab-input>
</goab-form-item>
</ng-template>
</goab-checkbox>
<goab-checkbox formControlName="phoneContactMethod" text="Phone" [reveal]="phoneNumberReveal">
<ng-template #phoneNumberReveal>
<goab-form-item label="Phone number">
<goab-input name="phone" formControlName="phoneNumber"></goab-input>
</goab-form-item>
</ng-template>
</goab-checkbox>
<goab-checkbox formControlName="textContactMethod" text="Text message" [reveal]="textContactMethodReveal">
<ng-template #textContactMethodReveal>
<goab-form-item label="Mobile phone number">
<goab-input name="phone" formControlName="phoneNumber"></goab-input>
</goab-form-item>
</ng-template>
</goab-checkbox>
</goab-form-item>
`}
/>

{version === "new" && (
<CodeSnippet
lang="typescript"
tags="angular"
allowCopy={true}
code={`
export class ExampleComponent {
form!: FormGroup;
constructor(private fb: FormBuilder) {
this.form = this.fb.group({
emailContactMethod: [false],
phoneContactMethod: [false],
textContactMethod: [false],
emailAddress: [""],
phoneNumber: [""],
});
}
}
`}
/>
)}
<CodeSnippet
lang="typescript"
tags="angular"
allowCopy={true}
code={`
export class ExampleComponent {
form!: FormGroup;
constructor(private fb: FormBuilder) {
this.form = this.fb.group({
emailContactMethod: [false],
phoneContactMethod: [false],
textContactMethod: [false],
emailAddress: [""],
phoneNumber: [""],
});
}
}
`}
/>

{/*React*/}
{version === "new" && (
<CodeSnippet
lang="typescript"
tags="react"
allowCopy={true}
code={`
<GoabFormItem label="How would you like to be contacted?">
<GoabCheckbox
checked={false}
name="optionOne"
text="Email"
reveal={
<GoabFormItem label="Email address">
<GoabInput name="email" onChange={(e) => {/** do nothing */}} value="" />
</GoabFormItem>
}
/>
<GoabCheckbox
checked={false}
name="optionTwo"
text="Phone"
reveal={
<GoabFormItem label="Phone number">
<GoabInput name="phoneNumber" onChange={(e) => {/** do nothing */}} value="" />
</GoabFormItem>
}
/>
<GoabCheckbox
checked={false}
name="optionThree"
text="Text message"
reveal={
<GoabFormItem label="Mobile phone number">
<GoabInput name="mobilePhoneNumber" onChange={(e) => {/** do nothing */}} value="" />
</GoabFormItem>
}
/>
</GoabFormItem>
`}
/>
)}
<CodeSnippet
lang="typescript"
tags="react"
allowCopy={true}
code={`
<GoabFormItem label="How would you like to be contacted?">
<GoabCheckbox
checked={false}
name="optionOne"
text="Email"
reveal={
<GoabFormItem label="Email address">
<GoabInput name="email" onChange={(e) => {/** do nothing */}} value="" />
</GoabFormItem>
}
/>
<GoabCheckbox
checked={false}
name="optionTwo"
text="Phone"
reveal={
<GoabFormItem label="Phone number">
<GoabInput name="phoneNumber" onChange={(e) => {/** do nothing */}} value="" />
</GoabFormItem>
}
/>
<GoabCheckbox
checked={false}
name="optionThree"
text="Text message"
reveal={
<GoabFormItem label="Mobile phone number">
<GoabInput name="mobilePhoneNumber" onChange={(e) => {/** do nothing */}} value="" />
</GoabFormItem>
}
/>
</GoabFormItem>
`}
/>

<GoabFormItem label="How would you like to be contacted?">
<GoabCheckbox
Expand Down Expand Up @@ -213,14 +133,6 @@ export const CheckboxRevealSlotExample = () => {
/>
</GoabFormItem>
</Sandbox>
<GoabSpacer vSpacing={"1"}></GoabSpacer>
{version === "old" && language === "react" && (
<OldComponentBanner
componentName={"Reveal input based on selection"}
language={language}
type="example"
/>
)}
</>
);
};
20 changes: 13 additions & 7 deletions src/examples/radio/RadioExamples.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,11 @@ import {
import { SetAMaxWidthOnALongRadioItem } from "@examples/set-a-max-width-on-a-long-radio-item.tsx";
import { RadioRevealSlotExample } from "@examples/radio/RadioRevealSlotExample.tsx";
import { SandboxHeader } from "@components/sandbox/sandbox-header/sandboxHeader.tsx";
import { useContext } from "react";
import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";

export default function RadioExamples () {

export default function RadioExamples() {
const { version } = useContext(LanguageVersionContext);
return (
<>
<SandboxHeader
Expand All @@ -21,11 +23,15 @@ export default function RadioExamples () {
</SandboxHeader>
<SetAMaxWidthOnALongRadioItem />

<SandboxHeader
exampleTitle="Reveal input based on selection"
figmaExample="https://www.figma.com/design/aIRjvBzpIUH0GbkffjbL04/%E2%9D%96-Patterns-library-%7C-DDD?node-id=6307-131069&m=dev">
</SandboxHeader>
<RadioRevealSlotExample />
{version === "new" && (
<>
<SandboxHeader
exampleTitle="Reveal input based on selection"
figmaExample="https://www.figma.com/design/aIRjvBzpIUH0GbkffjbL04/%E2%9D%96-Patterns-library-%7C-DDD?node-id=6307-131069&m=dev">
</SandboxHeader>
<RadioRevealSlotExample />
</>
)}
</>
);
}
Loading