Added text element.

Author: andreasbm

README.md

@@ -200,12 +200,19 @@
 			"[Documentation](/src/lib/tab-group)",
 			"[Demo](https://weightless.dev/elements/tabs)"
 		],
+		[
+			"Text",
+			"`wl-text`",
+			"Group text into paragraphs.",
+			"[Documentation](/src/lib/text)",
+			"[Demo](https://weightless.dev/elements/text)"
+		],
 		[
 			"Textarea",
 			"`wl-textarea`",
 			"Multiline text fields.",
-			"[Documentation](/src/lib/textarea)",
-			"[Demo](https://weightless.dev/elements/textarea)"
+			"[Documentation](/src/lib/text)",
+			"[Demo](https://weightless.dev/elements/text)"
 		],
 		[
 			"Textfield",

assets/element/icons.sketch

@@ -73,7 +73,8 @@
 		"readme:slider": "node_modules/.bin/readme generate -c src/lib/slider/blueprint.json",
 		"readme:tab": "node_modules/.bin/readme generate -c src/lib/tab/blueprint.json",
 		"readme:tab-group": "node_modules/.bin/readme generate -c src/lib/tab-group/blueprint.json",
-		"docs": "npm run readme && npm run readme:backdrop && npm run readme:button && npm run readme:banner && npm run readme:card && npm run readme:divider && npm run readme:icon && npm run readme:label && npm run readme:nav && npm run readme:checkbox && npm run readme:dialog && npm run readme:popover && npm run readme:popover-card && npm run readme:progress-bar && npm run readme:progress-spinner && npm run readme:radio && npm run readme:ripple && npm run readme:select && npm run readme:textarea && npm run readme:textfield && npm run readme:title && npm run readme:tooltip && npm run readme:list-item && npm run readme:expansion && npm run readme:snackbar && npm run readme:switch && npm run readme:slider && npm run readme:tab && npm run readme:tab-group"
+		"readme:text": "node_modules/.bin/readme generate -c src/lib/text/blueprint.json",
+		"docs": "npm run readme && npm run readme:backdrop && npm run readme:button && npm run readme:banner && npm run readme:card && npm run readme:divider && npm run readme:icon && npm run readme:label && npm run readme:nav && npm run readme:checkbox && npm run readme:dialog && npm run readme:popover && npm run readme:popover-card && npm run readme:progress-bar && npm run readme:progress-spinner && npm run readme:radio && npm run readme:ripple && npm run readme:select && npm run readme:textarea && npm run readme:textfield && npm run readme:title && npm run readme:tooltip && npm run readme:list-item && npm run readme:expansion && npm run readme:snackbar && npm run readme:switch && npm run readme:slider && npm run readme:tab && npm run readme:tab-group && npm run readme:text"
 	},
 	"devDependencies": {
 		"@a11y/skip-navigation": "0.0.7",

assets/element/text.svg

@@ -63,12 +63,12 @@ export default [
 			...(isServe ? [
 				...defaultServePlugins({
 					serveConfig: {
-						port: 1340,
+						port: 1350,
 						contentBase: folders.dist
 					},
 					livereloadConfig: {
 						watch: folders.dist,
-						port: 35730
+						port: 35731
 					}
 				})
 			] : []),

blueprint.json

@@ -29,6 +29,7 @@ const ELEMENTS = [
 	"snackbar",
 	"switch",
 	"tabs",
+	"text",
 	"textarea",
 	"textfield",
 	"title",

package.json

@@ -91,8 +91,11 @@ export class ThemeComponent extends Nav {
 
 	private toggleDarkMode () {
 		this.darkMode = !this.darkMode;
-		const foreground = this.darkMode ? `hsl(0, 100%, 100%)` : `hsl(0, 0%, 5%)`;
-		const background = this.darkMode ? `hsl(0, 0%, 5%)` : `hsl(0, 100%, 100%)`;
+
+		const light = `hsl(0, 0%, 95%)`;
+		const dark = `hsl(200, 0%, 5%)`;
+		const foreground = this.darkMode ? light : dark;
+		const background = this.darkMode ? dark : light;
 		const shade = this.darkMode ? greyReversedPalette : greyPalette;
 		const shadow = this.darkMode ? `hsla(360, 5%, 50%, 0.1)` : `hsla(0, 0%, 0%, 0.2)`;
 

rollup.config.ts

@@ -1,6 +1,6 @@
 @import "../../../lib/style/base";
 
-$elements-page-menu-width: #{size(250)};
+$elements-page-menu-width: #{size(260)};
 
 :host {
 	padding: #{size(25)} #{size(50)} #{size(25)} calc(#{$elements-page-menu-width} + #{size(50)});
@@ -11,6 +11,10 @@ a {
 	text-decoration: none;
 }
 
+#title {
+	margin: 0;
+}
+
 #menu {
 	width: $elements-page-menu-width;
 	background: color("shade", 100);

screenshots/index.ts

@@ -4,6 +4,8 @@ import { customElement, html, LitElement, property, PropertyValues, query } from
 import { repeat } from "lit-html/directives/repeat";
 import "../../../lib/button/button";
 import "../../../lib/icon/icon";
+import "../../../lib/label/label";
+import "../../../lib/title/title";
 import "../../../lib/list-item/list-item";
 import { cssResult } from "../../../lib/util/css";
 import { addListener } from "../../../lib/util/event";
@@ -75,7 +77,7 @@ export default class ElementsPage extends LitElement {
 				${this.currentRoute != null && this.currentRoute.data != null ? html`
 					<header id="header">
 						<aside>
-							<wl-title level="1">${this.currentRoute.data.title}</wl-title>
+							<wl-title id="title" level="1" nowrap>${this.currentRoute.data.title}</wl-title>
 							<wl-label>${this.currentRoute.data.desc}</wl-label>
 						</aside>
 						<a tabindex="-1" href="${DOCS_URL(this.currentRoute.data.docs || this.currentRoute.path)}" target="_blank" rel="noopener">

screenshots/wl-banner.png

@@ -210,6 +210,15 @@ export const COMPONENTS_ROUTES: IRoute<IRouteData>[] = [
 			img: iconPath("tabs")
 		}
 	},
+	{
+		path: "text",
+		component: () => import("./elements/text-page"),
+		data: {
+			title: "Text",
+			desc: "Group text into paragraphs.",
+			img: iconPath("text")
+		}
+	},
 	{
 		path: "textarea",
 		component: () => import("./elements/textarea-page"),

screenshots/wl-button.png

@@ -8,6 +8,7 @@ import { Select } from "../../../../lib/select/select";
 import "../../../../lib/select/select";
 import "../../../../lib/textfield/textfield";
 import "../../../../lib/title/title";
+import "../../../../lib/text/text";
 import { cssResult } from "../../../../lib/util/css";
 import "../../../elements/code-example/code-example-element";
 import "../../../elements/demo/demo-element";
@@ -21,7 +22,7 @@ async function openTemplateDialog (text: string, config: Partial<IDialogBaseProp
 		backdrop: true,
 		blockScrolling: true,
 		container: document.body,
-		template: html`<p slot="content">${text}</p>`,
+		template: html`<wl-text slot="content">${text}</wl-text>`,
 		scrollContainer: getMainScrollContainer(),
 		...config
 	});
@@ -90,7 +91,7 @@ export default class DialogPage extends LitElement {
 					<wl-dialog open>
 						<wl-title level="3" slot="header">This is a header</wl-title>
 						<div slot="content">
-							<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
+							<wl-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</wl-text>
 						</div>
 						<div slot="footer">
 							<wl-button inverted flat>Cancel</wl-button>

screenshots/wl-card.png

@@ -0,0 +1,29 @@
+import { customElement, html, LitElement } from "lit-element";
+import "../../../../lib/text/text";
+import "../../../../lib/title/title";
+import "../../../elements/code-example/code-example-element";
+import "../../../elements/demo/demo-element";
+import { sharedStyles } from "../../../style/shared";
+
+@customElement("text-page")
+export default class ButtonPage extends LitElement {
+
+	static styles = [sharedStyles];
+
+	protected render () {
+		return html`
+			<demo-element default style="text-align: left;">
+				<code-example-element>
+					<wl-text>Bacon ipsum dolor amet pork chop brisket ground round ham sausage pig. Shoulder drumstick jerky andouille kevin boudin doner venison salami tongue biltong prosciutto turkey tri-tip rump. Pork belly alcatra shank, ball tip jerky tail pork flank. Pork spare ribs tongue flank, shoulder sausage pig shank kevin hamburger bresaola meatloaf capicola. Beef ribs kielbasa pig strip steak ham hock. Turkey cow fatback rump meatloaf. Biltong shank boudin chicken ham shankle strip steak.</wl-text>
+				</code-example-element>
+			</demo-element>
+			
+			<wl-title level="3">Large text</wl-title>
+			<demo-element style="text-align: left;">
+				<code-example-element>
+					<wl-text size="large">Pig cow kielbasa pastrami. Drumstick pastrami prosciutto beef ribs cow shank, capicola ham turkey. Ham hock alcatra drumstick rump pork belly. Ham hock strip steak hamburger, cupim picanha frankfurter tail pork pastrami tenderloin swine. Capicola ham frankfurter, chicken beef shoulder ball tip sirloin pork belly ground round prosciutto pork loin t-bone doner. Frankfurter bacon cow jowl shank.</wl-text>
+				</code-example-element>
+			</demo-element>
+		`;
+	}
+}

screenshots/wl-checkbox.png

@@ -18,10 +18,6 @@
 		font-size: #{size(60)};
 	}
 
-	.text {
-		font-size: $font-size-l;
-	}
-
 	.cta-area {
 		margin: $spacing-l 0 0 0;
 	}

screenshots/wl-dialog.png

@@ -4,6 +4,7 @@ import { repeat } from "lit-html/directives/repeat";
 import "../../../lib/button/button";
 import "../../../lib/icon/icon";
 import "../../../lib/title/title";
+import "../../../lib/text/text";
 import { cssResult } from "../../../lib/util/css";
 import { BROWSER_SUPPORT, BULLETS, GITHUB_URL, NPM_URL, PACKAGE_JSON_URL } from "../../constants";
 import "../../elements/container/container-element";
@@ -82,8 +83,8 @@ export default class HomePage extends LitElement {
 	protected render () {
 		return html`
 			<container-element id="main-container" centered>
-				<wl-title class="title">Weightless</wl-title>
-				<span class="text">High quality web components with a small footprint.</span>
+				<wl-title class="title" nowrap>Weightless</wl-title>
+				<wl-text class="text" size="large">High quality web components with a small footprint.</wl-text>
 				<div class="cta-area">
 					<router-link path="get-started" delegateFocus>
 						<skip-anchor></skip-anchor>
@@ -107,7 +108,7 @@ export default class HomePage extends LitElement {
 							<img class="img" src="/assets/icon/${bullet.img}.svg" alt="${bullet.title}" />
 							<aside>
 								<wl-title class="title" level="4">${bullet.title}</wl-title>
-								<span class="text">${bullet.text}</span>
+								<wl-text class="text">${bullet.text}</wl-text>
 							</aside>
 						</div>
 					`)}
@@ -135,15 +136,15 @@ export default class HomePage extends LitElement {
 						</svg>
 						<aside>
 							<wl-title class="title" level="2">Our Octocat is hungry!</wl-title>
-							<span>Do you find this library inspiring? Help us feed our Octocat by becoming a stargazer.</span>
+							<wl-text class="text">Do you find this library inspiring? Help us feed our Octocat by becoming a stargazer.</wl-text>
 						</aside>
 					</div>
 				</container-element>
 			</a>
 			
 			<container-element id="browser-support-container">
-				<wl-title class="text" level="2">Browser Support</wl-title>
-				<span class="text">Weightless elements are supported on all modern browsers. If you want to support old school browsers you’ll need to load polyfills. Luckily it is super easy if you use <a href="https://polyfill.dev" target="_blank" rel="noopener">polyfill.dev</a> or something similar.</span>
+				<wl-title class="title" level="2">Browser Support</wl-title>
+				<wl-text class="text">Weightless elements are supported on all modern browsers. If you want to support old school browsers you’ll need to load polyfills. Luckily it is super easy if you use <a href="https://polyfill.dev" target="_blank" rel="noopener">polyfill.dev</a> or something similar.</wl-text>
 				<div id="browsers">
 					${repeat(BROWSER_SUPPORT, support => html`
 						<div class="browser">

screenshots/wl-divider.png

@@ -1,7 +1,16 @@
 @import "../style/base";
 
 /* Color */
-$label-color: var(--label-color, #{color("shade", $dark-hue)});
+$label-color: var(--label-color, #{color("shade")});
+
+/* Font size */
+$label-font-size: var(--label-font-size, #{$font-size-m});
+
+/* Font family */
+$label-font-family: var(--label-font-family, #{$font-family-serif});
+
+/* Font family */
+$label-line-height: var(--label-line-height, #{$line-height-m});
 
 /* Color of the required astrix */
 $label-required-color: var(--label-required-color, #{color("error", $default-hue)});

screenshots/wl-expansion.png

@@ -2,6 +2,9 @@
 @import "label-vars";
 
 :host {
+	font-size: $label-font-size;
+	font-family: $label-font-family;
+	line-height: $label-line-height;
 	color: $label-color;
 	cursor: default;
 	display: inline-block;
@@ -12,6 +15,7 @@
 	overflow: hidden;
 	text-overflow: ellipsis;
 	max-width: 100%;
+	line-height: 1.1;
 }
 
 :host([required]):after {

screenshots/wl-icon.png

@@ -19,7 +19,10 @@ export interface ILabelProperties {
 /**
  * Make form elements more accessible.
  * @slot - Default content. If the first element is a form element, clicks on the entire label will be re-fired upon that element.
- * @cssprop --label-color - Color
+ * @cssprop --label-font-size - Font size
+ * @cssprop --label-font-family - Font family
+ * @cssprop --label-line-height - Line height
+ * @cssprop --label-color - Color.
  * @cssprop --label-required-color - Color of the required astrix
  */
 @customElement("wl-label")

screenshots/wl-label.png

@@ -116,7 +116,6 @@
 
 	// Required to center the thumb on the track
 	position: relative;
-	top: -1px;
 }
 
 @mixin slider-thumb-focus-styles() {
@@ -137,9 +136,6 @@
 	@include slider-thumb-focus-styles()
 }
 
-;
 #slider:focus::-moz-range-thumb {
 	@include slider-thumb-focus-styles()
-}
-
-;
+}

screenshots/wl-list-item.png

@@ -57,6 +57,6 @@
 	@return hsl-contrast-fallback($palette, $name, $hue, $alpha);
 }
 
-$foreground: #{var(--foreground, hsl(0, 0%, 5%))};
-$background: #{var(--background, hsl(0, 100%, 100%))};
+$foreground: #{var(--foreground, hsl(200, 4%, 15%))};
+$background: #{var(--background, hsl(0, 0%, 95%))};
 $shadow: #{var(--shadow, hsla(0, 0%, 0%, 0.15))};

screenshots/wl-nav.png

@@ -14,3 +14,5 @@ $font-weight-thin: var(--font-weight-thin, 300);
 $font-weight-regular: var(--font-weight-regular, 500);
 $font-weight-strong: var(--font-weight-strong, 600);
 $font-weight-bold: var(--font-weight-bold, 800);
+
+$line-height-m: var(--line-height-m, 1.5em);