diff --git a/addon/components/au-button.gts b/addon/components/au-button.gts index 0cb7f9220..e6f21aa0d 100644 --- a/addon/components/au-button.gts +++ b/addon/components/au-button.gts @@ -9,6 +9,7 @@ const SKINS = [ 'naked', 'link', 'link-secondary', + 'link-bold', ] as const; export interface AuButtonSignature { diff --git a/addon/components/au-link-external.gts b/addon/components/au-link-external.gts index 1585ade1e..259a18fa5 100644 --- a/addon/components/au-link-external.gts +++ b/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'; diff --git a/addon/components/au-link.gts b/addon/components/au-link.gts index 3090f72d0..d66217ac6 100644 --- a/addon/components/au-link.gts +++ b/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'; diff --git a/stories/5-components/Buttons/AuButton.stories.js b/stories/5-components/Buttons/AuButton.stories.js index 617eeae05..aea6324be 100644 --- a/stories/5-components/Buttons/AuButton.stories.js +++ b/stories/5-components/Buttons/AuButton.stories.js @@ -7,7 +7,14 @@ 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 +143,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, +}; diff --git a/stories/5-components/Links/AuLink.stories.js b/stories/5-components/Links/AuLink.stories.js index 870d4d551..48b0b6241 100644 --- a/stories/5-components/Links/AuLink.stories.js +++ b/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: 'login', + iconAlignment: 'left', + hideText: false, + width: '', + active: false, +}; +Bold.parameters = { + chromatic: { disableSnapshot: true }, +}; + export const PrimaryButton = Template.bind({}); PrimaryButton.args = { text: 'Primary Button', diff --git a/stories/5-components/Links/AuLinkExternal.stories.js b/stories/5-components/Links/AuLinkExternal.stories.js index c7abc494e..6d36602cd 100644 --- a/stories/5-components/Links/AuLinkExternal.stories.js +++ b/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', diff --git a/styles/components/_c-button.scss b/styles/components/_c-button.scss index 224aba98f..2a0b514b7 100644 --- a/styles/components/_c-button.scss +++ b/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; &, diff --git a/styles/components/_c-link.scss b/styles/components/_c-link.scss index f9cd19897..97d524af1 100644 --- a/styles/components/_c-link.scss +++ b/styles/components/_c-link.scss @@ -80,6 +80,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;