Merge branch 'main' into toast-tokens

blackbaud · Oct 3, 2024 · 7839933 · 7839933
2 parents d85ca8c + 21dba3b
commit 7839933
Show file tree

Hide file tree

Showing 54 changed files with 1,034 additions and 226 deletions.
diff --git a/.github/workflows/validate-pr.yml b/.github/workflows/validate-pr.yml
@@ -91,5 +91,3 @@ jobs:
             sdk/eslint-config
             sdk/prettier-schematics
             sdk/testing
-          validateSingleCommit: true
-          validateSingleCommitMatchesPrTitle: true
diff --git a/apps/e2e/pages-storybook-e2e/src/e2e/blocks-tile-dashboard-page.component.cy.ts b/apps/e2e/pages-storybook-e2e/src/e2e/blocks-tile-dashboard-page.component.cy.ts
@@ -0,0 +1,28 @@
+import { E2eVariations } from '@skyux-sdk/e2e-schematics';
+
+const ID = 'blocks-tile-dashboard-pagecomponent--blocks-tile-dashboard-page';
+
+const SELECTOR_PAGE = 'app-blocks-tile-dashboard-page';
+
+describe(`pages-storybook-blocks-tile-dashboard`, () => {
+  E2eVariations.forEachTheme((theme) => {
+    describe(`in ${theme} theme`, () => {
+      E2eVariations.RESPONSIVE_WIDTHS.forEach((width) => {
+        describe(`at ${width}px`, () => {
+          beforeEach(() => {
+            cy.viewport(width, 960);
+            cy.visit(`/iframe.html?globals=theme:${theme}&id=${ID}`);
+          });
+
+          it('should render the component', () => {
+            cy.get(SELECTOR_PAGE)
+              .should('exist')
+              .should('be.visible')
+              .screenshot(`${ID}-${theme}`);
+            cy.get(SELECTOR_PAGE).percySnapshot(`${ID}-${theme}`);
+          });
+        });
+      });
+    });
+  });
+});
diff --git a/apps/e2e/pages-storybook-e2e/src/e2e/page-layout-blocks.component.cy.ts b/apps/e2e/pages-storybook-e2e/src/e2e/page-layout-blocks.component.cy.ts
@@ -14,30 +14,35 @@ Cypress.on(
 describe(`pages-storybook`, () => {
   E2eVariations.forEachTheme((theme) => {
     describe(`in ${theme} theme`, () => {
-      beforeEach(() =>
-        cy.visit(`/iframe.html?globals=theme:${theme}&id=${ID}`),
-      );
-      it('should render the component', () => {
-        cy.get('app-blocks-page sky-page')
-          .should('exist')
-          .should('be.visible')
-          .screenshot(`${ID}-${theme}`);
-        cy.get('app-blocks-page sky-page').percySnapshot(`${ID}-${theme}`);
-      });
+      [
+        ['block-layout', ID],
+        ['block-layout-with-links', `${ID}-with-links`],
+      ].forEach(([_, ID]) => {
+        describe(`${_}`, () => {
+          beforeEach(() =>
+            cy.visit(`/iframe.html?globals=theme:${theme}&id=${ID}`),
+          );
+
+          it('should render the component', () => {
+            cy.get('app-blocks-page sky-page')
+              .should('exist')
+              .should('be.visible');
+            cy.window().screenshot(`${ID}-${theme}`);
+            cy.window().percySnapshot(`${ID}-${theme}`);
+          });
 
-      it('should render the component on mobile', () => {
-        cy.viewport(E2eVariations.MOBILE_WIDTHS[0], 800);
+          it('should render the component on mobile', () => {
+            cy.viewport(E2eVariations.MOBILE_WIDTHS[0], 800);
 
-        cy.get('app-blocks-page sky-page')
-          .should('exist')
-          .should('be.visible')
-          .screenshot(`${ID}-${theme}-mobile`);
-        cy.get('app-blocks-page sky-page').percySnapshot(
-          `${ID}-${theme}-mobile`,
-          {
-            widths: E2eVariations.MOBILE_WIDTHS,
-          },
-        );
+            cy.get('app-blocks-page sky-page')
+              .should('exist')
+              .should('be.visible');
+            cy.window().screenshot(`${ID}-${theme}-mobile`);
+            cy.window().percySnapshot(`${ID}-${theme}-mobile`, {
+              widths: E2eVariations.MOBILE_WIDTHS,
+            });
+          });
+        });
       });
     });
   });

diff --git a/apps/e2e/pages-storybook-e2e/src/e2e/page-layout-fit.component.cy.ts b/apps/e2e/pages-storybook-e2e/src/e2e/page-layout-fit.component.cy.ts
@@ -5,15 +5,22 @@ const ID = 'fitpagecomponent-fitpage--fit-page';
 describe(`pages-storybook`, () => {
   E2eVariations.forEachTheme((theme) => {
     describe(`in ${theme} theme`, () => {
-      beforeEach(() =>
-        cy.visit(`/iframe.html?globals=theme:${theme}&id=${ID}`),
-      );
-      it('should render the component', () => {
-        cy.get('app-fit-page sky-page')
-          .should('exist')
-          .should('be.visible')
-          .screenshot(`${ID}-${theme}`);
-        cy.get('app-fit-page sky-page').percySnapshot(`${ID}-${theme}`);
+      [
+        ['block-layout', ID],
+        ['block-layout-with-links', `${ID}-with-links`],
+      ].forEach(([_, ID]) => {
+        describe(`${_}`, () => {
+          beforeEach(() =>
+            cy.visit(`/iframe.html?globals=theme:${theme}&id=${ID}`),
+          );
+          it('should render the component', () => {
+            cy.get('app-fit-page sky-page')
+              .should('exist')
+              .should('be.visible');
+            cy.window().screenshot(`${ID}-${theme}`);
+            cy.window().percySnapshot(`${ID}-${theme}`);
+          });
+        });
       });
     });
   });

diff --git a/apps/e2e/pages-storybook-e2e/src/e2e/page-layout-list.component.cy.ts b/apps/e2e/pages-storybook-e2e/src/e2e/page-layout-list.component.cy.ts
@@ -5,15 +5,22 @@ const ID = 'listpagecomponent-listpage--list-page';
 describe(`pages-storybook`, () => {
   E2eVariations.forEachTheme((theme) => {
     describe(`in ${theme} theme`, () => {
-      beforeEach(() =>
-        cy.visit(`/iframe.html?globals=theme:${theme}&id=${ID}`),
-      );
-      it('should render the component', () => {
-        cy.get('app-list-page sky-page')
-          .should('exist')
-          .should('be.visible')
-          .screenshot(`${ID}-${theme}`);
-        cy.get('app-list-page sky-page').percySnapshot(`${ID}-${theme}`);
+      [
+        ['block-layout', ID],
+        ['block-layout-with-links', `${ID}-with-links`],
+      ].forEach(([_, ID]) => {
+        describe(`${_}`, () => {
+          beforeEach(() =>
+            cy.visit(`/iframe.html?globals=theme:${theme}&id=${ID}`),
+          );
+          it('should render the component', () => {
+            cy.get('app-list-page sky-page')
+              .should('exist')
+              .should('be.visible');
+            cy.window().screenshot(`${ID}-${theme}`);
+            cy.window().percySnapshot(`${ID}-${theme}`);
+          });
+        });
       });
     });
   });

diff --git a/apps/e2e/pages-storybook-e2e/src/e2e/page-layout-tabs.component.cy.ts b/apps/e2e/pages-storybook-e2e/src/e2e/page-layout-tabs.component.cy.ts
@@ -5,15 +5,22 @@ const ID = 'tabspagecomponent-tabspage--tabs-page';
 describe(`pages-storybook`, () => {
   E2eVariations.forEachTheme((theme) => {
     describe(`in ${theme} theme`, () => {
-      beforeEach(() =>
-        cy.visit(`/iframe.html?globals=theme:${theme}&id=${ID}`),
-      );
-      it('should render the component', () => {
-        cy.get('app-tabs-page sky-page')
-          .should('exist')
-          .should('be.visible')
-          .screenshot(`${ID}-${theme}`);
-        cy.get('app-tabs-page sky-page').percySnapshot(`${ID}-${theme}`);
+      [
+        ['block-layout', ID],
+        ['block-layout-with-links', `${ID}-with-links`],
+      ].forEach(([_, ID]) => {
+        describe(`${_}`, () => {
+          beforeEach(() =>
+            cy.visit(`/iframe.html?globals=theme:${theme}&id=${ID}`),
+          );
+          it('should render the component', () => {
+            cy.get('app-tabs-page sky-page')
+              .should('exist')
+              .should('be.visible');
+            cy.window().screenshot(`${ID}-${theme}`);
+            cy.window().percySnapshot(`${ID}-${theme}`);
+          });
+        });
       });
     });
   });

diff --git a/apps/e2e/pages-storybook-e2e/src/e2e/tabs-tile-dashboard-page.component.cy.ts b/apps/e2e/pages-storybook-e2e/src/e2e/tabs-tile-dashboard-page.component.cy.ts
@@ -0,0 +1,28 @@
+import { E2eVariations } from '@skyux-sdk/e2e-schematics';
+
+const ID = 'tabs-tile-dashboard-pagecomponent--tabs-tile-dashboard-page';
+
+const SELECTOR_PAGE = 'app-tabs-tile-dashboard-page';
+
+describe(`pages-storybook-tabs-tile-dashboard`, () => {
+  E2eVariations.forEachTheme((theme) => {
+    describe(`in ${theme} theme`, () => {
+      E2eVariations.RESPONSIVE_WIDTHS.forEach((width) => {
+        describe(`at ${width}px`, () => {
+          beforeEach(() => {
+            cy.viewport(width, 960);
+            cy.visit(`/iframe.html?globals=theme:${theme}&id=${ID}`);
+          });
+
+          it('should render the component', () => {
+            cy.get(SELECTOR_PAGE)
+              .should('exist')
+              .should('be.visible')
+              .screenshot(`${ID}-${theme}`);
+            cy.get(SELECTOR_PAGE).percySnapshot(`${ID}-${theme}`);
+          });
+        });
+      });
+    });
+  });
+});
diff --git a/apps/e2e/pages-storybook/src/app/app.module.ts b/apps/e2e/pages-storybook/src/app/app.module.ts
@@ -23,7 +23,10 @@ if (routes.length > 0 && routes.findIndex((r) => r.path === '') === -1) {
   declarations: [AppComponent],
   imports: [
     NoopAnimationsModule,
-    RouterModule.forRoot(routes, { initialNavigation: 'enabledBlocking' }),
+    RouterModule.forRoot(routes, {
+      initialNavigation: 'enabledBlocking',
+      bindToComponentInputs: true,
+    }),
   ],
   bootstrap: [AppComponent],
 })

diff --git a/apps/e2e/pages-storybook/src/app/page/layouts/blocks-page/blocks-page.component.html b/apps/e2e/pages-storybook/src/app/page/layouts/blocks-page/blocks-page.component.html
@@ -23,6 +23,52 @@
     <sky-page-header-actions>
       <button class="sky-btn sky-btn-default">Action one</button>
       <button class="sky-btn sky-btn-default">Action two</button>
+      <sky-dropdown>
+        <sky-dropdown-button>Group action one</sky-dropdown-button>
+        <sky-dropdown-menu>
+          <sky-dropdown-item
+            ><button type="button">
+              Group action item one
+            </button></sky-dropdown-item
+          >
+          <sky-dropdown-item
+            ><button type="button">
+              Group action item two
+            </button></sky-dropdown-item
+          >
+        </sky-dropdown-menu>
+      </sky-dropdown>
+      <button class="sky-btn sky-btn-default">Action six</button>
+      <sky-dropdown>
+        <sky-dropdown-button>Group action two</sky-dropdown-button>
+        <sky-dropdown-menu>
+          <sky-dropdown-item
+            ><button type="button">
+              Group action item one
+            </button></sky-dropdown-item
+          >
+          <sky-dropdown-item
+            ><button type="button">
+              Group action item two
+            </button></sky-dropdown-item
+          >
+        </sky-dropdown-menu>
+      </sky-dropdown>
+      <sky-dropdown>
+        <sky-dropdown-button>Group action three</sky-dropdown-button>
+        <sky-dropdown-menu>
+          <sky-dropdown-item
+            ><button type="button">
+              Group action item one
+            </button></sky-dropdown-item
+          >
+          <sky-dropdown-item
+            ><button type="button">
+              Group action item two
+            </button></sky-dropdown-item
+          >
+        </sky-dropdown-menu>
+      </sky-dropdown>
     </sky-page-header-actions>
     <sky-page-header-avatar>
       <sky-avatar name="Test name"> </sky-avatar>
@@ -46,4 +92,7 @@
       </sky-row>
     </sky-fluid-grid>
   </sky-page-content>
+  @if (showLinks()) {
+    <sky-page-links>Links.</sky-page-links>
+  }
 </sky-page>
diff --git a/apps/e2e/pages-storybook/src/app/page/layouts/blocks-page/blocks-page.component.stories.ts b/apps/e2e/pages-storybook/src/app/page/layouts/blocks-page/blocks-page.component.stories.ts
@@ -1,5 +1,5 @@
-import { moduleMetadata } from '@storybook/angular';
 import type { Meta, StoryObj } from '@storybook/angular';
+import { moduleMetadata } from '@storybook/angular';
 
 import BlocksPageComponent from './blocks-page.component';
 
@@ -16,3 +16,8 @@ export default {
 type Story = StoryObj<BlocksPageComponent>;
 export const BlocksPage: Story = {};
 BlocksPage.args = {};
+
+export const BlocksPageWithLinks: Story = {};
+BlocksPageWithLinks.args = {
+  showLinks: true,
+};
diff --git a/apps/e2e/pages-storybook/src/app/page/layouts/blocks-page/blocks-page.component.ts b/apps/e2e/pages-storybook/src/app/page/layouts/blocks-page/blocks-page.component.ts
@@ -1,9 +1,10 @@
 import { CommonModule } from '@angular/common';
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
 import { SkyAvatarModule } from '@skyux/avatar';
 import { SkyAlertModule, SkyLabelModule } from '@skyux/indicators';
 import { SkyBoxModule, SkyFluidGridModule } from '@skyux/layout';
 import { SkyPageModule } from '@skyux/pages';
+import { SkyDropdownModule } from '@skyux/popovers';
 
 @Component({
   selector: 'app-blocks-page',
@@ -13,11 +14,14 @@ import { SkyPageModule } from '@skyux/pages';
     SkyAlertModule,
     SkyAvatarModule,
     SkyBoxModule,
+    SkyDropdownModule,
     SkyFluidGridModule,
     SkyLabelModule,
     SkyPageModule,
   ],
   templateUrl: './blocks-page.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export default class BlocksPageComponent {}
+export default class BlocksPageComponent {
+  public readonly showLinks = input<boolean>(false);
+}
diff --git a/...p/page/layouts/blocks-tile-dashboard-page/blocks-tile-dashboard-page.component.stories.ts b/...p/page/layouts/blocks-tile-dashboard-page/blocks-tile-dashboard-page.component.stories.ts
@@ -0,0 +1,12 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+
+import BlocksTileDashboardPageComponent from './blocks-tile-dashboard-page.component';
+
+export default {
+  id: 'blocks-tile-dashboard-pagecomponent',
+  title: 'Components/Page/Layouts/Blocks Tile Dashboard',
+  component: BlocksTileDashboardPageComponent,
+} as Meta<BlocksTileDashboardPageComponent>;
+type Story = StoryObj<BlocksTileDashboardPageComponent>;
+export const BlocksTileDashboardPage: Story = {};
+BlocksTileDashboardPage.args = {};