From 4a23603c1aafc366d1a3c47fa5f11e105b15a4c7 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 24 Jun 2021 11:29:20 +0100
Subject: [PATCH] Add gap to container settings and remove some colours from
 color picker

---
 .../bbui/src/ColorPicker/ColorPicker.svelte   |  2 --
 packages/standard-components/manifest.json    | 30 +++++++++++++++++--
 .../standard-components/src/Container.svelte  | 24 ++++++++++++---
 3 files changed, 48 insertions(+), 8 deletions(-)

diff --git a/packages/bbui/src/ColorPicker/ColorPicker.svelte b/packages/bbui/src/ColorPicker/ColorPicker.svelte
index f11718badc..2f4b79b91a 100644
--- a/packages/bbui/src/ColorPicker/ColorPicker.svelte
+++ b/packages/bbui/src/ColorPicker/ColorPicker.svelte
@@ -22,8 +22,6 @@
       label: "Grays",
       colors: [
         "white",
-        "gray-50",
-        "gray-75",
         "gray-100",
         "gray-200",
         "gray-300",
diff --git a/packages/standard-components/manifest.json b/packages/standard-components/manifest.json
index f73ba00e8a..46359fde90 100644
--- a/packages/standard-components/manifest.json
+++ b/packages/standard-components/manifest.json
@@ -174,6 +174,32 @@
           }
         ],
         "defaultValue": "shrink"
+      },
+      {
+        "type": "select",
+        "label": "Gap",
+        "key": "gap",
+        "showInBar": true,
+        "barStyle": "picker",
+        "options": [
+          {
+            "label": "None",
+            "value": "N"
+          },
+          {
+            "label": "Small",
+            "value": "S"
+          },
+          {
+            "label": "Medium",
+            "value": "M"
+          },
+          {
+            "label": "Large",
+            "value": "L"
+          }
+        ],
+        "defaultValue": "M"
       }
     ]
   },
@@ -368,7 +394,7 @@
         "type": "select",
         "label": "Size",
         "key": "size",
-        "defaultValue": "Medium",
+        "defaultValue": "M",
         "showInBar": true,
         "barStyle": "picker",
         "options": [{
@@ -462,7 +488,7 @@
         "type": "select",
         "label": "Size",
         "key": "size",
-        "defaultValue": "Medium",
+        "defaultValue": "M",
         "showInBar": true,
         "barStyle": "picker",
         "options": [{
diff --git a/packages/standard-components/src/Container.svelte b/packages/standard-components/src/Container.svelte
index c71d3b928d..7e8ae43e2e 100644
--- a/packages/standard-components/src/Container.svelte
+++ b/packages/standard-components/src/Container.svelte
@@ -8,17 +8,23 @@
   export let hAlign
   export let vAlign
   export let size
+  export let gap
 
   $: directionClass = direction ? `valid-container direction-${direction}` : ""
   $: hAlignClass = hAlign ? `hAlign-${hAlign}` : ""
   $: vAlignClass = vAlign ? `vAlign-${vAlign}` : ""
   $: sizeClass = size ? `size-${size}` : ""
+  $: gapClass = gap ? `gap-${gap}` : ""
+  $: classNames = [
+    directionClass,
+    hAlignClass,
+    vAlignClass,
+    sizeClass,
+    gapClass,
+  ].join(" ")
 </script>
 
-<div
-  class={[directionClass, hAlignClass, vAlignClass, sizeClass].join(" ")}
-  use:styleable={$component.styles}
->
+<div class={classNames} use:styleable={$component.styles}>
   <slot />
 </div>
 
@@ -83,4 +89,14 @@
   .direction-column.hAlign-stretch {
     align-items: stretch;
   }
+
+  .gap-S {
+    gap: 8px;
+  }
+  .gap-M {
+    gap: 16px;
+  }
+  .gap-L {
+    gap: 32px;
+  }
 </style>