Skip to content

Commit

Permalink
fix(text): tight option (#1110)
Browse files Browse the repository at this point in the history 
* fix(text): tight option

* Move login example to pages

* formas sass file

* Update components/text/src/vwc-text-base.ts

* Update components/text/readme.md

Co-authored-by: yinon <yinon@hotmail.com>

* Update components/text/src/vwc-text-base.ts

Co-authored-by: yinon <yinon@hotmail.com>

* Update components/text/readme.md

Co-authored-by: yinon <yinon@hotmail.com>
  • Loading branch information
@rachelbt @yinonov
rachelbt and yinonov committed Nov 11, 2021
1 parent 72fe2e8 commit 1dadbc4
Show file tree
Hide file tree
Showing 7 changed files with 89 additions and 69 deletions.
4 changes: 4 additions & 0 deletions components/text/readme.md
View file
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` |
| `tight` | `tight` | `boolean` |



<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
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,
};
}

Expand Down
8 changes: 5 additions & 3 deletions components/text/src/vwc-text.scss
View file
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
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
@@ -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
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
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);
}

0 comments on commit 1dadbc4

Please sign in to comment.