From a1615feaa5c852796f844210f4a9e817e5328927 Mon Sep 17 00:00:00 2001
From: Joe <49767913+joebudi@users.noreply.github.com>
Date: Tue, 14 Jul 2020 16:08:07 +0100
Subject: [PATCH] Data link block updated to Linked Fields

'Data -ink' block updated to Linked Fields
Additional blocks added, including URL
Icons updated
---
 .../nav/ModelNavigator/ModelNavigator.svelte  |  2 +-
 .../userInterface/ComponentsHierarchy.svelte  | 15 +++++----
 .../ComponentsHierarchyChildren.svelte        |  8 +++--
 .../builder/src/constants/backend/index.js    | 32 +++++++++++++++----
 4 files changed, 42 insertions(+), 15 deletions(-)

diff --git a/packages/builder/src/components/nav/ModelNavigator/ModelNavigator.svelte b/packages/builder/src/components/nav/ModelNavigator/ModelNavigator.svelte
index d7cc44bc0d..73bf641cef 100644
--- a/packages/builder/src/components/nav/ModelNavigator/ModelNavigator.svelte
+++ b/packages/builder/src/components/nav/ModelNavigator/ModelNavigator.svelte
@@ -68,7 +68,7 @@
                       <ListItem
                         selected={model._id === $backendUiStore.selectedModel._id && fieldName === $backendUiStore.selectedField}
                         indented
-                        icon="ri-layout-column-fill"
+                        icon="ri-layout-column-line"
                         title={model.schema[fieldName].name}
                         on:click={() => selectModel(model, fieldName)} />
                     {/each}
diff --git a/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte b/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte
index fbe9121623..80aad3fe39 100644
--- a/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte
+++ b/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte
@@ -15,12 +15,15 @@
   const joinPath = join("/")
 
   const normalizedName = name =>
-    pipe(name, [
-      trimCharsStart("./"),
-      trimCharsStart("~/"),
-      trimCharsStart("../"),
-      trimChars(" "),
-    ])
+    pipe(
+      name,
+      [
+        trimCharsStart("./"),
+        trimCharsStart("~/"),
+        trimCharsStart("../"),
+        trimChars(" "),
+      ]
+    )
 
   const changeScreen = screen => {
     store.setCurrentScreen(screen.props._instanceName)
diff --git a/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte b/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte
index e7fd8118ef..d827a88f86 100644
--- a/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte
+++ b/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte
@@ -19,7 +19,11 @@
   const capitalise = s => s.substring(0, 1).toUpperCase() + s.substring(1)
   const get_name = s => (!s ? "" : last(s.split("/")))
 
-  const get_capitalised_name = name => pipe(name, [get_name, capitalise])
+  const get_capitalised_name = name =>
+    pipe(
+      name,
+      [get_name, capitalise]
+    )
   const isScreenslot = name => name === "##builtin/screenslot"
 
   const selectComponent = component => {
@@ -42,7 +46,7 @@
         class:selected={currentComponent === component}
         style="padding-left: {level * 20 + 40}px">
         <div class="nav-item">
-          <i class="icon ri-arrow-right-circle-fill" />
+          <i class="icon ri-arrow-right-circle-line" />
           {isScreenslot(component._component) ? 'Screenslot' : component._instanceName}
         </div>
         <div class="actions">
diff --git a/packages/builder/src/constants/backend/index.js b/packages/builder/src/constants/backend/index.js
index 94879da7e2..0747439cfa 100644
--- a/packages/builder/src/constants/backend/index.js
+++ b/packages/builder/src/constants/backend/index.js
@@ -65,8 +65,8 @@ export const FIELDS = {
   //     presence: false,
   //   },
   // },
-  DATA_LINK: {
-    name: "Data Links",
+  LINKED_FIELDS: {
+    name: "Linked Fields",
     icon: "ri-link",
     type: "link",
     modelId: null,
@@ -89,7 +89,7 @@ export const BLOCKS = {
   },
   COMPANY: {
     name: "Company",
-    icon: "ri-text",
+    icon: "ri-store-line",
     type: "string",
     constraints: {
       type: "string",
@@ -99,7 +99,7 @@ export const BLOCKS = {
   },
   EMAIL: {
     name: "Email",
-    icon: "ri-text",
+    icon: "ri-mail-line",
     type: "string",
     constraints: {
       type: "string",
@@ -109,7 +109,7 @@ export const BLOCKS = {
   },
   PHONE_NUMBER: {
     name: "Phone No.",
-    icon: "ri-number-1",
+    icon: "ri-phone-line",
     type: "number",
     constraints: {
       type: "number",
@@ -119,7 +119,7 @@ export const BLOCKS = {
   },
   VALUE: {
     name: "Value",
-    icon: "ri-number-1",
+    icon: "ri-number-5",
     type: "number",
     constraints: {
       type: "number",
@@ -136,6 +136,26 @@ export const BLOCKS = {
       presence: false,
     },
   },
+  URL: {
+    name: "URL",
+    icon: "ri-link",
+    type: "string",
+    constraints: {
+      type: "string",
+      length: {},
+      presence: false,
+    },
+  },
+  IMAGE: {
+    name: "Image URL",
+    icon: "ri-image-line",
+    type: "string",
+    constraints: {
+      type: "string",
+      length: {},
+      presence: false,
+    },
+  },
   // PRIORITY: {
   //   name: "Options",
   //   icon: "ri-list-check-2",