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(text): tight option #1110

Merged
merged 13 commits into from
Nov 11, 2021
Merged

fix(text): tight option #1110

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
9fb2fa8
fix(text): tight option
rachelbt Oct 28, 2021
8b047ba
Merge branch 'master' into VIV-758-noSpaceing
rachelbt Oct 31, 2021
1b7bf06
Move login example to pages
rachelbt Oct 31, 2021
a5f3c2a
formas sass file
rachelbt Oct 31, 2021
f927d48
Merge branch 'master' into VIV-758-noSpaceing
yinonov Oct 31, 2021
f84502a
Update components/text/src/vwc-text-base.ts
yinonov Nov 1, 2021
39444ee
Update components/text/readme.md
rachelbt Nov 1, 2021
57dc352
Update components/text/src/vwc-text-base.ts
rachelbt Nov 1, 2021
3fa97d1
Merge branch 'master' into VIV-758-noSpaceing
rachelbt Nov 1, 2021
32938ba
Merge branch 'master' into VIV-758-noSpaceing
rachelbt Nov 2, 2021
7331281
Merge branch 'master' into VIV-758-noSpaceing
rachelbt Nov 2, 2021
0bcde39
Merge branch 'master' into VIV-758-noSpaceing
rachelbt Nov 9, 2021
4b4657c
Update components/text/readme.md
yinonov Nov 10, 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
4 changes: 4 additions & 0 deletions components/text/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,8 +52,12 @@ On the other hand, 'vwc-text' can nest within semantic tags instead -
| Property | Attribute | Type |
| ---------- | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `fontFace` | `font-face` | `body-1` \| `body-1-bold` \| `body-1-code` \| `body-1-link` \| `body-2` \| `body-2-bold` \| `body-2-code` \| `body-2-link` \| `button` \| `button-dense` \| `button-enlarge` \| `caption` \| `caption-bold` \| `caption-code` \| `caption-link` \| `headline-1` \| `headline-2` \| `subtitle-1` \| `subtitle-2` \| `title-1` \| `title-2` |
| `noSpacing` | `noSpacing` | `boolian` |
rachelbt marked this conversation as resolved.
Show resolved Hide resolved



<details>
<summary>More on custom elements transparent content model</summary>
https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-core-concepts
</details>

4 changes: 4 additions & 0 deletions components/text/src/vwc-text-base.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,10 +24,14 @@ export class VWCTextBase extends LitElement {
@property({ type: String, reflect: true })
connotation?: TextConnotation;

@property({ type: Boolean, reflect: true })
tight = false;

protected getRenderClasses(): ClassInfo {
return {
[`connotation-${this.connotation}`]: !!this.connotation,
[`font-face-${this.fontFace}`]: !!this.fontFace,
['tight']: !!this.tight,
rachelbt marked this conversation as resolved.
Show resolved Hide resolved
};
}

Expand Down
8 changes: 5 additions & 3 deletions components/text/src/vwc-text.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,9 +40,11 @@
}
}

&:where(.font-face-headline-1, .font-face-headline-2, .font-face-title-1, .font-face-title-2, .font-face-subtitle-1, .font-face-subtitle-2, .font-face-body-1, .font-face-body-2) {
display: block;
margin: var(--font-face-margin, 0);
&:not(.tight) {
&:where(.font-face-headline-1, .font-face-headline-2, .font-face-title-1, .font-face-title-2, .font-face-subtitle-1, .font-face-subtitle-2, .font-face-body-1, .font-face-body-2) {
display: block;
margin: var(--font-face-margin, 0);
}
}
}

Expand Down
7 changes: 7 additions & 0 deletions components/text/stories/arg-types.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,5 +14,12 @@ export const argTypes = {
options: ['primary', 'cta', 'announcement', 'info', 'success', 'alert'],
}
},
tight: {
control: {
type: 'inline-radio',
options: { true: '', false: undefined },
}
},

styles: { table: { disable: true } },
};
128 changes: 63 additions & 65 deletions docs/stories/getting-started/usage-examples/login.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import '@vonage/vwc-side-drawer';
import '@vonage/vwc-text';
import '@vonage/vwc-icon';
import '@vonage/vwc-layout';
Expand All @@ -9,56 +8,57 @@ import '@vonage/vwc-checkbox';
import { html } from 'lit-element';

export default {
title: 'Getting Started/Usage Examples/Side Drawer',
title: 'Getting Started/Usage Examples/Pages',
};

const style = html`
<style>
div#login {
display: flex;
}
.page {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 100vh;
}
.main {
background-color: var(--vvd-color-neutral-20);
display: flex;
flex-direction: column;
padding: 0 60px 60px 60px;
}
.logo {
display: flex;
align-items: center;
}
.logo * + * {
margin-left: 0.5rem;
}
.login {
display: flex;
flex-direction: column;
}
.form {
margin: auto 0;
max-width: 550px;
}
.side-content{
margin-top: auto;
}
.password {
text-align: end;
padding: 8px 0px;
}
vwc-side-drawer#side-drawer {
--side-drawer-inline-size: 600px;
}
main {
width: 100%;
position: relative;
background-color: var(--vvd-color-neutral-20);
}
#content {
position: absolute;
bottom: 20px;
left: 20px;
}
.sb-show-main.sb-main-padded {
padding: 0;
}
.button{
justify-self: flex-start;
}
</style>
`;

const Masthead = () => html`
<span slot="top-bar">
<vwc-icon type="vonage-mono"></vwc-icon>
<vwc-text font-face="body-1-bold"> VONAGE</vwc-text>
</span>
`;

