-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
6c3c452
commit 2590619
Showing
18 changed files
with
501 additions
and
88 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,11 +1,19 @@ | ||
| import "./ucdlib-theme-test-app.js"; | ||
|
|
||
| // PAGES | ||
| // IMPORT APP PAGES HERE | ||
|
|
||
| // guides | ||
| import "./pages/page-brand-colors"; | ||
|
|
||
| // brand components | ||
| import "./pages/page-ucd-theme-primary-nav.js"; | ||
| import "./pages/page-ucd-theme-pagination.js"; | ||
| import "./pages/page-ucd-theme-quick-links"; | ||
| import "./pages/page-ucd-theme-header"; | ||
| import "./pages/page-ucd-theme-search-form"; | ||
| import "./pages/page-ucd-theme-search-popup"; | ||
|
|
||
| // ucdlib components | ||
| import "./pages/page-ucdlib-icon"; | ||
| import "./pages/page-brand-colors"; | ||
| import "./pages/page-ucdlib-iconset"; | ||
| import "./pages/page-ucdlib-pages"; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| import { LitElement } from 'lit'; | ||
| import {render, styles} from "./page-ucdlib-iconset.tpl.js"; | ||
|
|
||
| import {Mixin, MainDomElement} from '../../elements/utils/index.js'; | ||
| import {BrandedPageElement, MdElement} from "../utils/index.js"; | ||
|
|
||
| import "../../elements/ucdlib/ucdlib-iconset/ucdlib-iconset"; | ||
| import "../../elements/ucdlib/ucdlib-icon/ucdlib-icon"; | ||
|
|
||
| export default class PageUcdlibIconset extends Mixin(LitElement) | ||
| .with(MainDomElement, BrandedPageElement, MdElement) { | ||
|
|
||
| static get properties() { | ||
| return { | ||
|
|
||
| }; | ||
| } | ||
|
|
||
| static get styles() { | ||
| return styles(); | ||
| } | ||
|
|
||
| constructor() { | ||
| super(); | ||
| this.render = render.bind(this); | ||
| } | ||
|
|
||
| firstUpdated(){ | ||
| const iconsets = this.renderRoot.querySelectorAll('ucdlib-iconset'); | ||
| Array.from(iconsets).forEach(iconset => { | ||
| document.head.appendChild(iconset); | ||
| }); | ||
| } | ||
|
|
||
| } | ||
|
|
||
| customElements.define('page-ucdlib-iconset', PageUcdlibIconset); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,57 @@ | ||
| import { html, css } from 'lit'; | ||
|
|
||
| export function styles() { | ||
| const elementStyles = css` | ||
| :host { | ||
| display: block; | ||
| } | ||
| `; | ||
|
|
||
| return [elementStyles]; | ||
| } | ||
|
|
||
| export function render() { | ||
| return html` | ||
| ${this.pageTitle("Custom Iconsets")} | ||
| <p>The <code>ucdlib-iconset</code> element allows you to create a custom iconset, | ||
| which can then be used by <a href="#ucdlib-icon">the ucdlib-icon element</a></p> | ||
| <h2>Defining a custom set</h2> | ||
| <p> | ||
| You can create a custom set by placing your icons inside svg <code>g</code> tags within <code>ucdlib-iconset</code>. | ||
| Each group should have an id that corresponds to the name of the icon. | ||
| </p> | ||
| ${this.examplePanel(html` | ||
| <ucdlib-iconset name="arrows"> | ||
| <svg> | ||
| <defs> | ||
| <g id="back"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"></path></g> | ||
| <g id="downward"><path d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"></path></g> | ||
| <g id="drop-down"><path d="M7 10l5 5 5-5z"></path></g> | ||
| <g id="drop-down-circle"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 12l-4-4h8l-4 4z"></path></g> | ||
| <g id="drop-up"><path d="M7 14l5-5 5 5z"></path></g> | ||
| <g id="forward"><path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"></path></g> | ||
| <g id="upward"><path d="M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z"></path></g> | ||
| </defs> | ||
| </svg> | ||
| </ucdlib-iconset> | ||
| `, true)} | ||
| <p>Move it to the document head: </p> | ||
| ${this.jsPanel(` | ||
| const iconset = document.querySelector('ucdlib-iconset'); | ||
| document.head.appendChild(iconset); | ||
| `)} | ||
| <p>Now pass a colon-delimited value into the <code>icon</code> attribute of the <code>ucdlib-icon</code> element as follows:</p> | ||
| ${this.examplePanel(html` | ||
| <div style="display:flex;"> | ||
| <ucdlib-icon icon="arrows:back"></ucdlib-icon> | ||
| <ucdlib-icon icon="arrows:forward"></ucdlib-icon> | ||
| <ucdlib-icon icon="arrows:drop-down-circle" class="category-brand--secondary category-brand__text"></ucdlib-icon> | ||
| </div> | ||
| `)} | ||
| <h2>Using cork-icon-set-generator</h2> | ||
| <p>Todo</p> | ||
| `;} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,39 @@ | ||
| import { LitElement } from 'lit'; | ||
| import {render, styles} from "./page-ucdlib-pages.tpl.js"; | ||
|
|
||
| import {Mixin, MainDomElement} from '../../elements/utils/index.js'; | ||
| import {BrandedPageElement, MdElement} from "../utils/index.js"; | ||
|
|
||
| import "../../elements/ucdlib/ucdlib-pages/ucdlib-pages"; | ||
|
|
||
| export default class PageUcdlibPages extends Mixin(LitElement) | ||
| .with(MainDomElement, BrandedPageElement, MdElement) { | ||
|
|
||
| static get properties() { | ||
| return { | ||
| example1Selected: {type: String} | ||
| }; | ||
| } | ||
|
|
||
| static get styles() { | ||
| return styles(); | ||
| } | ||
|
|
||
| constructor() { | ||
| super(); | ||
| this.render = render.bind(this); | ||
|
|
||
| this._example1Pages = ["page1", "page2", "page3"]; | ||
| this.example1Selected = this._example1Pages[0]; | ||
| } | ||
|
|
||
| _example1Click(){ | ||
| const prefix="page"; | ||
| let n = parseInt(this.example1Selected.split(prefix)[1]); | ||
| if ( n >= this._example1Pages.length) n = 0; | ||
| this.example1Selected = this._example1Pages[n]; | ||
| } | ||
|
|
||
| } | ||
|
|
||
| customElements.define('page-ucdlib-pages', PageUcdlibPages); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,42 @@ | ||
| import { html, css } from 'lit'; | ||
|
|
||
| export function styles() { | ||
| const elementStyles = css` | ||
| :host { | ||
| display: block; | ||
| } | ||
| `; | ||
|
|
||
| return [elementStyles]; | ||
| } | ||
|
|
||
| export function render() { | ||
| return html` | ||
| ${this.pageTitle("Pages")} | ||
| <p>The <code>ucdlib-pages</code> element is used to select one of its children to show. | ||
| In a typical library application, it is used by the "application element" to display defined routes/pages. | ||
| </p> | ||
| ${this.examplePanel(html` | ||
| <ucdlib-pages selected="${this.example1Selected}" id="example-pages"> | ||
| <div id="page1" class="category-brand--tahoe category-brand__background">Test 1</div> | ||
| <div id="page2" class="category-brand--farmers-market category-brand__background">Test 2</div> | ||
| <div id="page3" class="category-brand--redbud category-brand__background">Test 3</div> | ||
| </ucdlib-pages> | ||
| <div class="u-space-mt"> | ||
| <button @click="${this._example1Click}" class="btn">Change Page</button> | ||
| </div> | ||
| <style> | ||
| #example-pages > div { | ||
| width: 100%; | ||
| height: 200px; | ||
| } | ||
| #example-pages~div{ | ||
| display: flex; | ||
| justify-content: center; | ||
| } | ||
| </style> | ||
| `)} | ||
| `;} |
Oops, something went wrong.