chore(styles, documentation): update styles of btn-link (#4200)

Co-authored-by: Oliver Schürch <[email protected]>

.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`.

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',
       },

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>`;

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>`

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);
+  }
 }