feat(components): datepicker

packages/components-angular/projects/consumer-app/src/app/routes/home/home.component.html

@@ -43,6 +43,22 @@ <h2>Post Collapsible</h2>
   </post-collapsible>
 </div>
 
+<div class="my-24">
+  <h2>Post Datepicker</h2>
+  <post-datepicker
+    labelToggleCalendar="Open calendar"
+    labelNextDecade="Next decade"
+    labelNextMonth="Next month"
+    labelNextYear="Next year"
+    labelPreviousDecade="Previous decade"
+    labelPreviousMonth="Previous month"
+    labelPreviousYear="Previous year"
+    labelSwitchYear="Switch to year view"
+  >
+    <input type="date" />
+  </post-datepicker>
+</div>
+
 <div class="my-24">
   <h2>Post Icon</h2>
   <post-icon name="1001"></post-icon>
@@ -55,9 +71,7 @@ <h2>Post Linkarea</h2>
       <div class="card-body">
         <h5>Titulum</h5>
         <p>Contentus momentus vero siteos et accusam iretea et justo.</p>
-        <a class="card-link" href="#test">
-          Ligilo teksto
-        </a>
+        <a class="card-link" href="#test"> Ligilo teksto </a>
       </div>
     </div>
   </post-linkarea>
@@ -145,9 +159,7 @@ <h2>Post Tabs - Navigation Variant</h2>
 <div class="my-24">
   <h2>Post Tooltip</h2>
   <post-tooltip-trigger for="tooltip-one">
-    <button class="btn btn-secondary btn-large" aria-describedby="tooltip-one">
-      Button
-    </button>
+    <button class="btn btn-secondary btn-large" aria-describedby="tooltip-one">Button</button>
   </post-tooltip-trigger>
   <post-tooltip id="tooltip-one" class="palette palette-accent" placement="top">
     Hi there 👋

packages/components-angular/projects/consumer-app/src/app/routes/home/home.component.ts

