From a74c0eef6ef62276a971ee13a5200cb3c70e4c81 Mon Sep 17 00:00:00 2001
From: rinaok <rina.oksman@vonage.com>
Date: Tue, 2 Nov 2021 17:03:52 +0200
Subject: [PATCH] feat(usage-examples): add example with top bar fixed (#1113)

* Side Drawer with Top App Bar Fixed

* Side Drawer With Top App Bar Fixed Template

* controls

* duplications

* WithSideDrawer

* With Side Drawer And Top App Bar Fixed

* semantic fixes

* semantic fixes

* vwc-layout
---
 .../side-drawer-as-container.stories.js       |  42 +++----
 .../top-app-bar-as-container.stories.js       | 116 ++++++++++++++++++
 2 files changed, 135 insertions(+), 23 deletions(-)
 create mode 100644 docs/stories/getting-started/usage-examples/top-app-bar-as-container.stories.js

diff --git a/docs/stories/getting-started/usage-examples/side-drawer-as-container.stories.js b/docs/stories/getting-started/usage-examples/side-drawer-as-container.stories.js
index 1785809a4..0e93b6b25 100644
--- a/docs/stories/getting-started/usage-examples/side-drawer-as-container.stories.js
+++ b/docs/stories/getting-started/usage-examples/side-drawer-as-container.stories.js
@@ -6,6 +6,7 @@ import '@vonage/vwc-layout';
 import '@vonage/vwc-list';
 import '@vonage/vwc-list/vwc-list-item';
 import '@vonage/vwc-list/vwc-list-expansion-panel';
+import '@vonage/vwc-text';
 
 import { html } from 'lit-element';
 import { spread } from '@open-wc/lit-helpers';
@@ -39,10 +40,6 @@ const style = html`
 		.sb-show-main.sb-main-padded {
 			padding: 0;
 		}
-		p {
-			color: "#C0C0C0";
-			font-weight: "bold";
-		}
 		vwc-side-drawer#side-drawer{
 			--side-drawer-background-color: var(--vvd-color-neutral-10);
 		}
@@ -62,7 +59,7 @@ const loremIpsum = () => html`
 </vwc-layout>
 `;
 
-const content = () => Array(8).fill().map(loremIpsum);
+const content = () => Array(20).fill().map(loremIpsum);
 
 const sideDrawerContent = html`
 <span slot="top-bar">
@@ -73,9 +70,9 @@ const sideDrawerContent = html`
 	<vwc-list-item shape="rounded" graphic="icon">
 		<vwc-icon slot="graphic" type="home-line"></vwc-icon>1st level item
 	</vwc-list-item>
-
-	<p>SECTION TITLE</p>
-
+	<p>
+		<vwc-text font-face="body-2-bold">SECTION TITLE</vwc-text>
+	</p>
 	<vwc-list-item shape="rounded" graphic="icon">
 		<vwc-icon slot="graphic" type="chat-line"></vwc-icon>1st level item
 	</vwc-list-item>
@@ -90,9 +87,9 @@ const sideDrawerContent = html`
 			<vwc-list-item shape="rounded">3rd level item</vwc-list-item>
 		</vwc-list-expansion-panel>
 	</vwc-list-expansion-panel>
-
-	<p>SECTION TITLE</p>
-
+	<p>
+		<vwc-text font-face="body-2-bold">SECTION TITLE</vwc-text>
+	</p>
 	<vwc-list-expansion-panel>
 		<vwc-list-item slot="header" shape="rounded" graphic="icon">
 			<vwc-icon slot="graphic" type="chat-line"></vwc-icon>1st level item
@@ -103,15 +100,7 @@ const sideDrawerContent = html`
 </vwc-list>`;
 
 const topAppBarContent = html`
-	<span slot="actionItems">
-		<vwc-icon-button icon="search-line"></vwc-icon-button>
-		<vwc-icon-button icon="info-line"></vwc-icon-button>
-		<vwc-icon-button icon="share-line"></vwc-icon-button>
-	</span>
-`;
-
-const topAppBarFixedContent = html`
-	<span slot="actionItems">
+	<div slot="actionItems">
 		<vwc-button label="Action" layout="outlined" icon="search-line" type="submit">
 			<button type="submit" style="display: none;"></button>
 		</vwc-button>
@@ -121,7 +110,15 @@ const topAppBarFixedContent = html`
 		<vwc-button label="Action" layout="outlined" icon="share-line" type="submit">
 			<button type="submit" style="display: none;"></button>
 		</vwc-button>
-	</span>
+	</div>
+`;
+
+const topAppBarFixedContent = html`
+	<div slot="actionItems">
+		<vwc-icon-button icon="search-line"></vwc-icon-button>
+		<vwc-icon-button icon="info-line"></vwc-icon-button>
+		<vwc-icon-button icon="share-line"></vwc-icon-button>
+	</div>
 `;
 
 const WithAppContentTemplate = args => html`
@@ -155,13 +152,12 @@ const WithTopAppBarTemplate = args => html`
 export const WithTopAppBar = WithTopAppBarTemplate.bind({});
 WithTopAppBar.args = {};
 
-
 const WithTopAppBarFixedTemplate = args => html`
 	${style}
 	<vwc-side-drawer alternate hastopbar ...=${spread(args)}>
 		${sideDrawerContent}
 	
-		<vwc-top-app-bar-fixed alternate slot="app-content">
+		<vwc-top-app-bar-fixed slot="app-content">
 			${topAppBarFixedContent}
 			<main>
 				${content()}
diff --git a/docs/stories/getting-started/usage-examples/top-app-bar-as-container.stories.js b/docs/stories/getting-started/usage-examples/top-app-bar-as-container.stories.js
new file mode 100644
index 000000000..ddbbea7c6
--- /dev/null
+++ b/docs/stories/getting-started/usage-examples/top-app-bar-as-container.stories.js
@@ -0,0 +1,116 @@
+import '@vonage/vwc-side-drawer';
+import '@vonage/vwc-top-app-bar';
+import '@vonage/vwc-top-app-bar-fixed';
+import '@vonage/vwc-icon';
+import '@vonage/vwc-layout';
+import '@vonage/vwc-list';
+import '@vonage/vwc-list/vwc-list-item';
+import '@vonage/vwc-list/vwc-list-expansion-panel';
+import '@vonage/vwc-text';
+
+import { html } from 'lit-element';
+import { spread } from '@open-wc/lit-helpers';
+
+export default {
+	title: 'Getting Started/Usage Examples/Top App Bar',
+};
+
+const style = html`
+	<style>
+		.sb-show-main.sb-main-padded {
+			padding: 0;
+		}
+		vwc-side-drawer#side-drawer {
+			/* Initial side drawer height is 100vh, but once the top bar is added, 
+			the side drawer height will need to be reduced. */
+			height: calc(100vh - 64px);
+			--side-drawer-z-index:3;
+		}
+	</style>
+`;
+
+const loremIpsum = () => html`
+	<vwc-layout gutters="md">
+		<div> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
+			standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
+			a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,
+			remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
+			Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions
+			of Lorem Ipsum.
+		</div>
+	</vwc-layout>
+`;
+
+const content = () => Array(20).fill().map(loremIpsum);
+
+const listItems = () => html`
+	<vwc-list-item shape="rounded" graphic="icon">
+		<vwc-icon slot="graphic" type="chat-line"></vwc-icon>1st level item
+	</vwc-list-item>
+	<p>
+		<vwc-text font-face="body-2-bold">SECTION TITLE</vwc-text>
+	</p>
+	<vwc-list-expansion-panel open>
+		<vwc-list-item slot="header" shape="rounded" graphic="icon">
+			<vwc-icon slot="graphic" type="chat-line"></vwc-icon>1st level item
+		</vwc-list-item>
+		<vwc-list-expansion-panel open>
+			<vwc-list-item slot="header" shape="rounded">2nd level item</vwc-list-item>
+			<vwc-list-item shape="rounded">3rd level item</vwc-list-item>
+			<vwc-list-item shape="rounded">3rd level item</vwc-list-item>
+		</vwc-list-expansion-panel>
+	</vwc-list-expansion-panel>
+`;
+
+const sideDrawerContent = html`
+	<span slot="top-bar">
+		<vwc-icon type="vonage-mono"></vwc-icon>
+		<vwc-text font-face="body-1-bold"> VONAGE</vwc-text>
+	</span>
+	<vwc-list innerRole="navigation" innerAriaLabel="Primary navigation" itemRoles="link">
+		<vwc-list-item shape="rounded" graphic="icon">
+			<vwc-icon slot="graphic" type="home-line"></vwc-icon>1st level item
+		</vwc-list-item>
+		<p>
+			<vwc-text font-face="body-2-bold">SECTION TITLE</vwc-text>
+		</p>
+		${Array(8).fill().map(listItems)}
+	</vwc-list>`;
+
+const topAppBarFixedContent = html`
+	<vwc-button slot="navigationIcon" icon="vonage-mono" label="VONAGE" type="submit" unelevated=""></vwc-button>
+	<div slot="actionItems">
+		<vwc-icon-button icon="search-line"></vwc-icon-button>
+		<vwc-icon-button icon="info-line"></vwc-icon-button>
+		<vwc-icon-button icon="share-line"></vwc-icon-button>
+	</div>
+`;
+
+const WithSideDrawerAndTopAppBarTemplate = args => html`
+	${style}
+	<vwc-top-app-bar alternate slot=" app-content">
+		${topAppBarFixedContent}
+		<vwc-side-drawer id="side-drawer" ...=${spread(args)}>
+			${sideDrawerContent}
+			<main slot="app-content">${content()}</main>
+		</vwc-side-drawer>
+	</vwc-top-app-bar>
+`;
+
+export const WithSideDrawerAndTopAppBar = WithSideDrawerAndTopAppBarTemplate.bind({});
+WithSideDrawerAndTopAppBar.args = {};
+
+const WithSideDrawerAndTopAppBarFixedTemplate = args => html`
+	${style}
+	<vwc-top-app-bar-fixed alternate slot=" app-content">
+		${topAppBarFixedContent}
+		<vwc-side-drawer id="side-drawer" ...=${spread(args)}>
+			${sideDrawerContent}
+			<main slot="app-content">${content()}</main>
+		</vwc-side-drawer>
+	</vwc-top-app-bar-fixed>
+`;
+
+export const WithSideDrawerAndTopAppBarFixed = WithSideDrawerAndTopAppBarFixedTemplate.bind({});
+WithSideDrawerAndTopAppBarFixed.args = {};
+