@ucd-lib/theme-elements 0.0.10 → 0.0.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
import { LitElement } from 'lit';
|
|
2
|
+
import {render, styles} from "./ucd-theme-brand-textbox.tpl.js";
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* @class UcdThemeBrandTextbox
|
|
6
|
+
* @classdesc Component class for displaying a collapsible content in a colored box
|
|
7
|
+
* Pattern Lab Url:
|
|
8
|
+
* - http://dev.webstyleguide.ucdavis.edu/redesign/?p=organisms-branding-textbox-collapse
|
|
9
|
+
* @property {String} brandColor - A UCD brand color slug
|
|
10
|
+
* @property {Boolean} collapsible - Content can be collapsed/expanded
|
|
11
|
+
* @property {Boolean} collapsed - Content is collapsed
|
|
12
|
+
*
|
|
13
|
+
* @examples
|
|
14
|
+
* <ucd-theme-brand-textbox collapsible brand-color="primary">
|
|
15
|
+
* <p>hello world!</p>
|
|
16
|
+
* </ucd-theme-brand-textbox>
|
|
17
|
+
*/
|
|
18
|
+
export default class UcdThemeBrandTextbox extends LitElement {
|
|
19
|
+
|
|
20
|
+
static get properties() {
|
|
21
|
+
return {
|
|
22
|
+
brandColor: {type: String, attribute: 'brand-color'},
|
|
23
|
+
collapsible: {type: Boolean},
|
|
24
|
+
collapsed: {type: Boolean, reflect: true}
|
|
25
|
+
};
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
static get styles() {
|
|
29
|
+
return styles();
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
constructor() {
|
|
33
|
+
super();
|
|
34
|
+
this.collapsible = false;
|
|
35
|
+
this.collapsed = false;
|
|
36
|
+
this.brandColor = "";
|
|
37
|
+
this.render = render.bind(this);
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
/**
|
|
41
|
+
* @method _getBaseClasses
|
|
42
|
+
* @description Returns CSS classes for this element's first child
|
|
43
|
+
* @private
|
|
44
|
+
* @returns {Object}
|
|
45
|
+
*/
|
|
46
|
+
_getBaseClasses(){
|
|
47
|
+
const out = {
|
|
48
|
+
"brand-textbox": true,
|
|
49
|
+
"category-brand__background": true,
|
|
50
|
+
};
|
|
51
|
+
out[`category-brand--${this.brandColor}`] = this.brandColor;
|
|
52
|
+
out['brand-textbox--collapsible'] = this.collapsible;
|
|
53
|
+
out['brand-textbox--closed'] = this.collapsible && this.collapsed;
|
|
54
|
+
|
|
55
|
+
return out;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
customElements.define('ucd-theme-brand-textbox', UcdThemeBrandTextbox);
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import { html, css } from 'lit';
|
|
2
|
+
import { classMap } from 'lit/directives/class-map.js';
|
|
3
|
+
import brandStyles from "@ucd-lib/theme-sass/4_component/_category-brand.css.js"
|
|
4
|
+
import textBoxStyles from "@ucd-lib/theme-sass/4_component/_brand-textbox.css.js"
|
|
5
|
+
|
|
6
|
+
export function styles() {
|
|
7
|
+
const elementStyles = css`
|
|
8
|
+
:host {
|
|
9
|
+
display: block;
|
|
10
|
+
}
|
|
11
|
+
*, ::before, ::after {
|
|
12
|
+
box-sizing: inherit;
|
|
13
|
+
}
|
|
14
|
+
.brand-textbox__button{
|
|
15
|
+
display: none;
|
|
16
|
+
}
|
|
17
|
+
.brand-textbox--collapsible .brand-textbox__button {
|
|
18
|
+
display: block;
|
|
19
|
+
}
|
|
20
|
+
`;
|
|
21
|
+
|
|
22
|
+
return [
|
|
23
|
+
brandStyles,
|
|
24
|
+
textBoxStyles,
|
|
25
|
+
elementStyles];
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
export function render() {
|
|
29
|
+
return html`
|
|
30
|
+
<section class=${classMap(this._getBaseClasses())}>
|
|
31
|
+
<div class="brand-textbox__content">
|
|
32
|
+
<slot></slot>
|
|
33
|
+
</div>
|
|
34
|
+
<button
|
|
35
|
+
class="brand-textbox__button"
|
|
36
|
+
@click=${() => this.collapsed = !this.collapsed}
|
|
37
|
+
title="Open/Close Message">Toggle this message area open and closed.</button>
|
|
38
|
+
</section>
|
|
39
|
+
|
|
40
|
+
`;}
|