Add fancy select and improve other fancy components

packages/bbui/src/FancyForm/FancyCheckbox.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { createEventDispatcher, getContext, onMount } from "svelte"
+  import { createEventDispatcher } from "svelte"
   import FancyField from "./FancyField.svelte"
   import Checkbox from "../Form/Core/Checkbox.svelte"
 
@@ -10,8 +10,6 @@
   export let validate = null
 
   const dispatch = createEventDispatcher()
-  const formContext = getContext("fancy-form")
-  const id = Math.random()
 
   const onChange = () => {
     const newValue = !value
@@ -21,29 +19,9 @@
       error = validate(newValue)
     }
   }
-
-  const API = {
-    validate: () => {
-      if (validate) {
-        error = validate(value)
-      }
-      return !error
-    },
-  }
-
-  onMount(() => {
-    if (formContext) {
-      formContext.registerField(id, API)
-    }
-    return () => {
-      if (formContext) {
-        formContext.unregisterField(id)
-      }
-    }
-  })
 </script>
 
-<FancyField {error} {disabled} clickable on:click={onChange}>
+<FancyField {error} {value} {validate} {disabled} clickable on:click={onChange}>
   <span>
     <Checkbox {disabled} {value} />
   </span>

packages/bbui/src/FancyForm/FancyField.svelte

@@ -1,10 +1,35 @@
 <script>
   import Icon from "../Icon/Icon.svelte"
+  import { getContext, onMount } from "svelte"
 
   export let disabled = false
   export let error = null
   export let focused = false
   export let clickable = false
+  export let validate
+  export let value
+
+  const formContext = getContext("fancy-form")
+  const id = Math.random()
+  const API = {
+    validate: () => {
+      if (validate) {
+        error = validate(value)
+      }
+      return !error
+    },
+  }
+
+  onMount(() => {
+    if (formContext) {
+      formContext.registerField(id, API)
+    }
+    return () => {
+      if (formContext) {
+        formContext.unregisterField(id)
+      }
+    }
+  })
 </script>
 
 <div

packages/bbui/src/FancyForm/FancyInput.svelte

@@ -1,7 +1,6 @@
 <script>
-  import { createEventDispatcher, getContext, onMount } from "svelte"
+  import { createEventDispatcher } from "svelte"
   import FancyField from "./FancyField.svelte"
-  import Icon from "../Icon/Icon.svelte"
 
   export let label
   export let value
@@ -11,8 +10,6 @@
   export let validate = null
 
   const dispatch = createEventDispatcher()
-  const formContext = getContext("fancy-form")
-  const id = Math.random()
 
   let focused = false
   $: placeholder = !focused && !value
@@ -25,29 +22,9 @@
       error = validate(newValue)
     }
   }
-
-  const API = {
-    validate: () => {
-      if (validate) {
-        error = validate(value)
-      }
-      return !error
-    },
-  }
-
-  onMount(() => {
-    if (formContext) {
-      formContext.registerField(id, API)
-    }
-    return () => {
-      if (formContext) {
-        formContext.unregisterField(id)
-      }
-    }
-  })
 </script>
 
