@ucd-lib/theme-elements 0.0.10 → 0.0.13

package/brand/ucd-theme-brand-textbox/ucd-theme-brand-textbox.js

@@ -0,0 +1,76 @@
+import { LitElement } from 'lit';
+import {render, styles} from "./ucd-theme-brand-textbox.tpl.js";
+
+/**
+ * @class UcdThemeBrandTextbox
+ * @classdesc Component class for displaying a collapsible content in a colored box
+ * Pattern Lab Url:
+ *  - http://dev.webstyleguide.ucdavis.edu/redesign/?p=organisms-branding-textbox-collapse
+ * @property {String} brandColor - A UCD brand color slug
+ * @property {Boolean} collapsible - Content can be collapsed/expanded
+ * @property {Boolean} collapsed - Content is collapsed
+ * 
+ * @examples
+ * <ucd-theme-brand-textbox collapsible brand-color="primary">
+ *  <p>hello world!</p>
+ * </ucd-theme-brand-textbox>
+ */
+export default class UcdThemeBrandTextbox extends LitElement {
+
+  static get properties() {
+    return {
+      brandColor: {type: String, attribute: 'brand-color'},
+      collapsible: {type: Boolean},
+      collapsed: {type: Boolean, reflect: true}
+    };
+  }
+
+  static get styles() {
+    return styles();
+  }
+
+  constructor() {
+    super();
+    this.collapsible = false;
+    this.collapsed = false;
+    this.brandColor = "";
+    this.render = render.bind(this);
+  }
+
+  /**
+   * @method _getBaseClasses
+   * @description Returns CSS classes for this element's first child
+   * @private
+   * @returns {Object}
+   */
+  _getBaseClasses(){
+    const out = {
+      "brand-textbox": true,
+      "category-brand__background": true,
+    };
+    out[`category-brand--${this.brandColor}`] = this.brandColor;
+    out['brand-textbox--collapsible'] = this.collapsible;
+    out['brand-textbox--closed'] = this.collapsible && this.collapsed;
+
+    return out;
+  }
+
+  /**
+   * @method _onSlotchange
+   * @param {Event} e
+   * @description fires when a slot value changes. 
+   * assigns category-brand__background class so that slotted children are correct color
+   * @private
+   */
+  _onSlotchange(e){
+    const childNodes = e.target.assignedNodes({flatten: true});
+    childNodes.forEach(child => {
+      if ( child.nodeType === Node.ELEMENT_NODE ){
+        child.classList.add('category-brand__background');
+      }
+    });
+  }
+
+}
+
+customElements.define('ucd-theme-brand-textbox', UcdThemeBrandTextbox);

package/brand/ucd-theme-brand-textbox/ucd-theme-brand-textbox.tpl.js

@@ -0,0 +1,46 @@
+import { html, css } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
+import brandStyles from "@ucd-lib/theme-sass/4_component/_category-brand.css.js"
+import textBoxStyles from "@ucd-lib/theme-sass/4_component/_brand-textbox.css.js"
+
+export function styles() {
+  const elementStyles = css`
+    :host {
+      display: block;
+    }
+    *, ::before, ::after {
+      box-sizing: inherit;
+    }
+    .brand-textbox__button{
+      display: none;
+    }
+    .brand-textbox--collapsible .brand-textbox__button {
+      display: block;
+    }
+    ::slotted(*:last-child) {
+      margin-bottom: 0 !important;
+    }
+    ::slotted(blockquote) {
+      --category-brand-contrast-color: #fff !important;
+    }
+  `;
+
+  return [
+    brandStyles,
+    textBoxStyles,
+    elementStyles];
+}
+
+export function render() { 
+return html`
+  <section class=${classMap(this._getBaseClasses())}>
+    <div class="brand-textbox__content">
+      <slot @slotchange=${this._onSlotchange}></slot>
+    </div>
+    <button 
+      class="brand-textbox__button" 
+      @click=${() => this.collapsed = !this.collapsed}
+      title="Open/Close Message">Toggle this message area open and closed.</button>
+  </section>
+
+`;}

package/brand/ucd-theme-subnav/ucd-theme-subnav.js

@@ -17,6 +17,7 @@ import { MutationObserverController, WaitController } from '../../utils/controll
  * 
  * @property {String} navTitle - Subnav header text
  * @property {String} titleHref - Link for subnav header (optional)
+ * @property {Boolean} titleClickEvent - If navTitle, will fire an event when clicked.
  * 
  * @example
  *  <ucd-theme-subnav nav-title="A subnav">
