diff --git a/src/demo/constants.ts b/src/demo/constants.ts
index aec55f4..f5f9ab5 100644
--- a/src/demo/constants.ts
+++ b/src/demo/constants.ts
@@ -2,12 +2,12 @@ export const GITHUB_URL = `https://github.com/andreasbm/weightless`;
export const NPM_URL = `https://www.npmjs.com/package/weightless`;
export const TWITTER_URL = `https://twitter.com/andreasmehlsen`;
export const PACKAGE_JSON_URL = `https://unpkg.com/weightless/package.json`;
-export const DOCS_URL = (element: string) => `https://github.com/andreasbm/weightless/tree/master/src/lib/${element}`;
export const UNPGK_URL = `https://unpkg.com/weightless/umd/weightless.min.js`;
export const GOOGLE_FONT_URL = `https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700|Roboto+Slab:300,400,700`;
export const MATERIAL_ICONS_URL = `https://fonts.googleapis.com/icon?family=Material+Icons`;
export const ALL_ELEMENTS_DEMO_URL = `https://codepen.io/andreasbm/pen/YMyBQd`;
export const GA_MEASUREMENT_ID = `UA-96179028-3`;
+
export interface IBullet {
title: string;
text: string;
diff --git a/src/demo/pages/elements/elements-page.ts b/src/demo/pages/elements/elements-page.ts
index 639c4db..2199cf4 100644
--- a/src/demo/pages/elements/elements-page.ts
+++ b/src/demo/pages/elements/elements-page.ts
@@ -1,16 +1,15 @@
import "@a11y/skip-navigation";
-import { ChangeStateEvent, IRoute, path, RouterSlot, RouterSlotEventKind } from "@appnest/web-router";
+import { IRoute, path, RouterSlot, RouterSlotEventKind } from "@appnest/web-router";
import { customElement, html, LitElement, property, PropertyValues, query } from "lit-element";
import { nothing } from "lit-html";
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 "../../../lib/title/title";
import { cssResult } from "../../../lib/util/css";
import { addListener } from "../../../lib/util/event";
-import { DOCS_URL } from "../../constants";
import "../../elements/footer/footer-element";
import { getMainScrollContainer } from "../../main-scroll-target";
import { sharedStyles } from "../../style/shared";
@@ -81,12 +80,12 @@ export default class ElementsPage extends LitElement {
${this.currentRoute.data.title}
${this.currentRoute.data.desc}
-
+ ${this.currentRoute.data.docs != null ? html`
Documentation
open_in_new
-
+ ` : nothing}
` : ""}
diff --git a/src/demo/pages/elements/elements-routes.ts b/src/demo/pages/elements/elements-routes.ts
index a0a20c2..97b15a0 100644
--- a/src/demo/pages/elements/elements-routes.ts
+++ b/src/demo/pages/elements/elements-routes.ts
@@ -4,6 +4,10 @@ function iconPath (name: string): string {
return `assets/element/${name}.svg`;
}
+function weightlessDocsURL (element: string): string {
+ return `https://github.com/andreasbm/weightless/tree/master/src/lib/${element}`;
+}
+
export interface IRouteData {
title: string;
desc: string;
@@ -18,7 +22,8 @@ export const COMPONENTS_ROUTES: IRoute[] = [
data: {
title: "Banner",
desc: "Display a non-interruptive message and related optional actions.",
- img: iconPath("banner")
+ img: iconPath("banner"),
+ docs: weightlessDocsURL("banner")
}
},
{
@@ -27,7 +32,8 @@ export const COMPONENTS_ROUTES: IRoute[] = [
data: {
title: "Button",
desc: "Allow users to take actions, and make choices, with a single tap.",
- img: iconPath("button")
+ img: iconPath("button"),
+ docs: weightlessDocsURL("button")
}
},
{
@@ -36,7 +42,8 @@ export const COMPONENTS_ROUTES: IRoute[] = [
data: {
title: "Card",
desc: "Group related content and action.",
- img: iconPath("card")
+ img: iconPath("card"),
+ docs: weightlessDocsURL("card")
}
},
{
@@ -45,7 +52,8 @@ export const COMPONENTS_ROUTES: IRoute[] = [
data: {
title: "Checkbox",
desc: "Turn an option on or off.",
- img: iconPath("checkbox")
+ img: iconPath("checkbox"),
+ docs: weightlessDocsURL("checkbox")
}
},
{
@@ -54,7 +62,8 @@ export const COMPONENTS_ROUTES: IRoute[] = [
data: {
title: "Dialog",
desc: "Highly interruptive messages.",
- img: iconPath("dialog")
+ img: iconPath("dialog"),
+ docs: weightlessDocsURL("dialog")
}
},
{
@@ -63,7 +72,8 @@ export const COMPONENTS_ROUTES: IRoute[] = [
data: {
title: "Divider",
desc: "Thin line that groups content in lists and layouts.",
- img: iconPath("divider")
+ img: iconPath("divider"),
+ docs: weightlessDocsURL("divider")
}
},
{
@@ -72,7 +82,8 @@ export const COMPONENTS_ROUTES: IRoute[] = [
data: {
title: "Expansion",
desc: "Provide an expandable details-summary view.",
- img: iconPath("expansion")
+ img: iconPath("expansion"),
+ docs: weightlessDocsURL("expansion")
}
},
{
@@ -81,7 +92,8 @@ export const COMPONENTS_ROUTES: IRoute[] = [
data: {
title: "Form",
desc: "Interact with the native