Add KolButton and KolButtonLink

public-ui · Nov 17, 2023 · eb28412 · eb28412
1 parent 335b4ad
commit eb28412
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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