Main updates

package.json

@@ -12,9 +12,9 @@
     "prettier": "npx prettier . --write"
   },
   "dependencies": {
-    "@abgov/react-components": "6.9.0-alpha.2",
-    "@abgov/ui-components-common": "1.9.0-alpha.1",
-    "@abgov/web-components": "1.39.0-alpha.2",
+    "@abgov/react-components": "6.9.3-next.1",
+    "@abgov/ui-components-common": "1.9.1-next.1",
+    "@abgov/web-components": "1.39.3-next.1",
     "@faker-js/faker": "^8.3.1",
     "highlight.js": "^11.8.0",
     "js-cookie": "^3.0.5",

src/components/sandbox/AngularReactiveSerializer.ts

@@ -102,7 +102,11 @@ export class AngularReactiveSerializer extends BaseSerializer implements Seriali
     }
     const currentPrefix = "Goab";
     const oldPrefix = "goa";
-    const tail = name.replace(currentPrefix, "");
+    let tail = name.replace(currentPrefix, "");
+
+    if (tail === "TextArea" && this.version === "new") {
+      tail = "Textarea"
+    }
 
     if (this.version === "old") {
       return `${oldPrefix}-${this.dasherize(tail)}`;

src/components/sandbox/AngularSerializer.ts

@@ -94,6 +94,9 @@ export class AngularSerializer extends BaseSerializer implements Serializer {
     if (tail === "OneColumnLayout" && this.version === "new") {
       tail = "ColumnLayout";
     }
+    if (tail === "TextArea" && this.version === "new") {
+      tail = "Textarea"
+    }
     return `${this.version === "old" ? "goa" : "goab"}-${this.dasherize(tail)}`;
   }
 

src/examples/add-a-filter-chip.tsx

@@ -64,12 +64,13 @@ export const AddAFilterChip = () => {
           allowCopy={true}
           code={`
                       <div>
-                        <goa-filter-chip
-                          *ngFor="let filter of activeFilters"
-                          [content]="filter"
-                          (_click)="removeFilter(filter)"
-                          mr="s">
-                        </goa-filter-chip>
+                        @for (filter of activeFilters; track filter) {
+                          <goa-filter-chip
+                            [content]="filter"
+                            (_click)="removeFilter(filter)"
+                            mr="s">
+                          </goa-filter-chip>
+                        }
                       </div>
                       <goa-button-group alignment="center" mt="l">
                         <goa-button (click)="addFilter()">Add Random Filter</goa-button>
@@ -84,12 +85,13 @@ export const AddAFilterChip = () => {
           allowCopy={true}
           code={`
                       <div>
-                        <goab-filter-chip
-                          *ngFor="let filter of activeFilters"
-                          [content]="filter"
-                          (onClick)="removeFilter(filter)"
-                          mr="s">
-                        </goab-filter-chip>
+                        @for (filter of activeFilters; track filter) {
+                          <goab-filter-chip
+                            [content]="filter"
+                            (onClick)="removeFilter(filter)"
+                            mr="s">
+                          </goab-filter-chip>
+                        }
                       </div>
                       <goab-button-group alignment="center" mt="l">
                         <goab-button (onClick)="addFilter()">Add Random Filter</goab-button>

src/examples/add-another-item-in-a-modal.tsx

@@ -4,7 +4,7 @@ import {
   GoabContainer,
   GoabDropdown, GoabDropdownItem,
   GoabFormItem, GoabInput,
-  GoabModal, GoabTextarea
+  GoabModal, GoabTextArea
 } from "@abgov/react-components";
 import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
 import { useContext, useState } from "react";
@@ -66,12 +66,12 @@ export const AddAnotherItemInAModal = () => {
               name="name"></GoabInput>
           </GoabFormItem>
           <GoabFormItem label="Description" mt="xs">
-            <GoabTextarea
+            <GoabTextArea
               name="description"
               width="80%"
               rows={2}
               onChange={onChangeDescription}
-              value={description}></GoabTextarea>
+              value={description}></GoabTextArea>
           </GoabFormItem>
         </GoabModal>
       </GoabContainer>

src/examples/ask-a-long-answer-question-with-a-maximum-word-count.tsx

@@ -1,7 +1,7 @@
 import { Sandbox } from "@components/sandbox";
 import {
   GoabFormItem,
-  GoabTextarea
+  GoabTextArea
 } from "@abgov/react-components";
 
 export const AskALongAnswerQuestionWithAMaximumWordCount = () => {
@@ -13,7 +13,7 @@ export const AskALongAnswerQuestionWithAMaximumWordCount = () => {
       <GoabFormItem
         label="Provide more detail"
         helpText="Do not include personal or financial information, like your National Insurance number or credit card details.">
-        <GoabTextarea name="program" onChange={noop} width="100%" rows={6} maxCount={500} countBy={"word"} />
+        <GoabTextArea name="program" onChange={noop} width="100%" rows={6} maxCount={500} countBy={"word"} />
       </GoabFormItem>
 
     </Sandbox>

src/examples/compact-buttons-in-a-table.tsx

@@ -359,18 +359,20 @@ export const CompactButtonsInATable = () => {
                   </tr>
                 </thead>
                 <tbody>
-                  <tr *ngFor="let user of pageUsers; index as i">
-                    <td>{{ user.firstName }}</td>
-                    <td>{{ user.lastName }}</td>
-                    <td class="goa-table-number-column">12345667</td>
-                    <td>
-                    <goa-button-group alignment="center">
-                      <goa-button type="tertiary" size="compact" (_click)="onClick($event)">
-                        View
-                      </goa-button>
-                    </goa-button-group>
-                  </td>
-                  </tr>
+                  @for (user of pageUsers; track $index) {
+                    <tr>
+                      <td>{{ user.firstName }}</td>
+                      <td>{{ user.lastName }}</td>
+                      <td class="goa-table-number-column">12345667</td>
+                      <td>
+                      <goa-button-group alignment="center">
+                        <goa-button type="tertiary" size="compact" (_click)="onClick($event)">
+                          View
+                        </goa-button>
+                      </goa-button-group>
+                    </td>
+                    </tr>
+                  }
                 </tbody>
               </goa-table>
 
@@ -400,18 +402,20 @@ export const CompactButtonsInATable = () => {
                   </tr>
                 </thead>
                 <tbody>
-                  <tr *ngFor="let user of pageUsers; index as i">
-                    <td>{{ user.firstName }}</td>
-                    <td>{{ user.lastName }}</td>
-                    <td class="goa-table-number-column">12345667</td>
-                    <td>
-                    <goab-button-group alignment="center">
-                      <goab-button type="tertiary" size="compact" (onClick)="onClick()">
-                        View
-                      </goab-button>
-                    </goab-button-group>
-                  </td>
-                  </tr>
+                  @for (user of pageUsers; track $index) {
+                    <tr>
+                      <td>{{ user.firstName }}</td>
+                      <td>{{ user.lastName }}</td>
+                      <td class="goa-table-number-column">12345667</td>
+                      <td>
+                      <goab-button-group alignment="center">
+                        <goab-button type="tertiary" size="compact" (onClick)="onClick()">
+                          View
+                        </goab-button>
+                      </goab-button-group>
+                    </td>
+                    </tr>
+                  }
                 </tbody>
               </goab-table>
 

src/examples/dynamically-add-an-item-to-a-dropdown-list.tsx

@@ -321,12 +321,13 @@ export const DynamicallyAddAnItemToADropdownList = () => {
                         [value]="selectedTask"
                         name="selectedTask"
                         (_change)="onSelectedTaskChange($event)">
-                        <goa-dropdown-item
-                          *ngFor="let task of tasks; trackBy: trackByFn"
-                          [value]="task.value"
-                          [mount]="task.mount"
-                          [label]="task.label">
-                        </goa-dropdown-item>
+                        @for (task of tasks; track trackByFn($index, task)) {
+                          <goa-dropdown-item
+                            [value]="task.value"
+                            [mount]="task.mount"
+                            [label]="task.label">
+                          </goa-dropdown-item>
+                        }
                       </goa-dropdown>
                     </ng-container>
                   </goa-form-item>
@@ -382,12 +383,13 @@ export const DynamicallyAddAnItemToADropdownList = () => {
                     [value]="selectedTask"
                     name="selectedTask"
                     (onChange)="onSelectedTaskChange($event)">
-                    <goab-dropdown-item
-                      *ngFor="let task of tasks; trackBy: trackByFn"
-                      [value]="task.value"
-                      [mountType]="task.mount"
-                      [label]="task.label">
-                    </goab-dropdown-item>
+                    @for (task of tasks; track trackByFn($index, task)) {
+                      <goab-dropdown-item
+                        [value]="task.value"
+                        [mountType]="task.mount"
+                        [label]="task.label">
+                      </goab-dropdown-item>
+                    }
                   </goab-dropdown>
                 </ng-container>
               </goab-form-item>