fix(topic-teaser): refactors component topic-teaser, to make it work as expected by design

.changeset/metal-laws-mate.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/web-styles': patch
+---
+
+Refactors topic-teaser styles to work as expected by Design

.changeset/smart-beans-relate.md

@@ -0,0 +1,7 @@
+---
+'@swisspost/intranet-header': patch
+'@swisspost/web-demo': patch
+'@swisspost/web-styles': patch
+---
+
+Includes last 2 safari versions in browserslilstrc and aligns browserslistrc files in all projects

packages/angular-components/projects/intranet-header-showcase/.browserslistrc

@@ -1,16 +1,17 @@
-# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
-# For additional information regarding the format and rule options, please see:
-# https://github.com/browserslist/browserslist#queries
+# Swiss Post Browsersupport
 
-# For the full list of supported browsers by the Angular framework, please see:
-# https://angular.io/guide/browser-support
+# https://web.post.ch/postweb/-/media/Corp/Intranet/Service-Portal/Kommunikation/Digital/Onlineredaktion/Dokumente/Browserunterst%C3%BCtzung.PDF
 
-# You can see what browsers were selected by your queries by running:
-#   npx browserslist
+# This file configures autoprefixer used in the build script
 
-last 1 Chrome version
-last 1 Firefox version
-last 2 Edge major versions
-last 2 Safari major versions
-last 2 iOS major versions
-Firefox ESR
+# Docs: https://github.com/browserslist/browserslist
+
+last 2 Chrome versions
+last 2 Firefox versions
+last 2 Edge versions
+last 2 Safari versions
+last 2 iOS versions
+last 2 ChromeAndroid versions
+last 2 Samsung versions
+> 2%
+not dead

packages/angular-components/projects/swisspost-intranet-header/.browserslistrc

@@ -1,16 +1,17 @@
-# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
-# For additional information regarding the format and rule options, please see:
-# https://github.com/browserslist/browserslist#queries
+# Swiss Post Browsersupport
 
-# For the full list of supported browsers by the Angular framework, please see:
-# https://angular.io/guide/browser-support
+# https://web.post.ch/postweb/-/media/Corp/Intranet/Service-Portal/Kommunikation/Digital/Onlineredaktion/Dokumente/Browserunterst%C3%BCtzung.PDF
 
-# You can see what browsers were selected by your queries by running:
-#   npx browserslist
+# This file configures autoprefixer used in the build script
 
-last 1 Chrome version
-last 1 Firefox version
-last 2 Edge major versions
-last 2 Safari major versions
-last 2 iOS major versions
-Firefox ESR
+# Docs: https://github.com/browserslist/browserslist
+
+last 2 Chrome versions
+last 2 Firefox versions
+last 2 Edge versions
+last 2 Safari versions
+last 2 iOS versions
+last 2 ChromeAndroid versions
+last 2 Samsung versions
+> 2%
+not dead

packages/web-demo/.browserslistrc

@@ -1,13 +1,17 @@
 # Swiss Post Browsersupport
+
 # https://web.post.ch/postweb/-/media/Corp/Intranet/Service-Portal/Kommunikation/Digital/Onlineredaktion/Dokumente/Browserunterst%C3%BCtzung.PDF
 
 # This file configures autoprefixer used in the build script
+
 # Docs: https://github.com/browserslist/browserslist
+
 last 2 Chrome versions
 last 2 Firefox versions
 last 2 Edge versions
+last 2 Safari versions
 last 2 iOS versions
 last 2 ChromeAndroid versions
 last 2 Samsung versions
 > 2%
-not dead
+not dead

packages/web-styles/.browserslistrc

@@ -1,13 +1,17 @@
 # Swiss Post Browsersupport
+
 # https://web.post.ch/postweb/-/media/Corp/Intranet/Service-Portal/Kommunikation/Digital/Onlineredaktion/Dokumente/Browserunterst%C3%BCtzung.PDF
 
 # This file configures autoprefixer used in the build script
+
 # Docs: https://github.com/browserslist/browserslist
+
 last 2 Chrome versions
 last 2 Firefox versions
 last 2 Edge versions
+last 2 Safari versions
 last 2 iOS versions
 last 2 ChromeAndroid versions
 last 2 Samsung versions
 > 2%
-not dead
+not dead

packages/web-styles/src/components/topic-teaser.scss

@@ -1,9 +1,14 @@
 @forward '../variables/options';
 
