From 0ebc3f0f7e9d8af1d19602a2bffbaf605b560ed3 Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Mon, 13 Feb 2023 19:59:58 +0000
Subject: [PATCH] refactor: multiple design review changes

---
 src/lib/elements/forms/index.ts               |  1 +
 src/lib/elements/forms/inputCheckbox.svelte   |  9 ++---
 src/lib/elements/forms/inputCron.svelte       |  7 ++--
 src/lib/elements/forms/inputDateTime.svelte   |  9 ++---
 src/lib/elements/forms/inputDomain.svelte     |  7 ++--
 src/lib/elements/forms/inputEmail.svelte      |  7 ++--
 src/lib/elements/forms/inputNumber.svelte     |  9 ++---
 src/lib/elements/forms/inputPassword.svelte   |  7 ++--
 src/lib/elements/forms/inputPhone.svelte      |  6 ++--
 src/lib/elements/forms/inputRadio.svelte      |  6 ++--
 src/lib/elements/forms/inputSecret.svelte     |  7 ++--
 src/lib/elements/forms/inputSelect.svelte     |  9 ++---
 src/lib/elements/forms/inputTags.svelte       |  7 ++--
 src/lib/elements/forms/inputText.svelte       | 25 ++++++--------
 src/lib/elements/forms/inputTextarea.svelte   |  7 ++--
 src/lib/elements/forms/inputURL.svelte        |  7 ++--
 src/lib/elements/forms/label.svelte           | 33 +++++++++++++++++++
 .../document-[document]/attributeForm.svelte  | 13 ++++----
 .../attributes/string.svelte                  |  1 +
 .../wizard/step1.svelte                       |  3 +-
 20 files changed, 114 insertions(+), 66 deletions(-)
 create mode 100644 src/lib/elements/forms/label.svelte

diff --git a/src/lib/elements/forms/index.ts b/src/lib/elements/forms/index.ts
index dd02f69649..d60fb54424 100644
--- a/src/lib/elements/forms/index.ts
+++ b/src/lib/elements/forms/index.ts
@@ -23,3 +23,4 @@ export { default as InputURL } from './inputURL.svelte';
 export { default as InputId } from './inputId.svelte';
 export { default as InputSecret } from './inputSecret.svelte';
 export { default as Helper } from './helper.svelte';
+export { default as Label } from './label.svelte';
diff --git a/src/lib/elements/forms/inputCheckbox.svelte b/src/lib/elements/forms/inputCheckbox.svelte
index 7e2f89ac9e..b8c601635b 100644
--- a/src/lib/elements/forms/inputCheckbox.svelte
+++ b/src/lib/elements/forms/inputCheckbox.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { FormItem, Helper } from '.';
+    import { FormItem, Helper, Label } from '.';
 
     export let label: string;
     export let optionalText: string | undefined = undefined;
@@ -27,12 +27,9 @@
 </script>
 
 <FormItem>
-    <label class:u-hide={!showLabel} class="label" for={id}>
+    <Label {required} {optionalText} hide={!showLabel} for={id}>
         {label}
