From 2d8248ea48a0fe1f27860f38c669596adb24d4e6 Mon Sep 17 00:00:00 2001
From: Lea <lea.gardavaud@post.ch>
Date: Thu, 12 Dec 2024 16:18:48 +0100
Subject: [PATCH] chore(styles, documentation): update styles of btn-link
 (#4200)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Oliver Schürch <oliver.schuerch@post.ch>
---
 .changeset/twenty-chairs-kick.md              |  6 +++++
 .../components/button/button.stories.ts       |  5 ++--
 .../web-component/card-control.stories.ts     |  4 +++-
 .../form-footer/form-footer.stories.ts        |  2 +-
 packages/styles/src/components/button.scss    | 23 ++++++++++++++-----
 5 files changed, 30 insertions(+), 10 deletions(-)
 create mode 100644 .changeset/twenty-chairs-kick.md

diff --git a/.changeset/twenty-chairs-kick.md b/.changeset/twenty-chairs-kick.md
new file mode 100644
index 0000000000..751cef6c67
--- /dev/null
+++ b/.changeset/twenty-chairs-kick.md
@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-documentation': minor
+'@swisspost/design-system-styles': minor
+---
+
+Updated `.btn-link` to look like a regular link and old `.btn-link` is now `.btn-tertiary .px-0`.
diff --git a/packages/documentation/src/stories/components/button/button.stories.ts b/packages/documentation/src/stories/components/button/button.stories.ts
index 70c266ea5f..f8d2ba788e 100644
--- a/packages/documentation/src/stories/components/button/button.stories.ts
+++ b/packages/documentation/src/stories/components/button/button.stories.ts
@@ -86,10 +86,11 @@ const meta: MetaComponent = {
           'btn-primary': 'Primary',
           'btn-secondary': 'Secondary',
           'btn-tertiary': 'Tertiary',
-          'btn-link': 'Link (no padding)',
+          'btn-tertiary px-0': 'Tertiary (no padding)',
+          'btn-link': 'Link',
         },
       },
-      options: ['btn-primary', 'btn-secondary', 'btn-tertiary', 'btn-link'],
+      options: ['btn-primary', 'btn-secondary', 'btn-tertiary', 'btn-tertiary px-0', 'btn-link'],
       table: {
         category: 'General',
       },
diff --git a/packages/documentation/src/stories/components/card-control/web-component/card-control.stories.ts b/packages/documentation/src/stories/components/card-control/web-component/card-control.stories.ts
index a0d9cf6994..2114493b81 100644
--- a/packages/documentation/src/stories/components/card-control/web-component/card-control.stories.ts
+++ b/packages/documentation/src/stories/components/card-control/web-component/card-control.stories.ts
@@ -310,7 +310,9 @@ export const FormIntegration: Story = {
         ${args.radioValidity === 'false' ? invalidFeedback : nothing}
       </fieldset>
       <div class="mt-16 d-flex gap-16 justify-content-end">
-        <button type="reset" class="btn btn-link"><post-icon name="2042"></post-icon>Reset</button>
+        <button type="reset" class="btn btn-tertiary px-0">
+          <post-icon name="2042"></post-icon>Reset
+        </button>
         <button type="submit" class="btn btn-primary"><span>Submit</span></button>
       </div>
     </form>`;
diff --git a/packages/documentation/src/stories/components/form-footer/form-footer.stories.ts b/packages/documentation/src/stories/components/form-footer/form-footer.stories.ts
index 4d358a5bd1..c7105939c0 100644
--- a/packages/documentation/src/stories/components/form-footer/form-footer.stories.ts
+++ b/packages/documentation/src/stories/components/form-footer/form-footer.stories.ts
@@ -134,7 +134,7 @@ export function render(args: Args) {
         ? html` <div class="form-footer-primary-actions">${primaryButton} ${secondaryButton}</div> `
         : null}
       ${args.showTertiaryButton
-        ? html`<button class="btn btn-link">
+        ? html`<button class="btn btn-tertiary px-0">
             <post-icon aria-hidden="true" name="${args.tertiaryButtonIcon}"></post-icon
             >${args.tertiaryButtonText}
           </button>`
diff --git a/packages/styles/src/components/button.scss b/packages/styles/src/components/button.scss
index d2560ce8d2..0eaed65339 100644
--- a/packages/styles/src/components/button.scss
+++ b/packages/styles/src/components/button.scss
@@ -19,6 +19,7 @@
 @use './../placeholders/button' as button-ph;
 @use '../functions/tokens';
 @use '../tokens/components';
+@use '../tokens/elements';
 
 tokens.$default-map: components.$post-button;
 
@@ -39,9 +40,13 @@ tokens.$default-map: components.$post-button;
   color: var(--post-gray-80);
   font-family: inherit;
   font-weight: tokens.get('button-label-font-weight');
-  text-decoration: none !important; // For <a> tags, !important for hover
+  text-decoration: none;
   white-space: nowrap; // Long content should never break in buttons
 
+  &:hover {
+    text-decoration: none;
+  }
+
   @include button-mx.button-size();
 
   &:disabled {
@@ -88,8 +93,6 @@ tokens.$default-map: components.$post-button;
   }
 }
 
-// Tertiary
-.btn-link,
 .btn-tertiary {
   // Styles  to improve accessibility in high contrast mode
   @include utilities.high-contrast-mode() {
@@ -105,8 +108,16 @@ tokens.$default-map: components.$post-button;
   }
 }
 
-// Tertiary with no padding (overrides the padding defined by the sizing classes above)
 .btn-link {
-  padding-inline-start: 0;
-  padding-inline-end: 0;
+  text-decoration: tokens.get('link-decoration', elements.$post-link);
+  border: 0 none;
+  border-radius: tokens.get('link-border-radius', elements.$post-link);
+  min-height: 0;
+  font-size: inherit;
+  font-weight: inherit;
+  padding: 0;
+
+  &:hover {
+    color: tokens.get('link-hover-fg', elements.$post-link);
+  }
 }