Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(side-drawer): add font-face and refactor side-drawer story #1116

Merged
merged 10 commits into from
Nov 4, 2021
Merged

fix(side-drawer): add font-face and refactor side-drawer story #1116

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
39c5b56
story fixes
rinaok Nov 1, 2021
fdc6dbc
Merge branch 'master' into viv-760-side-drawer-font-face
rinaok Nov 1, 2021
0e42d5a
remove styling
rinaok Nov 1, 2021
b25f758
Merge branch 'viv-760-side-drawer-font-face' of https://github.com/Vo…
rinaok Nov 1, 2021
8949762
Merge branch 'master' into viv-760-side-drawer-font-face
rinaok Nov 2, 2021
d5eb27e
Merge branch 'master' into viv-760-side-drawer-font-face
rinaok Nov 3, 2021
35e68af
typography
rinaok Nov 3, 2021
d4ce2e7
Merge branch 'master' into viv-760-side-drawer-font-face
rinaok Nov 4, 2021
a71d269
change imports and span to div
rinaok Nov 4, 2021
cdd99a1
add padding to main
rinaok Nov 4, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 1 addition & 1 deletion components/side-drawer/src/vwc-side-drawer-base.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -116,7 +116,7 @@ export class VWCSideDrawerBase extends LitElement {
</aside>

<div class="side-drawer--app-content">
<slot name="app-content"></slot>
<slot name="app-content"></slot>
</div>

${scrim}
Expand Down
3 changes: 2 additions & 1 deletion components/side-drawer/src/vwc-side-drawer.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,7 @@ $inline-size: var(#{variables.$side-drawer-inline-size}, 280px);
&.side-drawer--dismissible.side-drawer--open,
&:not(.side-drawer--dismissible):not(.side-drawer--modal) {
+ .side-drawer--app-content {
@include typography.typography-cat-shorthand(body-1);
margin-inline-start: #{$inline-size};
::slotted(vwc-top-app-bar),
::slotted(vwc-top-app-bar-fixed) {
Expand All @@ -55,7 +56,7 @@ $inline-size: var(#{variables.$side-drawer-inline-size}, 280px);

.side-drawer--top-bar {
$gutter: var(#{variables.$side-drawer-padding-top-bar}, #{$padding-default});
@include typography.typography-cat-shorthand(subtitle-2);
@include typography.typography-cat-shorthand(subtitle-1);
display: flex;
flex-shrink: 0;
align-items: center;
Expand Down
74 changes: 31 additions & 43 deletions ...ide-drawer/stories/side-drawer.stories.js → ...awer/stories/side-drawer-basic.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import '@vonage/vwc-side-drawer/vwc-side-drawer.js';
import '@vonage/vwc-list/vwc-list-expansion-panel.js';
import { styleMap } from 'lit-html/directives/style-map';
import '@vonage/vwc-side-drawer';
import '@vonage/vwc-list/vwc-list-expansion-panel';
import '@vonage/vwc-text';

import { html } from 'lit-element';
import { spread } from '@open-wc/lit-helpers';
import { argTypes } from './arg-types.js';
Expand All @@ -13,17 +14,15 @@ export default {
argTypes
};

const titleStyles = {
color: "#C0C0C0",
fontWeight: "bold",
};

const Template = args => html`
<style>
.sb-show-main.sb-main-padded {
padding: 0;
}
div#demo {
position: relative;
display: flex;
width: 960px;
width: 1060px;
height: 540px;
margin: auto;
border-radius: 10px;
Expand All @@ -32,68 +31,60 @@ const Template = args => html`
border: solid 1px #ccc;
}
vwc-side-drawer#side-drawer {
flex: 0 0 auto;
height: inherit;
--side-drawer-background-color: var(--vvd-color-neutral-10);
}
div#default > svg {
width: 100%;
height: 100%;
}
</style>

<div id="demo">
${Basic(args)}
<div id="default"></div>
${unsafeSVG(pageContentMock())}
${SideDrawerTemplate(args)}
</div>`;

const SideDrawerTemplate = args => html`
<vwc-side-drawer id="side-drawer" ...=${spread(args)} @click="${onClick}">
<span slot="top-bar">
<vwc-icon type="vonage-mono"></vwc-icon> VONAGE
</span>

<vwc-list
innerRole="navigation"
innerAriaLabel="Primary navigation"
itemRoles="link"
>
<vwc-side-drawer id="side-drawer" ...=${spread(args)} @click="${onClick}">
<div slot="top-bar">
<vwc-icon type="vonage-mono"></vwc-icon>
<vwc-text font-face="body-1-bold"> VONAGE</vwc-text>
</div>
<div>
<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 style=${styleMap(titleStyles)}>SECTION TITLE</p>

<p>
rinaok marked this conversation as resolved.
Show resolved Hide resolved
<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>

<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 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>

<p style=${styleMap(titleStyles)}>SECTION TITLE</p>

<vwc-list-expansion-panel >
<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
</vwc-list-item>
<vwc-list-item shape="rounded">2nd level item</vwc-list-item>
<vwc-list-item shape="rounded">2nd level item</vwc-list-item>
</vwc-list-expansion-panel>
</vwc-list>
</vwc-side-drawer>`;
</div>
<div slot="app-content">
${unsafeSVG(pageContentMock())}
</div>
</vwc-side-drawer>`;

export const Basic = SideDrawerTemplate.bind({});
export const Basic = Template.bind({});
Basic.args = { };

export const Alternate = Template.bind({});
Expand All @@ -102,9 +93,6 @@ Alternate.args = { alternate: true };
export const TopBar = Template.bind({});
TopBar.args = { hasTopBar: true };

export const Dismissible = Template.bind({});
Dismissible.args = { type: 'dismissible', open: true };

let prevActivatedItem;
function onClick(e) {
// only list items can be activated
Expand Down
99 changes: 99 additions & 0 deletions components/side-drawer/stories/side-drawer-dismissible-and-modal.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,99 @@
import '@vonage/vwc-side-drawer';
import '@vonage/vwc-list/vwc-list-expansion-panel';
import '@vonage/vwc-text';

import { html } from 'lit-element';
import { argTypes } from './arg-types.js';
import { spread } from '@open-wc/lit-helpers';

export default {
title: 'Alpha/Components/Side Drawer',
component: 'vwc-side-drawer',
argTypes
};

const SideDrawerTemplate = args => html`
<style>
.sb-show-main.sb-main-padded {
padding: 0;
}
</style>

<vwc-side-drawer ...=${spread(args)} @click="${onClick}">
<div slot="top-bar">
<vwc-icon type="vonage-mono"></vwc-icon>
<vwc-text font-face="body-1-bold"> VONAGE</vwc-text>
</div>
<div>
<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>
<vwc-list-item 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" 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>
<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
</vwc-list-item>
<vwc-list-item shape="rounded">2nd level item</vwc-list-item>
<vwc-list-item shape="rounded">2nd level item</vwc-list-item>
</vwc-list-expansion-panel>
</vwc-list>
</div>
<div slot="app-content">
${content()}
</div>
</vwc-side-drawer>`;


export const Dismissible = SideDrawerTemplate.bind({});
Dismissible.args = { type: 'dismissible', open: true };

export const Modal = SideDrawerTemplate.bind({});
Modal.args = { type: 'modal', open: true };

let prevActivatedItem;
function onClick(e) {
// only list items can be activated
if (e.target.localName !== "vwc-list-item") {
return;
}
if (e.target.slot === "header") {
return;
}
if (typeof prevActivatedItem !== 'undefined') {
prevActivatedItem.activated = false;
}
prevActivatedItem = e.target;
prevActivatedItem.activated = true;
}

const loremIpsum = () => html`
<vwc-text font-face="body-1">
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.
</vwc-text>
`;

const content = () => Array(8).fill().map(loremIpsum);
33 changes: 0 additions & 33 deletions components/side-drawer/stories/side-drawer-modal.stories.js
View file
Open in desktop

This file was deleted.

2 changes: 1 addition & 1 deletion docs/stories/getting-started/usage-examples/content.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import '@vonage/vwc-text/vwc-text.js';
import '@vonage/vwc-text';
import { html } from 'lit-element';

export default {
Expand Down