From eb284120f337cec711646b5c5bdd96853bda7153 Mon Sep 17 00:00:00 2001
From: Stefan Dietz <mail@stefan-dietz.eu>
Date: Fri, 17 Nov 2023 12:17:21 +0100
Subject: [PATCH] Add KolButton and KolButtonLink

---
 packages/components/src/components.d.ts         |  2 ++
 .../src/components/button-link/component.tsx    |  8 +++++++-
 .../components/src/components/button/shadow.tsx |  8 +++++++-
 .../react/src/scenarios/inputs-get-value.tsx    | 17 +++++++++++++++++
 4 files changed, 33 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/components.d.ts b/packages/components/src/components.d.ts
index 1dda179243..42bf929527 100644
--- a/packages/components/src/components.d.ts
+++ b/packages/components/src/components.d.ts
@@ -335,6 +335,7 @@ export namespace Components {
           * Defines which variant should be used for presentation.
          */
         "_variant"?: ButtonVariantPropType;
+        "getValue": () => Promise<Stringified<StencilUnknown> | undefined>;
     }
     interface KolButtonGroup {
     }
@@ -413,6 +414,7 @@ export namespace Components {
           * Defines the value that the button emits on click.
          */
         "_value"?: Stringified<StencilUnknown>;
+        "getValue": () => Promise<Stringified<StencilUnknown> | undefined>;
     }
     /**
      * Internal component that renders an action or text component like a button or a link.
diff --git a/packages/components/src/components/button-link/component.tsx b/packages/components/src/components/button-link/component.tsx
index 03adcafdbd..d9d4963356 100644
--- a/packages/components/src/components/button-link/component.tsx
+++ b/packages/components/src/components/button-link/component.tsx
@@ -1,4 +1,4 @@
-import { Component, Element, h, Host, JSX, Prop } from '@stencil/core';
+import { Component, Element, h, Host, JSX, Method, Prop } from '@stencil/core';
 
 import { Stringified } from '../../types/common';
 import { AlternativeButtonLinkRolePropType } from '../../types/props/alternative-button-link-role';
@@ -29,6 +29,12 @@ export class KolButtonLink implements Props {
 		propagateFocus(this.host, ref);
 	};
 
+	// eslint-disable-next-line @typescript-eslint/require-await
+	@Method()
+	public async getValue(): Promise<Stringified<StencilUnknown> | undefined> {
+		return this._value;
+	}
+
 	public render(): JSX.Element {
 		return (
 			<Host>
diff --git a/packages/components/src/components/button/shadow.tsx b/packages/components/src/components/button/shadow.tsx
index 6e166e0105..b49e3840f1 100644
--- a/packages/components/src/components/button/shadow.tsx
+++ b/packages/components/src/components/button/shadow.tsx
@@ -1,4 +1,4 @@
-import { Component, Element, h, Host, JSX, Prop } from '@stencil/core';
+import { Component, Element, h, Host, JSX, Method, Prop } from '@stencil/core';
 
 import { Stringified } from '../../types/common';
 import { AlternativeButtonLinkRolePropType } from '../../types/props/alternative-button-link-role';
@@ -29,6 +29,12 @@ export class KolButton implements Props {
 		propagateFocus(this.host, ref);
 	};
 
+	// eslint-disable-next-line @typescript-eslint/require-await
+	@Method()
+	public async getValue(): Promise<Stringified<StencilUnknown> | undefined> {
+		return this._value;
+	}
+
 	public render(): JSX.Element {
 		return (
 			<Host>
diff --git a/packages/samples/react/src/scenarios/inputs-get-value.tsx b/packages/samples/react/src/scenarios/inputs-get-value.tsx
index 91e2c2475c..2d8044117d 100644
--- a/packages/samples/react/src/scenarios/inputs-get-value.tsx
+++ b/packages/samples/react/src/scenarios/inputs-get-value.tsx
@@ -14,6 +14,7 @@ import {
 	KolInputText,
 	KolSelect,
 	KolTextarea,
+	KolButtonLink,
 } from '@public-ui/react';
 import { SampleDescription } from '../components/SampleDescription';
 
@@ -118,6 +119,22 @@ export const InputsGetValue: FC = () => {
 							_label: 'KolTextarea',
 						}}
 					/>
+					<Scenario
+						InputComponent={KolButton}
+						inputProps={{
+							_label: 'KolButton',
+							_variant: 'ghost',
+							_value: 'KolButton value',
+						}}
+					/>
+					<Scenario
+						InputComponent={KolButtonLink}
+						inputProps={{
+							_label: 'KolButtonLink',
+							_value: 'KolButtonLink value',
+						}}
+					/>
+
 					<div className="grid grid-cols-3 gap-4">
 						<div></div>
 						<KolButton