Release - May 20

package.json

@@ -12,9 +12,9 @@
     "prettier": "npx prettier . --write"
   },
   "dependencies": {
-    "@abgov/react-components": "6.3.0",
-    "@abgov/ui-components-common": "1.3.0",
-    "@abgov/web-components": "1.33.0",
+    "@abgov/react-components": "6.4.1",
+    "@abgov/ui-components-common": "1.4.0",
+    "@abgov/web-components": "1.34.0",
     "@faker-js/faker": "^8.3.1",
     "highlight.js": "^11.8.0",
     "js-cookie": "^3.0.5",

src/App.tsx

@@ -46,6 +46,7 @@ import ReportBugPage from "@routes/get-started/ReportBug";
 import RoadmapPage from "@routes/get-started/Roadmap";
 import SupportedBrowsersPage from "@routes/get-started/developers/SupportedBrowsers";
 import UxDesignerPage from "@routes/get-started/designers/UxDesigner";
+import { LtsPolicyPage } from "@routes/get-started/LtsPolicyPage.tsx";
 
 // Content Pages
 
@@ -62,6 +63,7 @@ import ComponentNotFound from "@routes/not-found/NotFound.tsx";
 import { LanguageVersionProvider } from "@contexts/LanguageVersionContext.tsx";
 import DevelopersUpgradePage from "@routes/get-started/developers/upgrade-guide/DevelopersUpgrade.tsx";
 
+
 const router = createBrowserRouter(
   createRoutesFromElements(
     <Route path="/" element={<Root />}>
@@ -96,6 +98,9 @@ const router = createBrowserRouter(
         <Route path="qa-testing">
           <Route index element={<QATestingOverviewPage />} />
         </Route>
+        <Route path="lts-policy">
+          <Route index element={<LtsPolicyPage />} />
+        </Route>
         <Route path="contribute">
           <Route index element={<ContributePage />} />
         </Route>

src/components/card-lite/CardLite.css

@@ -1,23 +1,25 @@
-.card-lite .title {
-  font: var(--goa-typography-heading-l);
-  margin-bottom: var(--goa-space-m);
+.card-lite {
+    text-decoration: none;
 }
 
-.card-lite .description {
-  font-size: var(--goa-font-size-4);
-  margin-bottom: var(--goa-space-xs);
+.card-heading {
+    color: black;
+    display: inline-block;
 }
 
-.card-content a {
-  font-size: var(--goa-font-size-5);
+.card-description {
+    color: black;
+    display: block;
 }
 
-.card-lite .link {
-  font-size: var(--goa-font-size-5);
+a:hover .card-heading {
+    color: var(--goa-color-interactive-hover);
+    text-decoration: underline;
 }
 
-@media screen and (min-width: 1231px) {
-  .card-lite {
-    max-width: 300px;
-  }
+.card-lite:focus-visible {
+    outline: 3px solid var(--goa-color-interactive-focus);
+    outline-offset: 4px;
+    border-radius: 4px;
 }
+

src/components/card-lite/CardLite.tsx

@@ -1,6 +1,6 @@
-import { ReactNode } from "react";
-import { Link } from "react-router-dom";
 import "./CardLite.css";
+import { ReactNode } from "react";
+import { GoabLink, GoabText } from "@abgov/react-components";
 
 export interface Props {
   title: string;
@@ -11,13 +11,17 @@ export interface Props {
 
 export function CardLite(props: Props) {
   return (
-    <div className="card-lite">
-      <div className="title">{props.title}</div>
-      <div className="description">{props.description}</div>
-      <div className="link">
-        <Link to={props.linkTo}>{props.linkDisplay}</Link>
+    <a href={props.linkTo} className="card-lite">
+      <div>
+        <GoabText size="heading-m" mt="none" mb="m">
+          <b className="card-heading">{props.title}</b>
+        </GoabText>
+        <GoabText size="body-m" mt="none" mb="xs">
+          <div className="card-description">{props.description}</div>
+        </GoabText>
+        <GoabLink>{props.linkDisplay}</GoabLink>
       </div>
-    </div>
+    </a>
   );
 }
 

src/components/sandbox/Sandbox.css

@@ -1,5 +1,8 @@
 .sandbox-note {
   color: #666;
+  margin-top: var(--goa-space-m);
+  margin-bottom: var(--goa-space-2xl);
+  font: var(--goa-typography-body-s);
 }
 
 .sandbox-render {

src/components/sandbox/Sandbox.tsx

@@ -1,4 +1,6 @@
 import { ReactElement, ReactNode, useContext, useEffect, useState } from "react";
+import { GoabCallout } from "@abgov/react-components";
+import { GoabCalloutType } from "@abgov/ui-components-common";
 
 import SandboxProperties from "./SandboxProperties";
 import { CodeSnippet } from "@components/code-snippet/CodeSnippet";
@@ -22,7 +24,7 @@ type Serializer = (el: any, properties: ComponentBinding[]) => string;
 interface SandboxProps {
   properties?: ComponentBinding[];
   formItemProperties?: ComponentBinding[];
-  note?: string;
+  note?: string | { type?: GoabCalloutType; heading?: string; content: string };
   fullWidth?: boolean;
   onChange?: (bindings: ComponentBinding[], props: Record<string, unknown>) => void;
   onChangeFormItemBindings?: (bindings: ComponentBinding[], props: Record<string, unknown>) => void;
@@ -140,7 +142,21 @@ export const Sandbox = (props: SandboxProps) => {
         </GoabAccordion>
       )}
       <SandboxCode props={props} formatLang={formatLang} lang={lang} serializers={serializers} version={version} />
-      {props.note && (<div className="sandbox-note">{props.note}</div>)}
+      {props.note &&
+        (typeof props.note === "string" ? (
+          <p className="sandbox-note">{props.note}</p>
+        ) : (
+          <GoabCallout
+            type={props.note.type || "important"}
+            size="medium"
+            heading={props.note.heading}
+            maxWidth="596px"
+            mt="m"
+            mb="2xl"
+          >
+            {props.note.content}
+          </GoabCallout>
+        ))}
     </>
   );
 };

src/examples/checkbox/CheckboxDescriptionExample.tsx

@@ -0,0 +1,96 @@
+import { GoabCheckbox, GoabFormItem } from "@abgov/react-components";
+import { Sandbox } from "@components/sandbox";
+import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
+import { useContext } from "react";
+import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
+
+export default function CheckboxDescriptionExample () {
+  const {version} = useContext(LanguageVersionContext);
+  return (
+    <>
+      <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 checked="true" name="optionOne" text="Email">
+                  <span slot="description">Help text with a <a href="#">link</a>.</span>
+                </goa-checkbox>
+                <goa-checkbox checked="false" name="optionTwo" text="Phone" />
+                <goa-checkbox checked="false" name="optionThree" text="Text message" />
+              </goa-form-item>
+            `}
+        />}
+
+        {version === "new" && <CodeSnippet
+          lang="typescript"
+          tags="angular"
+          allowCopy={true}
+          code={`
+              <goab-form-item label="How would you like to be contacted?">
+                <goab-checkbox [checked]="true" name="optionOne" text="Email" [description]="descriptionTemplate">
+                  <ng-template #descriptionTemplate>
+                    <span>Help text with a <a href="#">link</a>.</span>
+                  </ng-template>
+                </goab-checkbox>
+                <goab-checkbox [checked]="false" name="optionTwo" text="Phone" />
+                <goab-checkbox [checked]="false" name="optionThree" text="Text message" />
+              </goab-form-item>
+            `}
+        />}
+
+        {/*React*/}
+        {version === "old" && <CodeSnippet
+        lang="typescript"
+        tags="react"
+        allowCopy={true}
+        code={`
+              <GoAFormItem label="How would you like to be contacted?">
+                <GoACheckbox
+                  checked={true}
+                  name="optionOne"
+                  text="Email"
+                  description={<span>Help text with a <a href="#">link</a>.</span>}
+                  />
+                <GoACheckbox checked={false} name="optionTwo" text="Phone" />
+                <GoACheckbox checked={false} name="optionThree" text="Text message" />
+              </GoAFormItem>
+            `}
+        />}
+
+        {version === "new" && <CodeSnippet
+          lang="typescript"
+          tags="react"
+          allowCopy={true}
+          code={`
+              <GoabFormItem label="How would you like to be contacted?">
+                <GoabCheckbox
+                  checked={true}
+                  name="optionOne"
+                  text="Email"
+                  description={<span>Help text with a <a href="#">link</a>.</span>}
+                  />
+                <GoabCheckbox checked={false} name="optionTwo" text="Phone" />
+                <GoabCheckbox checked={false} name="optionThree" text="Text message" />
+              </GoabFormItem>
+            `}
+        />}
+
+        <GoabFormItem label="How would you like to be contacted?">
+          <GoabCheckbox
+            checked={true}
+            name="optionOne"
+            text="Email"
+            description={<span>Help text with a <a href="#">link</a>.</span>}
+            />
+          <GoabCheckbox checked={false} name="optionTwo" text="Phone" />
+          <GoabCheckbox checked={false} name="optionThree" text="Text message" />
+        </GoabFormItem>
+      </Sandbox>
+    </>
+  );
+}