refactor!: switch stencil hydrated flag from class to attribute

.changeset/quick-eagles-watch.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-documentation': patch
+---
+
+Removed class `hydrated` in stories because from now on we're using the attribute `data-hydrated` to make components visible after hydration.

.changeset/wise-spies-shave.md

@@ -0,0 +1,6 @@
+---
+'@swisspost/internet-header': major
+'@swisspost/design-system-components': major
+---
+
+Switched stencil hydrated flag from class (`hydrated`) to attribute (`data-hydrated`).

packages/components/cypress/support/commands.ts

@@ -57,7 +57,7 @@ Cypress.Commands.add('getComponents', (id: string, story: string, ...components:
 
   components.forEach(component => {
     const alias = component.replace(/^post-/, '');
-    cy.get(`post-${alias}.hydrated`, { timeout: 30000 }).as(alias);
+    cy.get(`post-${alias}[data-hydrated]`, { timeout: 30000 }).as(alias);
   });
 
   cy.injectAxe();
@@ -67,7 +67,7 @@ Cypress.Commands.add('getSnapshots', (story: string) => {
   cy.visit(`/iframe.html?id=snapshots--${story}`);
 
   const alias = story.replace(/^post-/, '');
-  cy.get(`post-${alias}.hydrated`, { timeout: 30000 }).as(alias);
+  cy.get(`post-${alias}[data-hydrated]`, { timeout: 30000 }).as(alias);
 
   cy.injectAxe();
 });

packages/components/stencil.config.ts

@@ -10,6 +10,10 @@ export const config: Config = {
   buildDist: true,
   sourceMap: false,
   validatePrimaryPackageOutputTarget: true,
+  hydratedFlag: {
+    name: 'data-hydrated',
+    selector: 'attribute',
+  },
   outputTargets: [
     {
       type: 'dist',

packages/documentation/cypress/e2e/components/header.cy.ts

@@ -2,7 +2,7 @@ describe('Internet-Header', () => {
   describe('Accessibility', () => {
     beforeEach(() => {
       cy.visit('/iframe.html?id=ebb11274-091b-4cb7-9a3f-3e0451c9a865--default');
-      cy.get('swisspost-internet-header.hydrated', { timeout: 30000 }).should('be.visible');
+      cy.get('swisspost-internet-header[data-hydrated]', { timeout: 30000 }).should('be.visible');
       cy.injectAxe();
     });
 

packages/documentation/cypress/snapshots/components/accordion.snapshot.ts

@@ -1,7 +1,7 @@
 describe('Accordion', () => {
   it('default', () => {
     cy.visit('/iframe.html?id=snapshots--accordion');
-    cy.get('post-accordion.hydrated', { timeout: 30000 }).should('be.visible');
+    cy.get('post-accordion[data-hydrated]', { timeout: 30000 }).should('be.visible');
     cy.percySnapshot('Accordions', { widths: [1440] });
   });
 });

packages/documentation/cypress/snapshots/components/card-control.snapshot.ts

@@ -7,7 +7,7 @@ describe('CardControl', () => {
 
   it('post-card-control', () => {
     cy.visit('/iframe.html?id=snapshots--post-card-control');
-    cy.get('post-card-control.hydrated', { timeout: 30000 }).should('be.visible');
+    cy.get('post-card-control[data-hydrated]', { timeout: 30000 }).should('be.visible');
     cy.percySnapshot('Card Controls (Web Component)', { widths: [1440] });
   });
 });

packages/documentation/cypress/snapshots/components/collapsible.snapshot.ts

@@ -1,7 +1,7 @@
 describe('Collapsible', () => {
   it('default', () => {
     cy.visit('/iframe.html?id=snapshots--collapsible');
-    cy.get('post-collapsible.hydrated', { timeout: 30000 }).should('be.visible');
+    cy.get('post-collapsible[data-hydrated]', { timeout: 30000 }).should('be.visible');
     cy.wait(500); // Wait for collapse animation to run
     cy.percySnapshot('Collapsible');
   });

packages/documentation/cypress/snapshots/components/header.snapshot.ts

@@ -1,7 +1,7 @@
 describe('Header', () => {
   it('default', () => {
     cy.visit('/iframe.html?id=ebb11274-091b-4cb7-9a3f-3e0451c9a865--default');
-    cy.get('swisspost-internet-header.hydrated.header-loaded', { timeout: 30000 }).should(
+    cy.get('swisspost-internet-header[data-hydrated].header-loaded', { timeout: 30000 }).should(
       'be.visible',
     );
     cy.percySnapshot('Header', { widths: [1440] });

packages/documentation/cypress/snapshots/components/logo.snapshot.ts

@@ -1,7 +1,7 @@
 describe('Logo', () => {
   it('default', () => {
     cy.visit('/iframe.html?id=snapshots--post-logo');
-    cy.get('post-logo.hydrated', { timeout: 30000 }).should('be.visible');
+    cy.get('post-logo[data-hydrated]', { timeout: 30000 }).should('be.visible');
     cy.percySnapshot('Logos', { widths: [1440] });
   });
 });

packages/documentation/cypress/snapshots/components/tabs.snapshot.ts

@@ -1,7 +1,7 @@
 describe('Tabs', () => {
   it('default', () => {
     cy.visit('/iframe.html?id=snapshots--tabs');
-    cy.get('post-tab-header.hydrated', { timeout: 30000 }).should('be.visible');
+    cy.get('post-tab-header[data-hydrated]', { timeout: 30000 }).should('be.visible');
     cy.percySnapshot('Tabs', { widths: [1440] });
   });
 });

packages/documentation/src/stories/components/forms/card-control/web-component/card-control.stories.ts

@@ -4,7 +4,6 @@ import { MetaComponent } from '@root/types';
 import { html, nothing } from 'lit';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { parse } from '@/utils/sass-export';
-import './card-control.styles.scss';
 import scss from '../card-control.module.scss';
 import { coloredBackground } from '@/shared/decorators/dark-background';
 

packages/documentation/src/stories/components/popover/popover.stories.ts

@@ -95,7 +95,7 @@ function render(args: Args) {
       </button>
     </div>
     <post-popover
-      class="hydrated bg-${args.backgroundColor}"
+      class="bg-${args.backgroundColor}"
       id="${args.id}"
       placement="${args.placement}"
       ?arrow="${args.arrow}"

packages/documentation/src/stories/components/tooltip/tooltip.stories.ts

@@ -86,7 +86,7 @@ function render(args: Args) {
     <button class="btn btn-secondary btn-large" data-tooltip-target="${args.id}">Button</button>
     <post-tooltip
       id="${args.id}"
-      class="hydrated bg-${args.backgroundColor}"
+      class="bg-${args.backgroundColor}"
       placement="${ifDefined(args.placement)}"
       arrow="${ifDefined(args.arrow)}"
       delayed="${ifDefined(args.delayed)}"
@@ -108,7 +108,6 @@ export const NonFocusable: StoryObj = {
       <cite data-tooltip-target="${args.id}">This is a cite element with a tooltip on it.</cite>
       <post-tooltip
         id="${args.id}"
-        class="hydrated"
         background-color=" ${ifDefined(args.backgroundColor)}"
         placement="${ifDefined(args.placement)}"
       >
@@ -132,7 +131,7 @@ export const Multiple: StoryObj = {
       </button>
       <post-tooltip
         id="${args.id}"
-        class="hydrated bg-${args.background}"
+        class="bg-${args.background}"
         placement="${ifDefined(args.placement)}"
       >
         I'm the same, no matter what

packages/internet-header/cypress/e2e/header.cy.ts

@@ -9,7 +9,7 @@ describe('header', () => {
 
   context('initial state', () => {
     it('renders', () => {
-      cy.get('swisspost-internet-header', { timeout: 30000 }).should('have.class', 'hydrated');
+      cy.get('swisspost-internet-header', { timeout: 30000 }).should('have.attr', 'data-hydrated');
     });
 
     it(`has nav item 'Briefe versenden' selected`, () => {

packages/internet-header/cypress/e2e/login.cy.ts

@@ -36,7 +36,7 @@ describe('login', () => {
         cy.changeArg('language', 'de');
 
         // Assert the header is hydrated
-        cy.get('swisspost-internet-header').should('have.class', 'hydrated');
+        cy.get('swisspost-internet-header').should('have.attr', 'data-hydrated');
 
         // With the modified configuration the login widget should be removed from the DOM
         cy.get('post-klp-login-widget').should('not.exist');
@@ -53,7 +53,7 @@ describe('login', () => {
         prepare(HEADER, 'Default', { config });
         cy.changeArg('language', 'de');
         console.warn(config.de?.header.loginWidgetOptions);
-        cy.get('swisspost-internet-header').should('have.class', 'hydrated');
+        cy.get('swisspost-internet-header').should('have.attr', 'data-hydrated');
         cy.get('a.login-button').should('exist').and('be.visible');
         cy.get('.klp-widget-anonymous').should('not.exist');
       });
@@ -66,7 +66,7 @@ describe('login', () => {
         config.de!.header.isLoginWidgetHidden = false;
         prepare(HEADER, 'Default', { config });
         cy.changeArg('language', 'de');
-        cy.get('swisspost-internet-header').should('have.class', 'hydrated');
+        cy.get('swisspost-internet-header').should('have.attr', 'data-hydrated');
         cy.get('.klp-widget-anonymous').should('exist');
       });
     });

packages/internet-header/cypress/e2e/meta-navigation.cy.ts

@@ -102,7 +102,7 @@ describe('meta-navigation', () => {
         cy.changeArg('language', 'de');
 
         // Assert the header is hydrated
-        cy.get('swisspost-internet-header').should('have.class', 'hydrated');
+        cy.get('swisspost-internet-header').should('have.attr', 'data-hydrated');
 
         // With the modified configuration the meta navigation should be removed from the DOM
         cy.get('post-meta-navigation').should('not.exist');
@@ -128,7 +128,7 @@ describe('meta-navigation', () => {
         cy.changeArg('language', 'de');
 
         // Assert the header is hydrated
-        cy.get('swisspost-internet-header').should('have.class', 'hydrated');
+        cy.get('swisspost-internet-header').should('have.attr', 'data-hydrated');
 
         // With the modified configuration the meta navigation should be removed from the DOM
         cy.get('post-meta-navigation').should('not.exist');

packages/internet-header/stencil.config.ts

@@ -7,6 +7,10 @@ export const config: Config = {
   globalStyle: 'src/root.scss',
   buildEs5: 'prod',
   sourceMap: false,
+  hydratedFlag: {
+    name: 'data-hydrated',
+    selector: 'attribute',
+  },
   bundles: [
     {
       components: ['swisspost-internet-header'],