Add a "bold" link skin

https://overheid.vlaanderen.be/webuniversum/v3/documentation/atoms/vl-ui-link

Author: Windvis

addon/components/au-button.gts

@@ -9,6 +9,7 @@ const SKINS = [
   'naked',
   'link',
   'link-secondary',
+  'link-bold',
 ] as const;
 
 export interface AuButtonSignature {

addon/components/au-link-external.gts

@@ -4,6 +4,7 @@ import AuIcon, { type AuIconSignature } from './au-icon';
 const SKIN_CLASSES = {
   primary: 'au-c-link',
   secondary: 'au-c-link au-c-link--secondary',
+  bold: 'au-c-link au-c-link--bold',
   button: 'au-c-button au-c-button--primary',
   'button-secondary': 'au-c-button au-c-button--secondary',
   'button-naked': 'au-c-button au-c-button--naked',
@@ -18,6 +19,7 @@ export interface AuLinkExternalSignature {
     skin?:
       | 'primary'
       | 'secondary'
+      | 'bold'
       | 'button'
       | 'button-secondary'
       | 'button-naked';

addon/components/au-link.gts

@@ -6,6 +6,7 @@ import linkToModels from '../private/helpers/link-to-models';
 const SKIN_CLASSES = {
   primary: 'au-c-link',
   secondary: 'au-c-link au-c-link--secondary',
+  bold: 'au-c-link au-c-link--bold',
   button: 'au-c-button au-c-button--primary',
   'button-secondary': 'au-c-button au-c-button--secondary',
   'button-naked': 'au-c-button au-c-button--naked',
@@ -17,6 +18,7 @@ export interface AuLinkSignature {
     skin?:
       | 'primary'
       | 'secondary'
+      | 'bold'
       | 'button'
       | 'button-secondary'
       | 'button-naked';

stories/5-components/Buttons/AuButton.stories.js

@@ -7,7 +7,7 @@ export default {
     text: { control: 'text', description: '' },
     skin: {
       control: 'select',
-      options: ['primary', 'secondary', 'naked', 'link', 'link-secondary'],
+      options: ['primary', 'secondary', 'naked', 'link', 'link-bold' ,'link-secondary'],
       description: 'Defines the style of the button',
     },
     size: {
@@ -136,3 +136,18 @@ SecondaryLink.args = {
   disabled: false,
   loading: false,
 };
+
+export const BoldLink = Template.bind({});
+BoldLink.args = {
+  text: 'Bold link',
+  skin: 'link-bold',
+  size: '',
+  icon: '',
+  iconAlignment: 'left',
+  hideText: false,
+  width: '',
+  wrap: '',
+  alert: false,
+  disabled: false,
+  loading: false,
+};

stories/5-components/Links/AuLink.stories.js

@@ -14,6 +14,7 @@ export default {
       options: [
         'primary',
         'secondary',
+        'bold',
         'button',
         'button-secondary',
         'button-naked',
@@ -98,6 +99,21 @@ Secondary.parameters = {
   chromatic: { disableSnapshot: true },
 };
 
+export const Bold = Template.bind({});
+Bold.args = {
+  text: 'Bold',
+  route: 'index',
+  skin: 'bold',
+  icon: '',
+  iconAlignment: 'left',
+  hideText: false,
+  width: '',
+  active: false,
+};
+Bold.parameters = {
+  chromatic: { disableSnapshot: true },
+};
+
 export const PrimaryButton = Template.bind({});
 PrimaryButton.args = {
   text: 'Primary Button',

stories/5-components/Links/AuLinkExternal.stories.js

@@ -11,6 +11,7 @@ export default {
       options: [
         'primary',
         'secondary',
+        'bold',
         'button',
         'button-secondary',
         'button-naked',
@@ -84,6 +85,18 @@ Secondary.args = {
   width: '',
 };
 
+export const Bold = Template.bind({});
+Bold.args = {
+  text: 'External link',
+  href: 'https://www.vlaanderen.be/',
+  route: 'index',
+  skin: 'bold',
+  icon: 'manual',
+  iconAlignment: 'left',
+  hideText: false,
+  width: '',
+};
+
 export const PrimaryButton = Template.bind({});
 PrimaryButton.args = {
   text: 'External link',

styles/components/_c-button.scss

@@ -191,7 +191,8 @@ $au-button-link-icon-only-width: $au-button-link-height !default;
 }
 
 // Link button
-.au-c-button--link {
+.au-c-button--link,
+.au-c-button--link-bold {
   font-size: inherit;
   border-color: transparent;
   padding: 0 $au-unit-tiny 0;
@@ -236,6 +237,17 @@ $au-button-link-icon-only-width: $au-button-link-height !default;
   }
 }
 
+.au-c-button--link-bold {
+  font-weight: var(--au-medium);
+  text-decoration: none;
+
+  &:hover,
+  &:focus-visible,
+  &:active {
+    text-decoration: underline;
+  }
+}
+
 // Link secondary button
 .au-c-button--link-secondary {
   font-size: inherit;
@@ -364,7 +376,8 @@ $au-button-link-icon-only-width: $au-button-link-height !default;
   }
 
   &.au-c-button--link,
-  &.au-c-button--link-secondary {
+  &.au-c-button--link-secondary,
+  &.au-c-button--link-bold {
     background-color: transparent;
 
     &,

styles/components/_c-link.scss

@@ -58,6 +58,7 @@ $au-link-secondary-active-color: var(--au-gray-900) !default;
   ========================================================================== */
 
 .au-c-link--secondary {
+
   &,
   &:visited {
     color: $au-link-secondary-color;
@@ -80,6 +81,16 @@ $au-link-secondary-active-color: var(--au-gray-900) !default;
   }
 }
 
+.au-c-link--bold {
+  text-decoration: none;
+  font-weight: var(--au-medium);
+
+  &:hover,
+  &:focus {
+    text-decoration: underline;
+  }
+}
+
 .au-c-link--icon-only {
   .au-c-icon {
     width: 1.8rem;