-
Notifications
You must be signed in to change notification settings - Fork 75
/
navigation-logo.tsx
142 lines (121 loc) · 4.32 KB
/
navigation-logo.tsx
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
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
import { Component, Element, h, Host, Prop, VNode, Method } from "@stencil/core";
import { CSS } from "./resources";
import {
LoadableComponent,
componentFocusable,
setComponentLoaded,
setUpLoadableComponent,
} from "../../utils/loadable";
@Component({
tag: "calcite-navigation-logo",
styleUrl: "navigation-logo.scss",
shadow: {
delegatesFocus: true,
},
})
export class CalciteNavigationLogo implements LoadableComponent {
//--------------------------------------------------------------------------
//
// Public Properties
//
//--------------------------------------------------------------------------
/** When true, the component is highlighted. */
@Prop({ reflect: true }) active: boolean;
/** Specifies the URL destination of the component, which can be set as an absolute or relative path.*/
@Prop({ reflect: true }) href: string;
/** Specifies an icon to display. */
@Prop({ reflect: true }) icon: string;
/** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */
@Prop({ reflect: true }) iconFlipRtl = false;
/** Describes the appearance or function of the `thumbnail`. If no label is provided, context will not be provided to assistive technologies. */
@Prop() label: string;
/**
* Defines the relationship between the `href` value and the current document.
*
* @mdn [rel](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel)
*/
@Prop({ reflect: true }) rel: string;
/** A description for the component, which displays below the `heading`.*/
@Prop() description: string;
/**
* Specifies where to open the linked document defined in the `href` property.
*
* @mdn [target](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target)
*/
@Prop({ reflect: true }) target: string;
/** Specifies heading text for the component, such as a product or organization name.*/
@Prop() heading: string;
/** Specifies the `src` to an image. */
@Prop() thumbnail: string;
//--------------------------------------------------------------------------
//
// Public Methods
//
//--------------------------------------------------------------------------
/** Sets focus on the component. */
@Method()
async setFocus(): Promise<void> {
await componentFocusable(this);
if (this.href) {
this.el.focus();
}
}
//--------------------------------------------------------------------------
//
// Private Properties
//
//--------------------------------------------------------------------------
@Element() el: HTMLCalciteNavigationLogoElement;
//--------------------------------------------------------------------------
//
// Lifecycle
//
//--------------------------------------------------------------------------
componentWillLoad(): void {
setUpLoadableComponent(this);
}
componentDidLoad(): void {
setComponentLoaded(this);
}
// --------------------------------------------------------------------------
//
// Render Methods
//
// --------------------------------------------------------------------------
private renderIcon(): VNode {
/** Icon scale is not variable as the component does not have a scale property */
return <calcite-icon class={CSS.icon} flipRtl={this.iconFlipRtl} icon={this.icon} scale="l" />;
}
render(): VNode {
const { heading, description, thumbnail } = this;
return (
<Host>
<a class={CSS.anchor} href={this.href} rel={this.rel} target={this.target}>
{thumbnail && <img alt={this.label || ""} class={CSS.image} src={thumbnail} />}
{this.icon && this.renderIcon()}
{(heading || description) && (
<div class={CSS.container}>
{heading && (
<span
aria-label={this.heading}
class={{
[CSS.heading]: true,
[CSS.standalone]: !this.description,
}}
key={CSS.heading}
>
{heading}
</span>
)}
{description && (
<span aria-label={this.description} class={CSS.description} key={CSS.description}>
{description}
</span>
)}
</div>
)}
</a>
</Host>
);
}
}