fix(TextArea): replaced label prop with slot

fix(TextArea): added TextArea.Label component docs(Navigation): added updated flag to TextArea docs(text-area): updated examples, props, and slots tables
N00nDay · Oct 17, 2022 · 3f38e5a · 3f38e5a
1 parent 03ca392
commit 3f38e5a
Show file tree

Hide file tree

Showing 6 changed files with 108 additions and 55 deletions.
diff --git a/src/docs/components/navigation/Navigation.svelte b/src/docs/components/navigation/Navigation.svelte
@@ -178,7 +178,7 @@
 		{
 			title: 'TextArea',
 			href: '/text-area',
-			beta: true
+			updated: true
 		},
 		{
 			title: 'Timeline',

diff --git a/src/lib/components/textarea/Label.svelte b/src/lib/components/textarea/Label.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+	import { getContext } from 'svelte';
+	import { twMerge } from 'tailwind-merge';
+	import { useContext } from '../../utils/useContext';
+	import { TEXT_AREA_CONTEXT_ID } from './TextArea.svelte';
+	import { get_current_component } from 'svelte/internal';
+	import { forwardEventsBuilder, useActions, type ActionArray } from '../../actions';
+	export let use: ActionArray = [];
+	import { exclude } from '../../utils/exclude';
+	const forwardEvents = forwardEventsBuilder(get_current_component());
+
+	useContext({
+		context_id: TEXT_AREA_CONTEXT_ID,
+		parent: 'TextArea',
+		component: 'TextArea.Label'
+	});
+
+	const { name, error }: { name: string; error: string } = getContext(TEXT_AREA_CONTEXT_ID);
+
+	let defaultClass = 'block text-sm font-medium';
+	if (error) {
+		defaultClass = defaultClass + ' text-danger';
+	} else {
+		defaultClass = defaultClass + ' text-light-secondary-content dark:text-dark-secondary-content';
+	}
+	$: finalClass = twMerge(defaultClass, $$props.class);
+</script>
+
+<label
+	for={name}
+	class={finalClass}
+	use:useActions={use}
+	use:forwardEvents
+	{...exclude($$props, ['use', 'class'])}><slot /></label
+>
diff --git a/src/lib/components/textarea/TextArea.svelte b/src/lib/components/textarea/TextArea.svelte
@@ -1,9 +1,12 @@
+<script lang="ts" context="module">
+	export const TEXT_AREA_CONTEXT_ID = 'text-area-context-id';
+</script>
+
 <script lang="ts">
 	import { slide } from 'svelte/transition';
+	import { setContext } from 'svelte';
 
 	export let name: string;
-	export let label: string | undefined = undefined;
-	export let srOnly = false;
 	export let error: string | undefined = undefined;
 	export let placeholder: string | undefined = undefined;
 	export let value: string | undefined = undefined;
@@ -12,19 +15,17 @@
 	export let autofocus = false;
 	export let readonly = false;
 
+	setContext(TEXT_AREA_CONTEXT_ID, {
+		textArea: true,
+		error,
+		name
+	});
+
 	// TODO: add action buttons/pills
 </script>
 
 <div class={$$props.class} style={$$props.style}>
-	{#if label}
-		<label
-			for={name}
-			class="block text-sm font-medium{srOnly ? ' sr-only' : ''}"
-			class:text-light-secondary-content={!error}
-			class:dark:text-dark-secondary-content={!error}
-			class:text-danger={error}>{label}</label
-		>
-	{/if}
+	<slot name="label" />
 	<div class="mt-1">
 		<textarea
 			rows="4"

diff --git a/src/lib/components/textarea/index.ts b/src/lib/components/textarea/index.ts
@@ -1,3 +1,12 @@
-import TextArea from './TextArea.svelte';
+import OriginalTextArea from './TextArea.svelte';
+import Label from './Label.svelte';
+
+const TextArea = OriginalTextArea as TextAreaStatic;
+TextArea.Label = Label;
 
 export default TextArea;
+
+export interface TextAreaStatic {
+	new (...args: ConstructorParameters<typeof OriginalTextArea>): OriginalTextArea;
+	Label: typeof Label;
+}
diff --git a/src/routes/text-area/+page.svelte b/src/routes/text-area/+page.svelte
@@ -1,27 +1,25 @@
 <script lang="ts">
 	import { Card, Col, TextArea } from '../../lib';
-	import { example, props } from './examples';
-	import { PropsTable, BetaComponent, CodeBlock } from '../../docs';
+	import { example, props, slots, labelSlots } from './examples';
+	import { PropsTable, SlotsTable, UpdatedComponent, CodeBlock } from '../../docs';
 </script>
 
 <Col class="col-24">
-	<BetaComponent />
+	<UpdatedComponent version="v0.0.28-next" />
 </Col>
 
 <Col class="col-24 md:col-12">
 	<Card bordered={false}>
 		<Card.Content slot="content" class="p-4">
 			<TextArea name="input-1" placeholder="Basic" />
 			<br />
-			<TextArea name="input-2" label="Label" leading="email" trailing="phone" />
+			<TextArea name="input-2">
+				<TextArea.Label slot="label">Label</TextArea.Label>
+			</TextArea>
 			<br />
-			<TextArea
-				name="input-3"
-				label="Label"
-				leading="email"
-				trailing="phone"
-				error="There has been an error"
-			/>
+			<TextArea name="input-3" error="There has been an error">
+				<TextArea.Label slot="label">Label</TextArea.Label>
+			</TextArea>
 
 			<br />
 
@@ -31,5 +29,13 @@
 </Col>
 
 <Col class="col-24">
-	<PropsTable component="Input" {props} />
+	<PropsTable component="TextArea" {props} />
+</Col>
+
+<Col class="col-24">
+	<SlotsTable component="TextArea" {slots} />
+</Col>
+
+<Col class="col-24">
+	<SlotsTable component="TextArea.Label" slots={labelSlots} />
 </Col>
diff --git a/src/routes/text-area/examples.ts b/src/routes/text-area/examples.ts
@@ -1,4 +1,4 @@
-import type { Prop } from '../../docs';
+import type { Slot, Prop } from '../../docs';
 
 export const props: Prop[] = [
 	{
@@ -9,73 +9,75 @@ export const props: Prop[] = [
 	},
 	{
 		id: '2',
-		prop: 'label',
-		type: 'string | undefined',
-		default: ''
-	},
-	{
-		id: '3',
-		prop: 'srOnly',
-		type: 'boolean',
-		default: 'false'
-	},
-	{
-		id: '4',
 		prop: 'error',
 		type: 'string | undefined',
 		default: ''
 	},
 	{
-		id: '5',
+		id: '3',
 		prop: 'placholder',
 		type: 'string | undefined',
 		default: ''
 	},
 	{
-		id: '6',
+		id: '4',
 		prop: 'value',
 		type: 'string | undefined',
 		default: ''
 	},
 	{
-		id: '7',
+		id: '5',
 		prop: 'autocomplete',
 		type: "'on' | 'off' | undefined",
 		default: ''
 	},
 	{
-		id: '8',
+		id: '6',
 		prop: 'autocapitalize',
 		type: "'off' | 'none' | 'sentences' | 'words' | 'characters'",
 		default: 'off'
 	},
 	{
-		id: '9',
+		id: '7',
 		prop: 'autofocus',
 		type: "'true' | undefined",
 		default: ''
 	},
 	{
-		id: '10',
+		id: '8',
 		prop: 'readonly',
 		type: 'true | undefined',
 		default: ''
 	}
 ];
 
+export const slots: Slot[] = [
+	{
+		id: '1',
+		slot: 'label',
+		component: '<TextArea.Label slot="label" />'
+	}
+];
+
+export const labelSlots: Slot[] = [
+	{
+		id: '1',
+		slot: 'default',
+		component: ''
+	}
+];
+
 export const example = `
 <script lang="ts">
 	import { TextArea } from 'stwui';
 </script>
 
-<TextArea name="input-1" placeholder="Basic" />
-<br />
-<TextArea name="input-2" label="Label" leading="email" trailing="phone" />
-<br />
-<TextArea
-   name="input-3"
-   label="Label"
-   leading="email"
-   trailing="phone"
-   error="There has been an error"
-/>`;
+<TextArea name="text-area-1" placeholder="Basic" />
+
+<TextArea name="text-area-2">
+	<TextArea.Label slot="label">Label</TextArea.Label>
+</TextArea>
+
+<TextArea name="text-area-3" error="There has been an error">
+	<TextArea.Label slot="label">Label</TextArea.Label>
+</TextArea>`;