Prod release

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"
   }

src/examples/pagination/PaginationExamples.tsx

@@ -61,7 +61,7 @@ export const PaginationExamples = () => {
     <>
 
       <SandboxHeader
-        exampleTitle="Show # results per page"
+        exampleTitle="Set items per page and navigate multiple pages in a table"
         figmaExample="https://www.figma.com/design/aIRjvBzpIUH0GbkffjbL04/%E2%9D%96-Patterns-library-%7C-DDD?node-id=6311-118312&t=X0IQW5flDDaj8Vyg-4">
       </SandboxHeader>
       <Sandbox fullWidth skipRender>

src/examples/radio/RadioExamples.tsx

@@ -1,22 +1,23 @@
+
 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 () {
 
   return (
     <>
       <SandboxHeader
-        exampleTitle="Include a link in the helper text of an option"
-        figmaExample="https://www.figma.com/design/aIRjvBzpIUH0GbkffjbL04/%E2%9D%96-Patterns-library-%7C-DDD?node-id=6311-133375&t=X0IQW5flDDaj8Vyg-4">
+        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">
       </SandboxHeader>
       <RadioSlottedDescriptionExample/>
 
       <SandboxHeader
-        exampleTitle="Max width on long radio items"
-        figmaExample="https://www.figma.com/design/aIRjvBzpIUH0GbkffjbL04/%E2%9D%96-Patterns-library-%7C-DDD?node-id=6311-133539&t=X0IQW5flDDaj8Vyg-4">
+        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">
       </SandboxHeader>
-      <RadioMaxWidthExample/>
+      <RadioYesNoExample/>
     </>
   );
 }

src/examples/radio/RadioSlottedDescriptionExample.tsx

@@ -16,13 +16,14 @@ export const RadioSlottedDescriptionExample = () => {
           tags="angular"
           allowCopy={true}
           code={`
-              <goa-form-item label="Select one option">
-              <goa-radio-group name="selectOne" value="1" (_change)="onChange($event)">
-                <goa-radio-item value="1" label="Option one">
-                  <span slot="description">Help text with a <a href="#">link</a>.</span>
+            <goa-form-item label="How do you want to sign in?">
+              <goa-radio-group name="selectOne" (_change)="onChange($event)">
+                <goa-radio-item value="1" label="Sign in as a business">
+                  <span slot="description">Use the account associated with the business</span>
+                </goa-radio-item>
+                <goa-radio-item value="2" label="Sign in as an individual">
+                  <span slot="description">If you don't have a Alberta.ca login, you can create one</span>
                 </goa-radio-item>
-                <goa-radio-item value="2" label="Option two" />
-                <goa-radio-item value="3" label="Option three" />
               </goa-radio-group>
             </goa-form-item>     
             `}
@@ -53,15 +54,18 @@ export const RadioSlottedDescriptionExample = () => {
           tags="angular"
           allowCopy={true}
           code={`
-              <goab-form-item label="Select one option" [formGroup]="form">
+              <goab-form-item label="How do you want to sign in?" [formGroup]="form">
                 <goab-radio-group name="selectOne"  formControlName="selectOne">
-                  <goab-radio-item value="1" label="Option one" [description]="optionOneDescription">
+                  <goab-radio-item value="1" label="Sign in as a business" [description]="optionOneDescription">
                     <ng-template #optionOneDescription>
-                      Help text with a <a href="#">link</a>.
+                      Use the account associated with the business
+                    </ng-template>
+                  </goab-radio-item>
+                  <goab-radio-item value="2" label="Sign in as an individual" [description]="optionTwoDescription">
+                    <ng-template #optionTwoDescription>
+                      If you don't have a Alberta.ca login, you can create one
                     </ng-template>
                   </goab-radio-item>
-                  <goab-radio-item value="2" label="Option two"></goab-radio-item>
-                  <goab-radio-item value="3" label="Option three"></goab-radio-item>
                 </goab-radio-group>
               </goab-form-item>
             `}
@@ -75,15 +79,18 @@ export const RadioSlottedDescriptionExample = () => {
           tags="react"
           allowCopy={true}
           code={`
-            <GoAFormItem label="Select one option">
-              <GoARadioGroup name="selectOne" value="1" onChange={onChange}>
+            <GoAFormItem label="How do you want to sign in?">
+              <GoARadioGroup name="selectOne" onChange={onChange}>
+                <GoARadioItem
+                  value="1"
+                  label="Sign in as a business"
+                  description="Use the account associated with the business"
+                />
                 <GoARadioItem
-                    value="1"
-                    label="Option one"
-                    description={<span>Help text with a <a href="#">link</a>.</span>}
-                    />
-                <GoARadioItem value="2" label="Option two" />
-                <GoARadioItem value="3" label="Option three" />
+                  value="2"
+                  label="Sign in as an individual"
+                  description="If you don't have a Alberta.ca login, you can create one"
+                />
               </GoARadioGroup>
             </GoAFormItem> 
             `}
@@ -96,36 +103,38 @@ export const RadioSlottedDescriptionExample = () => {
           tags="react"
           allowCopy={true}
           code={`
-            <GoabFormItem label="Select one option">
-              <GoabRadioGroup name="selectOne" value="1" onChange={onChange}>
+            <GoabFormItem label="How do you want to sign in?">
+              <GoabRadioGroup name="selectOne" onChange={onChange}>
                 <GoabRadioItem
-                    value="1"
-                    label="Option one"
-                    description={<span>Help text with a <a href="#">link</a>.</span>}
-                    />
-                <GoabRadioItem value="2" label="Option two" />
-                <GoabRadioItem value="3" label="Option three" />
+                  value="1"
+                  label="Sign in as a business"
+                  description="Use the account associated with the business"
+                />
+                <GoabRadioItem
+                  value="2"
+                  label="Sign in as an individual"
+                  description="If you don't have a Alberta.ca login, you can create one"
+                />
               </GoabRadioGroup>
             </GoabFormItem> 
             `}
         />
       )}
 
-      <GoabFormItem label="Select one option">
-        <GoabRadioGroup name="selectOne" value="1" onChange={noop}>
+      <GoabFormItem label="How do you want to sign in?">
+        <GoabRadioGroup name="selectOne" onChange={noop}>
           <GoabRadioItem
             value="1"
-            label="Option one"
-            description={
-              <span>
-                  Help text with a <a href="#">link</a>.
-                </span>
-            }
+            label="Sign in as a business"
+            description="Use the account associated with the business"
+          />
+          <GoabRadioItem
+            value="2"
+            label="Sign in as an individual"
+            description="If you don't have a Alberta.ca login, you can create one"
           />
-          <GoabRadioItem value="2" label="Option two" />
-          <GoabRadioItem value="3" label="Option three" />
         </GoabRadioGroup>
       </GoabFormItem>
     </Sandbox>
   )
-}
+}

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 (
+    <Sandbox fullWidth flags={["reactive"]} allow={["form"]} skipRenderOnly={"react"}>
+      {/*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" && (
+        <CodeSnippet
+          lang="typescript"
+          tags="react"
+          allowCopy={true}
+          code={`
+            <GoAFormItem label="Have you changed your name?" helpText="This includes changing your last name or spelling your name differently">
+              <GoARadioGroup orientation="horizontal" name="selectOne" onChange={onChange}>
+                <GoARadioItem value="1" label="Yes" />
+                <GoARadioItem value="2" label="No" />
+              </GoARadioGroup>
+            </GoAFormItem>
+          `}
+        />
+      )}
+
+      {version === "new" && (
+        <CodeSnippet
+          lang="typescript"
+          tags="react"
+          allowCopy={true}
+          code={`
+              <GoabFormItem label="Have you changed your name?" helpText="This includes changing your last name or spelling your name differently">
+                <GoabRadioGroup orientation="horizontal" name="selectOne" onChange={onChange}>
+                  <GoabRadioItem value="1" label="Yes" />
+                  <GoabRadioItem value="2" label="No" />
+                </GoabRadioGroup>
+              </GoabFormItem>
+          `}
+        />
+      )}
+
+      <form>
+        <GoabFormItem label="Have you changed your name?" helpText="This includes changing your last name or spelling your name differently">
+          <GoabRadioGroup orientation="horizontal" name="selectOne" onChange={noop}>
+            <GoabRadioItem value="1" label="Yes" />
+            <GoabRadioItem value="2" label="No" />
+          </GoabRadioGroup>
+        </GoabFormItem>
+      </form>
+    </Sandbox>
+  );
+};