Skip to content

Commit c2beba8

Browse files
josercarcamojosercarcamo
authored
feat(navigation-logo): add heading level (#9054)
**Related Issue:** #7075 ## Summary Added the "headingLevel" property to navigation-logo, similar to Panel.
1 parent 8b83042 commit c2beba8

File tree

5 files changed

+90
-23
lines changed

5 files changed

+90
-23
lines changed

‎packages/calcite-components/src/components.d.ts

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3268,6 +3268,10 @@ export namespace Components {
32683268
* Specifies heading text for the component, such as a product or organization name.
32693269
*/
32703270
"heading": string;
3271+
/**
3272+
* Specifies the heading level of the component's heading for proper document structure, without affecting visual styling.
3273+
*/
3274+
"headingLevel": HeadingLevel;
32713275
/**
32723276
* Specifies the URL destination of the component, which can be set as an absolute or relative path.
32733277
*/
@@ -10829,6 +10833,10 @@ declare namespace LocalJSX {
1082910833
* Specifies heading text for the component, such as a product or organization name.
1083010834
*/
1083110835
"heading"?: string;
10836+
/**
10837+
* Specifies the heading level of the component's heading for proper document structure, without affecting visual styling.
10838+
*/
10839+
"headingLevel"?: HeadingLevel;
1083210840
/**
1083310841
* Specifies the URL destination of the component, which can be set as an absolute or relative path.
1083410842
*/

‎packages/calcite-components/src/components/navigation-logo/navigation-logo.e2e.ts

Lines changed: 30 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { html } from "../../../support/formatting";
2-
import { accessible, focusable, hidden, reflects, renders } from "../../tests/commonTests";
2+
import { accessible, focusable, hidden, reflects, renders, defaults } from "../../tests/commonTests";
33

44
describe("calcite-navigation-logo", () => {
55
describe("renders", () => {
@@ -32,10 +32,39 @@ describe("calcite-navigation-logo", () => {
3232
propertyName: "target",
3333
value: "_self",
3434
},
35+
{
36+
propertyName: "headingLevel",
37+
value: 1,
38+
},
3539
]);
3640
});
3741

3842
describe("is focusable", () => {
3943
focusable(html`<calcite-navigation-logo href=" " heading="esri"></calcite-navigation-logo>`);
4044
});
45+
46+
describe("defaults", () => {
47+
defaults("calcite-navigation-logo", [
48+
{
49+
propertyName: "active",
50+
defaultValue: undefined,
51+
},
52+
{
53+
propertyName: "href",
54+
defaultValue: undefined,
55+
},
56+
{
57+
propertyName: "rel",
58+
defaultValue: undefined,
59+
},
60+
{
61+
propertyName: "target",
62+
defaultValue: undefined,
63+
},
64+
{
65+
propertyName: "headingLevel",
66+
defaultValue: undefined,
67+
},
68+
]);
69+
});
4170
});

‎packages/calcite-components/src/components/navigation-logo/navigation-logo.stories.ts

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -70,3 +70,12 @@ export const withHref_TestOnly = (): string => html`
7070
</calcite-navigation-logo>
7171
</calcite-navigation>
7272
`;
73+
74+
export const headingLevel_TestOnly = (): string => html`
75+
<calcite-navigation-logo
76+
heading="ArcGIS Online"
77+
heading-level="1"
78+
description="City of AcmeCo"
79+
thumbnail="${placeholderImage({ width: 50, height: 50 })}"
80+
/>
81+
`;

‎packages/calcite-components/src/components/navigation-logo/navigation-logo.tsx

Lines changed: 37 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import {
55
setComponentLoaded,
66
setUpLoadableComponent,
77
} from "../../utils/loadable";
8+
import { Heading, HeadingLevel } from "../functional/Heading";
89
import { CSS } from "./resources";
910

1011
@Component({
@@ -59,6 +60,11 @@ export class CalciteNavigationLogo implements LoadableComponent {
5960
/** Specifies the `src` to an image. */
6061
@Prop() thumbnail: string;
6162

63+
/**
64+
* Specifies the heading level of the component's heading for proper document structure, without affecting visual styling.
65+
*/
66+
@Prop({ reflect: true }) headingLevel: HeadingLevel;
67+
6268
//--------------------------------------------------------------------------
6369
//
6470
// Public Methods
@@ -107,34 +113,43 @@ export class CalciteNavigationLogo implements LoadableComponent {
107113
return <calcite-icon class={CSS.icon} flipRtl={this.iconFlipRtl} icon={this.icon} scale="l" />;
108114
}
109115

116+
renderHeaderContent(): VNode {
117+
const { heading, headingLevel, description } = this;
118+
const headingNode = heading ? (
119+
<Heading
120+
class={{
121+
[CSS.heading]: true,
122+
[CSS.standalone]: !this.description,
123+
}}
124+
key={CSS.heading}
125+
level={headingLevel}
126+
>
127+
{heading}
128+
</Heading>
129+
) : null;
130+
131+
const descriptionNode = description ? (
132+
<span class={CSS.description} key={CSS.description}>
133+
{description}
134+
</span>
135+
) : null;
136+
137+
return headingNode || descriptionNode ? (
138+
<div class={CSS.container} key={CSS.container}>
139+
{headingNode}
140+
{descriptionNode}
141+
</div>
142+
) : null;
143+
}
144+
110145
render(): VNode {
111-
const { heading, description, thumbnail } = this;
146+
const { thumbnail } = this;
112147
return (
113148
<Host>
114149
<a class={CSS.anchor} href={this.href} rel={this.rel} target={this.target}>
115150
{thumbnail && <img alt={this.label || ""} class={CSS.image} src={thumbnail} />}
116151
{this.icon && this.renderIcon()}
117-
{(heading || description) && (
118-
<div class={CSS.container}>
119-
{heading && (
120-
<span
121-
aria-label={this.heading}
122-
class={{
123-
[CSS.heading]: true,
124-
[CSS.standalone]: !this.description,
125-
}}
126-
key={CSS.heading}
127-
>
128-
{heading}
129-
</span>
130-
)}
131-
{description && (
132-
<span aria-label={this.description} class={CSS.description} key={CSS.description}>
133-
{description}
134-
</span>
135-
)}
136-
</div>
137-
)}
152+
{this.renderHeaderContent()}
138153
</a>
139154
</Host>
140155
);

‎packages/calcite-components/src/demos/navigation.html

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -331,6 +331,12 @@ <h3>
331331
<calcite-navigation-logo heading="Walt's Chips" slot="logo"> </calcite-navigation-logo>
332332
</calcite-navigation>
333333
</calcite-shell>
334+
<calcite-shell>
335+
<calcite-navigation slot="header" style="--calcite-color-brand: #bf390f">
336+
<calcite-navigation-logo heading="Walt's Chips with Level" heading-level="3" slot="logo">
337+
</calcite-navigation-logo>
338+
</calcite-navigation>
339+
</calcite-shell>
334340
<calcite-shell>
335341
<calcite-navigation slot="header" style="--calcite-color-brand: #bf390f">
336342
<calcite-navigation-logo slot="logo" icon="link-chart"> </calcite-navigation-logo>

0 commit comments

Comments
 (0)