From 9f5ce343302c75417226a63a12f3e159bea7b67f Mon Sep 17 00:00:00 2001
From: Elex <developer@elex-project.com>
Date: Wed, 8 Sep 2021 12:24:51 +0900
Subject: [PATCH] v1.1.0

---
 package.json                |  2 +-
 src/appbar.ts               |  1 +
 src/borderlayout.stories.ts | 31 ++++++++++++++++++++++
 src/borderlayout.ts         | 51 +++++++++++++++++++++++++++++++++++++
 src/index.ts                |  1 +
 5 files changed, 85 insertions(+), 1 deletion(-)
 create mode 100644 src/borderlayout.stories.ts
 create mode 100644 src/borderlayout.ts

diff --git a/package.json b/package.json
index ae55473..a1299e2 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@elex-project/persona",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Persona Web Components and CSS",
   "keywords": ["web-components"],
   "homepage": "https://www.elex-project/",
diff --git a/src/appbar.ts b/src/appbar.ts
index 6c9c3bb..b69a3f5 100644
--- a/src/appbar.ts
+++ b/src/appbar.ts
@@ -26,6 +26,7 @@ h1 {
   @property()
   heading? = "Heading";
 
+  // todo add tailing extra buttons
   protected render() {
       return html`<h1>${this.heading}</h1>
 `;
diff --git a/src/borderlayout.stories.ts b/src/borderlayout.stories.ts
new file mode 100644
index 0000000..b77f852
--- /dev/null
+++ b/src/borderlayout.stories.ts
@@ -0,0 +1,31 @@
+import { Story, Meta } from '@storybook/web-components';
+import {LitElement, html, css,} from 'lit';
+import {classMap} from 'lit/directives/class-map.js';
+
+import './borderlayout';
+
+export default {
+  title: 'Persona/BorderLayout',
+  component: 'persona-border-layout',
+  argTypes: {
+    //fullWidth: {control: 'boolean',
+    //  description: "add a 'full-width' class."}
+  },
+} as Meta;
+
+
+const Template:Story = () => html`
+<persona-border-layout>
+  <persona-app-bar slot="north" heading="I'm App-Bar in North." primary></persona-app-bar>
+  <div slot="south" style="height:32px;background-color:green">South</div>
+  <div slot="east" style="width:100px;background-color:blue">East</div>
+  <div slot="west" style="width:180px;background-color:yellow">West</div>
+  <div slot="center" style="background-color:white">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+</div>
+</persona-border-layout>
+`;
+
+export const Basic = Template.bind({});
+Basic.args = {
+};
+
diff --git a/src/borderlayout.ts b/src/borderlayout.ts
new file mode 100644
index 0000000..8685b64
--- /dev/null
+++ b/src/borderlayout.ts
@@ -0,0 +1,51 @@
+import {LitElement, html, css} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+import {Variables} from './variables';
+
+/**
+ * Border layout
+ */
+@customElement('persona-border-layout')
+export class BorderLayout extends LitElement {
+
+    static styles = css`
+    :host{
+        display:grid;
+        width: 100%; height: 100%;
+        margin:0; padding:0; border:0;
+        grid-template-rows: fit-content(auto) 2fr fit-content(auto);
+        grid-template-columns: fit-content(auto) 2fr fit-content(auto);
+        grid-template-areas:
+            "north north north"
+            "west center east"
+            "south south south";
+    }
+    ::slotted(*) {
+        //color: green;
+    }
+    #north::slotted(*) {
+        grid-area: north;
+    }
+    #south::slotted(*) {
+        grid-area: south;
+    }
+    #west::slotted(*) {
+        grid-area: west;
+    }
+    #east::slotted(*) {
+        grid-area: east;
+    }
+    #center::slotted(*) {
+        grid-area: center;
+    }
+    `;
+
+    protected render() {
+        return html`
+        <slot id="north" name="north"></slot>
+        <slot id="south" name="south"></slot>
+        <slot id="east" name="east"></slot>
+        <slot id="west" name="west"></slot>
+        <slot id="center" name="center"></slot>`;
+  }
+}
diff --git a/src/index.ts b/src/index.ts
index 1900ab5..f9a9391 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,5 +1,6 @@
 import './layouts'
 import './flowlayout'
+import './borderlayout'
 import './appbar'
 import './button'