diff --git a/brand-app/components.js b/brand-app/components.js index dbbe45b..af7397a 100644 --- a/brand-app/components.js +++ b/brand-app/components.js @@ -20,4 +20,5 @@ import "./pages/page-ucdlib-pages"; import "./pages/page-ucdlib-sils-permalink"; import "./pages/page-ucdlib-branding-bar"; import "./pages/page-ucdlib-sils-search-redirect"; -import "./pages/page-ucdlib-md"; \ No newline at end of file +import "./pages/page-ucdlib-md"; +import './pages/page-ucd-theme-breadcrumbs'; diff --git a/brand-app/package-lock.json b/brand-app/package-lock.json index 492d4b7..b29a025 100644 --- a/brand-app/package-lock.json +++ b/brand-app/package-lock.json @@ -1804,6 +1804,8 @@ "dompurify": "^2.3.9", "ip-cidr": "^3.0.4", "lit": "^2.0.2", + "lodash": "^4.17.21", + "lodash.isequal": "^4.5.0", "marked": "^4.0.18", "photoswipe": "^4.1.3", "slim-select": "^1.26.2" @@ -1890,6 +1892,16 @@ "@types/trusted-types": "^2.0.2" } }, + "lodash": { + "version": "4.17.21", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", + "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==" + }, + "lodash.isequal": { + "version": "4.5.0", + "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz", + "integrity": "sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==" + }, "marked": { "version": "4.0.18", "resolved": "https://registry.npmjs.org/marked/-/marked-4.0.18.tgz", @@ -3052,6 +3064,11 @@ "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz", "integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA=" }, + "dompurify": { + "version": "2.3.10", + "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-2.3.10.tgz", + "integrity": "sha512-o7Fg/AgC7p/XpKjf/+RC3Ok6k4St5F7Q6q6+Nnm3p2zGWioAY6dh0CbbuwOhH2UcSzKsdniE/YnE2/92JcsA+g==" + }, "dotenv": { "version": "16.0.0", "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.0.0.tgz", @@ -3897,6 +3914,11 @@ "integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168=", "dev": true }, + "lodash.isequal": { + "version": "4.5.0", + "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz", + "integrity": "sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==" + }, "lodash.memoize": { "version": "4.1.2", "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz", diff --git a/brand-app/package.json b/brand-app/package.json index aee43fa..442f19e 100644 --- a/brand-app/package.json +++ b/brand-app/package.json @@ -31,15 +31,16 @@ "@ucd-lib/theme-elements": "file:../elements", "@ucd-lib/theme-sass": "^5.0.15", "cors": "^2.8.5", + "dompurify": "^2.3.10", "dotenv": "^16.0.0", "express": "^4.17.1", "fs-extra": "^10.0.0", "ip-cidr": "^3.0.4", "lit": "^2.0.2", + "lodash.isequal": "^4.5.0", "marked": "^4.0.18", "photoswipe": "^4.1.3", "prismjs": "^1.25.0", - "slim-select": "^1.26.2", - "dompurify": "^2.3.9" + "slim-select": "^1.26.2" } } diff --git a/brand-app/pages/page-ucd-theme-breadcrumbs.js b/brand-app/pages/page-ucd-theme-breadcrumbs.js new file mode 100644 index 0000000..f85791a --- /dev/null +++ b/brand-app/pages/page-ucd-theme-breadcrumbs.js @@ -0,0 +1,36 @@ +import { LitElement } from 'lit'; +import {render, styles} from "./page-ucd-theme-breadcrumbs.tpl.js"; + +import {Mixin, MainDomElement} from '../../elements/utils/mixins'; +import {BrandedPageElement, MdElement} from "../utils/index.js"; + +import "../../elements/brand/ucd-theme-breadcrumbs/ucd-theme-breadcrumbs"; + + +export default class PageUcdThemeBreadcrumbs extends Mixin(LitElement) + .with(MainDomElement, BrandedPageElement, MdElement) { + + static get properties() { + return { + linksEx: {type: Object} + }; + } + + static get styles() { + return styles(); + } + + constructor() { + super(); + this.render = render.bind(this); + this.linksEx = + [ + {"linkTitle": "Hello", "url": "#"}, + {"linkTitle": "There", "url": "#"}, + {"linkTitle": "Friend", "url": "#"} + ]; + } + +} + +customElements.define('page-ucd-theme-breadcrumbs', PageUcdThemeBreadcrumbs); \ No newline at end of file diff --git a/brand-app/pages/page-ucd-theme-breadcrumbs.tpl.js b/brand-app/pages/page-ucd-theme-breadcrumbs.tpl.js new file mode 100644 index 0000000..be54f3b --- /dev/null +++ b/brand-app/pages/page-ucd-theme-breadcrumbs.tpl.js @@ -0,0 +1,27 @@ +import { html, css } from 'lit'; + +export function styles() { + const elementStyles = css` + :host { + display: block; + } + `; + + return [elementStyles]; +} + +export function render() { +return html` + ${this.pageTitle("UC Davs Library Breadcrumbs")} + ${this.importPanel("ucdlib/ucdlib-breadcrumbs/ucdlib-breadcrumbs.js")} + +

The ucd-theme-breadcrumbs component can be used in a page that has a trail of descriptive headers + to quickly apply the Library's preferred styling to the breadcrumbs titles. +

+ + ${this.examplePanel(html` + + `)} + + +`;} \ No newline at end of file diff --git a/brand-app/pages/ucd-theme-breadcrumbs.md b/brand-app/pages/ucd-theme-breadcrumbs.md new file mode 100644 index 0000000..8946841 --- /dev/null +++ b/brand-app/pages/ucd-theme-breadcrumbs.md @@ -0,0 +1,27 @@ +### Classes + +
+
UcdlibBreadcrumbs
+

UI component class for a breadcrumb list

+Pattern Lab Url: http://dev.webstyleguide.ucdavis.edu/redesign/?p=molecules-breadcrumbs

+
+
+ + + +### IN ORDER TO USE +Add links by adding an array with JSON.stringify to an array of objects with the set parameters. +An example: +JSON.stringify([ + { linkTitle: "title1", url: "#1" }, + { linkTitle: "title2", url: "#2" }, + { linkTitle: "title3", url: "#3" } + ]) + + +**Kind**: global class +**Properties** + +| Name | Type | Description | +| --- | --- | --- | +| links | Object | An list of objects with both the link name and the link url included. Format: {linkTitle: "title", url: "#"}| diff --git a/brand-app/ucdlib-theme-brand-app.tpl.js b/brand-app/ucdlib-theme-brand-app.tpl.js index 75a3dca..d87a1e7 100644 --- a/brand-app/ucdlib-theme-brand-app.tpl.js +++ b/brand-app/ucdlib-theme-brand-app.tpl.js @@ -63,6 +63,7 @@ return html`