chore(styles): set .card class directly on post-linkarea

.changeset/major-towns-glow.md

@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-styles': major
+'@swisspost/design-system-documentation': patch
+---
+
+Updated interactive cards to have the `.card` class directly set on the `post-linkarea` component, reducing unnecessary DOM nesting.

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

@@ -132,27 +132,27 @@ function getCardImage() {
   return html` <img src="https://picsum.photos/id/38/500/300" alt="" /> `;
 }
 
-function renderCard(args: Args) {
+function renderCardContent(args: Args) {
   const { showImage, imagePosition } = args;
 
   return html`
-    <div class="card">
-      ${showImage && imagePosition === 'top' ? getCardImage() : nothing} ${getCardContent(args)}
-      ${showImage && imagePosition === 'bottom' ? getCardImage() : nothing}
-    </div>
+    ${showImage && imagePosition === 'top' ? getCardImage() : nothing} ${getCardContent(args)}
+    ${showImage && imagePosition === 'bottom' ? getCardImage() : nothing}
   `;
 }
 
-function renderCardWithInteractiveContainer(args: Args) {
-  return html`<post-linkarea>${renderCard(args)}</post-linkarea>`;
+function renderNoninteractiveCard(args: Args) {
+  return html` <div class="card">${renderCardContent(args)}</div> `;
+}
+
+function renderInteractiveCard(args: Args) {
+  return html`<post-linkarea class="card">${renderCardContent(args)}</post-linkarea>`;
 }
 
 const renderSimpleInteractiveCard = html`
-  <post-linkarea>
-    <div class="card">
-      <div class="card-body">
-        <p><a href="http://google.com">Interactive card</a></p>
-      </div>
+  <post-linkarea class="card">
+    <div class="card-body">
+      <p><a href="http://google.com">Interactive card</a></p>
     </div>
   </post-linkarea>
 `;
@@ -163,7 +163,7 @@ type Story = StoryObj;
 export const Default: Story = {
   decorators: [gridContainer],
   render: (args: Args) =>
-    html`${args.action === 'button' ? renderCardWithInteractiveContainer(args) : renderCard(args)}`,
+    html`${args.action === 'button' ? renderInteractiveCard(args) : renderNoninteractiveCard(args)}`,
 };
 
 export const Foundation: Story = {

packages/styles/src/components/card.scss

@@ -10,12 +10,6 @@
 
 tokens.$default-map: components.$post-cards;
 
-post-linkarea:has(> .card) {
-  border-radius: tokens.get('card-border-radius');
-  display: block;
-  @include utilities-mx.focus-style();
-}
-
 .card {
   display: flex;
   flex-direction: column;
@@ -27,7 +21,7 @@ post-linkarea:has(> .card) {
   @include color-scheme.set(tokens.get('card-scheme'));
 
   // Add an elevation only if card is interactive
-  post-linkarea > & {
+  &:is(post-linkarea) {
     border: 0;
     box-shadow: tokens.get('card-interactive-elevation');