Skip to content

Commit

Permalink
feat(telekom-header): no shadow dom for nav-list and nav-item (#1484
Browse files Browse the repository at this point in the history 
)
  • Loading branch information
Arturo Castillo Delgado authored Jan 22, 2023
1 parent bd9c848 commit 9665120
Show file tree
Hide file tree
Showing 11 changed files with 226 additions and 153 deletions.
1 change: 1 addition & 0 deletions packages/components/src/components/telekom/telekom-header/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@
| Part | Description |
| ------------------- | ----------- |
| `"app-logo"` | |
| `"app-name-text"` | |
| `"body"` | |
| `"bottom-app-name"` | |
| `"bottom-bar"` | |
Expand Down
31 changes: 14 additions & 17 deletions packages/components/src/components/telekom/telekom-header/telekom-header.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -180,7 +180,7 @@ slot[name='functions'] {
/* TODO inline margin */
}

:host::part(base) {
[part~='base'] {
height: var(--_height);
background-color: var(--background);
box-shadow: var(--shadow);
Expand All @@ -190,12 +190,12 @@ slot[name='functions'] {
transition: var(--transition);
}

:host::part(container) {
[part~='container'] {
margin: var(--_spacing-x);
display: flex;
}

:host::part(app-logo) {
[part~='app-logo'] {
height: var(--_height);
width: var(--_height);
display: flex;
Expand All @@ -204,12 +204,12 @@ slot[name='functions'] {
transition: var(--transition);
}

/* TODO fix exportparts */
/* targeting `scale-logo` */
:host::part(logo-svg) {
height: var(--_height-logo);
transition: var(--transition);
}

/* targeting `scale-logo` */
:host::part(logo) {
height: calc(var(--_height) - 6px);
Expand All @@ -220,54 +220,53 @@ slot[name='functions'] {
transition: var(--transition);
}

:host::part(body) {
[part~='body'] {
display: block;
flex: 1; /* used to be width: 100% */
margin-left: var(--_spacing-left-body);
}

:host::part(top-bar) {
[part~='top-bar'] {
height: var(--_height-top-bar);
display: flex;
align-items: end;
width: 100%;
transition: var(--transition);
}

:host::part(top-app-name) {
[part~='top-app-name'] {
display: var(--_display-top-app-name);
margin-right: var(--_spacing-right-top-app-name);
transition: var(--transition);
}

:host::part(top-body) {
[part~='top-body'] {
display: inline-flex;
flex: 1;
}

:host::part(bottom-bar) {
[part~='bottom-bar'] {
display: flex;
justify-content: space-between;
align-items: center;
}

:host::part(bottom-app-name) {
[part~='bottom-app-name'] {
display: var(--_display-bottom-app-name);
animation: var(--_animation-app-name);
margin-right: var(--_spacing-right-bottom-app-name);
transition: var(--transition);
}

:host::part(bottom-body) {
[part~='bottom-body'] {
justify-content: var(--_base-menu-justify-content);
height: var(--_height-bottom-bar);
display: inline-flex;
flex: 1;
transition: var(--transition);
}

[part~='top-app-name'] > *,
[part~='bottom-app-name'] > * {
[part~='app-name-text'] {
font-size: var(--font-size-app-name);
font-weight: var(--font-weight-app-name);
line-height: var(--line-height-app-name);
Expand All @@ -276,13 +275,11 @@ slot[name='functions'] {
text-decoration: none;
}

[part~='top-app-name'] > *:hover,
[part~='bottom-app-name'] > *:hover {
[part~='app-name-text']:hover {
color: var(--telekom-color-text-and-icon-primary-hovered);
}

[part~='top-app-name'] > *:active,
[part~='bottom-app-name'] > *:active {
[part~='app-name-text']:active {
color: var(--telekom-color-text-and-icon-primary-pressed);
}

Expand Down
16 changes: 12 additions & 4 deletions packages/components/src/components/telekom/telekom-header/telekom-header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,11 +65,15 @@ export class TelekomHeader {
{this.appName ? (
<div part="top-app-name">
{this.appNameLink ? (
<a onClick={this.appNameClick} href={this.appNameLink}>
<a
part="app-name-text"
onClick={this.appNameClick}
href={this.appNameLink}
>
{this.appName}
</a>
) : (
<span>{this.appName}</span>
<span part="app-name-text">{this.appName}</span>
)}
</div>
) : null}
Expand All @@ -85,11 +89,15 @@ export class TelekomHeader {
{this.appName ? (
<div part="bottom-app-name">
{this.appNameLink ? (
<a onClick={this.appNameClick} href={this.appNameLink}>
<a
part="app-name-text"
onClick={this.appNameClick}
href={this.appNameLink}
>
{this.appName}
</a>
) : (
<span>{this.appName}</span>
<span part="app-name-text">{this.appName}</span>
)}
</div>
) : null}
Expand Down
1 change: 1 addition & 0 deletions packages/components/src/components/telekom/telekom-nav-flyout/telekom-nav-flyout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -129,6 +129,7 @@ export class TelekomNavItem {
return;
}
event.preventDefault();
event.stopImmediatePropagation();
this.expanded = !this.expanded;
this.expanded ? this.show() : this.hide();
this.parentElement.removeEventListener('mouseleave', this.handlePointerOut);
Expand Down
6 changes: 3 additions & 3 deletions packages/components/src/components/telekom/telekom-nav-item/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,9 @@

## Properties

| Property | Attribute | Description | Type | Default |
| --------- | --------- | ----------- | ------------------ | -------- |
| `variant` | `variant` | | `"main" \| "meta"` | `'main'` |
| Property | Attribute | Description | Type | Default |
| -------- | --------- | ----------- | --------- | ------- |
| `active` | `active` | | `boolean` | `false` |


----------------------------------------------
Expand Down
117 changes: 78 additions & 39 deletions packages/components/src/components/telekom/telekom-nav-item/telekom-nav-item.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,81 +11,99 @@

@import url('../../../global/custom-media.css');

:host {
--spacing-x: 0;
/*
Spacing is handled only vertically.
Horizontal spacing is handled by `scale-nav-list`.
*/

--_spacing-t-slotted-meta: var(--telekom-spacing-unit-x5);
--_spacing-b-slotted-main: var(--telekom-spacing-unit-x5);
.scale-telekom-nav-item {
--_spacing-top-slotted-top: var(--telekom-spacing-unit-x5);
--_spacing-bottom-slotted-bottom: var(--telekom-spacing-unit-x5);
}

@media screen and (--md) {
:host {
--_spacing-b-slotted-main: var(--telekom-spacing-unit-x5);
.scale-telekom-nav-item {
--_spacing-bottom-slotted-bottom: var(--telekom-spacing-unit-x5);
}
}
@media screen and (--lg) {
:host {
--_spacing-t-slotted-meta: var(--telekom-spacing-unit-x3);
--_spacing-b-slotted-main: var(--telekom-spacing-unit-x4);
.scale-telekom-nav-item {
--_spacing-top-slotted-top: var(--telekom-spacing-unit-x3);
--_spacing-bottom-slotted-bottom: var(--telekom-spacing-unit-x4);
}
:host-context([scrolled]) {
--_spacing-b-slotted-main: var(--telekom-spacing-unit-x6);
[scrolled] .scale-telekom-nav-item {
--_spacing-bottom-slotted-bottom: var(--telekom-spacing-unit-x6);
}
}
@media screen and (--xl) {
:host {
--_spacing-t-slotted-meta: var(--telekom-spacing-unit-x3);
--_spacing-b-slotted-main: var(--telekom-spacing-unit-x6);
.scale-telekom-nav-item {
--_spacing-top-slotted-top: var(--telekom-spacing-unit-x3);
--_spacing-bottom-slotted-bottom: var(--telekom-spacing-unit-x6);
}
}
@media screen and (--2xl) {
:host {
--_spacing-t-slotted-meta: var(--telekom-spacing-unit-x3);
--_spacing-b-slotted-main: var(--telekom-spacing-unit-x8);
.scale-telekom-nav-item {
--_spacing-top-slotted-top: var(--telekom-spacing-unit-x3);
--_spacing-bottom-slotted-bottom: var(--telekom-spacing-unit-x8);
}
}

:host([debug]) {
.scale-telekom-nav-item[debug] {
border: 1px dotted cyan;
}

::slotted(:where(a, button)) {
.scale-telekom-nav-item > :where(a, button) {
box-sizing: border-box;
display: flex;
align-items: flex-end;
height: 100%;
position: relative;
font: inherit;
color: inherit;
background: none;
appearance: none;
padding: 0;
border: none;
background: none;
text-decoration: none;
color: inherit;
cursor: pointer;
display: flex;
align-items: flex-end;
height: 100%;
position: relative;
}

::slotted(:where(a, button):hover) {
.scale-telekom-nav-item > :where(a, button):hover {
color: var(--telekom-color-text-and-icon-primary-hovered);
}
::slotted(:where(a, button):active) {
.scale-telekom-nav-item > :where(a, button):active {
color: var(--telekom-color-text-and-icon-primary-pressed);
}

/* main */
/* variants: main-nav, functions (bottom bar) */

:host([variant='main']) ::slotted(:where(a, button)) {
.scale-telekom-nav-list[variant='main-nav']
> .scale-telekom-nav-item
> :where(a, button),
.scale-telekom-nav-list[variant='functions']
> .scale-telekom-nav-item
> :where(a, button) {
font-size: 1.125rem; /* 18px, no token 😢 */
line-height: var(--telekom-typography-line-spacing-tight);
font-weight: var(--telekom-typography-font-weight-extra-bold);
padding-left: var(--spacing-x);
padding-right: var(--spacing-x);
padding-bottom: var(--_spacing-b-slotted-main);
padding-bottom: var(--_spacing-bottom-slotted-bottom);
}
:host([variant='main'][active]) ::slotted(:where(a, button)) {

.scale-telekom-nav-list[variant='main-nav']
> .scale-telekom-nav-item[active]
> :where(a, button),
.scale-telekom-nav-list[variant='functions']
> .scale-telekom-nav-item[active]
> :where(a, button) {
color: var(--telekom-color-text-and-icon-primary-standard);
}
:host([variant='main'][active]) ::slotted(:where(a, button)):after {

.scale-telekom-nav-list[variant='main-nav']
> .scale-telekom-nav-item[active]
> :where(a, button):after,
.scale-telekom-nav-list[variant='functions']
> .scale-telekom-nav-item[active]
> :where(a, button):after {
content: '';
width: 100%;
height: var(--telekom-spacing-unit-x1);
Expand All @@ -96,13 +114,34 @@
left: 0;
}

/* meta */
/* variants: meta-nav-external, meta-nav, lang-switcher (top bar) */

:host([variant='meta']) ::slotted(:where(a, button)) {
.scale-telekom-nav-list[variant='meta-nav-external']
> .scale-telekom-nav-item
> :where(a, button),
.scale-telekom-nav-list[variant='meta-nav']
> .scale-telekom-nav-item
> :where(a, button),
.scale-telekom-nav-list[variant='lang-switcher']
> .scale-telekom-nav-item
> :where(a, button) {
font-size: var(--telekom-typography-font-size-small);
line-height: var(--telekom-typography-line-spacing-tight);
font-weight: var(--telekom-typography-font-weight-regular);
padding-left: var(--spacing-x);
padding-right: var(--spacing-x);
padding-top: var(--_spacing-t-slotted-meta);
padding-top: var(--_spacing-top-slotted-top);
}

/* take care of "external link" icon placement */

.scale-telekom-nav-list[variant='meta-nav-external']
> .scale-telekom-nav-item
> :where(a, button) {
display: flex;
align-items: center;
}
.scale-telekom-nav-list[variant='meta-nav-external']
> .scale-telekom-nav-item
> :where(a, button)
> * {
margin-inline-start: 0.5ch;
}
Loading

0 comments on commit 9665120

Please sign in to comment.