breadcrumb addition

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";
+import "./pages/page-ucdlib-md";
+import './pages/page-ucd-theme-breadcrumbs';

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"
   }
 }

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);

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")}
+
+  <p>The <code>ucd-theme-breadcrumbs</code> 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.
+  </p>
+
+  ${this.examplePanel(html`
+    <ucd-theme-breadcrumbs links=${JSON.stringify(this.linksEx)}></ucd-theme-breadcrumbs>
+  `)}
+
+
+`;}

brand-app/pages/ucd-theme-breadcrumbs.md

@@ -0,0 +1,27 @@
+### Classes
+
+<dl>
+<dt><a href="#UcdlibBreadcrumbs">UcdlibBreadcrumbs</a></dt>
+<dd><p>UI component class for a breadcrumb list</p>
+Pattern Lab Url: <a href="http://dev.webstyleguide.ucdavis.edu/redesign/?p=molecules-breadcrumbs">http://dev.webstyleguide.ucdavis.edu/redesign/?p=molecules-breadcrumbs</a></p>
+</dd>
+</dl>
+
+<a name="UcdlibBreadcrumbs"></a>
+
+### IN ORDER TO USE
+Add links by adding an array with <code> JSON.stringify</code> to an array of objects with the set parameters.
+An example:
+<code>JSON.stringify([
+    { linkTitle: "title1", url: "#1" },
+    { linkTitle: "title2", url: "#2" },
+    { linkTitle: "title3", url: "#3" }
+    ])
+</code>
+
+**Kind**: global class  
+**Properties**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| links | <code>Object</code> | An list of objects with both the link name and the link url included.  Format: <code>{linkTitle: "title", url: "#"}</code>|

brand-app/ucdlib-theme-brand-app.tpl.js

@@ -63,6 +63,7 @@ return html`
           <ul link-text="Other Navigation">
             <li><a href="#ucd-theme-pagination">Pagination</a></li>
             <li><a href="#ucd-theme-subnav">Subnav</a></li>
+            <li><a href="#ucd-theme-breadcrumbs">Breadcrumbs</a></li>
           </ul>
           <ul link-text="Collapsible Content">
             <li><a href="#ucd-theme-collapse">Collapse</a></li>

elements/brand/ucd-theme-breadcrumbs/ucd-theme-breadcrumbs.js

@@ -1,16 +1,11 @@
 import { LitElement } from 'lit';
-import {render, styles} from "./ucd-theme-breadcrumbs.tpl";
+import {render, styles} from "./ucd-theme-breadcrumbs.tpl.js";
 
-import {Mixin, MainDomElement} from '../../elements/utils/mixins';
-import {BrandedPageElement } from "../utils/index.js";
-
-
-export default class PageBrandBreadcrumbs extends Mixin(LitElement)
-  .with(MainDomElement, BrandedPageElement ) {
+export default class UcdThemeBreadcrumbs extends LitElement {
 
   static get properties() {
     return {
-
+      links: {type: Array}
     };
   }
 
@@ -21,8 +16,15 @@ export default class PageBrandBreadcrumbs extends Mixin(LitElement)
   constructor() {
     super();
     this.render = render.bind(this);
+    this.links;
+  }
+
+  firstUpdated(){
+    this.lastElement = this.links[this.links.length - 1];
+    this.requestUpdate();
   }
 
 }
 
-customElements.define('page-brand-breadcrumbs', PageBrandBreadcrumbs);
+customElements.define('ucd-theme-breadcrumbs', UcdThemeBreadcrumbs);
+

elements/brand/ucd-theme-breadcrumbs/ucd-theme-breadcrumbs.tpl.js

@@ -1,7 +1,8 @@
 import { html, css } from 'lit';
 
+import isEqual from 'lodash.isequal';
 import formStyles from "@ucd-lib/theme-sass/1_base_html/_forms.css.js";
-import breadcrumbsStyles from "@ucd-lib/theme-sass/";
+import breadcrumbsStyles from "@ucd-lib/theme-sass/4_component/_index.css";
 
 
 export function styles() {
@@ -13,12 +14,23 @@ export function styles() {
 
   return [
     formStyles,
-    focalLinkStyles,
-    vertLinkStyles,
-    elementStyles];
+    elementStyles,
+    breadcrumbsStyles
+  ];
 }
 
 export function render() { 
 return html`
-
+  <ol class="breadcrumbs">
+    ${this.links ? html`
+      ${this.links.map(link =>html`
+      ${isEqual(link, this.lastElement) ? html`
+          <li><a>${link.linkTitle}</a></li>
+        `: html`
+          <li><a href="${link.url}">${link.linkTitle}</a></li>   
+        `}
+      `)}
+    `
+    : html``}
+  </ol>
 `;}

elements/package.json

@@ -14,6 +14,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"