refactor button-link

Refs: #7036
public-ui · Nov 18, 2024 · cb57d32 · cb57d32
1 parent 4851efa
commit cb57d32
Show file tree

Hide file tree

Showing 7 changed files with 303 additions and 260 deletions.
diff --git a/packages/components/src/components/button-link/shadow.tsx b/packages/components/src/components/button-link/shadow.tsx
@@ -17,7 +17,7 @@ import type {
 	TooltipAlignPropType,
 } from '../../schema';
 import type { JSX } from '@stencil/core';
-import { Component, h, Host, Method, Prop } from '@stencil/core';
+import { Component, h, Method, Prop } from '@stencil/core';
 import { KolButtonWcTag } from '../../core/component-names';
 
 @Component({
@@ -57,32 +57,31 @@ export class KolButtonLink implements ButtonLinkProps, FocusableElement {
 
 	public render(): JSX.Element {
 		return (
-			<Host class="kol-button-link">
-				<KolButtonWcTag
-					ref={this.catchRef}
-					_accessKey={this._accessKey}
-					_ariaControls={this._ariaControls}
-					_ariaDescription={this._ariaDescription}
-					_ariaExpanded={this._ariaExpanded}
-					_ariaSelected={this._ariaSelected}
-					_disabled={this._disabled}
-					_icons={this._icons}
-					_hideLabel={this._hideLabel}
-					_id={this._id}
-					_label={this._label}
-					_name={this._name}
-					_on={this._on}
-					_role="link"
-					_shortKey={this._shortKey}
-					_syncValueBySelector={this._syncValueBySelector}
-					_tabIndex={this._tabIndex}
-					_tooltipAlign={this._tooltipAlign}
-					_type={this._type}
-					_value={this._value}
-				>
-					<slot name="expert" slot="expert"></slot>
-				</KolButtonWcTag>
-			</Host>
+			<KolButtonWcTag
+				class="kol-button-link"
+				ref={this.catchRef}
+				_accessKey={this._accessKey}
+				_ariaControls={this._ariaControls}
+				_ariaDescription={this._ariaDescription}
+				_ariaExpanded={this._ariaExpanded}
+				_ariaSelected={this._ariaSelected}
+				_disabled={this._disabled}
+				_icons={this._icons}
+				_hideLabel={this._hideLabel}
+				_id={this._id}
+				_label={this._label}
+				_name={this._name}
+				_on={this._on}
+				_role="link"
+				_shortKey={this._shortKey}
+				_syncValueBySelector={this._syncValueBySelector}
+				_tabIndex={this._tabIndex}
+				_tooltipAlign={this._tooltipAlign}
+				_type={this._type}
+				_value={this._value}
+			>
+				<slot name="expert" slot="expert"></slot>
+			</KolButtonWcTag>
 		);
 	}
 

diff --git a/packages/components/src/components/button-link/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/button-link/test/__snapshots__/snapshot.spec.tsx.snap
@@ -1,9 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`kol-button-link should render with _label="Beschreibung" 1`] = `
-<kol-button-link class="kol-button-link">
+<kol-button-link>
   <template shadowrootmode="open">
-    <kol-button-wc _label="Beschreibung" _role="link" _tooltipalign="top" _type="button">
+    <kol-button-wc _label="Beschreibung" _role="link" _tooltipalign="top" _type="button" class="kol-button-link">
       <slot name="expert" slot="expert"></slot>
     </kol-button-wc>
   </template>

diff --git a/packages/themes/bmf/src/components/button-link.scss b/packages/themes/bmf/src/components/button-link.scss
@@ -1,42 +1,44 @@
 @import '../mixins/rem';
 
 @layer kol-theme-component {
-	:is(a, button) {
-		color: var(--color-midnight);
-		font-style: normal;
-		font-weight: 400;
-		text-decoration-line: underline;
-		font-size: inherit;
-	}
+	.kol-button-link {
+		:is(a, button) {
+			color: var(--color-midnight);
+			font-style: normal;
+			font-weight: 400;
+			text-decoration-line: underline;
+			font-size: inherit;
 
-	:is(a, button):focus {
-		outline: none;
-	}
+			&:focus {
+				outline: none;
 
-	:is(a, button):focus .kol-span-wc {
-		border-radius: var(--border-radius);
-		outline: rem(2) solid;
-	}
+				.kol-span-wc {
+					border-radius: var(--border-radius);
+					outline: rem(2) solid;
+				}
+			}
 
-	a:hover:not([aria-disabled]),
-	button:hover:not([disabled]) {
-		text-decoration-thickness: 0.25em;
-	}
+			&:visited {
+				color: var(--visited);
+			}
+		}
 
-	:is(a, button):visited {
-		color: var(--visited);
-	}
+		a:hover:not([aria-disabled]),
+		button:hover:not([disabled]) {
+			text-decoration-thickness: 0.25em;
+		}
 
-	.skip {
-		left: rem(-99999);
-		overflow: hidden;
-		position: absolute;
-		z-index: 9999999;
-	}
+		.skip {
+			left: rem(-99999);
+			overflow: hidden;
+			position: absolute;
+			z-index: 9999999;
 
-	.skip:focus {
-		background-color: white;
-		left: unset;
-		position: unset;
+			&:focus {
+				background-color: white;
+				left: unset;
+				position: unset;
+			}
+		}
 	}
 }
diff --git a/packages/themes/default/src/components/button-link.scss b/packages/themes/default/src/components/button-link.scss
@@ -1,50 +1,54 @@
 @import '../mixins/rem';
 
 @layer kol-theme-component {
-	:is(a, button) {
-		color: var(--color-primary);
-		font-style: normal;
-		font-weight: 400;
-		font-size: inherit;
-	}
-
-	:is(a, button):focus {
-		outline: none;
-	}
-
-	:is(a, button):focus .kol-span-wc {
-		border-radius: var(--border-radius);
-		outline: calc(var(--border-width) * 2) solid;
-	}
-
-	a:hover:not([aria-disabled]),
-	button:hover:not([disabled]) {
-		.kol-span-wc .span-label {
-			text-decoration-thickness: 0.25em;
+	.kol-button-link {
+		:is(a, button) {
+			color: var(--color-primary);
+			font-style: normal;
+			font-weight: 400;
+			font-size: inherit;
+
+			&:focus {
+				outline: none;
+
+				.kol-span-wc {
+					border-radius: var(--border-radius);
+					outline: calc(var(--border-width) * 2) solid;
+				}
+			}
+
+			&:visited {
+				color: var(--visited);
+			}
 		}
-	}
 
-	:is(a, button):visited {
-		color: var(--visited);
-	}
-
-	.skip {
-		left: rem(-99999);
-		overflow: hidden;
-		position: absolute;
-		z-index: 9999999;
-	}
+		a:hover:not([aria-disabled]),
+		button:hover:not([disabled]) {
+			.kol-span-wc {
+				.span-label {
+					text-decoration-thickness: 0.25em;
+				}
+			}
+		}
 
-	.skip:focus {
-		background-color: white;
-		left: unset;
-		position: unset;
-	}
+		.skip {
+			left: rem(-99999);
+			overflow: hidden;
+			position: absolute;
+			z-index: 9999999;
+
+			&:focus {
+				background-color: white;
+				left: unset;
+				position: unset;
+			}
+		}
 
-	.access-key-hint {
-		background-color: var(--color-mute-variant);
-		border-radius: rem(3);
-		color: var(--color-text);
-		padding: 0 0.3em;
+		.badge-text-hint {
+			background-color: var(--color-mute-variant);
+			border-radius: rem(3);
+			color: var(--color-text);
+			padding: 0 0.3em;
+		}
 	}
 }
diff --git a/packages/themes/ecl/src/ecl-ec/components/button-link.scss b/packages/themes/ecl/src/ecl-ec/components/button-link.scss
@@ -1,50 +1,54 @@
 @import '../../mixins/rem';
 
 @layer kol-theme-component {
-	:is(a, button) {
-		color: var(--color-primary);
-		font-style: normal;
-		font-weight: 400;
-		text-decoration-line: underline;
-		font-size: inherit;
-	}
-
-	:is(a, button):focus {
-		outline: none;
-	}
-
-	:is(a, button):focus .kol-span-wc {
-		border-radius: var(--border-radius);
-		outline: calc(var(--border-width) * 2) solid;
-	}
-
-	:is(a, button):hover {
-		.kol-span-wc .span-label {
-			text-decoration-thickness: 0.25em;
+	.kol-button-link {
+		:is(a, button) {
+			color: var(--color-primary);
+			font-style: normal;
+			font-weight: 400;
+			text-decoration-line: underline;
+			font-size: inherit;
+
+			:focus {
+				outline: none;
+
+				.kol-span-wc {
+					border-radius: var(--border-radius);
+					outline: calc(var(--border-width) * 2) solid;
+				}
+			}
+
+			&:hover {
+				.kol-span-wc {
+					.span-label {
+						text-decoration-thickness: 0.25em;
+					}
+				}
+
+				&:visited {
+					color: var(--visited);
+				}
+			}
 		}
-	}
 
-	:is(a, button):visited {
-		color: var(--visited);
-	}
-
-	.skip {
-		left: rem(-99999);
-		overflow: hidden;
-		position: absolute;
-		z-index: 9999999;
-	}
-
-	.skip:focus {
-		background-color: white;
-		left: unset;
-		position: unset;
-	}
+		.skip {
+			left: rem(-99999);
+			overflow: hidden;
+			position: absolute;
+			z-index: 9999999;
+
+			&:focus {
+				background-color: white;
+				left: unset;
+				position: unset;
+			}
+		}
 
-	.access-key-hint {
-		background-color: var(--color-mute-variant);
-		border-radius: rem(3);
-		color: var(--color-text);
-		padding: 0 0.3em;
+		.badge-text-hint {
+			background-color: var(--color-mute-variant);
+			border-radius: rem(3);
+			color: var(--color-text);
+			padding: 0 0.3em;
+		}
 	}
 }
diff --git a/packages/themes/ecl/src/ecl-eu/components/button-link.scss b/packages/themes/ecl/src/ecl-eu/components/button-link.scss
@@ -1,12 +1,14 @@
 @layer kol-theme-component {
-	a,
-	button {
-		appearance: none;
-		color: var(--color-blue);
-		text-decoration: underline;
-	}
-	a:hover,
-	button:hover {
-		color: var(--color-blue-130);
+	.kol-button-link {
+		a,
+		button {
+			appearance: none;
+			color: var(--color-blue);
+			text-decoration: underline;
+
+			&:hover {
+				color: var(--color-blue-130);
+			}
+		}
 	}
 }