diff --git a/package-lock.json b/package-lock.json
index ec9a94357..732891d6e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -34,7 +34,7 @@
"lodash": "^4.17.21",
"prettier": "2.4.1",
"typescript": "^5.4.2",
- "vite": "^5.4.16"
+ "vite": "^5.4.19"
}
},
"../ui-components/dist/libs/angular-components": {
@@ -3702,9 +3702,9 @@
}
},
"node_modules/vite": {
- "version": "5.4.16",
- "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.16.tgz",
- "integrity": "sha512-Y5gnfp4NemVfgOTDQAunSD4346fal44L9mszGGY/e+qxsRT5y1sMlS/8tiQ8AFAp+MFgYNSINdfEchJiPm41vQ==",
+ "version": "5.4.19",
+ "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.19.tgz",
+ "integrity": "sha512-qO3aKv3HoQC8QKiNSTuUM1l9o/XX3+c+VTgLHbJWHZGeTPVAg2XwazI9UWzoxjIJCGCV2zU60uqMzjeLZuULqA==",
"license": "MIT",
"dependencies": {
"esbuild": "^0.21.3",
diff --git a/package.json b/package.json
index 9387cca3e..8fbb85054 100644
--- a/package.json
+++ b/package.json
@@ -36,7 +36,7 @@
"eslint-plugin-react-refresh": "^0.3.5",
"prettier": "2.4.1",
"typescript": "^5.4.2",
- "vite": "^5.4.16",
+ "vite": "^5.4.19",
"lodash": "^4.17.21",
"@types/lodash": "^4.17.16"
}
diff --git a/src/examples/pagination/PaginationExamples.tsx b/src/examples/pagination/PaginationExamples.tsx
index af0e5e857..257fb3fbc 100644
--- a/src/examples/pagination/PaginationExamples.tsx
+++ b/src/examples/pagination/PaginationExamples.tsx
@@ -61,7 +61,7 @@ export const PaginationExamples = () => {
<>
diff --git a/src/examples/radio/RadioExamples.tsx b/src/examples/radio/RadioExamples.tsx
index 598e2c511..2ebb941eb 100644
--- a/src/examples/radio/RadioExamples.tsx
+++ b/src/examples/radio/RadioExamples.tsx
@@ -1,5 +1,6 @@
+
import { RadioSlottedDescriptionExample } from "@examples/radio/RadioSlottedDescriptionExample.tsx";
-import { RadioMaxWidthExample } from "@examples/radio/RadioMaxWidthExample.tsx";
+import { RadioYesNoExample } from "@examples/radio/RadioYesNoExample.tsx";
import { SandboxHeader } from "@components/sandbox/sandbox-header/sandboxHeader.tsx";
export default function RadioExamples () {
@@ -7,16 +8,16 @@ export default function RadioExamples () {
return (
<>
+ exampleTitle="Radio items with description"
+ figmaExample="https://www.figma.com/design/aIRjvBzpIUH0GbkffjbL04/%E2%9D%96-Patterns-library-%7C-DDD?node-id=6844-1982128&t=esZgJXviyArNDmmo-1">
+ exampleTitle="Yes or no question horizontally"
+ figmaExample="https://www.figma.com/design/aIRjvBzpIUH0GbkffjbL04/%E2%9D%96-Patterns-library-%7C-DDD?node-id=6844-165351&t=esZgJXviyArNDmmo-1">
-
+
);
}
diff --git a/src/examples/radio/RadioMaxWidthExample.tsx b/src/examples/radio/RadioMaxWidthExample.tsx
deleted file mode 100644
index fe9041fea..000000000
--- a/src/examples/radio/RadioMaxWidthExample.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import { Sandbox } from "@components/sandbox";
-import { GoabFormItem, GoabRadioGroup, GoabRadioItem } from "@abgov/react-components";
-import { useContext, useState } from "react";
-import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
-import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
-
-export const RadioMaxWidthExample = () => {
- const {version} = useContext(LanguageVersionContext);
- const [selectOne, setSelectOne] = useState("1");
- return (
-
- {/*We skipRenderOnly React because it is quite complex to remove value (2 els have value: radio-item and radio-group which radio-group is the one should remove value*/}
- {version === "old" && (
-
- setValue(value)}>
-
-
-
-
-
- `}
- />
- )}
-
- {version === "new" && (
-
- setValue(e.value)}>
-
-
-
-
-
- `}
- />
- )}
-
-
-
- );
-};
diff --git a/src/examples/radio/RadioSlottedDescriptionExample.tsx b/src/examples/radio/RadioSlottedDescriptionExample.tsx
index eb03ab42e..feb23afcc 100644
--- a/src/examples/radio/RadioSlottedDescriptionExample.tsx
+++ b/src/examples/radio/RadioSlottedDescriptionExample.tsx
@@ -16,13 +16,14 @@ export const RadioSlottedDescriptionExample = () => {
tags="angular"
allowCopy={true}
code={`
-
-
-
- Help text with a link.
+
+
+
+ Use the account associated with the business
+
+
+ If you don't have a Alberta.ca login, you can create one
-
-
`}
@@ -53,15 +54,18 @@ export const RadioSlottedDescriptionExample = () => {
tags="angular"
allowCopy={true}
code={`
-
+
-
+
- Help text with a link.
+ Use the account associated with the business
+
+
+
+
+ If you don't have a Alberta.ca login, you can create one
-
-
`}
@@ -75,15 +79,18 @@ export const RadioSlottedDescriptionExample = () => {
tags="react"
allowCopy={true}
code={`
-
-
+
+
+
Help text with a link.}
- />
-
-
+ value="2"
+ label="Sign in as an individual"
+ description="If you don't have a Alberta.ca login, you can create one"
+ />
`}
@@ -96,36 +103,38 @@ export const RadioSlottedDescriptionExample = () => {
tags="react"
allowCopy={true}
code={`
-
-
+
+
Help text with a link.}
- />
-
-
+ value="1"
+ label="Sign in as a business"
+ description="Use the account associated with the business"
+ />
+
`}
/>
)}
-
-
+
+
- Help text with a link.
-
- }
+ label="Sign in as a business"
+ description="Use the account associated with the business"
+ />
+
-
-
)
-}
+}
\ No newline at end of file
diff --git a/src/examples/radio/RadioYesNoExample.tsx b/src/examples/radio/RadioYesNoExample.tsx
new file mode 100644
index 000000000..54514d46e
--- /dev/null
+++ b/src/examples/radio/RadioYesNoExample.tsx
@@ -0,0 +1,55 @@
+import { Sandbox } from "@components/sandbox";
+import { GoabFormItem, GoabRadioGroup, GoabRadioItem } from "@abgov/react-components";
+import { useContext} from "react";
+import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
+import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
+
+export const RadioYesNoExample = () => {
+ const {version} = useContext(LanguageVersionContext);
+ const noop = () => {}
+ return (
+
+ {/*We skipRenderOnly React because it is quite complex to remove value (2 els have value: radio-item and radio-group which radio-group is the one should remove value*/}
+ {version === "old" && (
+
+
+
+
+
+
+ `}
+ />
+ )}
+
+ {version === "new" && (
+
+
+
+
+
+
+ `}
+ />
+ )}
+
+
+
+ );
+};
\ No newline at end of file