From 783ab8989d5dd3ad9ccd3aecf089c7e991619688 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 6 May 2021 10:17:27 +0100
Subject: [PATCH] Add Page layout component to BBUI

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

diff --git a/packages/bbui/src/Layout/Page.svelte b/packages/bbui/src/Layout/Page.svelte
new file mode 100644
index 0000000000..d8c8cbfce4
--- /dev/null
+++ b/packages/bbui/src/Layout/Page.svelte
@@ -0,0 +1,23 @@
+<script>
+  export let wide = false
+</script>
+
+<div class:wide>
+  <slot />
+</div>
+
+<style>
+  div {
+    display: grid;
+    grid-template-columns: 1fr;
+    max-width: 80ch;
+    margin: 0 auto;
+    padding: calc(var(--spacing-xl) * 2);
+  }
+
+  .wide {
+    max-width: none;
+    margin: 0;
+    padding: var(--spacing-xl) calc(var(--spacing-xl) * 2);
+  }
+</style>
diff --git a/packages/bbui/src/index.js b/packages/bbui/src/index.js
index e1b68cb35f..9d47958461 100644
--- a/packages/bbui/src/index.js
+++ b/packages/bbui/src/index.js
@@ -28,6 +28,7 @@ export { default as ProgressBar } from "./ProgressBar/ProgressBar.svelte"
 export { default as ProgressCircle } from "./ProgressCircle/ProgressCircle.svelte"
 export { default as Label } from "./Label/Label.svelte"
 export { default as Layout } from "./Layout/Layout.svelte"
+export { default as Page } from "./Layout/Page.svelte"
 export { default as Link } from "./Link/Link.svelte"
 export { default as Menu } from "./Menu/Menu.svelte"
 export { default as MenuSection } from "./Menu/Section.svelte"