@@ -36,6 +37,7 @@ export default class UcdThemeSubnav extends Mixin(LitElement)
     return {
       navTitle: {type: String, attribute: "nav-title"},
       titleHref: {type: String, attribute: "title-href"},
+      titleClickEvent: {type: Boolean, attribute: 'title-click-event'},
       navItems: {type: Array},
       animationDuration: {type: Number, attribute: "animation-duration"}
     };
@@ -53,6 +55,7 @@ export default class UcdThemeSubnav extends Mixin(LitElement)
 
     this.navTitle = "";
     this.titleHref = "";
+    this.titleClickEvent = false;
     this.animationDuration = 300;
   }
 
@@ -140,6 +143,41 @@ export default class UcdThemeSubnav extends Mixin(LitElement)
     if ( navItems.length ) this.navItems = navItems;
   }
 
+  /**
+   * @method _dispatchItemClick
+   * @private
+   * @description Fires an 'item-click' event
+   * @param {Object} item - The link item
+   * @param {Array} location - The link location in links array
+   * @returns 
+   */
+  _dispatchItemClick(item, location){
+    if (item.href) return;
+    const options = {
+      detail: {
+        linkText: item.linkText,
+        location
+      },
+      bubbles: true,
+      composed: true,
+    };
+    this.dispatchEvent(new CustomEvent('item-click', options));
+  }
+
+  /**
+   * @method _dispatchTitleClick
+   * @private
+   * @description fires a 'title-click' ecent
+   */
+  _dispatchTitleClick(){
+    if ( !this.titleClickEvent ) return;
+    const options = {
+      bubbles: true,
+      composed: true,
+    };
+    this.dispatchEvent(new CustomEvent('title-click', options));
+  }
+
   /**
    * @method _renderNavItem
    * @private
@@ -155,7 +193,7 @@ export default class UcdThemeSubnav extends Mixin(LitElement)
       return html`
         <li id="nav--${location.join("-")}">
           <div class="submenu-toggle__wrapper">
-            <a href=${ifDefined(item.href ? item.href : null)}>${item.linkText}</a>
+            <a href=${ifDefined(item.href ? item.href : undefined)} @click=${() => this._dispatchItemClick(item, location)}>${item.linkText}</a>
             <button 
               @click=${() => this._toggleItemMenu(location)}
               class="submenu-toggle ${item.isOpen ? "submenu-toggle--open" : ""}" 
@@ -171,7 +209,7 @@ export default class UcdThemeSubnav extends Mixin(LitElement)
       `;
     }
     return html`
-      <li id="nav--${location.join("-")}"><a href=${item.href}>${item.linkText}</a></li>
+      <li id="nav--${location.join("-")}"><a href=${ifDefined(item.href ? item.href : undefined)} @click=${() => this._dispatchItemClick(item, location)}>${item.linkText}</a></li>
     `;
   }
 

package/brand/ucd-theme-subnav/ucd-theme-subnav.tpl.js

@@ -1,4 +1,5 @@
 import { html, css } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
 
 import normalizeStyles from "@ucd-lib/theme-sass/normalize.css.js";
 import headerStyles from "@ucd-lib/theme-sass/1_base_html/_headings.css.js";
@@ -25,6 +26,9 @@ export function styles() {
     ul.sub-nav__menu ul.is-open {
       display: block;
     }
+    a {
+      cursor: pointer;
+    }
   `;
 
   return [
@@ -48,8 +52,8 @@ export function render() {
   </style>
   <nav class="sub-nav">
     ${this.navTitle ? html`
-      <h2 class="sub-nav__title${this.titleHref ? "-linked" : ""}">
-        ${this.titleHref ? html`<a href=${this.titleHref}>${this.navTitle}</a>` : this.navTitle}
+      <h2 class="sub-nav__title${this.titleHref || this.titleClickEvent ? "-linked" : ""}">
+        ${this.titleHref || this.titleClickEvent ? html`<a href=${ifDefined(this.titleHref ? this.titleHref : undefined)} @click=${() => this._dispatchTitleClick()}>${this.navTitle}</a>` : this.navTitle}
       </h2>
     ` : html``}
     <ul class="sub-nav__menu">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ucd-lib/theme-elements",
-  "version": "0.0.10",
+  "version": "0.0.13",
   "description": "Custom elements for the UCD brand theme",
   "main": "index.js",
   "scripts": {