const sideDrawer = () => html`
<vwc-side-drawer id="side-drawer" hasTopBar>
${Masthead()}
<form>
<form class="form">
<vwc-layout column-basis="block" gutters="xl">
<section>
<vwc-text font-face="title-2">Welcome back!</vwc-text>
</section>
<section>
<vwc-text font-face="body-2">Don't have an account? <a href="#">Sign Up</a></vwc-text>
</section>
<section>
<vwc-text font-face="title-2" tight>Welcome back!</vwc-text>
<vwc-text font-face="body-2" tight>Don't have an account? <a href="#">Sign Up</a></vwc-text>
<div>
<vwc-layout column-basis="block">
<vwc-textfield name="username" label="username" icon="user" placeholder=" " outlined="">
<input value="" slot="formInputElement" class="vivid-input-internal" name="username" type="text"
Expand All @@ -69,43 +69,41 @@ const sideDrawer = () => html`
placeholder=" " />
</vwc-textfield>
</vwc-layout>
</section>
<section>
</div>
<vwc-layout>
<vwc-formfield label="Remember me">
<vwc-checkbox></vwc-checkbox>
</vwc-formfield>
<vwc-text class="password" font-face="body-2"><a href="#">Forgot password?</a></vwc-text>
<vwc-text class="password" font-face="body-2" tight><a href="#">Forgot password?</a></vwc-text>
</vwc-layout>
</section>
<section>
<vwc-button layout="filled">Log in</vwc-button>
</section>
<vwc-button layout="filled" enlarged class="button">Log in</vwc-button>
</vwc-layout>
</form>
</vwc-side-drawer>`;
`;

const content = () => html`<vwc-layout id="content" column-basis="block">
<section>
<vwc-text font-face="subtitle-1">Lorem ipsum</vwc-text>
</section>
<section>
<vwc-text font-face="body-1">Lorem ipsum lorem ipsum lorem ipsum lorem ipsum</vwc-text>
</section>
<section>
<vwc-button label="Apply Now →" layout="outlined" type="submit" outlined=""></vwc-button>
</section>
</vwc-layout>`;
const content = () => html`<div class="side-content">
<vwc-layout column-basis="block" gutters="md">
<vwc-text font-face="subtitle-1" tight>Lorem ipsum</vwc-text>
<vwc-text font-face="body-1" tight>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum</vwc-text>
<vwc-button label="Apply Now →" layout="outlined" type="submit" outlined="" class="button"></vwc-button>
</vwc-layout>
</div>`;

const WithLogInTemplate = () => html`
const LogInTemplate = () => html`
${style}
<div id="login">
${sideDrawer()}
<main>
${content()}
</main>
</div>
<div class="page">
<div class="login">
<div class="logo">
<vwc-icon type="vonage-mono" size="large"></vwc-icon>
<vwc-text font-face="subtitle-2" tight> VONAGE</vwc-text>
</div>
${sideDrawer()}
</div>
<main class="main">
${content()}
</main>
</div>
`;

export const WithLogIn = WithLogInTemplate.bind({});
WithLogIn.args = {};
export const LogIn = LogInTemplate.bind({});
LogIn.args = {};
Binary file modified ui-tests/snapshots/vwc-text.png
View file
Open in desktop
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
7 changes: 6 additions & 1 deletion ui-tests/tests/vwc-text/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,14 +24,19 @@ export async function createElementVariations(wrapper) {
<vwc-text font-face="subtitle-2" connotation="primary">The quick brown fox jumps over the lazy dog</vwc-text>
<vwc-text font-face="title-1" connotation="cta">The quick brown fox jumps over the lazy dog</vwc-text>
<vwc-text font-face="title-2" connotation="announcement">The quick brown fox jumps over the lazy dog</vwc-text>
<vwc-text font-face="headline-1" connotation="info"><h1>Headline-1 with H1 wrapping inside</h1></vwc-text>
<vwc-text font-face="headline-1" connotation="info" tight><h1>Headline-1 with H1 wrapping inside</h1></vwc-text>
<vwc-text font-face="headline-1" connotation="info" tight><h1>Headline-1 with H1 wrapping inside</h1></vwc-text>
<vwc-text font-face="headline-2" connotation="success"><h2>Headline-2 with H2 wrapping inside</h2></vwc-text>
<vwc-text font-face="headline-1" connotation="primary">Headline-1 with no wrapping inside</vwc-text>
<vwc-text font-face="body-1" connotation="primary">
<p>The quick brown fox <vwc-text font-face="body-1-link" connotation="info"><a>In a link</a></vwc-text> jumps over the lazy dog
<vwc-text font-face="body-1-code" connotation="announcement">css is awesome</vwc-text> jumps over the lazy dog</p>
</vwc-text>
<vwc-text font-face="subtitle-1" connotation="alert"><h3>The quick brown fox jumps over the lazy dog</h3></vwc-text>
<vwc-text font-face="body-1" connotation="primary" tight>The quick brown fox jumps over the lazy dog</vwc-text>
<vwc-text font-face="body-1" connotation="primary" tight>The quick brown fox jumps over the lazy dog</vwc-text>
<vwc-text font-face="title-2" connotation="announcement" tight>The quick brown fox jumps over the lazy dog</vwc-text>
<vwc-text font-face="body-1" connotation="primary" tight>The quick brown fox jumps over the lazy dog</vwc-text>
`;
wrapper.appendChild(textElementWrapper);
}