diff --git a/src/examples/checkbox/CheckboxExamples.tsx b/src/examples/checkbox/CheckboxExamples.tsx
index 925016662..6955de48e 100644
--- a/src/examples/checkbox/CheckboxExamples.tsx
+++ b/src/examples/checkbox/CheckboxExamples.tsx
@@ -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*/}
{
- {/*Checkbox example 3 - NEW from alpha*/}
-
-
-
+ {version === "new" && (
+ <>
+ {/*Checkbox example 3 - NEW from alpha*/}
+
+
+
+ >
+ )}
>;
}
\ No newline at end of file
diff --git a/src/examples/checkbox/CheckboxRevealSlotExample.tsx b/src/examples/checkbox/CheckboxRevealSlotExample.tsx
index f8b4c1e69..6b6458126 100644
--- a/src/examples/checkbox/CheckboxRevealSlotExample.tsx
+++ b/src/examples/checkbox/CheckboxRevealSlotExample.tsx
@@ -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*/}
{/*Angular*/}
- {version === "old" && (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- `}
- />
- )}
-
- {version === "old" && (
-
- )}
-
- {/*Angular*/}
- {version === "new" && (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- `}
- />
- )}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ `}
+ />
- {version === "new" && (
-
- )}
+
{/*React*/}
- {version === "new" && (
-
-
- {/** do nothing */}} value="" />
-
- }
- />
-
- {/** do nothing */}} value="" />
-
- }
- />
-
- {/** do nothing */}} value="" />
-
- }
- />
-
- `}
- />
- )}
+
+
+ {/** do nothing */}} value="" />
+
+ }
+ />
+
+ {/** do nothing */}} value="" />
+
+ }
+ />
+
+ {/** do nothing */}} value="" />
+
+ }
+ />
+
+ `}
+ />
{
/>
-
- {version === "old" && language === "react" && (
-
- )}
>
);
};
diff --git a/src/examples/radio/RadioExamples.tsx b/src/examples/radio/RadioExamples.tsx
index c766f7b22..d58ad8f93 100644
--- a/src/examples/radio/RadioExamples.tsx
+++ b/src/examples/radio/RadioExamples.tsx
@@ -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 (
<>
-
-
-
+ {version === "new" && (
+ <>
+
+
+
+ >
+ )}
>
);
}
\ No newline at end of file
diff --git a/src/examples/radio/RadioRevealSlotExample.tsx b/src/examples/radio/RadioRevealSlotExample.tsx
index 4e0d4847c..2ee2502c6 100644
--- a/src/examples/radio/RadioRevealSlotExample.tsx
+++ b/src/examples/radio/RadioRevealSlotExample.tsx
@@ -1,163 +1,97 @@
import { Sandbox } from "@components/sandbox";
-import { useContext } from "react";
-import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
-import { GoabFormItem, GoabInput, GoabRadioGroup, GoabRadioItem, GoabSpacer } from "@abgov/react-components";
-import { OldComponentBanner } from "@components/old-component-banner/OldComponentBanner.tsx";
+import { GoabFormItem, GoabInput, GoabRadioGroup, GoabRadioItem } from "@abgov/react-components";
import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
export const RadioRevealSlotExample = () => {
- const { version, language } = useContext(LanguageVersionContext);
const noop = () => {}
+
return (
<>
{/*Skip rendering because we use reveal that isn't supported by sandbox*/}
{/*Angular*/}
- {version === "old" && (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- `}
- />
- )}
-
- {version === "old" && (
-
- )}
-
- {/*Angular*/}
- {version === "new" && (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
- `}
- />
- )}
+
+
+
+
+
+
+
+
+
+ `}
+ />
- {version === "new" && (
-
- )}
+
{/*React*/}
- {version === "new" && (
-
- setContactMethod(e.value)}>
-
- {/** do nothing */}} value="" />
-
- }
- />
-
- {/** do nothing */}} value="" />
-
- }
- />
-
- {/** do nothing */}} value="" />
-
- }
- />
-
-
- `}
- />
- )}
+
+ setContactMethod(e.value)}>
+
+ {/** do nothing */}} value="" />
+
+ }
+ />
+
+ {/** do nothing */}} value="" />
+
+ }
+ />
+
+ {/** do nothing */}} value="" />
+
+ }
+ />
+
+
+ `}
+ />
@@ -182,14 +116,6 @@ export const RadioRevealSlotExample = () => {
-
- {version === "old" && language === "react" && (
-
- )}
>
);
};
diff --git a/src/routes/components/Checkbox.tsx b/src/routes/components/Checkbox.tsx
index cd3f22e8b..6aed93c8a 100644
--- a/src/routes/components/Checkbox.tsx
+++ b/src/routes/components/Checkbox.tsx
@@ -122,19 +122,6 @@ export default function CheckboxPage() {
"Defines how the text will be translated for the screen reader. If not specified it will fall back to the name.",
lang: "angular",
},
- {
- name: "reveal",
- type: "slot",
- lang: "angular",
- description: "Additional content shown when the checkbox is checked.",
- },
- {
- name: "revealariallabel",
- type: "string",
- lang: "angular",
- description:
- "Defines how the text will be translated for the screen reader when the checkbox is checked and reveal the reveal slot content.",
- },
{
name: "onChange",
type: "(name: string, checked: boolean, value: string) => void",
@@ -365,7 +352,8 @@ export default function CheckboxPage() {
heading={
<>
Examples
-
+ {version === "new" && }
+ {version === "old" && }
>
}
>
diff --git a/src/routes/components/Radio.tsx b/src/routes/components/Radio.tsx
index 9e920aed1..b3879b9ac 100644
--- a/src/routes/components/Radio.tsx
+++ b/src/routes/components/Radio.tsx
@@ -480,7 +480,8 @@ export default function RadioPage() {
heading={
<>
Examples
-
+ {version === "new" && }
+ {version === "old" && }
>
}
>