@abgov/nx-adsp 13.30.0 → 13.31.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/nx-adsp",
-  "version": "13.30.0",
+  "version": "13.31.0",
   "license": "Apache-2.0",
   "main": "src/index.js",
   "description": "Government of Alberta - Nx plugin for ADSP apps.",

package/src/generators/vue-app/files/src/App.vue__tmpl__

@@ -78,6 +78,13 @@ function onItemClick(item: { to?: string }) {
     </AppLayout>
   </AppSideMenu>
 <% } else { %>
+  <!-- goa-one-column-layout owns the page's flex column, the sticky footer and
+       the <main> landmark. That <main> lives in the element's shadow DOM, so the
+       skip link targets an id'd wrapper in the slotted (light DOM) content
+       instead -- the wrapper is a plain div, so there is still exactly one main
+       landmark on the page. -->
+  <goa-one-column-layout>
+  <section slot="header">
   <a class="skip-link" href="#main-content">Skip to main content</a>
   <AppHeader heading="<%= projectName %>">
     <template #utilities>
@@ -100,12 +107,18 @@ function onItemClick(item: { to?: string }) {
     @sign-in="signInAgain"
     @dismiss="session.dismiss"
   />
-  <main id="main-content">
+  </section>
+
+  <div id="main-content">
     <AppLayout :variant="contentWidth">
       <RouterView />
     </AppLayout>
-  </main>
-  <AppFooter />
+  </div>
+
+  <section slot="footer">
+    <AppFooter />
+  </section>
+  </goa-one-column-layout>
 <% } %>
 </template>
 

package/src/generators/vue-app/vue-app.spec.ts

@@ -120,10 +120,17 @@ describe('Vue App Generator', () => {
     const layoutPath = 'libs/vue-components/src/lib/patterns/AppLayout.vue';
     expect(host.exists(layoutPath)).toBeTruthy();
     const layout = host.read(layoutPath).toString();
-    // Three named width variants, token-driven padding.
-    expect(layout).toContain('form-content');
-    expect(layout).toContain('wide-content');
+    // The gutter is goa-page-block's job now: it supplies the centering, the
+    // max-width and a responsive horizontal gutter. The named variants stay the
+    // public API, mapped to the widths the element takes.
+    expect(layout).toContain('<goa-page-block');
+    expect(layout).toContain("form: '640px'");
+    expect(layout).toContain("page: '1000px'");
+    expect(layout).toContain("wide: '1200px'");
+    // Vertical padding is not part of goa-page-block, so this component keeps it
+    // -- the same thing GoA's own public-form reference does.
     expect(layout).toContain('--goa-space');
+    expect(layout).toContain('padding-block');
     // AppLayout must NOT own the skip-to-main-content landmark itself: it nests
     // inside AppSideMenu for --layout=internal, which already provides one, and
     // a second <main id="main-content"> would duplicate the landmark/id.
@@ -137,8 +144,16 @@ describe('Vue App Generator', () => {
     const app = host.read('apps/test/src/App.vue').toString();
     expect(app).toContain('AppLayout');
     expect(app).not.toContain('main > section');
+    // The public shell is goa-one-column-layout, which owns the page's flex
+    // column, sticky footer and <main> landmark. That <main> is in its shadow
+    // DOM, so the skip link targets an id'd wrapper in the slotted content --
+    // a plain div, so the page still has exactly one main landmark.
+    expect(app).toContain('<goa-one-column-layout>');
+    expect(app).toContain('<section slot="header">');
+    expect(app).toContain('<section slot="footer">');
     expect(app).toContain('href="#main-content"');
-    expect(app).toContain('id="main-content"');
+    expect(app).toContain('<div id="main-content">');
+    expect(app).not.toContain('<main id="main-content">');
   });
 
   it('provisions the shared GoA wrapper library and points the app at it', async () => {

package/src/generators/vue-components/files/src/lib/patterns/AppLayout.spec.ts__tmpl__

@@ -0,0 +1,32 @@
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import AppLayout from './AppLayout.vue';
+
+// Note on how width is asserted: in this test environment goa-page-block is not
+// a defined custom element, so Vue falls back to setting the width as an
+// ATTRIBUTE. In a real browser the element defines the property, so Vue sets it
+// as a property and getAttribute('width') returns null -- verified against a
+// running app, where the element then applies --max-width correctly. These tests
+// therefore guard the variant -> width mapping, which is the part that can
+// regress; they are not evidence about attribute-vs-property binding.
+describe('AppLayout', () => {
+  const widthFor = (variant?: 'page' | 'wide' | 'form') =>
+    mount(AppLayout, { props: variant ? { variant } : {} })
+      .find('goa-page-block')
+      .attributes('width');
+
+  it('delegates the content gutter to goa-page-block', () => {
+    expect(mount(AppLayout).find('goa-page-block').exists()).toBe(true);
+  });
+
+  it('maps each variant to the width the element expects', () => {
+    expect(widthFor('form')).toBe('640px');
+    expect(widthFor()).toBe('1000px');
+    expect(widthFor('wide')).toBe('1200px');
+  });
+
+  it('renders slotted content inside the block', () => {
+    const w = mount(AppLayout, { slots: { default: '<p>hello</p>' } });
+    expect(w.find('goa-page-block').html()).toContain('<p>hello</p>');
+  });
+});

package/src/generators/vue-components/files/src/lib/patterns/AppLayout.vue__tmpl__

@@ -14,36 +14,43 @@
 // copy would duplicate the anchor screen readers/keyboard nav jump to. The
 // top-level shell (App.vue for --layout=header, AppSideMenu for --layout=internal)
 // owns that landmark instead.
-withDefaults(defineProps<{ variant?: 'page' | 'wide' | 'form' }>(), {
-  variant: 'page',
-});
+import { computed } from 'vue';
+
+const props = withDefaults(
+  defineProps<{ variant?: 'page' | 'wide' | 'form' }>(),
+  { variant: 'page' },
+);
+
+// goa-page-block takes a CSS dimension (or "full"); the variant names stay the
+// public API so a view says what kind of page it is, not how wide it should be.
+const WIDTHS = {
+  form: '640px',
+  page: '1000px',
+  wide: '1200px',
+} as const;
+
+const maxWidth = computed(() => WIDTHS[props.variant]);
 </script>
 
 <template>
-  <div :class="`${variant}-content`">
-    <slot />
-  </div>
+  <goa-page-block :width="maxWidth">
+    <!-- goa-page-block supplies the centering, the max-width and a responsive
+         HORIZONTAL gutter, but no vertical padding -- GoA's own public-form
+         reference does the same thing, wrapping the block's children to add it. -->
+    <div class="app-layout-inset">
+      <slot />
+    </div>
+  </goa-page-block>
 </template>
 
 <style scoped>
-.page-content,
-.wide-content,
-.form-content {
-  margin-inline: auto;
-  box-sizing: border-box;
-  /* Design-token gutter; fallbacks apply only if tokens aren't loaded. */
-  padding: var(--goa-space-xl, 2.5rem) var(--goa-space-l, 1.5rem);
+.app-layout-inset {
+  padding-block: var(--goa-space-xl, 2.5rem);
 }
 
-.form-content { max-width: 640px; }
-.page-content { max-width: 1000px; }
-.wide-content { max-width: 1200px; }
-
 @media (max-width: 623.98px) {
-  .page-content,
-  .wide-content,
-  .form-content {
-    padding: var(--goa-space-m, 1rem);
+  .app-layout-inset {
+    padding-block: var(--goa-space-m, 1rem);
   }
 }
 </style>

package/src/generators/vue-components/vue-components.spec.ts

@@ -171,6 +171,7 @@ describe('Vue Components Generator', () => {
       'libs/vue-components/src/lib/primitives/GoabDatePicker.spec.ts',
       'libs/vue-components/src/lib/patterns/WorkspaceTable.spec.ts',
       'libs/vue-components/src/lib/patterns/Stepper.spec.ts',
+      'libs/vue-components/src/lib/patterns/AppLayout.spec.ts',
     ]) {
       expect(host.exists(spec)).toBeTruthy();
     }