Merge to next

.github/workflows/docs-next-release.yml

@@ -0,0 +1,35 @@
+name: Docs Next Release
+
+on:
+  push:
+    branches:
+      - next
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    permissions:
+      contents: write
+
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: "24"
+
+      - name: Install deps
+        run: npm ci
+
+      - name: Build
+        run: npm run build:docs
+
+      - name: Release
+        uses: JamesIves/github-pages-deploy-action@v4
+        with:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          BRANCH: next
+          FOLDER: dist/docs

.gitignore

@@ -8,6 +8,7 @@ apps/dev/web
 NOTES.md
 /test-results
 __screenshots__
+docs/.astro
 
 # environment
 .env

README.md

@@ -6,6 +6,17 @@ is designed to be used to help bring consistency to all Government of Alberta
 websites and web applications. It's also being designed to help ease the burden
 on designers and developers alike throughout the development process.
 
+### Developer setup
+
+LSP tools
+```
+npm i -g typescript-language-server \
+  svelte-language-server \
+  prettier \
+  vscode-css-languageservice \
+  vscode-html-languageservice
+```
+
 ### Playground setup
 
 Run the `dev-setup` file.

apps/prs/angular/src/app/app.component.html

@@ -52,6 +52,7 @@
           <a href="/bugs/3201">3201</a>
           <a href="/bugs/3215">3215</a>
           <a href="/bugs/3248">3248</a>
+          <a href="/bugs/3275">3275 Can't unset month</a>
         </goab-side-menu-group>
         <goab-side-menu-group heading="Features">
           <a href="/features/1328">1328</a>
@@ -72,8 +73,13 @@
           <a href="/features/2730">2730</a>
           <a href="/features/2829">2829</a>
           <a href="/features/3102">3102</a>
+          <a href="/features/3306">3306</a>
           <a href="/features/1908">1908</a>
           <a href="/features/2609">2609</a>
+          <a href="/features/3241">3241</a>
+          <a href="/features/v2-icons">v2 header icons</a>
+          <a href="/features/3137">3137</a>
+          <a href="/features/1908">1908</a>
         </goab-side-menu-group>
       </goab-side-menu>
     </section>
@@ -84,4 +90,4 @@
   <section slot="footer" role="footer" style="flex: 0 0 auto">
     <goab-app-footer maxContentWidth="100%" />
   </section>
-</div>
+</div>

apps/prs/angular/src/app/app.routes.ts

@@ -37,6 +37,7 @@ import { Bug3156Component } from "../routes/bugs/3156/bug3156.component";
 import { Bug3201Component } from "../routes/bugs/3201/bug3201.component";
 import { Bug3215Component } from "../routes/bugs/3215/bug3215.component";
 import { Bug3248Component } from "../routes/bugs/3248/bug3248.component";
+import { Bug3275Component } from "../routes/bugs/3275/bug3275.component";
 
 import { Feat1328Component } from "../routes/features/feat1328/feat1328.component";
 import { Feat1383Component } from "../routes/features/feat1383/feat1383.component";
@@ -57,6 +58,10 @@ import { Feat2829Component } from "../routes/features/feat2829/feat2829.componen
 import { Feat3102Component } from "../routes/features/feat3102/feat3102.component";
 import { Feat1908Component } from "../routes/features/feat1908/feat1908.component";
 import { Feat2609Component } from "../routes/features/feat2609/feat2609.component";
