From eb0ffcc5b67862516b6b46e504e15c6bb8ad0aab Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Keviin=20=C3=85berg=20Kultalahti?= <kevin.aberg@gmail.com>
Date: Thu, 8 Apr 2021 15:46:34 +0200
Subject: [PATCH] converts ModalContent to semi-use spectrum

---
 packages/bbui/package.json                  |   1 +
 packages/bbui/src/Modal/ModalContent.svelte | 102 ++++++++------------
 packages/bbui/yarn.lock                     |  12 +++
 3 files changed, 51 insertions(+), 64 deletions(-)

diff --git a/packages/bbui/package.json b/packages/bbui/package.json
index f5a21adfad..a194473517 100644
--- a/packages/bbui/package.json
+++ b/packages/bbui/package.json
@@ -45,6 +45,7 @@
   "dependencies": {
     "@spectrum-css/button": "^3.0.1",
     "@spectrum-css/dialog": "^3.0.1",
+    "@spectrum-css/divider": "^1.0.1",
     "@spectrum-css/modal": "^3.0.1",
     "@spectrum-css/underlay": "^2.0.9",
     "markdown-it": "^12.0.4",
diff --git a/packages/bbui/src/Modal/ModalContent.svelte b/packages/bbui/src/Modal/ModalContent.svelte
index 33009363e5..75ae764509 100644
--- a/packages/bbui/src/Modal/ModalContent.svelte
+++ b/packages/bbui/src/Modal/ModalContent.svelte
@@ -1,9 +1,10 @@
 <script>
-  import { createEventDispatcher, getContext } from "svelte"
+  import "@spectrum-css/divider/dist/index-vars.css"
+
+  import { getContext } from "svelte"
   import Button from "../Button/Button.svelte"
   import Icon from "../Icons/Icon.svelte"
   import Context from "../context"
-  const dispatch = createEventDispatcher()
 
   export let title = undefined
   export let cancelText = "Cancel"
@@ -27,75 +28,48 @@
   }
 </script>
 
-<div class="modal-content">
-  {#if title}
-    <header>
-      <h5>{title}</h5>
-      <div class="header-content">
-        <slot name="header" />
+<div class="spectrum-Dialog spectrum-Dialog--small" role="dialog" tabindex="-1" aria-modal="true">
+  <div class="spectrum-Dialog-grid">
+    <h1 class="spectrum-Dialog-heading">{title}</h1>
+    <hr class="spectrum-Divider spectrum-Divider--sizeM spectrum-Divider--horizontal spectrum-Dialog-divider">
+    <section class="spectrum-Dialog-content">
+      <slot />
+    </section>
+    {#if showCancelButton || showConfirmButton}
+      <div class="spectrum-ButtonGroup spectrum-Dialog-buttonGroup spectrum-Dialog-buttonGroup--noFooter">
+        <footer class="footer-content">
+          <slot name="footer" />
+        </footer>
+        <div class="buttons">
+          {#if showCancelButton}
+            <Button secondary on:click={hide}>{cancelText}</Button>
+          {/if}
+          {#if showConfirmButton}
+            <Button
+              primary
+              {...$$restProps}
+              disabled={confirmDisabled}
+              on:click={confirm}>
+              {confirmText}
+            </Button>
+          {/if}
+        </div>
       </div>
-    </header>
-  {/if}
-  <slot />
-  {#if showCancelButton || showConfirmButton}
-    <footer>
-      <div class="footer-content">
-        <slot name="footer" />
+    {/if}
+    {#if showCloseIcon}
+      <div class="close-icon" on:click={hide}>
+        <Icon name="closeline" />
       </div>
-      <div class="buttons">
-        {#if showCancelButton}
-          <Button secondary on:click={hide}>{cancelText}</Button>
-        {/if}
-        {#if showConfirmButton}
-          <Button
-            primary
-            {...$$restProps}
-            disabled={confirmDisabled}
-            on:click={confirm}>
-            {confirmText}
-          </Button>
-        {/if}
-      </div>
-    </footer>
-  {/if}
-  {#if showCloseIcon}
-    <div class="close-icon" on:click={hide}>
-      <Icon name="closeline" />
-    </div>
-  {/if}
+    {/if}
+  </div>
 </div>
 
+
 <style>
-  .modal-content {
-    display: grid;
-    position: relative;
-    gap: var(--spacing-xl);
-    color: var(--ink);
-  }
-
-  header {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-    margin-right: 40px;
-  }
-  header h5 {
-    margin: 0;
-    font-weight: 500;
-  }
-
-  .header-content {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-end;
-    align-items: center;
-  }
-
   .close-icon {
     position: absolute;
-    top: 0;
-    right: 0;
+    top: 15px;
+    right: 15px;
     color: var(--ink);
     font-size: var(--font-size-m);
   }
diff --git a/packages/bbui/yarn.lock b/packages/bbui/yarn.lock
index 7f954cdd5a..94e1a365dd 100644
--- a/packages/bbui/yarn.lock
+++ b/packages/bbui/yarn.lock
@@ -420,6 +420,13 @@
   resolved "https://registry.yarnpkg.com/@spectrum-css/dialog/-/dialog-3.0.1.tgz#33aae036282159f6aa998848b8c0828640a9620a"
   integrity sha512-hUFbRR6RGT63MNuP7wP+k9KU+uRuICsduMihskh700e+jiQ+Gsv53fBFDlB843FoZYlIXzFQXgtjMUC5a4Qibw==
 
+"@spectrum-css/divider@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/divider/-/divider-1.0.1.tgz#9d2b8d0b6bc05f08249608297e0e179f6510458c"
+  integrity sha512-IjANehC0qwPIrJ4w9zJGMlhtTXW5n7X3yI7ZhjVMgehXE2dbm50QXLOrEOkq5rjTO0T4lQW6OnHSsE3F8Pnv4w==
+  dependencies:
+    "@spectrum-css/vars" "^3.0.1"
+
 "@spectrum-css/modal@^3.0.1":
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/@spectrum-css/modal/-/modal-3.0.1.tgz#613a6b83d0330a4d38db41a98090800751c56d8d"
@@ -430,6 +437,11 @@
   resolved "https://registry.yarnpkg.com/@spectrum-css/underlay/-/underlay-2.0.9.tgz#fc10f971d1325cc844b727e6260f7217844060e8"
   integrity sha512-X86xd0PG4QobmUyXA90BFGnyygaI8kW64dA4ysf4z0cOvUWjNbAAl3a/DB/WRyrnp63Zqv83T/cgNbetagTbWg==
 
+"@spectrum-css/vars@^3.0.1":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/vars/-/vars-3.0.1.tgz#561fd69098f896a647242dd8d6108af603bfa31e"
+  integrity sha512-l4oRcCOqInChYXZN6OQhpe3isk6l4OE6Ys8cgdlsiKp53suNoQxyyd9p/eGRbCjZgH3xQ8nK0t4DHa7QYC0S6w==
+
 "@sveltejs/vite-plugin-svelte@^1.0.0-next.5":
   version "1.0.0-next.5"
   resolved "https://registry.yarnpkg.com/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-1.0.0-next.5.tgz#8cf608f7a3c33dfa5b648397aae1ba90e6a4883f"