-
Notifications
You must be signed in to change notification settings - Fork 4
/
d2l-navigation-button-icon.js
120 lines (111 loc) · 3.27 KB
/
d2l-navigation-button-icon.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
import '@brightspace-ui/core/components/colors/colors.js';
import '@brightspace-ui/core/components/icons/icon.js';
import '@brightspace-ui/core/components/tooltip/tooltip.js';
import { css, html, LitElement, nothing } from 'lit';
import { highlightBorderStyles, highlightButtonStyles } from './d2l-navigation-styles.js';
import { FocusMixin } from '@brightspace-ui/core/mixins/focus-mixin.js';
import { getUniqueId } from '@brightspace-ui/core/helpers/uniqueId.js';
import { ifDefined } from 'lit/directives/if-defined.js';
/**
* Navigation button with an icon and text.
*/
class NavigationButtonIcon extends FocusMixin(LitElement) {
static get properties() {
return {
/**
* Disables the button
* @type {boolean}
*/
disabled: { reflect: true, type: Boolean },
/**
* REQUIRED: Preset icon key (e.g. "tier1:gear")
* @type {string}
*/
icon: { type: String },
/**
* Position of the icon.
* @type {'start'|'end'}
*/
iconPosition: { attribute: 'icon-position', type: String },
/**
* Visually hides the highlight border when hovered/focused
* @type {boolean}
*/
noHighlightBorder: { attribute: 'no-highlight-border', type: Boolean },
/**
* REQUIRED: Text for the button
* @type {string}
*/
text: { type: String },
/**
* Visually hides the text but still accessible
* @type {boolean}
*/
textHidden: { attribute: 'text-hidden', type: Boolean },
/**
* Offset of the tooltip
* @type {Number}
*/
tooltipOffset: { attribute: 'tooltip-offset', type: Number },
/**
* Position of the tooltip
* @type {'top'|'bottom'|'left'|'right'}
*/
tooltipPosition: { attribute: 'tooltip-position', type: String }
};
}
static get styles() {
return [highlightBorderStyles, highlightButtonStyles, css`
:host {
display: inline-block;
height: 100%;
}
:host([hidden]) {
display: none;
}
`];
}
constructor() {
super();
this.disabled = false;
this.iconPosition = 'start';
this.noHighlightBorder = false;
this.textHidden = false;
this._buttonId = getUniqueId();
this.tooltipPosition = 'bottom';
}
static get focusElementSelector() {
return 'button';
}
render() {
const { ariaLabel, id, text, tooltip } = this._getRenderSettings();
const highlightBorder = (!this.disabled && !this.noHighlightBorder) ? html`<span class="d2l-navigation-highlight-border"></span>` : nothing;
const icon = html`<d2l-icon icon="${this.icon}"></d2l-icon>`;
return html`
<button id="${ifDefined(id)}" ?disabled="${this.disabled}" aria-label="${ifDefined(ariaLabel)}" type="button">
${highlightBorder}
${this.iconPosition === 'start' ? icon : nothing}
${text}
${this.iconPosition === 'end' ? icon : nothing}
</button>
${tooltip}
`;
}
_getRenderSettings() {
if (this.textHidden) {
return {
ariaLabel: this.text,
id: this._buttonId,
text: nothing,
tooltip: html`<d2l-tooltip close-on-click for="${this._buttonId}" for-type="label" position="${this.tooltipPosition}" offset="${ifDefined(this.tooltipOffset)}" class="vdiff-target">${this.text}</d2l-tooltip>`
};
}
return {
ariaLabel: undefined,
id: undefined,
text: this.text,
tooltip: nothing
};
}
}
customElements.define('d2l-navigation-button-icon', NavigationButtonIcon);