From ad7a7ade97e42b4be613907cdc10d51288e1b127 Mon Sep 17 00:00:00 2001
From: druid <druid@druids-MBP-2.lan>
Date: Tue, 2 Mar 2021 16:32:26 +0200
Subject: [PATCH] top bar structure
---
src/components.d.ts | 10 +++
.../menu-language/menu-language.scss | 17 +++++
.../menu-language/menu-language.tsx | 8 ++-
.../navigation/menu-language/readme.md | 1 +
src/components/site-header/readme.md | 2 +
src/components/site-header/site-header.scss | 34 ++++++---
src/components/site-header/site-header.tsx | 71 +++++++++++--------
.../site-header/site-logo/readme.md | 15 ++--
.../site-header/site-logo/site-logo.scss | 36 ++++++++--
.../site-header/site-logo/site-logo.tsx | 8 ++-
.../site-header/site-search/readme.md | 1 +
.../site-header/site-search/site-search.scss | 17 +++++
.../site-header/site-search/site-search.tsx | 6 +-
13 files changed, 168 insertions(+), 58 deletions(-)
diff --git a/src/components.d.ts b/src/components.d.ts
index 058df522..af51b3b7 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -595,6 +595,7 @@ export namespace Components {
}
interface HyMenuLanguage {
dataMenuLanguage: MenuLanguage[] | string;
+ isGroup: boolean;
isMobile: boolean;
labels?: ComponentLabels[] | string;
}
@@ -787,9 +788,12 @@ export namespace Components {
menuLabelClose?: string;
menuLabelOpen?: string;
menuType: MenuType;
+ siteLabel?: string;
+ siteUrl?: string;
}
interface HySiteLogo {
color: ColorVariant;
+ isGroup: boolean;
label?: string;
size: SiteLogoSize;
type: FooterVariant;
@@ -799,6 +803,7 @@ export namespace Components {
color: ColorVariant;
dataSearchSpecialTools: string;
isAlternative: boolean;
+ isGroup: boolean;
labels?: ComponentLabels[] | string;
searchLabels: string;
searchTools: string;
@@ -1969,6 +1974,7 @@ declare namespace LocalJSX {
}
interface HyMenuLanguage {
dataMenuLanguage?: MenuLanguage[] | string;
+ isGroup?: boolean;
isMobile?: boolean;
labels?: ComponentLabels[] | string;
onMenuLanguageToggled?: (event: CustomEvent<any>) => void;
@@ -2166,9 +2172,12 @@ declare namespace LocalJSX {
onHeaderScrollDown?: (event: CustomEvent<any>) => void;
onHeaderScrollUp?: (event: CustomEvent<any>) => void;
onMenuMobileToggled?: (event: CustomEvent<any>) => void;
+ siteLabel?: string;
+ siteUrl?: string;
}
interface HySiteLogo {
color?: ColorVariant;
+ isGroup?: boolean;
label?: string;
size?: SiteLogoSize;
type?: FooterVariant;
@@ -2178,6 +2187,7 @@ declare namespace LocalJSX {
color?: ColorVariant;
dataSearchSpecialTools?: string;
isAlternative?: boolean;
+ isGroup?: boolean;
labels?: ComponentLabels[] | string;
onSearchPanelToggled?: (event: CustomEvent<any>) => void;
searchLabels?: string;
diff --git a/src/components/navigation/menu-language/menu-language.scss b/src/components/navigation/menu-language/menu-language.scss
index 44696d8a..2d5db36d 100644
--- a/src/components/navigation/menu-language/menu-language.scss
+++ b/src/components/navigation/menu-language/menu-language.scss
@@ -76,6 +76,23 @@
}
}
+ &.is-group {
+ background: var(--grayscale-black);
+ border: 0 none;
+ color: var(--grayscale-white);
+
+ &:hover {
+ color: var(--grayscale-medium);
+ cursor: pointer;
+ span {
+ color: var(--grayscale-medium);
+ }
+ svg {
+ fill: var(--grayscale-medium);
+ }
+ }
+ }
+
&.is-open {
.menu--language__toggle__caret {
transform: rotate(180deg);
diff --git a/src/components/navigation/menu-language/menu-language.tsx b/src/components/navigation/menu-language/menu-language.tsx
index 6af56d64..1acc3254 100644
--- a/src/components/navigation/menu-language/menu-language.tsx
+++ b/src/components/navigation/menu-language/menu-language.tsx
@@ -20,6 +20,7 @@ export class MenuLanguage {
@Element() el: HTMLElement;
@Prop() dataMenuLanguage: MenuLanguage[] | string;
@Prop() isMobile: boolean = false;
+ @Prop() isGroup: boolean = false;
@Prop() labels?: ComponentLabels[] | string;
@State() isMenuOpen: boolean = false;
@@ -93,6 +94,8 @@ export class MenuLanguage {
render() {
const black = 'var(--brand-main-nearly-black)';
+ const white = 'var(--grayscale-white)';
+ const svgColor = this.isGroup ? white : black;
return this.isMobile ? (
<Host class={'menu--language'}>
@@ -121,10 +124,11 @@ export class MenuLanguage {
class={{
'menu--language__toggle': true,
'is-open': this.isMenuOpen,
+ 'is-group': this.isGroup,
}}
aria-label={this.isMenuOpen ? this._labels['close'] : this._labels['open']}
>
- <hy-icon class={'menu--language__globe-icon'} icon={'hy-icon-globe'} size={14} fill={black} />
+ <hy-icon class={'menu--language__globe-icon'} icon={'hy-icon-globe'} size={14} fill={svgColor} />
<span>
{this._dataMenuLanguage.map((item) => {
if (item.isActive) {
@@ -132,7 +136,7 @@ export class MenuLanguage {
}
})}
</span>
- <hy-icon class={'menu--language__toggle__caret'} icon={'hy-icon-caret-down'} size={8} fill={black} />
+ <hy-icon class={'menu--language__toggle__caret'} icon={'hy-icon-caret-down'} size={8} fill={svgColor} />
</button>
<div
class={{
diff --git a/src/components/navigation/menu-language/readme.md b/src/components/navigation/menu-language/readme.md
index cd19087f..2d769005 100644
--- a/src/components/navigation/menu-language/readme.md
+++ b/src/components/navigation/menu-language/readme.md
@@ -7,6 +7,7 @@
| Property | Attribute | Description | Type | Default |
| ------------------ | -------------------- | ----------- | ----------------------------- | ----------- |
| `dataMenuLanguage` | `data-menu-language` | | `MenuLanguage[] \| string` | `undefined` |
+| `isGroup` | `is-group` | | `boolean` | `false` |
| `isMobile` | `is-mobile` | | `boolean` | `false` |
| `labels` | `labels` | | `ComponentLabels[] \| string` | `undefined` |
diff --git a/src/components/site-header/readme.md b/src/components/site-header/readme.md
index f22ff03c..e17f9cc8 100644
--- a/src/components/site-header/readme.md
+++ b/src/components/site-header/readme.md
@@ -20,6 +20,8 @@
| `menuLabelClose` | `menu-label-close` | | `string` | `undefined` |
| `menuLabelOpen` | `menu-label-open` | | `string` | `undefined` |
| `menuType` | `menu-type` | | `MenuType.desktop \| MenuType.mobile \| MenuType.sidenav \| MenuType.sidepanel \| MenuType.tablet` | `MenuType.default` |
+| `siteLabel` | `site-label` | | `string` | `undefined` |
+| `siteUrl` | `site-url` | | `string` | `undefined` |
## Events
diff --git a/src/components/site-header/site-header.scss b/src/components/site-header/site-header.scss
index 162b32b0..f2299aac 100644
--- a/src/components/site-header/site-header.scss
+++ b/src/components/site-header/site-header.scss
@@ -57,9 +57,16 @@
@include breakpoint($xlarge) {
height: 112px;
}
+
+ // Group menus on group pages
+ &.group {
+ @include breakpoint($narrow) {
+ justify-content: flex-start;
+ }
+ }
}
-.hy-site-header__content-group {
+.hy-site-header__content-top {
align-items: center;
background-color: var(--grayscale-black);
color: var(--grayscale-white);
@@ -268,8 +275,6 @@
.hy-link__donate {
@include breakpoint($wide) {
- //margin-left: 10px;
- //margin-right: 10px;
padding: 0;
text-decoration: none;
@@ -280,16 +285,9 @@
}
@include breakpoint($extrawide) {
- //margin-left: 8px;
- //margin-right: 32px;
margin-right: 0;
}
- @include breakpoint($xlarge) {
- //margin-left: 10px;
- //margin-right: 32px;
- }
-
&__label {
@include breakpoint($wide) {
@include font-size(14px, 24px);
@@ -311,6 +309,10 @@
@include font-size(14px, 24px);
letter-spacing: -0.5px;
}
+
+ &.group {
+ color: var(--grayscale-white);
+ }
}
svg {
@@ -327,4 +329,16 @@
width: 13.64px;
}
}
+
+ &.group {
+ &:hover {
+ color: var(--grayscale-medium);
+ span {
+ color: var(--grayscale-medium);
+ }
+ svg {
+ fill: var(--grayscale-medium);
+ }
+ }
+ }
}
diff --git a/src/components/site-header/site-header.tsx b/src/components/site-header/site-header.tsx
index 0fc9e7f0..a4c55411 100644
--- a/src/components/site-header/site-header.tsx
+++ b/src/components/site-header/site-header.tsx
@@ -32,6 +32,8 @@ export class SiteHeader {
@Prop() dataSiteSearchLabels: string;
@Prop() logoUrl?: string;
@Prop() logoLabel?: string;
+ @Prop() siteLabel?: string;
+ @Prop() siteUrl?: string;
@Prop() menuLabel: string = 'Menu';
@Prop() menuLabelOpen?: string;
@Prop() menuLabelClose?: string;
@@ -118,6 +120,8 @@ export class SiteHeader {
this.el.children[0].setAttribute('open', this.isMenuOpen.toString());
this.el.children[0].setAttribute('logo-label', this.logoLabel);
this.el.children[0].setAttribute('logo-url', this.logoUrl);
+ this.el.children[0].setAttribute('site-label', this.siteLabel);
+ this.el.children[0].setAttribute('site-url', this.siteUrl);
this.el.children[0].setAttribute('menu-button-submenu-expand', this.menuLabels['expand']);
this.el.children[0].setAttribute('menu-button-breadcrumb-return', this.menuLabels['return']);
this.el.children[0].setAttribute('menu-button-breadcrumb-home', this.menuLabels['home']);
@@ -213,7 +217,9 @@ export class SiteHeader {
render() {
const logoSize = this.isMobile ? SiteLogoSize.small : SiteLogoSize.big;
+ const logoSizeGroup = this.isMobile ? SiteLogoSize.small : SiteLogoSize.small;
const logoColor = ColorVariant.black;
+ const logoColorGroup = ColorVariant.white;
let classAttributes = ['hy-site-header', 'hy-site-header--' + this.menuType];
switch (this.menuType) {
@@ -223,20 +229,23 @@ export class SiteHeader {
<header class={classAttributes.join(' ')}>
<div class={{'hy-backdrop': true, 'is-active': this.isMenuOpen}} />
{this.isGroup && (
- <div class="hy-site-header__content-group">
+ <div class="hy-site-header__content-top">
<div class={'hy-site-header__logo-container group '}>
- <hy-site-logo size={logoSize} color={logoColor} url={this.logoUrl} label={this.logoLabel} />
+ <hy-site-logo
+ is-group={true}
+ size={logoSizeGroup}
+ color={logoColorGroup}
+ url={this.siteUrl}
+ label={this.siteLabel}
+ />
</div>
- <hy-menu-main-group
- //className={'menu--secondary__item is-first'}
- is-mobile={false}
- data-main-menu={this.dataMainMenuLinks}
- />
+ <hy-menu-main-group is-mobile={false} data-main-menu={this.dataMainMenuLinks} />
<div class={'menu--secondary menu--secondary--group'}>
<hy-menu-language
class={'menu--secondary__item is-first group'}
+ is-group={true}
is-mobile={false}
data-menu-language={this.dataMenuLanguage}
labels={this.languageLabels}
@@ -244,7 +253,8 @@ export class SiteHeader {
<hy-site-search
class={'menu--secondary__item group'}
size={14}
- color={ColorVariant.black}
+ color={logoColorGroup}
+ is-group={true}
show-label={true}
labels={this.searchLabels}
search-labels={this.dataSiteSearchLabels}
@@ -253,7 +263,7 @@ export class SiteHeader {
{this.donateLink.map((i) => {
return (
<a class={'menu--secondary__item hy-link__donate group'} href={i.url}>
- <hy-icon icon={'hy-icon-heart-support'} size={14} fill={ColorVariant.black} />
+ <hy-icon icon={'hy-icon-heart-support'} size={14} fill={logoColorGroup} />
<span class={'hy-link__donate__label group'}>{i.label}</span>
</a>
);
@@ -261,10 +271,12 @@ export class SiteHeader {
</div>
</div>
)}
- <div class="hy-site-header__content">
+ <div class={{'hy-site-header__content': true, group: this.isGroup}}>
<div class={'hy-site-header__logo-container'}>
{this.isGroup ? (
- <div class={'group'}>{this.logoLabel}</div>
+ <a class={'group'} href={this.logoUrl}>
+ {this.logoLabel}
+ </a>
) : (
<hy-site-logo size={logoSize} color={logoColor} url={this.logoUrl} label={this.logoLabel} />
)}
@@ -308,20 +320,17 @@ export class SiteHeader {
<header class={classAttributes.join(' ')}>
<div class={{'hy-backdrop': true, 'is-active': this.isMenuOpen}} />
{this.isGroup && (
- <div class="hy-site-header__content-group">
+ <div class="hy-site-header__content-top">
<div class={'hy-site-header__logo-container group '}>
- <hy-site-logo size={logoSize} color={logoColor} url={this.logoUrl} label={this.logoLabel} />
+ <hy-site-logo size={logoSizeGroup} color={logoColorGroup} url={this.siteUrl} label={this.siteLabel} />
</div>
- <hy-menu-main-group
- //className={'menu--secondary__item is-first'}
- is-mobile={false}
- data-main-menu={this.dataMainMenuLinks}
- />
+ <hy-menu-main-group is-mobile={false} data-main-menu={this.dataMainMenuLinks} />
<div class={'menu--secondary menu--secondary--group'}>
<hy-menu-language
class={'menu--secondary__item is-first group'}
+ is-group={true}
is-mobile={false}
data-menu-language={this.dataMenuLanguage}
labels={this.languageLabels}
@@ -329,8 +338,9 @@ export class SiteHeader {
<hy-site-search
class={'menu--secondary__item group'}
size={14}
- color={ColorVariant.black}
+ color={logoColorGroup}
show-label={true}
+ is-group={true}
labels={this.searchLabels}
search-labels={this.dataSiteSearchLabels}
search-tools={this.dataSearchTools}
@@ -338,7 +348,7 @@ export class SiteHeader {
{this.donateLink.map((i) => {
return (
<a class={'menu--secondary__item hy-link__donate group'} href={i.url}>
- <hy-icon icon={'hy-icon-heart-support'} size={14} fill={ColorVariant.black} />
+ <hy-icon icon={'hy-icon-heart-support'} size={14} fill={logoColorGroup} />
<span class={'hy-link__donate__label group'}>{i.label}</span>
</a>
);
@@ -349,7 +359,9 @@ export class SiteHeader {
<div class="hy-site-header__content">
<div class={'hy-site-header__logo-container'}>
{this.isGroup ? (
- <div class={'group'}>{this.logoLabel}</div>
+ <a class={'group'} href={this.logoUrl}>
+ {this.logoLabel}
+ </a>
) : (
<hy-site-logo size={logoSize} color={logoColor} url={this.logoUrl} label={this.logoLabel} />
)}
@@ -428,22 +440,19 @@ export class SiteHeader {
<header class={classAttributes.join(' ')}>
<div class={{'hy-backdrop': true, 'is-active': this.isMenuOpen}} />
{this.isGroup && (
- <div class="hy-site-header__content-group">
+ <div class="hy-site-header__content-top">
<div class={'hy-site-header__logo-container group '}>
- <hy-site-logo size={logoSize} color={logoColor} url={this.logoUrl} label={this.logoLabel} />
+ <hy-site-logo size={logoSizeGroup} color={logoColorGroup} url={this.siteUrl} label={this.siteLabel} />
</div>
- <hy-menu-main-group
- //className={'menu--secondary__item is-first'}
- is-mobile={true}
- data-main-menu={this.dataMainMenuLinks}
- />
+ <hy-menu-main-group is-mobile={true} data-main-menu={this.dataMainMenuLinks} />
<div class={'menu--secondary menu--secondary--group'}>
<hy-site-search
class={'menu--secondary__item group'}
size={14}
- color={ColorVariant.black}
+ color={logoColorGroup}
+ is-group={true}
show-label={true}
labels={this.searchLabels}
search-labels={this.dataSiteSearchLabels}
@@ -455,7 +464,9 @@ export class SiteHeader {
<div class="hy-site-header__content">
<div class={'hy-site-header__logo-container'}>
{this.isGroup ? (
- <div class={'group'}>{this.logoLabel}</div>
+ <a class={'group'} href={this.logoUrl}>
+ {this.logoLabel}
+ </a>
) : (
<hy-site-logo size={logoSize} color={logoColor} url={this.logoUrl} label={this.logoLabel} />
)}
diff --git a/src/components/site-header/site-logo/readme.md b/src/components/site-header/site-logo/readme.md
index cdb7cfb5..359a14c0 100644
--- a/src/components/site-header/site-logo/readme.md
+++ b/src/components/site-header/site-logo/readme.md
@@ -4,13 +4,14 @@
## Properties
-| Property | Attribute | Description | Type | Default |
-| -------- | --------- | ----------- | -------------------------------------------------------------- | ---------------------- |
-| `color` | `color` | | `ColorVariant.black \| ColorVariant.white` | `ColorVariant.black` |
-| `label` | `label` | | `string` | `undefined` |
-| `size` | `size` | | `SiteLogoSize.big \| SiteLogoSize.large \| SiteLogoSize.small` | `SiteLogoSize.big` |
-| `type` | `type` | | `FooterVariant.footer \| FooterVariant.header` | `FooterVariant.header` |
-| `url` | `url` | | `string` | `undefined` |
+| Property | Attribute | Description | Type | Default |
+| --------- | ---------- | ----------- | -------------------------------------------------------------- | ---------------------- |
+| `color` | `color` | | `ColorVariant.black \| ColorVariant.white` | `ColorVariant.black` |
+| `isGroup` | `is-group` | | `boolean` | `false` |
+| `label` | `label` | | `string` | `undefined` |
+| `size` | `size` | | `SiteLogoSize.big \| SiteLogoSize.large \| SiteLogoSize.small` | `SiteLogoSize.big` |
+| `type` | `type` | | `FooterVariant.footer \| FooterVariant.header` | `FooterVariant.header` |
+| `url` | `url` | | `string` | `undefined` |
## Dependencies
diff --git a/src/components/site-header/site-logo/site-logo.scss b/src/components/site-header/site-logo/site-logo.scss
index 3bd9dc7d..71393b7e 100644
--- a/src/components/site-header/site-logo/site-logo.scss
+++ b/src/components/site-header/site-logo/site-logo.scss
@@ -70,17 +70,39 @@
}
&__header {
- &:hover {
- color: var(--brand-main);
- a,
- span {
- color: var(--brand-main) !important;
+ //&:hover {
+ &__page {
+ &:hover {
+ color: var(--brand-main);
+
+ a,
+ span {
+ color: var(--brand-main) !important;
+ }
+
+ svg {
+ fill: var(--brand-main);
+ }
}
- svg {
- fill: var(--brand-main);
+ }
+ &__group {
+ &:hover {
+ color: var(--grayscale-medium);
+
+ a,
+ span {
+ color: var(--grayscale-medium) !important;
+ }
+
+ svg {
+ fill: var(--grayscale-medium);
+ }
}
}
+
+ //}
}
+
&__footer {
&:hover {
span {
diff --git a/src/components/site-header/site-logo/site-logo.tsx b/src/components/site-header/site-logo/site-logo.tsx
index 723cb51a..6153aadd 100644
--- a/src/components/site-header/site-logo/site-logo.tsx
+++ b/src/components/site-header/site-logo/site-logo.tsx
@@ -9,12 +9,18 @@ import {ColorVariant, FooterVariant, SiteLogoSize} from '../../../utils/utils';
export class SiteLogo {
@Prop() type: FooterVariant = FooterVariant.header;
@Prop() color: ColorVariant = ColorVariant.black;
+ @Prop() isGroup: boolean = false;
@Prop() label?: string;
@Prop() size: SiteLogoSize = SiteLogoSize.big;
@Prop() url?: string;
render() {
- const classAttributes = ['hy-site-logo', `hy-site-logo__${this.type}`].join(' ');
+ const isGroupClass = this.isGroup ? 'group' : 'page';
+ const classAttributes = [
+ 'hy-site-logo',
+ `hy-site-logo__${this.type}__${isGroupClass}`,
+ `hy-site-logo__${this.type}`,
+ ].join(' ');
return this.url ? (
<Host class={classAttributes}>
<a href={this.url}>
diff --git a/src/components/site-header/site-search/readme.md b/src/components/site-header/site-search/readme.md
index bf84fb50..332551f9 100644
--- a/src/components/site-header/site-search/readme.md
+++ b/src/components/site-header/site-search/readme.md
@@ -9,6 +9,7 @@
| `color` | `color` | | `ColorVariant.black \| ColorVariant.white` | `ColorVariant.black` |
| `dataSearchSpecialTools` | `data-search-special-tools` | | `string` | `undefined` |
| `isAlternative` | `is-alternative` | | `boolean` | `false` |
+| `isGroup` | `is-group` | | `boolean` | `false` |
| `labels` | `labels` | | `ComponentLabels[] \| string` | `undefined` |
| `searchLabels` | `search-labels` | | `string` | `undefined` |
| `searchTools` | `search-tools` | | `string` | `undefined` |
diff --git a/src/components/site-header/site-search/site-search.scss b/src/components/site-header/site-search/site-search.scss
index bfe7698c..84879201 100644
--- a/src/components/site-header/site-search/site-search.scss
+++ b/src/components/site-header/site-search/site-search.scss
@@ -62,6 +62,10 @@
@include font-size(14px, 24px);
letter-spacing: -0.5px;
}
+
+ &__group {
+ color: var(--grayscale-white);
+ }
}
svg {
@@ -93,6 +97,19 @@
fill: var(--brand-main);
}
}
+ &--group {
+ &:hover {
+ color: var(--grayscale-medium);
+
+ span {
+ color: var(--grayscale-medium);
+ }
+
+ svg {
+ fill: var(--grayscale-medium);
+ }
+ }
+ }
}
.site-search {
diff --git a/src/components/site-header/site-search/site-search.tsx b/src/components/site-header/site-search/site-search.tsx
index 0d3589d6..a4df3022 100644
--- a/src/components/site-header/site-search/site-search.tsx
+++ b/src/components/site-header/site-search/site-search.tsx
@@ -30,6 +30,7 @@ export class SiteSearch {
@Prop() color: ColorVariant = ColorVariant.black;
@Prop() isAlternative: boolean = false;
+ @Prop() isGroup: boolean = false;
@Prop() labels?: ComponentLabels[] | string;
@Prop() searchLabels: string;
@Prop() searchTools: string;
@@ -172,6 +173,8 @@ export class SiteSearch {
}
render() {
+ const isGroupClass = this.isGroup ? 'group' : 'page';
+ const buttonSearchLabelClass = ['button--search__label', `button--search__label__${isGroupClass}`].join(' ');
return (
<Host
class={{
@@ -184,12 +187,13 @@ export class SiteSearch {
aria-expanded={`${this.isSearchPanelOpen}`}
class={{
'button--search': true,
+ 'button--search--group': this.isGroup,
'is-open--menu': this.isAlternative,
'is-open': this.isSearchPanelOpen,
}}
onClick={(e) => this.handleSearchPanelToggle(e)}
>
- {this.showLabel ? <span class={'button--search__label'}>{this._labels['label']}</span> : ''}
+ {this.showLabel ? <span class={buttonSearchLabelClass}>{this._labels['label']}</span> : ''}
<hy-icon icon={'hy-icon-search'} size={this.size} fill={this.color} />
</button>
<div
--
GitLab