added brand-app docs (#57)

brand-app/components.js

@@ -19,4 +19,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-ucdlib-properties";

brand-app/pages/page-ucdlib-properties.js

@@ -0,0 +1,51 @@
+import { LitElement } from 'lit';
+import {render, styles} from "./page-ucdlib-properties.tpl.js";
+
+import {Mixin, MainDomElement} from '../../elements/utils/mixins';
+import {BrandedPageElement, MdElement} from "../utils/index.js";
+
+export default class PageUcdlibProperties extends Mixin(LitElement)
+  .with(MainDomElement, BrandedPageElement, MdElement) {
+
+  static get properties() {
+    return {
+
+    };
+  }
+
+  static get styles() {
+    return styles();
+  }
+
+  constructor() {
+    super();
+    this.render = render.bind(this);
+  }
+
+  /**
+   * @method firstUpdated
+   * @description Lit method called when element is first updated.
+   */
+  firstUpdated() {
+    // document.querySelector('#entered-md').addEventListener('keyup', this._updateDisplayedMarkdown.bind(this));
+  }
+
+  /**
+   * @method _updateDisplayedMarkdown
+   * @description Helper method to update the ucdlib-md element with entered textarea text.
+   */
+  _updateDisplayedMarkdown() {    
+    // document.querySelector('#md-renderer').data = document.querySelector('#entered-md').value;
+  }
+
+  /**
+   * @method disconnectedCallback
+   * @description Web Component lifecycle method when the componenent is disposed of
+   */
+  disconnectedCallback() {
+    // document.querySelector('#entered-md').removeEventListener('keyup', this._updateDisplayedMarkdown.bind(this));
+  }
+
+}
+
+customElements.define('page-ucdlib-properties', PageUcdlibProperties);

brand-app/pages/page-ucdlib-properties.tpl.js

@@ -0,0 +1,54 @@
+import { html, css } from 'lit';
+// import '@ucd-lib/theme-elements/ucdlib/ucdlib-md/ucdlib-md';
+
+export function styles() {
+  const elementStyles = css`
+    :host {
+      display: block;
+    }
+  `;
+
+  return [elementStyles];
+}
+
+export function render() { 
+  return html`
+    ${this.pageTitle("Hydrate Complex Properties of a Web Component")}
+    <p>The <code>ucdlib-properties</code> element along with the <code>SSRPropertiesController</code> can be used to inject data into properties of a web component</p>
+
+    <h2>Using the component</h2>
+    
+    ${this.examplePanel(html`
+    <ucdlib-my-cool-component>
+      <ucdlib-properties type="json">
+        {"testing":"ok", "complex" : {"values": 1, "can-be": "nested"}}
+      </ucdlib-properties>
+    </ucdlib-my-cool-component>
+    `)}
+
+    <p>
+      In this case, <code>ucdlib-my-cool-component</code> is your custom component. In your custom components <code>connectedCallback</code>, connect the <code>SSRPropertiesController</code>
+    </p>
+    
+    ${this.examplePanel(html`
+        connectedCallback() {
+          super.connectedCallback();
+          this.propertiesController = new SSRPropertiesController(this);
+        }
+    `)}
+
+    <p>
+      The json data inside <code>ucdlib-properties</code> contains the properties that will be injected into your custom component. You can also use the <code>request-update</code> attribute
+      force a rerender, useful if you're adding properties that didn't exist in the custom component and you want to ensure it rerenders.
+    </p>
+
+    ${this.examplePanel(html`
+      <ucdlib-my-cool-component>
+        <ucdlib-properties type="json" request-update>
+          {"testing":"ok", "complex" : {"values": 1, "can-be": "nested"}}
+        </ucdlib-properties>
+      </ucdlib-my-cool-component>
+    `)}
+    
+  `;
+}

brand-app/pages/ucdlib-md.md

@@ -26,6 +26,8 @@ Component class for translating/displaying markdown into sanitized html
 | --- | --- | --- |
 | data | <code>String</code> | text to hold markdown code |
 | renderer | <code>Object</code> | an object holding element functions to override the default markdown behavior   Format: reference the Marked Renderer documentation at https://marked.js.org/using_pro#renderer |
+| use | <code>Object</code> | marked use object |
+| options | <code>Object</code> | marked options object |
 
 <a name="updated"></a>
 

brand-app/pages/ucdlib-properties.md

@@ -0,0 +1,6 @@
+<a name="UcdlibProperties"></a>
+
+### UcdlibProperties
+Component class for declaritively wrapping complex properties and passing into parent component using SSRPropertiesController
+
+**Kind**: global class  

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

@@ -87,6 +87,7 @@ return html`
             <li><a href="#ucdlib-sils-permalink">SILS Permalinks</a></li>
           </ul>
           <li><a href="#ucdlib-md">Markdown</a></li>
+          <li><a href="#ucdlib-properties">Properties</a></li>
         </ul>
 
         <ul link-text="Brand Guides" href="#overview">

styles/style.scss

@@ -54,6 +54,7 @@
 //------------------------------------
 //  Library styles
 //------------------------------------
-
-
-
+// Avoid screen flash before components are registered
+ucdlib-properties:not(:defined) {
+  display: none;
+}