feat: add support for link.column-gap token #2485

.changeset/add-button-link-label-class.md

@@ -0,0 +1,6 @@
+---
+"@utrecht/component-library-css": minor
+"@utrecht/button-link-css": minor
+---
+
+Add optional class `utrecht-button-link__label` to match extended optional class `utrecht-button__label`

.changeset/add-button-link-label-react.md

@@ -0,0 +1,5 @@
+---
+"@utrecht/component-library-react": minor
+---
+
+Add an optional `label` and `icon` property to React `ButtonLink` component, to support better styling of icons.

.changeset/add-button-link-slots.md

@@ -0,0 +1,7 @@
+---
+"@utrecht/web-component-library-angular": minor
+"@utrecht/web-component-library-stencil": minor
+"@utrecht/web-component-library-vue": minor
+---
+
+Add `slot="icon"` and `slot="label"` support to `utrecht-button-link` web component.

.changeset/add-link-button-label-class.md

@@ -0,0 +1,6 @@
+---
+"@utrecht/component-library-css": minor
+"@utrecht/link-button-css": minor
+---
+
+Add optional class `utrecht-link-button__label` to match extended optional class `utrecht-link__label`

.changeset/add-link-button-label-react.md

@@ -0,0 +1,5 @@
+---
+"@utrecht/component-library-react": minor
+---
+
+Add an optional `label` and `icon` property to React `LinkButton` component, to support better styling of icons.

.changeset/add-link-button-slots.md

@@ -0,0 +1,7 @@
+---
+"@utrecht/web-component-library-angular": minor
+"@utrecht/web-component-library-stencil": minor
+"@utrecht/web-component-library-vue": minor
+---
+
+Add `slot="icon"` and `slot="label"` support to `utrecht-link-button` web component.

.changeset/add-link-gap.md

@@ -0,0 +1,8 @@
+---
+"@utrecht/design-tokens": minor
+"@utrecht/component-library-css": minor
+"@utrecht/link-css": minor
+"@utrecht/button-link-css": minor
+---
+
+Add design token `utrecht.link.column-gap`

.changeset/add-link-label-css.md

@@ -0,0 +1,6 @@
+---
+"@utrecht/component-library-css": minor
+"@utrecht/link-css": minor
+---
+
+Add an optional element class `utrecht-link__label` to support other inline styling without a gap

.changeset/add-link-label-react.md

@@ -0,0 +1,6 @@
+---
+"@utrecht/component-library-react": minor
+"@utrecht/link-react": minor
+---
+
+Add an optional `label` and `icon` property to React `Link` component, to support better styling of icons.

.changeset/add-link-slots.md

@@ -0,0 +1,8 @@
+---
+"@utrecht/web-component-library-angular": minor
+"@utrecht/web-component-library-react": minor
+"@utrecht/web-component-library-stencil": minor
+"@utrecht/web-component-library-vue": minor
+---
+
+Add `slot="icon"` and `slot="label"` support to `utrecht-link` web component.

.changeset/consistent-l-b-slots.md

@@ -0,0 +1,9 @@
+---
+"@utrecht/component-library-angular": minor
+"@utrecht/web-component-library-angular": minor
+"@utrecht/web-component-library-react": minor
+"@utrecht/web-component-library-stencil": minor
+"@utrecht/web-component-library-vue": minor
+---
+
+Align slot behavior across `button`, `link`, `button-link` and `link-button` in Angular components, React components and web components: the `__label` element is always rendered and wraps both the `label` slot and the default slot.

.changeset/yellow-meals-invite.md

@@ -0,0 +1,5 @@
+---
+"@utrecht/component-library-angular": major
+---
+
+Add `link-button` Angular component.

components/button-link/src/_mixin.scss

@@ -48,3 +48,7 @@
     @include utrecht-button-link--active;
   }
 }
+
+@mixin utrecht-button-link__label {
+  @include utrecht-button__label;
+}

components/button-link/src/index.scss

@@ -35,6 +35,10 @@
   @include utrecht-button-link--html-a;
 }
 
+.utrecht-button-link__label {
+  @include utrecht-button-link__label;
+}
+
 @include utrecht-button-appearance("utrecht-button-link", "primary-action");
 @include utrecht-button-appearance("utrecht-button-link", "secondary-action");
 @include utrecht-button-appearance("utrecht-button-link", "subtle");

components/link-button/src/_mixin.scss

@@ -83,3 +83,7 @@
   padding-inline-end: 0;
   padding-inline-start: 0;
 }
+
+@mixin utrecht-link-button__label {
+  @include utrecht-link__label;
+}

components/link-button/src/index.scss

@@ -57,3 +57,7 @@
     @extend .utrecht-link-button--active;
   }
 }
+
+.utrecht-link-button__label {
+  @include utrecht-link-button__label;
+}

components/link/src/_mixin.scss