-<FancyField {error} {disabled} {focused}>
+<FancyField {error} {value} {validate} {disabled} {focused}>
   {#if label}
     <div class="label" class:placeholder>
       {label}

packages/bbui/src/FancyForm/FancySelect.svelte

@@ -0,0 +1,156 @@
+<script>
+  import { createEventDispatcher } from "svelte"
+  import FancyField from "./FancyField.svelte"
+  import Icon from "../Icon/Icon.svelte"
+  import Popover from "../Popover/Popover.svelte"
+
+  export let label
+  export let value
+  export let disabled = false
+  export let error = null
+  export let validate = null
+  export let options = []
+  export let getOptionLabel = option => extractProperty(option, "label")
+  export let getOptionValue = option => extractProperty(option, "value")
+
+  const dispatch = createEventDispatcher()
+
+  let open = false
+  let popover
+  let wrapper
+
+  $: placeholder = !value
+
+  const extractProperty = (value, property) => {
+    if (value && typeof value === "object") {
+      return value[property]
+    }
+    return value
+  }
+
+  const onChange = newValue => {
+    dispatch("change", newValue)
+    value = newValue
+    if (validate) {
+      error = validate(newValue)
+    }
+    open = false
+  }
+</script>
+
+<div bind:this={wrapper}>
+  <FancyField
+    {error}
+    {value}
+    {validate}
+    {disabled}
+    clickable
+    on:click={() => (open = true)}
+  >
+    {#if label}
+      <div class="label" class:placeholder>
+        {label}
+      </div>
+    {/if}
+
+    <div class="value" class:placeholder>
+      {value || ""}
+    </div>
+
+    <div class="arrow">
+      <Icon name="ChevronDown" />
+    </div>
+  </FancyField>
+</div>
+
+<svelte:head>
+  <script>
+    console.log("FOO")
+  </script>
+</svelte:head>
+
+<span>
+  <Popover
+    anchor={wrapper}
+    align="left"
+    portalTarget={document.documentElement}
+    bind:this={popover}
+    {open}
+    on:close={() => (open = false)}
+    useAnchorWidth={true}
+    maxWidth={null}
+  >
+    <div class="popover-content">
+      {#if options.length}
+        {#each options as option, idx}
+          <div
+            class="popover-option"
+            tabindex="0"
+            on:click={() => onChange(getOptionValue(option, idx))}
+          >
+            <span class="option-text">
+              {getOptionLabel(option, idx)}
+            </span>
+            {#if value === getOptionValue(option, idx)}
+              <Icon name="Checkmark" />
+            {/if}
+          </div>
+        {/each}
+      {/if}
+    </div>
+  </Popover>
+</span>
+
+<style>
+  span :global(.spectrum-Popover) {
+    background: red !important;
+  }
+
+  .label {
+    font-size: 14px;
+    font-weight: 500;
+    transform: translateY(-50%);
+    position: absolute;
+    top: 18px;
+    color: var(--spectrum-global-color-gray-600);
+    transition: font-size 130ms ease-out, top 130ms ease-out;
+  }
+  .label.placeholder {
+    top: 50%;
+    font-size: 15px;
+    transform: translateY(-50%);
+  }
+  .value {
+    display: block;
+    flex: 1 1 auto;
+    font-size: 15px;
+    margin-top: 18px;
+    color: var(--spectrum-global-color-gray-900);
+    transition: margin-top 130ms ease-out, opacity 130ms ease-out;
+    opacity: 1;
+  }
+  .value.placeholder {
+    opacity: 0;
+    pointer-events: none;
+    margin-top: 0;
+  }
+  .popover-content {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    padding: 10px 0;
+  }
+  .popover-option {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    padding: 7px 12px;
+    transition: background 130ms ease-out;
+  }
+  .popover-option:hover {
+    background: var(--spectrum-global-color-gray-200);
+    cursor: pointer;
+  }
+</style>

packages/bbui/src/FancyForm/index.js

@@ -1,4 +1,5 @@
 export { default as FancyInput } from "./FancyInput.svelte"
 export { default as FancyCheckbox } from "./FancyCheckbox.svelte"
+export { default as FancySelect } from "./FancySelect.svelte"
 export { default as FancyButton } from "./FancyButton.svelte"
 export { default as FancyForm } from "./FancyForm.svelte"

packages/bbui/src/Form/Core/Select.svelte

@@ -18,8 +18,11 @@
   export let autoWidth = false
   export let autocomplete = false
   export let sort = false
+
   const dispatch = createEventDispatcher()
+
   let open = false
+
   $: fieldText = getFieldText(value, options, placeholder)
   $: fieldIcon = getFieldAttribute(getOptionIcon, value, options)
   $: fieldColour = getFieldAttribute(getOptionColour, value, options)