From 3102b6de2c36c9ae55dfbe44418a3abe479f7ba8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Keviin=20=C3=85berg=20Kultalahti?= <kevin.aberg@gmail.com>
Date: Tue, 27 Apr 2021 15:06:08 +0200
Subject: [PATCH] Adds basic layout component

---
 packages/bbui/src/Layout/Layout.svelte | 65 ++++++++++++++++++++++++++
 packages/bbui/src/index.js             |  1 +
 2 files changed, 66 insertions(+)
 create mode 100644 packages/bbui/src/Layout/Layout.svelte

diff --git a/packages/bbui/src/Layout/Layout.svelte b/packages/bbui/src/Layout/Layout.svelte
new file mode 100644
index 0000000000..ca18f3e3f6
--- /dev/null
+++ b/packages/bbui/src/Layout/Layout.svelte
@@ -0,0 +1,65 @@
+<script>
+  export let horizontal = false
+  export let paddingX = "M"
+  export let paddingY = "M"
+  export let noPadding = false
+  export let gap = "M"
+  export let noGap = false
+</script>
+
+<div
+  class:horizontal
+  class="container paddingX-{!noPadding && paddingX} paddingY-{!noPadding &&
+    paddingY} gap-{!noGap && gap}"
+>
+  <slot />
+</div>
+
+<style>
+  .container {
+    display: grid;
+    grid-template-columns: 1fr;
+  }
+  .paddingX-S {
+    padding-left: var(--spacing-s);
+    padding-right: var(--spacing-s);
+  }
+  .paddingX-M {
+    padding-left: var(--spacing-m);
+    padding-right: var(--spacing-m);
+  }
+  .paddingX-L {
+    padding-left: var(--spacing-l);
+    padding-right: var(--spacing-l);
+  }
+  .paddingY-S {
+    padding-top: var(--spacing-s);
+    padding-bottom: var(--spacing-s);
+  }
+  .paddingY-M {
+    padding-top: var(--spacing-m);
+    padding-bottom: var(--spacing-m);
+  }
+  .paddingY-L {
+    padding-top: var(--spacing-l);
+    padding-bottom: var(--spacing-l);
+  }
+  .gap-S {
+    grid-gap: var(--spectrum-alias-grid-gutter-xsmall);
+  }
+  .gap-M {
+    grid-gap: var(--spectrum-alias-grid-gutter-small);
+  }
+  .gap-L {
+    grid-gap: var(--spectrum-alias-grid-gutter-medium);
+  }
+  .horizontal.gap-S :global(*) + :global(*) {
+    margin-left: var(--spectrum-alias-grid-gutter-xsmall);
+  }
+  .horizontal.gap-M :global(*) + :global(*) {
+    margin-left: var(--spectrum-alias-grid-gutter-small);
+  }
+  .horizontal.gap-L :global(*) + :global(*) {
+    margin-left: var(--spectrum-alias-grid-gutter-medium);
+  }
+</style>
diff --git a/packages/bbui/src/index.js b/packages/bbui/src/index.js
index 3bc24d1705..842c88ef14 100644
--- a/packages/bbui/src/index.js
+++ b/packages/bbui/src/index.js
@@ -27,6 +27,7 @@ export { default as Popover } from "./Popover/Popover.svelte"
 export { default as ProgressBar } from "./ProgressBar/ProgressBar.svelte"
 export { default as ProgressCircle } from "./ProgressCircle/ProgressCircle.svelte"
 export { default as Label } from "./Styleguide/Label.svelte"
+export { default as Layout } from "./Layout/Layout.svelte"
 export { default as Link } from "./Link/Link.svelte"
 export { default as Close } from "./Button/Close.svelte"
 export { default as Menu } from "./Menu/Menu.svelte"