+import { Feat3241Component } from "../routes/features/feat3241/feat3241.component";
+import { FeatV2IconsComponent } from "../routes/features/featV2Icons/feat-v2-icons.component";
+import { Feat3137Component } from "../routes/features/feat3137/feat3137.component";
+import { Feat3306Component } from "../routes/features/feat3306/feat3306.component";
 
 export const appRoutes: Route[] = [
   { path: "everything", component: EverythingComponent },
@@ -97,6 +102,7 @@ export const appRoutes: Route[] = [
   { path: "bugs/3201", component: Bug3201Component },
   { path: "bugs/3215", component: Bug3215Component },
   { path: "bugs/3248", component: Bug3248Component },
+  { path: "bugs/3275", component: Bug3275Component },
 
   { path: "features/1328", component: Feat1328Component },
   { path: "features/1383", component: Feat1383Component },
@@ -117,4 +123,9 @@ export const appRoutes: Route[] = [
   { path: "features/2829", component: Feat2829Component },
   { path: "features/3102", component: Feat3102Component },
   { path: "features/2609", component: Feat2609Component },
+  { path: "features/3241", component: Feat3241Component },
+  { path: "features/v2-icons", component: FeatV2IconsComponent },
+  { path: "features/3137", component: Feat3137Component },
+  { path: "features/1908", component: Feat1908Component },
+  { path: "features/3306", component: Feat3306Component },
 ];

apps/prs/angular/src/routes/bugs/3275/bug3275.component.html

@@ -0,0 +1,30 @@
+<div>
+  <p>
+    Select a value with the DatePicker and it should show in "Current value" below.
+    Changing the Month to "--select a month--" will clear the value.
+  </p>
+  <goab-form-item label="Date picker (input)" mb="xl">
+    <goab-date-picker
+      name="bug-3275"
+      type="input"
+      [value]="inputValue"
+      (onChange)="handleChange($event)"
+    />
+  </goab-form-item>
+
+  <goab-button-group mb="l">
+    <goab-button size="compact" type="secondary" (onClick)="setValue('')">
+      Clear programmatically
+    </goab-button>
+  </goab-button-group>
+  <div>
+    <p>
+      <b>Note:</b> The button clears the value in the form but does not change the
+      DatePicker when <code>type=input</code>. Its just for testing.
+    </p>
+  </div>
+
+  <div>
+    Current value: <strong>{{ inputValue || '"" (empty)' }}</strong>
+  </div>
+</div>

apps/prs/angular/src/routes/bugs/3275/bug3275.component.ts

@@ -0,0 +1,27 @@
+import { Component } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import {
+  GoabButton,
+  GoabButtonGroup,
+  GoabDatePicker,
+  GoabDatePickerOnChangeDetail,
+  GoabFormItem,
+} from "@abgov/angular-components";
+
+@Component({
+  standalone: true,
+  selector: "abgov-bug3275",
+  templateUrl: "./bug3275.component.html",
+  imports: [CommonModule, GoabButton, GoabButtonGroup, GoabDatePicker, GoabFormItem],
+})
+export class Bug3275Component {
+  inputValue = "";
+
+  handleChange(detail: GoabDatePickerOnChangeDetail) {
+    this.inputValue = detail.valueStr ?? "";
+  }
+
+  setValue(value: string) {
+    this.inputValue = value;
+  }
+}

apps/prs/angular/src/routes/features/feat3137/feat3137.component.html

@@ -0,0 +1,15 @@
+<h1>Feature 3137: Work Side Menu Group</h1>
+
+<p>
+  This demonstrates a working Work Side Menu Group component with some child items. You should be able to toggle the menu.
+</p>
+
+<goabx-work-side-menu heading="Menu heading" url="#" [primaryContent]="primaryTemplate" [open]="true">
+</goabx-work-side-menu>
+<ng-template #primaryTemplate>
+  <goabx-work-side-menu-group heading="Side menu group" icon="star">
+    <goabx-work-side-menu-item label="Menu item 1" icon="star" url="/item-1" />
+    <goabx-work-side-menu-item label="Menu item 2" icon="star" url="/item-2" />
+    <goabx-work-side-menu-item label="Menu item 3" icon="star" url="/item-3" />
+  </goabx-work-side-menu-group>
+</ng-template>

apps/prs/angular/src/routes/features/feat3137/feat3137.component.ts

@@ -0,0 +1,17 @@
+import { CommonModule } from "@angular/common";
+import { Component } from "@angular/core";
+import { GoabxWorkSideMenu, GoabxWorkSideMenuItem, GoabxWorkSideMenuGroup } from "@abgov/angular-components";
+
+@Component({
+  standalone: true,
+  selector: "abgov-feat3137",
+  templateUrl: "./feat3137.component.html",
+  styleUrls: ["./feat3137.component.css"],
+  imports: [
+    CommonModule,
+    GoabxWorkSideMenu,
+    GoabxWorkSideMenuGroup,
+    GoabxWorkSideMenuItem
+  ],
+})
+export class Feat3137Component { }