+@use 'sass:map';
+
 @use '../themes/bootstrap/overrides' as *;
 
 @use '../functions/icons';
 @use '../variables/color';
+@use '../variables/grid';
+@use '../variables/spacing';
+@use '../variables/components/topic-teaser';
 @use '../mixins/size';
 
 .topic-teaser {
@@ -13,72 +18,96 @@
     }
   }
 
+  .topic-teaser-container {
+    @include media-breakpoint-up(xxl) {
+      padding-left: map.get(grid.$grid-container-padding, xxl) * 0.5;
+      padding-right: map.get(grid.$grid-container-padding, xxl) * 0.5;
+    }
+  }
+
   &:not(.topic-teaser-reverse) {
-    > .container {
-      @include media-breakpoint-up(lg) {
-        padding-right: 0;
+    @each $key in topic-teaser.$grid-keys-upper {
+      @include media-breakpoint-only($key) {
+        .container {
+          padding-right: 0;
+        }
       }
     }
 
-    .topic-teaser-container > .row {
-      margin-right: 0;
-    }
+    .topic-teaser-container {
+      @include media-breakpoint-up(xxl) {
+        padding-right: 0;
+        // webkit subpixel-issue fix
+        margin-right: -1px;
+        clip-path: inset(0 1px (map.get(spacing.$size-curve-huge, 'xxl') * -1) 0);
+      }
 
-    .topic-teaser-image-container {
-      padding-right: 0;
+      > .row {
+        justify-content: flex-end;
+      }
     }
 
-    .topic-teaser-content {
-      @include media-breakpoint-up(xxl) {
-        padding-left: 4.5rem;
+    .topic-teaser-image-container {
+      @each $key in topic-teaser.$grid-keys-lower {
+        @include media-breakpoint-only($key) {
+          margin-right: map.get(grid.$grid-container-padding, $key) * -1;
+        }
       }
     }
   }
 }
 
 .topic-teaser-reverse {
-  > .container {
-    @include media-breakpoint-up(lg) {
-      padding-left: 0;
+  @each $key in topic-teaser.$grid-keys-upper {
+    @include media-breakpoint-only($key) {
+      .container {
+        padding-left: 0;
+      }
     }
   }
 
   .topic-teaser-container {
+    @include media-breakpoint-up(xxl) {
+      padding-left: 0;
+    }
+
     > .row {
-      @include media-breakpoint-down(md) {
+      @include media-breakpoint-down(lg) {
         flex-direction: column-reverse;
       }
     }
   }
+
+  .topic-teaser-image-container {
+    @each $key in topic-teaser.$grid-keys-lower {
+      @include media-breakpoint-only($key) {
+        margin-left: map.get(grid.$grid-container-padding, $key) * -1;
+      }
+    }
+  }
 }
 
 .topic-teaser-image-container {
   @include size.responsive-size('huge', 'margin-bottom', '-$value');
-
-  @include media-breakpoint-down(md) {
-    position: relative;
-    left: 50%;
-    padding-left: 0;
-    transform: translateX(calc(8.5px - 50vw));
-  }
 }
 
 .topic-teaser-image {
-  min-width: 100%;
-  min-height: 100%;
   object-fit: cover;
+
+  @each $key, $value in topic-teaser.$topic-teaser-image-ratios {
+    @include media-breakpoint-up($key) {
+      aspect-ratio: $value;
+    }
+  }
 }
 
 .topic-teaser-content {
   display: flex;
-  flex-direction: row;
-
-  @include media-breakpoint-down(rg) {
-    flex-direction: column;
-  }
+  flex-direction: column;
 
-  @include media-breakpoint-up(xxl) {
-    padding: 0 calc(3.5rem + 15px) 3.5rem calc(3.5rem - 15px);
+  @include media-breakpoint-up(rg) {
+    flex-direction: row;
+    gap: var(--gutter-x);
   }
 }
 

packages/web-styles/src/variables/components/_topic-teaser.scss

@@ -0,0 +1,12 @@
+$grid-keys-lower: (xs, sm, rg, md);
+$grid-keys-upper: (lg, xl);
+
+$topic-teaser-image-ratios: (
+  xs: 1 / 0.75,
+  sm: 1 / 0.75,
+  rg: 1 / 0.75,
+  md: 1 / 0.75,
+  lg: auto,
+  xl: auto,
+  xxl: auto,
+);