fix(components): update card-control grid template and column behavio…

…ur (#3099)
swisspost · May 22, 2024 · 898b25a · 898b25a
1 parent c84c0a0
commit 898b25a
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 17 deletions.
diff --git a/.changeset/pink-vans-drop.md b/.changeset/pink-vans-drop.md
@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-components': patch
+'@swisspost/design-system-styles': patch
+---
+
+Fixed grid-area behaviour in card-control component, if used without any icon.
diff --git a/packages/components/cypress/e2e/card-control.cy.ts b/packages/components/cypress/e2e/card-control.cy.ts
@@ -11,8 +11,6 @@ describe('Card-Control', () => {
       cy.get('@card-control').find('.card-control').as('wrapper');
       cy.get('@card-control').find('input.card-control--input').as('input');
       cy.get('@card-control').find('label.card-control--label').as('label');
-      cy.get('@card-control').find('.card-control--icon').as('icon');
-      cy.get('@card-control').find('.card-control--icon slot[name="icon"]').as('slotIcon');
     });
 
     it('should have no console errors', () => {
@@ -26,8 +24,8 @@ describe('Card-Control', () => {
 
       cy.get('@label').should('exist');
 
-      cy.get('@icon').should('exist');
-      cy.get('@slotIcon').should('exist');
+      cy.get('@card-control').find('.card-control--icon').should('not.exist');
+      cy.get('@card-control').find('.card-control--icon slot[name="icon"]').should('not.exist');
     });
 
     it('should have mandatory attributes', () => {
@@ -151,15 +149,19 @@ describe('Card-Control', () => {
     });
 
     it('should set icon "name" attr according to "icon" prop', () => {
-      cy.get('@slotIcon').find('post-icon').should('not.exist');
-      cy.get('@card-control').invoke('attr', 'icon', '1000');
-      cy.get('@slotIcon')
-        .find('post-icon')
+      cy.get('@card-control')
+        .find('.card-control--icon slot[name="icon"] post-icon')
+        .should('not.exist');
+      cy.get('@card-control')
+        .invoke('attr', 'icon', '1000')
+        .find('.card-control--icon slot[name="icon"] post-icon')
         .should('exist')
         .find('[style*="/1000.svg"]')
         .should('exist');
-      cy.get('@card-control').invoke('removeAttr', 'icon');
-      cy.get('@slotIcon').find('post-icon').should('not.exist');
+      cy.get('@card-control')
+        .invoke('removeAttr', 'icon')
+        .find('.card-control--icon slot[name="icon"] post-icon')
+        .should('not.exist');
     });
   });
 
@@ -306,8 +308,6 @@ describe('Card-Control', () => {
       cy.get('@card-control').find('.card-control').as('wrapper');
       cy.get('@card-control').find('input.card-control--input').as('input');
       cy.get('@card-control').find('label.card-control--label').as('label');
-      cy.get('@card-control').find('.card-control--icon').as('icon');
-      cy.get('@card-control').find('.card-control--icon slot[name="icon"]').as('slotIcon');
     });
     it('should update surrounding form when toggled', () => {
       cy.get('@form').then($form => {

diff --git a/packages/components/src/components/post-card-control/post-card-control.scss b/packages/components/src/components/post-card-control/post-card-control.scss
@@ -29,7 +29,7 @@
 
   flex-basis: 100%;
   display: grid;
-  grid-template: 'input label icon' 'input content icon' / min-content auto min-content;
+  grid-template: 'input label icon' 'input content content' / min-content auto min-content;
   gap: 0 post.$size-mini;
   margin: 0;
   padding: post.$size-regular;
@@ -68,6 +68,10 @@
     color: inherit !important;
     pointer-events: none;
     transition: none;
+
+    &:not(:has(+ .card-control--icon)) {
+      grid-area: 1 / label / 1 / icon;
+    }
   }
 
   .card-control--description {

diff --git a/packages/components/src/components/post-card-control/post-card-control.tsx b/packages/components/src/components/post-card-control/post-card-control.tsx
@@ -61,6 +61,7 @@ export class PostCardControl {
   private control: HTMLInputElement;
   private controlId = `PostCardControl_${cardControlIds++}`;
   private initialChecked: boolean;
+  private hasIcon: boolean;
 
   @Element() host: HTMLPostCardControlElement;
 
@@ -350,6 +351,10 @@ export class PostCardControl {
     this.initialChecked = this.checked;
   }
 
+  componentWillRender() {
+    this.hasIcon = Boolean(this.host.querySelector('[slot="icon"]') || this.icon);
+  }
+
   render() {
     return (
       <Host data-version={version} onClick={this.cardClickHandler}>
@@ -395,9 +400,11 @@ export class PostCardControl {
             ) : null}
           </label>
 
-          <div class="card-control--icon">
-            <slot name="icon">{this.icon ? <post-icon name={this.icon}></post-icon> : null}</slot>
-          </div>
+          {this.hasIcon ? (
+            <div class="card-control--icon">
+              <slot name="icon">{this.icon ? <post-icon name={this.icon}></post-icon> : null}</slot>
+            </div>
+          ) : null}
 
           <div id={`${this.controlId}_content`} class="card-control--content">
             <slot></slot>

diff --git a/packages/styles/src/components/card-control.scss b/packages/styles/src/components/card-control.scss
@@ -28,7 +28,7 @@ fieldset {
   --post-card-control-input-bg: #{color.$white};
 
   display: grid;
-  grid-template: 'input label icon' 'input content icon' / min-content auto min-content;
+  grid-template: 'input label icon' 'input content content' / min-content auto min-content;
   gap: 0 spacing.$size-mini;
   position: relative;
   padding: spacing.$size-regular;
@@ -81,6 +81,10 @@ fieldset {
       position: relative;
       z-index: 2;
     }
+
+    &:not(:has(+ post-icon)) {
+      grid-area: 1 / label / 1 / icon;
+    }
   }
 
   .card-control--content {