From 2bbdce479aaa50d03892e41307a96e3e79d13645 Mon Sep 17 00:00:00 2001 From: andreasbm Date: Sat, 2 Nov 2019 22:43:27 +0100 Subject: [PATCH] Fix documentation links. Closes #65. --- src/demo/constants.ts | 2 +- src/demo/pages/elements/elements-page.ts | 9 +-- src/demo/pages/elements/elements-routes.ts | 87 +++++++++++++++------- 3 files changed, 64 insertions(+), 34 deletions(-) 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
element to validate the inputs.", - img: iconPath("form") + img: iconPath("form"), + docs: "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form" } }, { @@ -90,7 +102,8 @@ export const COMPONENTS_ROUTES: IRoute[] = [ data: { title: "Icon", desc: "Symbols for common actions and items.", - img: iconPath("icon") + img: iconPath("icon"), + docs: weightlessDocsURL("icon") } }, { @@ -99,7 +112,8 @@ export const COMPONENTS_ROUTES: IRoute[] = [ data: { title: "Label", desc: "Make form elements more accessible.", - img: iconPath("label") + img: iconPath("label"), + docs: weightlessDocsURL("label") } }, { @@ -108,7 +122,8 @@ export const COMPONENTS_ROUTES: IRoute[] = [ data: { title: "List Item", desc: "Display an item in a list.", - img: iconPath("list") + img: iconPath("list"), + docs: weightlessDocsURL("list-item") } }, { @@ -117,7 +132,8 @@ export const COMPONENTS_ROUTES: IRoute[] = [ data: { title: "Navigation Bar", desc: "Provide access to destinations in your app.", - img: iconPath("toolbar") + img: iconPath("toolbar"), + docs: weightlessDocsURL("nav") } }, { @@ -126,7 +142,8 @@ export const COMPONENTS_ROUTES: IRoute[] = [ data: { title: "Popover", desc: "Contextual anchored elements.", - img: iconPath("menu") + img: iconPath("menu"), + docs: weightlessDocsURL("popover") } }, { @@ -135,7 +152,8 @@ export const COMPONENTS_ROUTES: IRoute[] = [ data: { title: "Progress Bar", desc: "Fills a bar from 0% to 100%.", - img: iconPath("progress_bar") + img: iconPath("progress_bar"), + docs: weightlessDocsURL("progress-bar") } }, { @@ -144,7 +162,8 @@ export const COMPONENTS_ROUTES: IRoute[] = [ data: { title: "Progress Spinner", desc: "Fills a circle from 0% to 100%.", - img: iconPath("progress_spinner") + img: iconPath("progress_spinner"), + docs: weightlessDocsURL("progress-spinner") } }, { @@ -153,7 +172,8 @@ export const COMPONENTS_ROUTES: IRoute[] = [ data: { title: "Radio", desc: "Select one option from a set.", - img: iconPath("radio_button") + img: iconPath("radio_button"), + docs: weightlessDocsURL("radio") } }, { @@ -162,7 +182,8 @@ export const COMPONENTS_ROUTES: IRoute[] = [ data: { title: "Ripple", desc: "Indicate touch actions.", - img: iconPath("ripple") + img: iconPath("ripple"), + docs: weightlessDocsURL("ripple") } }, { @@ -171,7 +192,8 @@ export const COMPONENTS_ROUTES: IRoute[] = [ data: { title: "Select", desc: "Select one or more values from a set of options.", - img: iconPath("select") + img: iconPath("select"), + docs: weightlessDocsURL("select") } }, { @@ -180,7 +202,8 @@ export const COMPONENTS_ROUTES: IRoute[] = [ data: { title: "Slider", desc: "Make selections from a range of values.", - img: iconPath("slider") + img: iconPath("slider"), + docs: weightlessDocsURL("slider") } }, { @@ -189,7 +212,8 @@ export const COMPONENTS_ROUTES: IRoute[] = [ data: { title: "Snackbar", desc: "Provide brief messages at the bottom of the screen.", - img: iconPath("snackbar") + img: iconPath("snackbar"), + docs: weightlessDocsURL("snackbar") } }, { @@ -198,7 +222,8 @@ export const COMPONENTS_ROUTES: IRoute[] = [ data: { title: "Switch", desc: "Turn an option on or off.", - img: iconPath("switch") + img: iconPath("switch"), + docs: weightlessDocsURL("switch") } }, { @@ -207,7 +232,8 @@ export const COMPONENTS_ROUTES: IRoute[] = [ data: { title: "Tabs", desc: "Organize navigation between groups of content.", - img: iconPath("tabs") + img: iconPath("tabs"), + docs: weightlessDocsURL("tab") } }, { @@ -216,7 +242,8 @@ export const COMPONENTS_ROUTES: IRoute[] = [ data: { title: "Text", desc: "Group text into paragraphs.", - img: iconPath("text") + img: iconPath("text"), + docs: weightlessDocsURL("text") } }, { @@ -225,7 +252,8 @@ export const COMPONENTS_ROUTES: IRoute[] = [ data: { title: "Textarea", desc: "Multiline text fields.", - img: iconPath("textarea") + img: iconPath("textarea"), + docs: weightlessDocsURL("textarea") } }, { @@ -234,7 +262,8 @@ export const COMPONENTS_ROUTES: IRoute[] = [ data: { title: "Textfield", desc: "Singleline text fields.", - img: iconPath("textfield") + img: iconPath("textfield"), + docs: weightlessDocsURL("textfield") } }, { @@ -244,7 +273,7 @@ export const COMPONENTS_ROUTES: IRoute[] = [ title: "Theme", desc: "Customize every element to fit your brand", img: iconPath("theme"), - docs: "style" + docs: weightlessDocsURL("style") } }, { @@ -253,7 +282,8 @@ export const COMPONENTS_ROUTES: IRoute[] = [ data: { title: "Title", desc: "Indicate the start of a new section.", - img: iconPath("typography") + img: iconPath("typography"), + docs: weightlessDocsURL("title") } }, { @@ -262,7 +292,8 @@ export const COMPONENTS_ROUTES: IRoute[] = [ data: { title: "Tooltip", desc: "Informative context related text", - img: iconPath("tooltip") + img: iconPath("tooltip"), + docs: weightlessDocsURL("tooltip") } }, {