fix(text): added spacing (#1094)

* fix(text): added spacing

Added top & bottom margin to headlines & body

* moved spacing example to usage templates

* add specific classname

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

components/text/src/vwc-text.scss

@@ -17,9 +17,42 @@
  @include typography.typography-cat-shorthand($key);
  }
  }
+
+ &.font-face {
+ &-headline-1,
+ &-headline-2 {
+ --font-face-margin: 2.5rem 0;
+ }
+
+ &-title-1,
+ &-title-2 {
+ --font-face-margin: 2rem 0;
+ }
+
+ &-subtitle-1,
+ &-subtitle-2 {
+ --font-face-margin: 1.5rem 0;
+ }
+
+ &-body-1,
+ &-body-2 {
+ --font-face-margin: 1rem 0;
+ }
+ }
+
+ &: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);
+ }
 }
 
+::slotted(:where(h1, h2, h3, h4, h5, h6, p)) {
+ margin: initial;
+}
+
+
 ::slotted(*) {
  color: inherit;
  font: inherit;
 }
+

docs/stories/getting-started/usage-examples/content.stories.js

@@ -0,0 +1,56 @@
+import '@vonage/vwc-text/vwc-text.js';
+import { html } from 'lit-element';
+
+export default {
+ title: 'Getting Started/Usage Examples/Typography',
+};
+
+const style = html`
+ <style>
+ body .article-template :where(h1, h2, h3, h4, h5, h6, p){
+ margin: 0; /*resetting .vivid-scope*/
+ }
+ @media (min-width:769px) {
+ .article-template {
+ max-width: 680px;
+ margin: 0 auto;
+ }
+ }
+ </style>
+`;
+
+const TemplateBasicPost = args => html`
+ ${style}
+ <article class="article-template">
+ <vwc-text font-face="headline-1"><h1>In the pursuit of happiness</h1></vwc-text>
+ <vwc-text font-face="headline-2"><h2>Sub title that can enhance the major title. We are easily influenced by the hedonistic lifestyles</h2></vwc-text>
+ <vwc-text font-face="body-1"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce placerat pulvinar risus eget mollis. Mauris quam diam, faucibus sit amet accumsan et, faucibus quis justo.</p></vwc-text><vwc-text font-face="title-1"><h3>The lifestyles hedonistic </h3></vwc-text>
+ <vwc-text font-face="body-1"><p>Of others and ultimately succumb to a personality not of our own. We are easily influenced by the hedonistic lifestyles of others and ultimately succumb to a personality not of our own.</p></vwc-text>
+ <vwc-layout>
+ <div style="">
+ <img style="width: 100%" src="https://doodleipsum.com/700x525/abstract?bg=825DEB&i=be149914c1ca3abd4d013b3b7bb43666" alt="Color Comp by Pablo Stanley" />
+ <vwc-text font-face="caption">Illustration by <a href="https://blush.design/artists/RyUTVuP8G4QeAAEEQgug/pablo-stanley">Pablo Stanley</a></vwc-text>
+ </div>
+ <vwc-text><p>The image was generated by <vwc-text font-face="body-1-link"><a href="https://doodleipsum.com/">doodleipsum.com</a> </vwc-text>Of others and ultimately succumb to a personality not of our own. We are easily influenced by the hedonistic lifestyles of others and ultimately succumb to a personality not of our own. Of others and ultimately succumb to a personality not of our own. We are easily influenced by the hedonistic lifestyles of others and ultimately succumb to a personality not of our own.</p></vwc-text>
+ </vwc-layout>
+ <vwc-text font-face="title-1"><h3>Another Sub title that is h3</h3></vwc-text>
+ <vwc-text font-face="body-1"><p>Praesent sollicitudin dignissim metus. Nulla sed nulla metus. Integer quis magna id velit fringilla fringilla eu a mauris. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Proin eu purus non massa cursus tincidunt. Curabitur eu suscipit arcu. Praesent commodo sodales tellus vel elementum. Integer at elit dolor. Fusce sed dolor velit. Curabitur euismod purus sit amet velit ultrices gravida. Morbi interdum imperdiet lectus at facilisis. Quisque finibus tincidunt nulla, ut semper leo venenatis et. Vestibulum pulvinar nisl nec eros suscipit blandit. In feugiat lacus eget odio ultricies, commodo consequat risus elementum. Pellentesque interdum diam eget aliquet cursus.</p></vwc-text>
+ <vwc-note
+ connotation="success"
+ icon="check-circle"
+ header="Pascal's theological argument"
+ >
+ Pascal argues that a rational person should live as though God exists and seek
+ to believe in God. If God does not actually exist, such a person will have
+ only a finite loss (some pleasures, luxury, etc.), whereas if God does exist,
+ he stands to receive infinite gains (as represented by eternity in Heaven) and
+ avoid infinite losses (eternity in Hell).
+ </vwc-note>
+ <vwc-text font-face="title-1"><h3>Wrapping up with subtitle h3</h3></vwc-text>
+ <vwc-text font-face="body-1"><p>Nullam quis sem ante. Morbi tincidunt sodales purus, nec varius diam semper et. Sed sagittis malesuada mauris a vulputate. Nulla euismod risus eget ipsum tempus accumsan. In scelerisque est vitae justo vehicula, non semper augue efficitur. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam congue enim eget ornare tincidunt.
+ </p></vwc-text>
+ <vwc-text font-face="body-1"><p>Nullam quis sem ante. Morbi tincidunt sodales purus, nec varius diam semper et. Sed sagittis malesuada mauris a vulputate. Nulla euismod risus eget ipsum tempus accumsan. In scelerisque est vitae justo vehicula, non semper augue efficitur. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam congue enim eget ornare tincidunt.
+ </p></vwc-text>
+</article>`;
+
+export const BasicPost = TemplateBasicPost.bind({});

ui-tests/tests/vwc-text/index.js

@@ -24,8 +24,14 @@ 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-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>
  `;
  wrapper.appendChild(textElementWrapper);
 }
-
-