From 28f4736e9821c2370a9ab8bea8a319277bc3170f Mon Sep 17 00:00:00 2001
From: Gerard Burns <Ghrehh@users.noreply.github.com>
Date: Wed, 17 May 2023 10:58:06 +0100
Subject: [PATCH] Onboarding Improvements (#10540)

* Onboarding Improvements

* PR Feedback

* linting
---
 packages/bbui/src/Button/Button.svelte        |  3 +
 .../bbui/src/FancyForm/ErrorMessage.svelte    | 19 ++++++
 packages/bbui/src/FancyForm/FancyField.svelte | 13 +---
 packages/bbui/src/FancyForm/index.js          |  1 +
 .../src/components/Testimonial.svelte         | 67 +++++++++++++++++++
 .../src/components/TestimonialPage.svelte     | 63 +----------------
 .../frontend-core/src/components/index.js     |  1 +
 7 files changed, 95 insertions(+), 72 deletions(-)
 create mode 100644 packages/bbui/src/FancyForm/ErrorMessage.svelte
 create mode 100644 packages/frontend-core/src/components/Testimonial.svelte

diff --git a/packages/bbui/src/Button/Button.svelte b/packages/bbui/src/Button/Button.svelte
index f8a6004f8f..efd5f33bd2 100644
--- a/packages/bbui/src/Button/Button.svelte
+++ b/packages/bbui/src/Button/Button.svelte
@@ -2,6 +2,7 @@
   import "@spectrum-css/button/dist/index-vars.css"
   import Tooltip from "../Tooltip/Tooltip.svelte"
 
+  export let type
   export let disabled = false
   export let size = "M"
   export let cta = false
@@ -21,6 +22,7 @@
 
 <button
   {id}
+  {type}
   class:spectrum-Button--cta={cta}
   class:spectrum-Button--primary={primary}
   class:spectrum-Button--secondary={secondary}
@@ -73,6 +75,7 @@
   button {
     position: relative;
   }
+
   .spectrum-Button-label {
     white-space: nowrap;
     overflow: hidden;
diff --git a/packages/bbui/src/FancyForm/ErrorMessage.svelte b/packages/bbui/src/FancyForm/ErrorMessage.svelte
new file mode 100644
index 0000000000..3756b2ef3c
--- /dev/null
+++ b/packages/bbui/src/FancyForm/ErrorMessage.svelte
@@ -0,0 +1,19 @@
+<script>
+  import { slide } from "svelte/transition"
+
+  export let error = null
+</script>
+
+<div transition:slide|local={{ duration: 130 }} class="error-message">
+  {error}
+</div>
+
+<style>
+  .error-message {
+    background: var(--spectrum-global-color-red-400);
+    color: white;
+    font-size: 14px;
+    padding: 6px 16px;
+    font-weight: 500;
+  }
+</style>
diff --git a/packages/bbui/src/FancyForm/FancyField.svelte b/packages/bbui/src/FancyForm/FancyField.svelte
index 89f2dec7d0..0c99394599 100644
--- a/packages/bbui/src/FancyForm/FancyField.svelte
+++ b/packages/bbui/src/FancyForm/FancyField.svelte
@@ -1,7 +1,7 @@
 <script>
   import Icon from "../Icon/Icon.svelte"
   import { getContext, onMount } from "svelte"
-  import { slide } from "svelte/transition"
+  import ErrorMessage from "./ErrorMessage.svelte"
 
   export let disabled = false
   export let error = null
@@ -55,9 +55,7 @@
     {/if}
   </div>
   {#if error}
-    <div transition:slide|local={{ duration: 130 }} class="error-message">
-      {error}
-    </div>
+    <ErrorMessage {error} />
   {/if}
 </div>
 
@@ -110,13 +108,6 @@
   .field {
     flex: 1 1 auto;
   }
-  .error-message {
-    background: var(--spectrum-global-color-red-400);
-    color: white;
-    font-size: 14px;
-    padding: 6px 16px;
-    font-weight: 500;
-  }
   .error-icon {
     flex: 0 0 auto;
   }
diff --git a/packages/bbui/src/FancyForm/index.js b/packages/bbui/src/FancyForm/index.js
index 241036fb35..e105991c0f 100644
--- a/packages/bbui/src/FancyForm/index.js
+++ b/packages/bbui/src/FancyForm/index.js
@@ -4,3 +4,4 @@ export { default as FancySelect } from "./FancySelect.svelte"
 export { default as FancyButton } from "./FancyButton.svelte"
 export { default as FancyForm } from "./FancyForm.svelte"
 export { default as FancyButtonRadio } from "./FancyButtonRadio.svelte"
+export { default as ErrorMessage } from "./ErrorMessage.svelte"
diff --git a/packages/frontend-core/src/components/Testimonial.svelte b/packages/frontend-core/src/components/Testimonial.svelte
new file mode 100644
index 0000000000..d65185d143
--- /dev/null
+++ b/packages/frontend-core/src/components/Testimonial.svelte
@@ -0,0 +1,67 @@
+<script>
+  import { Layout } from "@budibase/bbui"
+  import Bulgaria from "../../assets/bulgaria.png"
+  import Covanta from "../../assets/covanta.png"
+  import Schnellecke from "../../assets/schnellecke.png"
+
+  const testimonials = [
+    {
+      text: "Budibase was the only solution that checked all the boxes for Covanta. Covanta expects to realize $3.2MM in savings due to the elimination of redundant data entry.",
+      name: "Charles Link",
+      role: "Senior Director, Data and Analytics",
+      image: Covanta,
+      imageSize: 105,
+    },
+    {
+      text: "Budibase was mission-critical for us and went a long way in preventing what could have become a humanitarian crisis here in Bulgaria.",
+      name: "Bozhidar Bozhanov",
+      role: "Government of Bulgaria",
+      image: Bulgaria,
+      imageSize: 49,
+    },
+    {
+      text: "Centralization of authentication, quick turnaround time for requests, integration with different database systems has given it the edge and it’s now used daily for internal development for those apps that you know you need but don’t feel value in losing days of development to reinvent the wheel.",
+      name: "Davide Lenzarini",
+      role: "IT manager",
+      image: Schnellecke,
+      imageSize: 141,
+    },
+  ]
+  const testimonial = testimonials[Math.floor(Math.random() * 3)]
+</script>
+
+<div class="testimonial">
+  <Layout noPadding gap="S">
+    <img
+      width={testimonial.imageSize}
+      alt="a-happy-budibase-user"
+      src={testimonial.image}
+    />
+    <div class="text">
+      "{testimonial.text}"
+    </div>
+    <div class="author">
+      <div class="name">{testimonial.name}</div>
+      <div class="company">{testimonial.role}</div>
+    </div>
+  </Layout>
+</div>
+
+<style>
+  .testimonial {
+    width: 380px;
+    padding: 40px;
+  }
+  .text {
+    font-size: var(--font-size-l);
+    font-style: italic;
+  }
+  .name {
+    font-weight: bold;
+    color: var(--spectrum-global-color-gray-900);
+    font-size: var(--font-size-l);
+  }
+  .company {
+    color: var(--spectrum-global-color-gray-700);
+  }
+</style>
diff --git a/packages/frontend-core/src/components/TestimonialPage.svelte b/packages/frontend-core/src/components/TestimonialPage.svelte
index bbb61d2276..94983384a8 100644
--- a/packages/frontend-core/src/components/TestimonialPage.svelte
+++ b/packages/frontend-core/src/components/TestimonialPage.svelte
@@ -1,58 +1,15 @@
 <script>
   import SplitPage from "./SplitPage.svelte"
-  import { Layout } from "@budibase/bbui"
-  import Bulgaria from "../../assets/bulgaria.png"
-  import Covanta from "../../assets/covanta.png"
-  import Schnellecke from "../../assets/schnellecke.png"
+  import Testimonial from "./Testimonial.svelte"
 
   export let enabled = true
-
-  const testimonials = [
-    {
-      text: "Budibase was the only solution that checked all the boxes for Covanta. Covanta expects to realize $3.2MM in savings due to the elimination of redundant data entry.",
-      name: "Charles Link",
-      role: "Senior Director, Data and Analytics",
-      image: Covanta,
-      imageSize: 105,
-    },
-    {
-      text: "Budibase was mission-critical for us and went a long way in preventing what could have become a humanitarian crisis here in Bulgaria.",
-      name: "Bozhidar Bozhanov",
-      role: "Government of Bulgaria",
-      image: Bulgaria,
-      imageSize: 49,
-    },
-    {
-      text: "Centralization of authentication, quick turnaround time for requests, integration with different database systems has given it the edge and it’s now used daily for internal development for those apps that you know you need but don’t feel value in losing days of development to reinvent the wheel.",
-      name: "Davide Lenzarini",
-      role: "IT manager",
-      image: Schnellecke,
-      imageSize: 141,
-    },
-  ]
-  const testimonial = testimonials[Math.floor(Math.random() * 3)]
 </script>
 
 <SplitPage>
   <slot />
   <div class:wrapper={enabled} slot="right">
     {#if enabled}
-      <div class="testimonial">
-        <Layout noPadding gap="S">
-          <img
-            width={testimonial.imageSize}
-            alt="a-happy-budibase-user"
-            src={testimonial.image}
-          />
-          <div class="text">
-            "{testimonial.text}"
-          </div>
-          <div class="author">
-            <div class="name">{testimonial.name}</div>
-            <div class="company">{testimonial.role}</div>
-          </div>
-        </Layout>
-      </div>
+      <Testimonial />
     {/if}
   </div>
 </SplitPage>
@@ -64,20 +21,4 @@
     display: grid;
     place-items: center;
   }
-  .testimonial {
-    width: 380px;
-    padding: 40px;
-  }
-  .text {
-    font-size: var(--font-size-l);
-    font-style: italic;
-  }
-  .name {
-    font-weight: bold;
-    color: var(--spectrum-global-color-gray-900);
-    font-size: var(--font-size-l);
-  }
-  .company {
-    color: var(--spectrum-global-color-gray-700);
-  }
 </style>
diff --git a/packages/frontend-core/src/components/index.js b/packages/frontend-core/src/components/index.js
index 2b7033ad8f..88107da535 100644
--- a/packages/frontend-core/src/components/index.js
+++ b/packages/frontend-core/src/components/index.js
@@ -1,3 +1,4 @@
 export { default as SplitPage } from "./SplitPage.svelte"
 export { default as TestimonialPage } from "./TestimonialPage.svelte"
+export { default as Testimonial } from "./Testimonial.svelte"
 export { Grid } from "./grid"