@@ -68,7 +68,11 @@ however browsers don't seem to have implemented great looking supixel tweening y
 @mixin utrecht-link {
   --utrecht-icon-size: var(--utrecht-link-icon-size, 1em);
 
+  align-items: center;
   color: var(--_utrecht-link-state-color, var(--utrecht-link-color, var(--_utrecht-link-forced-colors-color)));
+  column-gap: var(--utrecht-link-column-gap);
+  display: inline-flex;
+  justify-content: center;
 }
 
 @mixin utrecht-link--any-link {
@@ -142,7 +146,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
 
   /*
    * The following tokens are deprecated, but we keep them for backwards compatibility for now:
-   * 
+   *
    * `--utrecht-link-focus-text-decoration`
    * `--utrecht-link-focus-text-decoration-thickness`
    */
@@ -198,7 +202,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
 
 /**
  * Link for elements such as `<img>` or `<article>`, that are not inline elements or plain text.
- * 
+ *
  * Changing `display: inline` to `inline-block` ensures the focus outline is rendered around the entire box.
  */
 @mixin utrecht-link--box-content {
@@ -231,3 +235,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
     @include utrecht-link--focus-visible;
   }
 }
+
+/* stylelint-disable-next-line block-no-empty */
+@mixin utrecht-link__label {
+}

components/link/src/index.scss

@@ -86,6 +86,10 @@
   @include utrecht-link--placeholder;
 }
 
+.utrecht-link__label {
+  @include utrecht-link__label;
+}
+
 /**
  * Simulate forced-colors mode.
  */

components/link/src/tokens.json

@@ -11,6 +11,15 @@
         },
         "type": "color"
       },
+      "column-gap": {
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {
+            "syntax": "<length>",
+            "inherits": true
+          }
+        },
+        "type": "spacing"
+      },
       "text-decoration": {
         "$extensions": {
           "nl.nldesignsystem.css.property": {

packages/component-library-angular/package.json

@@ -70,6 +70,7 @@
     "@utrecht/heading-6-css": "workspace:*",
     "@utrecht/html-content-css": "workspace:*",
     "@utrecht/link-css": "workspace:*",
+    "@utrecht/link-button-css": "workspace:*",
     "@utrecht/ordered-list-css": "workspace:*",
     "@utrecht/page-content-css": "workspace:*",
     "@utrecht/page-footer-css": "workspace:*",

packages/component-library-angular/src/button-link/component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, Input, ViewEncapsulation } from '@angular/core';
+import { ChangeDetectionStrategy, Component, ContentChild, ElementRef, Input, ViewEncapsulation } from '@angular/core';
 
 export type AppearanceType = 'primary-action-button' | 'secondary-action-button' | 'subtle-button';
 
@@ -21,5 +21,5 @@ export type AppearanceType = 'primary-action-button' | 'secondary-action-button'
 export class UtrechtButtonLinkAttr {
   @Input() appearance?: AppearanceType;
   @Input() external = false;
-  constructor() {}
+  @ContentChild('[slot=label]', { static: false }) labelSlot?: ElementRef;
 }

packages/component-library-angular/src/button-link/index.html

@@ -1 +1,6 @@
-<ng-content></ng-content>
+<ng-content select="[slot=icon]"></ng-content>
+
+<span class="utrecht-button-link__label">
+  <ng-content select="[slot=label]"></ng-content>
+  <ng-content></ng-content>
+</span>

packages/component-library-angular/src/button/component.ts

@@ -1,4 +1,12 @@
-import { ChangeDetectionStrategy, Component, Input, ViewEncapsulation } from '@angular/core';
+import {
+  AfterContentInit,
+  ChangeDetectionStrategy,
+  Component,
+  ContentChild,
+  ElementRef,
+  Input,
+  ViewEncapsulation,
+} from '@angular/core';
 
 @Component({
   selector:
@@ -26,9 +34,13 @@ import { ChangeDetectionStrategy, Component, Input, ViewEncapsulation } from '@a
     '[class.utrecht-button]': 'true',
   },
 })
-export class UtrechtButtonAttr {
+export class UtrechtButtonAttr implements AfterContentInit {
   @Input() busy = false;
   @Input() pressed? = undefined;
   @Input() appearance?: string;
-  constructor() {}
+  @ContentChild('[slot=label]', { static: false }) labelSlot?: ElementRef;
+  hasLabel = false;
+  ngAfterContentInit() {
+    this.hasLabel = !!this.labelSlot;
+  }
 }

packages/component-library-angular/src/button/index.html

@@ -1 +1,7 @@
+<ng-content select="[slot=icon]"></ng-content>
+
+<span class="utrecht-button__label" *ngIf="hasLabel">
+  <ng-content select="[slot=label]"></ng-content>
+</span>
+
 <ng-content></ng-content>

packages/component-library-angular/src/components.ts

@@ -18,6 +18,7 @@ export * from './heading-5/component';
 export * from './heading-6/component';
 export * from './html-content/component';
 export * from './link/component';
+export * from './link-button/component';
 export * from './ordered-list/component';
 export * from './ordered-list/item.component';
 export * from './page-content/component';