@@ -7,6 +7,7 @@ import {
   PostCardControl,
   PostCollapsible,
   PostCollapsibleTrigger,
+  PostDatepicker,
   PostIcon,
   PostLinkarea,
   PostMenu,
@@ -38,6 +39,7 @@ import {
     PostCardControl,
     PostCollapsible,
     PostCollapsibleTrigger,
+    PostDatepicker,
     PostIcon,
     PostLinkarea,
     PostMenu,

packages/components/cypress/e2e/datepicker.cy.ts

@@ -0,0 +1,176 @@
+
+const DATEPICKER_ID = 'eb77cd02-48b2-42e1-a3e4-cd8a973d431e';
+
+describe('datepicker', () => {
+  describe('default', () => {
+    beforeEach(() => {
+      cy.getComponent('datepicker', DATEPICKER_ID);
+      cy.get('@datepicker').find('input').as('input');
+    });
+
+    it('should render', () => {
+      cy.get('@datepicker').should('exist');
+      cy.get('@input').should('exist');
+    });
+
+    it('should open calendar popover on button click', () => {
+      cy.get('@datepicker')
+        .shadow()
+        .find('button[aria-haspopup="true"]')
+        .click()
+        .wait(500);
+      cy.get('.popover-content').should('be.visible');
+    });
+
+    it('should have correct order in navigation', () => {
+      cy.get('@datepicker')
+        .shadow()
+        .find('button[aria-haspopup="true"]')
+        .click()
+        .wait(500);
+
+      cy.get('@datepicker').find('.air-datepicker-nav > div:first-child').should('have.class', 'air-datepicker-nav--title');
+      cy.get('@datepicker').find('.air-datepicker-nav > div:nth-child(2)').should('have.attr', 'data-action', 'prev');
+      cy.get('@datepicker').find('.air-datepicker-nav > div:nth-child(3)').should('have.attr', 'data-action', 'next');
+    });
+
+    it('should update input value when selecting a day in the datepicker', () => {
+      cy.get('@datepicker')
+        .shadow()
+        .find('button[aria-haspopup="true"]')
+        .click()
+        .wait(500);
+
+      cy.get('@datepicker')
+        .shadow()
+        .find('.datepicker-container')
+        .find('.air-datepicker-cell.-day-:not(.-other-month-)')
+        .contains('15')
+        .as('selectedCell')
+        .click();
+
+      cy.get('@selectedCell')
+        .invoke('attr', 'data-iso-date')
+        .then((isoDate) => {
+          cy.get('@input').should('have.value', isoDate);
+        });
+    });
+
+    it('should open year view when clicking on title', () => {
+      cy.get('@datepicker')
+        .shadow()
+        .find('button[aria-haspopup="true"]')
+        .click()
+        .wait(500);
+
+      cy.get('@datepicker')
+        .shadow()
+        .find('.datepicker-container')
+        .find('.air-datepicker-nav--title button')
+        .click();
+
+      cy.get('@datepicker')
+        .find('.air-datepicker-body.-years-')
+        .should('exist').should('not.have.class', '-hidden-');
+
+      cy.get('@datepicker')
+        .find('.air-datepicker-body.-days-')
+        .should('have.class', '-hidden-');
+    });
+
+    it('should return focus to the input on Escape', () => {
+      cy.get('@datepicker')
+        .shadow()
+        .find('button[aria-haspopup="true"]')
+        .click();
+
+      cy.get('@datepicker')
+        .shadow()
+        .find('.datepicker-container .air-datepicker-cell.-day-:not(.-other-month-)')
+        .first()
+        .focus()
+        .trigger('keydown', { key: 'Escape' })
+        .wait(500);
+
+      cy.focused().should('have.prop', 'tagName', 'INPUT');
+    });
+
+    ['label-next-month', 'label-next-year', 'label-next-decade', 'label-previous-month', 'label-previous-year', 'label-previous-decade', 'label-switch-year', 'label-toggle-calendar'].forEach((label) => {
+      it('should break if missing ' + label, () => {
+        cy.window().then(win => {
+          cy.spy(win.console, 'error').as('consoleError');
+        });
+        cy.get('@datepicker').invoke('attr', label, null);
+        cy.get('@consoleError').should('be.called');
+      });
+    });
+
+    it('should have correct ARIA roles and labels', () => {
+      cy.get('@datepicker')
+        .shadow()
+        .find('button[aria-haspopup="true"]')
+        .click();
+
+      cy.get('@datepicker')
+        .shadow()
+        .find('.datepicker-container [role="grid"]')
+        .should('exist');
+
+      cy.get('@datepicker')
+        .shadow()
+        .find('.datepicker-container .air-datepicker-nav--title button')
+        .should('have.attr', 'aria-label', 'Switch to year view');
+
+      cy.get('@datepicker')
+        .shadow()
+        .find('.datepicker-container [data-action="next"] button')
+        .should('have.attr', 'aria-label', 'Next month');
+
+      cy.get('@datepicker')
+        .shadow()
+        .find('.datepicker-container [data-action="prev"] button')
+        .should('have.attr', 'aria-label', 'Previous month');
+
+      cy.get('@datepicker')
+        .shadow()
+        .find('.datepicker-container .air-datepicker-cell')
+        .first()
+        .should('have.attr', 'role', 'gridcell');
+
+    });
+  });
+
+  describe('inline', () => {
+    beforeEach(() => {
+      cy.getComponent('datepicker', DATEPICKER_ID, 'inline');
+    });
+
+    it('should render', () => {
+      cy.get('@datepicker').should('exist');
+      cy.get('@datepicker')
+        .shadow()
+        .find('.datepicker-container')
+        .should('exist');
+    });
+  });
+
+  describe('inline range', () => {
+    beforeEach(() => {
+      cy.getComponent('datepicker', DATEPICKER_ID, 'inline-range');
+    });
+
+    it('should render', () => {
+      cy.get('@datepicker').should('exist');
+    });
+  });
+
+  describe('range', () => {
+    beforeEach(() => {
+      cy.getComponent('datepicker', DATEPICKER_ID, 'range');
+    });
+
+    it('should render', () => {
+      cy.get('@datepicker').should('exist');
+    });
+  });
+});

packages/components/package.json

@@ -92,6 +92,7 @@
     "@stencil/core": "4.35.0",
     "@swisspost/design-system-icons": "workspace:10.0.0-next.55",
     "@swisspost/design-system-styles": "workspace:10.0.0-next.55",
+    "air-datepicker": "3.6.0",
     "ally.js": "1.4.1",
     "long-press-event": "2.5.0",
     "nanoid": "5.1.6"