merging v2 changes to main (v3)

brand-app/pages/page-ucd-theme-collapse.tpl.js

@@ -21,5 +21,21 @@ export function render() {
         I am the content.
       </ucd-theme-collapse>
     `)}
+
+    <h2>Using CSS Custom Properties</h2>
+
+    ${this.examplePanel(html`
+      <style>
+        .custom-collapse {
+          --collapse-background-color: #FFFBED;
+          --collapse-border-color: #FFBF00;
+        }
+      </style>
+      <div class="custom-collapse">
+        <ucd-theme-collapse brand-class="category-brand--secondary" title="I am the panel title">
+          I am the content.
+        </ucd-theme-collapse>
+      </div>
+    `)}
   `;
 }

brand-app/pages/ucd-theme-quick-links.md

@@ -47,6 +47,7 @@ Component class for displaying a quick links nav
 | styleModifiers | <code>String</code> | Apply alternate styles with a space-separated list. |
 | opened | <code>Boolean</code> | Menu is open |
 | animationDuration | <code>Number</code> | Length of animation when opening/closing menu |
+| useIcon | <code>Boolean</code> | Show a custom icon next to the title |
 
 <a name="open"></a>
 

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

@@ -13,6 +13,11 @@ export function styles() {
     [hidden] {
       display: none;
     }
+
+    .collapse__content {
+      background-color: var(--collapse-background-color, white);
+      border-color: var(--collapse-border-color, black);
+    }
   `;
 
   return [

elements/package.json

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

elements/utils/controllers/wait.js

@@ -8,7 +8,7 @@ export class WaitController{
    * @method wait
    * @description Wait for the specified amount of time
    * @param {Number} time - Time to wait (ms)
-   * @returns 
+   * @returns
    */
   async wait(time){
     return new Promise(resolve => {
@@ -20,7 +20,7 @@ export class WaitController{
    * @method waitForUpdate
    * @description Requests and waits for Lit update.
    */
-   async waitForUpdate(){
+  async waitForUpdate(){
     this.host.requestUpdate();
     await this.host.updateComplete;
   }
@@ -30,13 +30,44 @@ export class WaitController{
    * @description Wait for specified number of animation frames
    * @param {Number} ct Number of frames
    */
-   async waitForFrames(ct=1) {
+  async waitForFrames(ct=1) {
     for (let i = 0; i < ct; i++) {
       await new Promise(resolve => {
         requestAnimationFrame(resolve);
       });
     }
   }
 
+  /**
+   * @description Wait for the host to have a property with a specific value
+   * @param {String} prop - Host property to wait for
+   * @param {*} value - Host property value to wait for
+   * @param {Number} timeout - Timeout in ms
+   * @returns {Object} - Object with the following properties:
+   * - prop: Property name
+   * - targetValue: Value to wait for
+   * - timeoutValue: Timeout value
+   * - propValue: Current value of the property
+   * - wasTimeout: Was the wait timed out
+   */
+  async waitForHostPropertyValue(prop, value, timeout=5000){
+    const out = {
+      prop,
+      targetValue: value,
+      timeoutValue: timeout,
+      propValue: this.host[prop],
+      wasTimeout: false
+    };
+    let start = Date.now();
+    while (this.host[prop] !== value) {
+      if (Date.now() - start > timeout) {
+        out.wasTimeout = true;
+        return out;
+      }
+      await this.wait(10);
+    }
+    return out;
+  }
+
 
-}
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ucd-lib/theme",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "University branding, additional theme support, theme elements",
   "main": "index.js",
   "scripts": {