-        {#if optionalText}
-            <span class="optional">{optionalText}</span>
-        {/if}
-    </label>
+    </Label>
 
     <div class="input-text-wrapper">
         <input
diff --git a/src/lib/elements/forms/inputCron.svelte b/src/lib/elements/forms/inputCron.svelte
index 078b5b7beb..484b92756b 100644
--- a/src/lib/elements/forms/inputCron.svelte
+++ b/src/lib/elements/forms/inputCron.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { onMount } from 'svelte';
-    import { FormItem, Helper } from '.';
+    import { FormItem, Helper, Label } from '.';
 
     export let label: string;
     export let showLabel = true;
@@ -48,7 +48,10 @@
 </script>
 
 <FormItem>
-    <label class:u-hide={!showLabel} class="label" for={id}>{label}</label>
+    <Label {required} hide={!showLabel} for={id}>
+        {label}
+    </Label>
+
     <div class="input-text-wrapper">
         <input
             {id}
diff --git a/src/lib/elements/forms/inputDateTime.svelte b/src/lib/elements/forms/inputDateTime.svelte
index 97ef75c479..cd13a5f658 100644
--- a/src/lib/elements/forms/inputDateTime.svelte
+++ b/src/lib/elements/forms/inputDateTime.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { onMount } from 'svelte';
-    import { FormItem, Helper } from '.';
+    import { FormItem, Helper, Label } from '.';
 
     export let label: string;
     export let showLabel = true;
@@ -39,12 +39,9 @@
 </script>
 
 <FormItem>
-    <label class:u-hide={!showLabel} class="label" for={id}>
+    <Label {required} {optionalText} hide={!showLabel} for={id}>
         {label}
-        <span class:u-hide={!showLabel || !optionalText} class="optional">
-            {optionalText}
-        </span>
-    </label>
+    </Label>
 
     <div class="input-text-wrapper" style="--amount-of-buttons:1; --button-size: 1rem">
         <input
diff --git a/src/lib/elements/forms/inputDomain.svelte b/src/lib/elements/forms/inputDomain.svelte
index 697059a130..b261756a84 100644
--- a/src/lib/elements/forms/inputDomain.svelte
+++ b/src/lib/elements/forms/inputDomain.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { onMount } from 'svelte';
-    import { FormItem, Helper } from '.';
+    import { FormItem, Helper, Label } from '.';
 
     export let label: string;
     export let showLabel = true;
@@ -47,7 +47,10 @@
 </script>
 
 <FormItem>
-    <label class:u-hide={!showLabel} class="label" for={id}>{label}</label>
+    <Label {required} hide={!showLabel} for={id}>
+        {label}
+    </Label>
+
     <div class="input-text-wrapper">
         <input
             {id}
diff --git a/src/lib/elements/forms/inputEmail.svelte b/src/lib/elements/forms/inputEmail.svelte
index b50e38e39e..b2271df6ad 100644
--- a/src/lib/elements/forms/inputEmail.svelte
+++ b/src/lib/elements/forms/inputEmail.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { onMount } from 'svelte';
-    import { FormItem, Helper } from '.';
+    import { FormItem, Helper, Label } from '.';
 
     export let label: string;
     export let showLabel = true;
@@ -41,7 +41,10 @@
 </script>
 
 <FormItem>
-    <label class:u-hide={!showLabel} class="label" for={id}>{label}</label>
+    <Label {required} hide={!showLabel} for={id}>
+        {label}
+    </Label>
+
     <div class="input-text-wrapper">
         <input
             {id}
diff --git a/src/lib/elements/forms/inputNumber.svelte b/src/lib/elements/forms/inputNumber.svelte
index 7f3b9ee48b..9e43b3fb32 100644
--- a/src/lib/elements/forms/inputNumber.svelte
+++ b/src/lib/elements/forms/inputNumber.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { onMount } from 'svelte';
-    import { FormItem, Helper } from '.';
+    import { FormItem, Helper, Label } from '.';
 
     export let label: string;
     export let optionalText: string | undefined = undefined;
@@ -52,12 +52,9 @@
 </script>
 
 <FormItem>
-    <label class:u-hide={!showLabel} class="label" for={id}>
+    <Label {required} {optionalText} hide={!showLabel} for={id}>
         {label}
-        {#if optionalText}
-            <span class="optional">{optionalText}</span>
-        {/if}
-    </label>
+    </Label>
 
     <div class="input-text-wrapper">
         <input
diff --git a/src/lib/elements/forms/inputPassword.svelte b/src/lib/elements/forms/inputPassword.svelte
index d1e0aa1fd6..1fb9429b3a 100644
--- a/src/lib/elements/forms/inputPassword.svelte
+++ b/src/lib/elements/forms/inputPassword.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { onMount } from 'svelte';
-    import { FormItem, Helper } from '.';
+    import { FormItem, Helper, Label } from '.';
 
     export let id: string;
     export let label: string;
@@ -47,7 +47,10 @@
 </script>
 
 <FormItem>
-    <label class:u-hide={!showLabel} class="label" for={id}>{label}</label>
+    <Label {required} hide={!showLabel} for={id}>
+        {label}
+    </Label>
+
     <div class="input-text-wrapper">
         {#if showInPlainText}
             <input
diff --git a/src/lib/elements/forms/inputPhone.svelte b/src/lib/elements/forms/inputPhone.svelte
index 50e389ce6b..8c630aa4aa 100644
--- a/src/lib/elements/forms/inputPhone.svelte
+++ b/src/lib/elements/forms/inputPhone.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { onMount } from 'svelte';
-    import { FormItem, Helper } from '.';
+    import { FormItem, Helper, Label } from '.';
 
     export let label: string;
     export let showLabel = true;
@@ -46,7 +46,9 @@
 </script>
 
 <FormItem>
-    <label class:u-hide={!showLabel} class="label" for={id}>{label}</label>
+    <Label {required} hide={!showLabel} for={id}>
+        {label}
+    </Label>
     <div class="input-text-wrapper">
         <input
             {id}
diff --git a/src/lib/elements/forms/inputRadio.svelte b/src/lib/elements/forms/inputRadio.svelte
index ac1734e0d2..97f1b14b45 100644
--- a/src/lib/elements/forms/inputRadio.svelte
+++ b/src/lib/elements/forms/inputRadio.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { FormItem, Helper } from '.';
+    import { FormItem, Helper, Label } from '.';
 
     export let label: string;
     export let showLabel = true;
@@ -40,7 +40,9 @@
             bind:group
             bind:this={element}
             on:invalid={handleInvalid} />
-        <label class:u-hide={!showLabel} class="label" for={id}>{label}</label>
+        <Label {required} hide={!showLabel} for={id}>
+            {label}
+        </Label>
     </div>
     {#if error}
         <Helper type="warning">{error}</Helper>
diff --git a/src/lib/elements/forms/inputSecret.svelte b/src/lib/elements/forms/inputSecret.svelte
index f7244bf751..c1932133d9 100644
--- a/src/lib/elements/forms/inputSecret.svelte
+++ b/src/lib/elements/forms/inputSecret.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { FormItem } from '.';
+    import { FormItem, Label } from '.';
 
     export let id: string;
     export let label: string;
@@ -11,7 +11,10 @@
 </script>
 
 <FormItem>
-    <label class:u-hide={!showLabel} class="label" for={id}>{label}</label>
+    <Label hide={!showLabel} for={id}>
+        {label}
+    </Label>
+
     <div class="input-text-wrapper" style=" --amount-of-buttons: 1;">
         {#if showInPlainText}
             <div
diff --git a/src/lib/elements/forms/inputSelect.svelte b/src/lib/elements/forms/inputSelect.svelte
index f0cf489bf2..73f7ef6346 100644
--- a/src/lib/elements/forms/inputSelect.svelte
+++ b/src/lib/elements/forms/inputSelect.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { FormItem, Helper } from '.';
+    import { FormItem, Helper, Label } from '.';
 
     export let id: string;
     export let label: string;
@@ -33,12 +33,9 @@
 </script>
 
 <FormItem>
-    <label class:u-hide={!showLabel} class="label" for={id}>
+    <Label {required} {optionalText} hide={!showLabel} for={id}>
         {label}
-        {#if optionalText}
-            <span class="optional">{optionalText}</span>
-        {/if}
-    </label>
+    </Label>
 
     <div class="select">
         <select
diff --git a/src/lib/elements/forms/inputTags.svelte b/src/lib/elements/forms/inputTags.svelte
index 71e4030688..c3f6bdde6e 100644
--- a/src/lib/elements/forms/inputTags.svelte
+++ b/src/lib/elements/forms/inputTags.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { last } from '$lib/helpers/array';
     import { onMount } from 'svelte';
-    import { FormItem, Helper } from '.';
+    import { FormItem, Helper, Label } from '.';
 
     export let id: string;
     export let label: string;
@@ -77,7 +77,10 @@
         value={tags.join(',')}
         {required}
         on:invalid={handleInvalid} />
-    <label class:u-hide={!showLabel} class="label" for={id}>{label}</label>
+    <Label {required} hide={!showLabel} for={id}>
+        {label}
+    </Label>
+
     <div class="input-text-wrapper">
         <div class="tags-input">
             <div class="tags">
diff --git a/src/lib/elements/forms/inputText.svelte b/src/lib/elements/forms/inputText.svelte
index 17f00f89b2..333f173698 100644
--- a/src/lib/elements/forms/inputText.svelte
+++ b/src/lib/elements/forms/inputText.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
-    import { tooltip as tooltipAction } from '$lib/actions/tooltip';
     import { onMount } from 'svelte';
-    import { FormItem, Helper } from '.';
+    import { FormItem, Helper, Label } from '.';
 
     export let label: string;
     export let optionalText: string | undefined = undefined;
@@ -43,20 +42,9 @@
 </script>
 
 <FormItem>
-    <label class:u-hide={!showLabel} class="label" for={id}>
+    <Label {required} {tooltip} {optionalText} hide={!showLabel} for={id}>
         {label}
-        {#if tooltip}
-            <span
-                class="icon-info"
-                aria-hidden="true"
-                use:tooltipAction={{
-                    content: tooltip
-                }} />
-        {/if}
-        {#if optionalText}
-            <span class="optional">{optionalText}</span>
-        {/if}
-    </label>
+    </Label>
 
     <div class="input-text-wrapper">
         <input
@@ -72,6 +60,13 @@
             bind:value
             bind:this={element}
             on:invalid={handleInvalid} />
+        {#if maxlength}
+            <span class="text-counter">
+                <span class="text-counter-count">{value?.length ?? 0}</span>
+                <span class="text-counter-separator" />
+                <span class="text-counter-max">{maxlength}</span>
+            </span>
+        {/if}
     </div>
     {#if error}
         <Helper type="warning">{error}</Helper>
diff --git a/src/lib/elements/forms/inputTextarea.svelte b/src/lib/elements/forms/inputTextarea.svelte
index 8c828baf9d..7285b6f240 100644
--- a/src/lib/elements/forms/inputTextarea.svelte
+++ b/src/lib/elements/forms/inputTextarea.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { onMount } from 'svelte';
-    import { FormItem, Helper } from '.';
+    import { FormItem, Helper, Label } from '.';
 
     export let label: string;
     export let showLabel = true;
@@ -37,7 +37,10 @@
 </script>
 
 <FormItem>
-    <label class:u-hide={!showLabel} class="label" for={id}>{label}</label>
+    <Label {required} hide={!showLabel} for={id}>
+        {label}
+    </Label>
+
     <div class="input-text-wrapper">
         <textarea
             {id}
diff --git a/src/lib/elements/forms/inputURL.svelte b/src/lib/elements/forms/inputURL.svelte
index 6eab4c3bab..19f8499f6e 100644
--- a/src/lib/elements/forms/inputURL.svelte
+++ b/src/lib/elements/forms/inputURL.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { onMount } from 'svelte';
-    import { FormItem, Helper } from '.';
+    import { FormItem, Helper, Label } from '.';
 
     export let label: string;
     export let showLabel = true;
@@ -50,7 +50,10 @@
 </script>
 
 <FormItem>
-    <label class:u-hide={!showLabel} class="label" for={id}>{label}</label>
+    <Label {required} hide={!showLabel} for={id}>
+        {label}
+    </Label>
+
     <div class="input-text-wrapper">
         <input
             {id}
diff --git a/src/lib/elements/forms/label.svelte b/src/lib/elements/forms/label.svelte
new file mode 100644
index 0000000000..492515f58c
--- /dev/null
+++ b/src/lib/elements/forms/label.svelte
@@ -0,0 +1,33 @@
+<script lang="ts">
+    interface $$Props extends Partial<HTMLLabelElement> {
+        required?: boolean;
+        optionalText?: string | undefined;
+        hide?: boolean;
+        tooltip?: string;
+        for?: string;
+    }
+
+    export let required: $$Props['required'] = false;
+    export let optionalText: $$Props['optionalText'] = undefined;
+    export let hide: $$Props['hide'] = false;
+    export let tooltip: $$Props['tooltip'] = null;
+</script>
+
+<label class:is-required={required} class:u-hide={hide} class="label" {...$$restProps}>
+    <slot />
+</label>
+
+{#if optionalText}
+    <span class="optional">{optionalText}</span>
+{/if}
+
+{#if tooltip}
+    <button class="tooltip" aria-label="variables info">
+        <span class="icon-info" aria-hidden="true" />
+        <span class="tooltip-popup" role="tooltip">
+            <p class="text">
+                {tooltip}
+            </p>
+        </span>
+    </button>
+{/if}
diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/attributeForm.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/attributeForm.svelte
index f0cee79658..f14e95019f 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/attributeForm.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/attributeForm.svelte
@@ -10,7 +10,7 @@
     export let attributes: Attributes[] = [];
     export let formValues: object = {};
     export let customId: string | null | undefined = undefined;
-    export let gap: '16' | '32' = '32';
+    export let gap: '16' | '24' | '32' = '32';
 
     let showCustomId = false;
 
@@ -37,7 +37,7 @@
 {#if attributes.length}
     <ul class={`form-list u-gap-${gap}`}>
         {#each attributes as attribute}
-            {@const label = attribute.required ? `${attribute.key}*` : attribute.key}
+            {@const label = attribute.key}
             {#if attribute.array}
                 {#if formValues[attribute.key].length === 0}
                     <div class="u-flex u-cross-center u-main-space-between">
@@ -71,6 +71,7 @@
                                 </div>
                                 <div class="form-item-part u-cross-child-end">
                                     <Button
+                                        noMargin
                                         text
                                         on:click={() => removeArrayItem(attribute.key, index)}>
                                         <span class="icon-x" aria-hidden="true" />
@@ -78,11 +79,11 @@
                                 </div>
                             </li>
                         {/each}
+                        <Button text noMargin on:click={() => addArrayItem(attribute.key)}>
+                            <span class="icon-plus" aria-hidden="true" />
+                            <span class="text"> Add item</span>
+                        </Button>
                     </ul>
-                    <Button text noMargin on:click={() => addArrayItem(attribute.key)}>
-                        <span class="icon-plus" aria-hidden="true" />
-                        <span class="text"> Add item</span>
-                    </Button>
                 {/if}
             {:else}
                 <FormList>
diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/attributes/string.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/attributes/string.svelte
index 20c3b1141d..e6655f95e9 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/attributes/string.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/attributes/string.svelte
@@ -13,6 +13,7 @@
     {id}
     {label}
     {optionalText}
+    placeholder="Enter string"
     showLabel={!!label?.length}
     required={attribute.required}
     maxlength={attribute.size}
diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/wizard/step1.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/wizard/step1.svelte
index 1df88ae0c0..fc7bb5c786 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/wizard/step1.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/wizard/step1.svelte
@@ -13,5 +13,6 @@
     <AttributeForm
         bind:formValues={$createDocument.document}
         attributes={$createDocument.attributes}
-        bind:customId={$createDocument.id} />
+        bind:customId={$createDocument.id}
+        gap="24" />
 </WizardStep>