Production Release - December 20 / 2024

README.md

@@ -1 +1,20 @@
-# UI component library documentation
+# Installation
+
+1. `npm i`
+2. `npm run build`
+3. `npm run dev`
+
+## Testing Bug Report Form
+
+To test the bug report form follow these steps:
+
+1. Create a file called `.env` in the base directoy
+2. Add a line to the file `VITE_AUTH_TOKEN=""`
+3. Go to [https://github.com/](github.com)
+    * Click your profile in the top right
+    * Select Settings
+    * Select Developer Settings on the bottom left
+    * Select Personal access tokens and then Tokens (classic)
+    * Generate new token (classic)
+    * Give it the `public_repo` permission (only that one)
+4. Add your new token between the `""` in the line you added in step 2

package.json

@@ -12,8 +12,8 @@
     "prettier": "npx prettier . --write"
   },
   "dependencies": {
-    "@abgov/react-components": "5.3.0",
-    "@abgov/web-components": "1.28.0",
+    "@abgov/react-components": "5.4.0",
+    "@abgov/web-components": "1.29.0",
     "@faker-js/faker": "^8.3.1",
     "highlight.js": "^11.8.0",
     "octokit": "^4.0.2",

src/App.tsx

@@ -30,24 +30,24 @@ import ButtonGroupPage from "@routes/components/ButtonGroup";
 import ButtonPage from "@routes/components/Button";
 import CalloutPage from "@routes/components/Callout";
 import CheckboxPage from "@routes/components/Checkbox";
-import ChipPage from "@routes/components/Chip";
 import ComponentNotFoundPage from "@routes/not-found/NotFound";
 import ContainerPage from "@routes/components/Container";
 import DatePickerPage from "@routes/components/DatePicker";
 import DetailsPage from "@routes/components/Details";
 import DividerPage from "@routes/components/Divider";
 import DropdownPage from "@routes/components/Dropdown";
 import FileUploaderPage from "@routes/components/FileUploader";
+import FilterChipPage from "@routes/components/FilterChip";
 import FormItemPage from "@routes/components/FormItemPage.tsx";
 import FormStepperPage from "@routes/components/FormStepper";
 import GridPage from "@routes/components/Grid";
 import HeroBannerPage from "@routes/components/HeroBanner";
 import IconsPage from "@routes/components/Icons";
-import IconButtonPage from '@routes/components/IconButton';
+import IconButtonPage from "@routes/components/IconButton";
 import ListPage from "@routes/components/List";
 import ModalPage from "@routes/components/Modal";
 import NotificationBannerPage from "@routes/components/Notificationbanner";
-import PaginationPage from '@routes/components/Pagination';
+import PaginationPage from "@routes/components/Pagination";
 import PopoverPage from "@routes/components/Popover";
 import ProgressIndicatorPage from "@routes/components/ProgressIndicator";
 import RadioPage from "@routes/components/Radio";
@@ -58,11 +58,10 @@ import TabsPage from "@routes/components/Tabs.tsx";
 import TooltipPage from "@routes/components/Tooltip";
 import TextFieldPage from "@routes/components/TextField";
 import TextAreaPage from "@routes/components/TextArea";
-import MicrositeHeaderPage from '@routes/components/MicrositeHeader';
-import AppHeaderPage from '@routes/components/AppHeader';
-import AppFooterPage from '@routes/components/AppFooter';
-import SideMenuPage from '@routes/components/SideMenu';
-
+import MicrositeHeaderPage from "@routes/components/MicrositeHeader";
+import AppHeaderPage from "@routes/components/AppHeader";
+import AppFooterPage from "@routes/components/AppFooter";
+import SideMenuPage from "@routes/components/SideMenu";
 
 // Design Tokens
 
@@ -87,8 +86,8 @@ import BugVerificationPage from "@routes/get-started/developers/BugVerification"
 import GetStartedLayout from "@routes/get-started/GetStartedLayout";
 import GetStartedOverviewPage from "@routes/get-started/GetStartedOverview";
 import QATestingOverviewPage from "@routes/get-started/qa-testing/QATestingOverview";
-import ContributePage from '@routes/get-started/Contribute';
-import SupportPage from '@routes/get-started/Support';
+import ContributePage from "@routes/get-started/Contribute";
+import SupportPage from "@routes/get-started/Support";
 import RequestFeaturePage from "@routes/get-started/RequestFeature";
 import ReportBugPage from "@routes/get-started/ReportBug";
 import RoadmapPage from "@routes/get-started/Roadmap";
@@ -97,11 +96,11 @@ import UxDesignerPage from "@routes/get-started/designers/UxDesigner";
 
 // Content Pages
 
-import ContentLayout from '@routes/content/ContentLayout';
-import CapitalizationPage from '@routes/content/Capitalization';
-import DateFormatPage from '@routes/content/DateFormat';
-import ErrorMessagesPage from '@routes/content/ErrorMessages';
-import HelperTextPage from '@routes/content/HelperText';
+import ContentLayout from "@routes/content/ContentLayout";
+import CapitalizationPage from "@routes/content/Capitalization";
+import DateFormatPage from "@routes/content/DateFormat";
+import ErrorMessagesPage from "@routes/content/ErrorMessages";
+import HelperTextPage from "@routes/content/HelperText";
 import UserExperienceGuidelinesPage from "@routes/get-started/UserExperienceGuidelines";
 
 // Patterns Pages
@@ -116,7 +115,6 @@ import QuestionPage from "@routes/patterns/QuestionPage";
 import ReviewPage from "@routes/patterns/ReviewPage";
 import ResultPage from "@routes/patterns/ResultPage";
 
-
 interface DeviceWidthProviderProps {
   children: ReactNode;
 }
@@ -150,13 +148,13 @@ const router = createBrowserRouter(
         <Route path="button-group" element={<ButtonGroupPage />} />
         <Route path="callout" element={<CalloutPage />} />
         <Route path="checkbox" element={<CheckboxPage />} />
-        <Route path="chip" element={<ChipPage />} />
         <Route path="container" element={<ContainerPage />} />
         <Route path="date-picker" element={<DatePickerPage />} />
         <Route path="details" element={<DetailsPage />} />
         <Route path="divider" element={<DividerPage />} />
         <Route path="dropdown" element={<DropdownPage />} />
         <Route path="file-uploader" element={<FileUploaderPage />} />
+        <Route path="filter-chip" element={<FilterChipPage />} />
         <Route path="form-item" element={<FormItemPage />} />
         <Route path="form-stepper" element={<FormStepperPage />} />
         <Route path="grid" element={<GridPage />} />
@@ -226,7 +224,6 @@ const router = createBrowserRouter(
         <Route path="user-experience-guidelines" element={<UserExperienceGuidelinesPage />} />
       </Route>
 
-
       <Route path="content" element={<ContentLayout />}>
         <Route path="capitalization">
           <Route index element={<CapitalizationPage />} />
@@ -238,13 +235,13 @@ const router = createBrowserRouter(
 
       <Route path="patterns" element={<PatternsLayout />} errorElement={<ComponentNotFoundPage />}>
         <Route index element={<PatternsOverviewPage />} />
-        <Route path="simple-form" element={<SimpleFormPage/>} />
+        <Route path="simple-form" element={<SimpleFormPage />} />
         <Route path="layout" element={<LayoutPage />} />
-        <Route path="start-page" element={<StartPage/>} />
-        <Route path="task-list-page" element={<TaskListPage/>} />
-        <Route path="question-page" element={<QuestionPage/>} />
-        <Route path="review-page" element={<ReviewPage/>} />
-        <Route path="result-page" element={<ResultPage/>} />
+        <Route path="start-page" element={<StartPage />} />
+        <Route path="task-list-page" element={<TaskListPage />} />
+        <Route path="question-page" element={<QuestionPage />} />
+        <Route path="review-page" element={<ReviewPage />} />
+        <Route path="result-page" element={<ResultPage />} />
       </Route>
     </Route>
   )

src/routes/components/Accordion.tsx

@@ -156,6 +156,18 @@ export default function AccordionPage() {
       type: "none | 3xs | 2xs | xs | s | m | l | xl | 2xl | 3xl | 4xl",
       description: "Apply margin to the top, right, bottom, and/or left of the component.",
     },
+    {
+      name: "_change",
+      lang: "angular",
+      type: "CustomEvent",
+      description: "Callback function when accordion heading is clicked.",
+    },
+    {
+      name: "onChange",
+      lang: "react",
+      type: "(open: boolean) => void",
+      description: "Callback function when accordion heading is clicked.",
+    }
   ];
 
   function onSandboxChange(bindings: ComponentBinding[], props: Record<string, unknown>) {

src/routes/components/AppFooter.tsx

@@ -160,7 +160,7 @@ export default function AppFooterPage() {
               Examples
             </h2>
 
-            <h3 id="component-example-footer-meta">Footer with meta info</h3>
+            <h3 id="component-example-footer-meta">Show quick links</h3>
             <Sandbox skipRender fullWidth>
               <CodeSnippet
                 lang="typescript"
@@ -221,7 +221,7 @@ export default function AppFooterPage() {
             </Sandbox>
 
             <h3 id="component-example-footer-secondary-nav">
-              Secondary navigation column section and meta section
+              Show links to navigation items
             </h3>
             <Sandbox
               skipRender

src/routes/components/Button.tsx

@@ -61,6 +61,7 @@ export default function ButtonPage() {
       options: [""].concat(ICONS),
       value: "",
     },
+    {label: "Width", type: "string", name: "width", value: ""},
     { label: "Disabled", type: "boolean", name: "disabled", value: false },
   ]);
   const componentProperties: ComponentProperty[] = [
@@ -112,6 +113,11 @@ export default function ButtonPage() {
       lang: "angular",
       description: "Shows an icon to the right of the text.",
     },
+    {
+      name: "width",
+      type: "string",
+      description: "Sets the width of the button.",
+    },
     {
       name: "_click",
       lang: "angular",