Button Update

*Added an option to select button type
*Added an option to change the size of the button
*Added an option to enable button quiet variants

Author: FlaminWrap

package.json

@@ -1,6 +1,6 @@
 {
   "name": "Budibase-Signature-Plugin",
-  "version": "1.2.10",
+  "version": "1.2.11",
   "description": "A plugin that allows signatures to be created and saved in budibase",
   "license": "MIT",
   "svelte": "index.js",

schema.json

@@ -124,7 +124,10 @@
         "type": "boolean",
         "key": "showClearSignatureButton",
         "label": "Show Clear Signature Button",
-        "defaultValue": true
+        "barTitle": "Show Clear Signature Button",
+        "defaultValue": true,
+        "showInBar": true,
+        "barIcon": "Button"
       },
       {
         "type": "boolean",
@@ -136,6 +139,78 @@
           "value": true
         }
       },
+      {
+        "type": "select",
+        "label": "Button Variant",
+        "key": "buttonType",
+        "showInBar": true,
+        "barTitle": "Button Variant",
+        "options": [
+          {
+            "label": "Primary",
+            "value": 0
+          },
+          {
+            "label": "Secondary",
+            "value": 1
+          },
+          {
+            "label": "Action",
+            "value": 2
+          },
+          {
+            "label": "Warning",
+            "value": 3
+          },
+          {
+            "label": "Over background",
+            "value": 4
+          }
+        ],
+        "defaultValue": 0,
+        "dependsOn": {
+          "setting": "showClearSignatureButton",
+          "value": true
+        }
+      },
+      {
+        "type": "select",
+        "label": "Button Size",
+        "key": "buttonSize",
+        "showInBar": true,
+        "options": [
+          {
+            "label": "Small",
+            "value": "S"
+          },
+          {
+            "label": "Medium",
+            "value": "M"
+          },
+          {
+            "label": "Large",
+            "value": "L"
+          },
+          {
+            "label": "Extra large",
+            "value": "XL"
+          }
+        ],
+        "defaultValue": "M",
+        "dependsOn": {
+          "setting": "showClearSignatureButton",
+          "value": true
+        }
+      },
+      {
+        "type": "boolean",
+        "label": "Button Quiet",
+        "key": "buttonQuiet",
+        "showInBar": true,
+        "barIcon": "VisibilityOff",
+        "barTitle": "Quiet button",
+        "barSeparator": false
+      },
       {
         "type": "text",
         "key": "clearSignatureButtonText",

src/Canvas.svelte

@@ -12,7 +12,7 @@
     export let saveBackgroundColour = true
     export let setSignatureValue = () => {}
     export let showClearSignatureButton = true
-    export let showButtonIcon = true
+    export let buttonIcon = "Erase"
     export let clearSignatureButtonText = "Clear Signature"
     export let modalTitle = "Clear Signature"
     export let modalActionButtonText = "Clear"
@@ -21,7 +21,10 @@
     export let borderColor = "#000000"
     export let borderWidth = "1px"
     export let inBuilder = false
-	
+    export let buttonStyle = [true, false, false, false, false]
+    export let buttonSize = "M"
+    export let buttonQuiet = false
+
     let eraseSignatureModal
 	let canvas
 	let context
@@ -118,42 +121,28 @@
 
 <svelte:window on:resize={handleSize} />
 {#if showClearSignatureButton}
-<div style="padding-right:8px;padding-bottom:8px;">
-    {#if showButtonIcon}
-        {#if !inBuilder}
-        <Button icon="Erase" primary on:click={eraseSignatureModal.show}>
-            {clearSignatureButtonText}
-        </Button>
-        {:else}
-        <Button icon="Erase" primary>
-            {clearSignatureButtonText}
-        </Button>
-        {/if}
-    {:else}
+    <div style="padding-right:8px;padding-bottom:8px;">
         {#if !inBuilder}
-            <Button primary on:click={eraseSignatureModal.show}>
+            <Button icon={buttonIcon} size={buttonSize} primary={buttonStyle[0]} secondary={buttonStyle[1]} cta={buttonStyle[2]} warning={buttonStyle[3]} overBackground={buttonStyle[4]} quiet={buttonQuiet} on:click={eraseSignatureModal.show}>
                 {clearSignatureButtonText}
             </Button>
-        {:else}
-            <Button primary>
+            <Modal bind:this={eraseSignatureModal}>
+                <ModalContent
+                    title={modalTitle}
+                    confirmText={modalActionButtonText}
+                    onConfirm={clearCanvas}
+                    >
+                    <span
+                        >{modalBody}</span
+                    >
+                </ModalContent>
+            </Modal>
+            {:else}
+            <Button icon={buttonIcon} size={buttonSize} primary={buttonStyle[0]} secondary={buttonStyle[1]} cta={buttonStyle[2]} warning={buttonStyle[3]} overBackground={buttonStyle[4]} quiet={buttonQuiet}>
                 {clearSignatureButtonText}
             </Button>
         {/if}
-    {/if}
-    {#if !inBuilder}
-    <Modal bind:this={eraseSignatureModal}>
-        <ModalContent
-            title={modalTitle}
-            confirmText={modalActionButtonText}
-            onConfirm={clearCanvas}
-            >
-            <span
-                >{modalBody}</span
-            >
-        </ModalContent>
-    </Modal>
-    {/if}
-</div>
+    </div>
 {/if}
 <canvas style="outline-style: {borderOutline}; outline-color: {borderColor}; outline-width: {borderWidth}"
 				{width}

src/Component.svelte

@@ -23,10 +23,16 @@
   export let signatureData
   export let validation
   export let tooltip = ""
+  export let buttonType
+  export let buttonSize
+  export let buttonQuiet
 
   let initalImage
   let currentImage
 
+  let buttonStyle = []
+  let buttonIcon
+
   let canBeDisplayed
   let errorMessages = [];
   
@@ -121,7 +127,31 @@ $: formField = formApi?.registerField(
   if (($builderStore.inBuilder)){
     inBuilder = true;
   }
+
+  $: setupButtonType(buttonType)
+
+  function setupButtonType(buttonType){
+    buttonStyle = []
+    for (let i = 0; i < 5; i++){
+      if (buttonType === i){
+        buttonStyle.push(true)
+      } else {
+        buttonStyle.push(false)
+      }
+    }
+  }
+
+  $: buttonIconSetup(showButtonIcon)
+
+  function buttonIconSetup(showButtonIcon){
+    if (showButtonIcon){
+      buttonIcon = "Erase"
+    } else {
+      buttonIcon = ""
+    }
+  }
 </script>
+
 <div class="spectrum-Form-item" class:above={labelPos === "above"} use:styleable={$component.styles}>
   {#if !canBeDisplayed}
     <!-- Display error messages when requirements are not defined -->
@@ -153,7 +183,7 @@ $: formField = formApi?.registerField(
         {penWidth}
         {saveBackgroundColour}
         {showClearSignatureButton}
-        {showButtonIcon}
+        {buttonIcon}
         {clearSignatureButtonText}
         {setSignatureValue}
         {modalTitle}
@@ -163,6 +193,9 @@ $: formField = formApi?.registerField(
         {borderColor}
         {borderWidth}
         {inBuilder}
+        {buttonStyle}
+        {buttonSize}
+        {buttonQuiet}
       >
       </Canvas>