diff --git a/src/components.d.ts b/src/components.d.ts
index 41ef26cacb6d8dac7f25de89c32520b025811784..348faa9a18b058f0c8871ba488f7f86771264e24 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -43,6 +43,7 @@ import {IDropdownItem} from './components/hy-dropdown/hy-dropdown';
import {IFilterGroupFilter} from './components/hy-filter-group/hy-filter-group';
import {FooterBaseLinks, FooterBaseSome} from './components/footer/hy-footer-base/hy-footer-base';
import {FooterInfoLinks} from './components/footer/hy-footer-info/hy-footer-info';
+import {ListItemValue} from './components/hy-general-list/hy-general-list';
import {KeyFigureValue} from './components/hy-key-figure-group/hy-key-figure-group';
import {KeyHighlightValue} from './components/hy-key-highlight-group/hy-key-highlight-group';
import {ProcessFlowValue} from './components/hy-large-process-flow/hy-large-process-flow';
@@ -391,6 +392,18 @@ export namespace Components {
url: string;
variant: FooterLinkVariants;
}
+ interface HyGeneralList {
+ dataItems: ListItemValue[] | string;
+ }
+ interface HyGeneralListItem {
+ description?: string;
+ imageAlt: string;
+ imageUrl: string;
+ itemTitle?: string;
+ label?: string;
+ type?: string;
+ url?: string;
+ }
interface HyGridContainer {}
interface HyGridItem {
columns: GridColumns;
@@ -550,6 +563,7 @@ export namespace Components {
isHeading: boolean;
isParent: boolean;
label: string;
+ menuButtonBreadcrumbMain?: string;
menuButtonSubmenuExpand?: string;
menuItemAlternative: boolean;
menuLinkId: string;
@@ -1029,6 +1043,16 @@ declare global {
prototype: HTMLHyFooterLinkItemElement;
new (): HTMLHyFooterLinkItemElement;
};
+ interface HTMLHyGeneralListElement extends Components.HyGeneralList, HTMLStencilElement {}
+ var HTMLHyGeneralListElement: {
+ prototype: HTMLHyGeneralListElement;
+ new (): HTMLHyGeneralListElement;
+ };
+ interface HTMLHyGeneralListItemElement extends Components.HyGeneralListItem, HTMLStencilElement {}
+ var HTMLHyGeneralListItemElement: {
+ prototype: HTMLHyGeneralListItemElement;
+ new (): HTMLHyGeneralListItemElement;
+ };
interface HTMLHyGridContainerElement extends Components.HyGridContainer, HTMLStencilElement {}
var HTMLHyGridContainerElement: {
prototype: HTMLHyGridContainerElement;
@@ -1327,6 +1351,8 @@ declare global {
'hy-footer-base': HTMLHyFooterBaseElement;
'hy-footer-info': HTMLHyFooterInfoElement;
'hy-footer-link-item': HTMLHyFooterLinkItemElement;
+ 'hy-general-list': HTMLHyGeneralListElement;
+ 'hy-general-list-item': HTMLHyGeneralListItemElement;
'hy-grid-container': HTMLHyGridContainerElement;
'hy-grid-item': HTMLHyGridItemElement;
'hy-grid-row': HTMLHyGridRowElement;
@@ -1719,6 +1745,18 @@ declare namespace LocalJSX {
url?: string;
variant?: FooterLinkVariants;
}
+ interface HyGeneralList {
+ dataItems?: ListItemValue[] | string;
+ }
+ interface HyGeneralListItem {
+ description?: string;
+ imageAlt?: string;
+ imageUrl?: string;
+ itemTitle?: string;
+ label?: string;
+ type?: string;
+ url?: string;
+ }
interface HyGridContainer {}
interface HyGridItem {
columns?: GridColumns;
@@ -1879,6 +1917,7 @@ declare namespace LocalJSX {
isHeading?: boolean;
isParent?: boolean;
label?: string;
+ menuButtonBreadcrumbMain?: string;
menuButtonSubmenuExpand?: string;
menuItemAlternative?: boolean;
menuLinkId?: string;
@@ -2241,6 +2280,8 @@ declare namespace LocalJSX {
'hy-footer-base': HyFooterBase;
'hy-footer-info': HyFooterInfo;
'hy-footer-link-item': HyFooterLinkItem;
+ 'hy-general-list': HyGeneralList;
+ 'hy-general-list-item': HyGeneralListItem;
'hy-grid-container': HyGridContainer;
'hy-grid-item': HyGridItem;
'hy-grid-row': HyGridRow;
@@ -2335,6 +2376,8 @@ declare module '@stencil/core' {
'hy-footer-base': LocalJSX.HyFooterBase & JSXBase.HTMLAttributes<HTMLHyFooterBaseElement>;
'hy-footer-info': LocalJSX.HyFooterInfo & JSXBase.HTMLAttributes<HTMLHyFooterInfoElement>;
'hy-footer-link-item': LocalJSX.HyFooterLinkItem & JSXBase.HTMLAttributes<HTMLHyFooterLinkItemElement>;
+ 'hy-general-list': LocalJSX.HyGeneralList & JSXBase.HTMLAttributes<HTMLHyGeneralListElement>;
+ 'hy-general-list-item': LocalJSX.HyGeneralListItem & JSXBase.HTMLAttributes<HTMLHyGeneralListItemElement>;
'hy-grid-container': LocalJSX.HyGridContainer & JSXBase.HTMLAttributes<HTMLHyGridContainerElement>;
'hy-grid-item': LocalJSX.HyGridItem & JSXBase.HTMLAttributes<HTMLHyGridItemElement>;
'hy-grid-row': LocalJSX.HyGridRow & JSXBase.HTMLAttributes<HTMLHyGridRowElement>;
diff --git a/src/components/hy-general-list-item/hy-general-list-item.scss b/src/components/hy-general-list-item/hy-general-list-item.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e4a5525dcd72c5e5d2c30f3c45b978485e13c89e
--- /dev/null
+++ b/src/components/hy-general-list-item/hy-general-list-item.scss
@@ -0,0 +1,147 @@
+:host {
+ display: block;
+}
+
+.hy-general-list-item {
+ font-family: var(--main-font-family);
+ margin-bottom: 1rem;
+}
+
+.hy-general-list-item__link {
+ display: flex;
+ flex-direction: column;
+ position: relative;
+ text-decoration: none;
+
+ @include breakpoint($narrow) {
+ flex-direction: row;
+ }
+
+ &:hover {
+ cursor: pointer;
+ }
+
+ &:hover,
+ &:focus {
+ .hy-general-list-item__type span {
+ background-color: var(--brand-main);
+ }
+
+ .hy-general-list-item__title {
+ color: var(--brand-main);
+ text-decoration: underline;
+ }
+ }
+}
+
+.hy-general-list-item__image-container {
+ display: flex;
+ justify-content: stretch;
+ margin: 0;
+ position: relative;
+ width: 100%;
+
+ @include breakpoint(max-width 479px) {
+ display: none;
+ }
+
+ @include breakpoint($narrow) {
+ max-width: 35.7%;
+ }
+
+ @include breakpoint($wide) {
+ max-width: 23.13%;
+ }
+
+ @include breakpoint($extrawide) {
+ max-width: 23.03%;
+ }
+
+ img {
+ height: 100%;
+ object-fit: cover;
+ width: 100%;
+ }
+}
+
+.hy-general-list-item__image {
+ background-color: #ececec;
+ width: 100%;
+ height: 100%;
+}
+
+.hy-general-list-item__type {
+ background-color: var(--grayscale-background-box);
+ padding-top: 16px;
+ z-index: 10;
+
+ @include breakpoint($narrow) {
+ background-color: transparent;
+ left: -8px;
+ padding-top: 0;
+ position: absolute;
+ top: 16px;
+ }
+
+ span {
+ @include font-size(12px, 14px);
+ @include font-weight($bold);
+ background-color: var(--grayscale-black);
+ color: #ffffff;
+ letter-spacing: -0.1px;
+ padding: 5px 8px;
+ text-transform: uppercase;
+ align-self: baseline;
+ margin-left: -8px;
+
+ @include breakpoint($narrow) {
+ margin-left: 0;
+ }
+ }
+}
+
+.hy-general-list-item__text-container {
+ background-color: var(--grayscale-background-box);
+ display: flex;
+ flex-direction: column;
+ flex-grow: 1;
+ padding: 16px 12px;
+
+ @include breakpoint($wide) {
+ padding: 14px 32px 24px 24px;
+ }
+
+ @include breakpoint($extrawide) {
+ padding: 20px 104px 32px 32px;
+ }
+}
+
+.hy-general-list-item__title {
+ @include font-size(18px, 22px);
+ @include font-weight($bold);
+ color: var(--brand-main-nearly-black);
+ letter-spacing: -0.45px;
+ margin-bottom: 8px;
+ margin-top: 0;
+
+ @include breakpoint($extrawide) {
+ @include font-size(20px, 24px);
+ letter-spacing: -0.5px;
+ }
+}
+
+.hy-general-list-item__description {
+ @include font-size(15px, 20px);
+ color: var(--grayscale-dark);
+ letter-spacing: -0.09px;
+ margin: 0;
+
+ @include breakpoint($narrow) {
+ @include font-size(14px, 18px);
+ letter-spacing: -0.08px;
+ }
+
+ @include breakpoint($extrawide) {
+ @include font-size(14px, 20px);
+ }
+}
diff --git a/src/components/hy-general-list-item/hy-general-list-item.tsx b/src/components/hy-general-list-item/hy-general-list-item.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..9b99f9e9ca2d649bbf59fc19a108c193d8f26770
--- /dev/null
+++ b/src/components/hy-general-list-item/hy-general-list-item.tsx
@@ -0,0 +1,48 @@
+import {Component, Element, h, Prop} from '@stencil/core';
+
+@Component({
+ tag: 'hy-general-list-item',
+ styleUrl: 'hy-general-list-item.scss',
+ shadow: true,
+})
+export class HyGeneralListItem {
+ @Prop() description?: string;
+ @Prop() imageAlt: string = '';
+ @Prop() imageUrl: string = null;
+ @Prop() itemTitle?: string;
+ @Prop() label?: string;
+ @Prop() type?: string;
+ @Prop() url?: string;
+
+ @Element() el: HTMLElement;
+
+ render() {
+ const classAttributes = ['hy-general-list-item'].join(' ');
+ const contentClassAttributes = ['hy-general-list-item__text-container'].join(' ');
+ const imageClassAttributes = ['hy-general-list-item__image-container'].join(' ');
+
+ const aspectRatioWidth = 16;
+ const aspectRatioHeight = 10;
+ const aspect = (aspectRatioHeight / aspectRatioWidth) * 100;
+ const aspectRatio = {
+ '--aspectRatio': `${aspect}%` as 'aspectRatio',
+ };
+
+ return (
+ <article class={classAttributes}>
+ <a class="hy-general-list-item__link" href={this.url} target="_blank">
+ <div class="hy-general-list-item__type">
+ <span>{this.label}</span>
+ </div>
+ <figure class={imageClassAttributes} style={aspectRatio}>
+ <img alt={this.imageAlt} class="hy-general-list-item__image" src={this.imageUrl} />
+ </figure>
+ <div class={contentClassAttributes}>
+ <h3 class="hy-general-list-item__title">{this.itemTitle}</h3>
+ <p class="hy-general-list-item__description">{this.description}</p>
+ </div>
+ </a>
+ </article>
+ );
+ }
+}
diff --git a/src/components/hy-general-list-item/readme.md b/src/components/hy-general-list-item/readme.md
new file mode 100644
index 0000000000000000000000000000000000000000..1727f9869c4280d2ff6bc2997060d06fe621cae7
--- /dev/null
+++ b/src/components/hy-general-list-item/readme.md
@@ -0,0 +1,33 @@
+# hy-general-list-item
+
+<!-- Auto Generated Below -->
+
+## Properties
+
+| Property | Attribute | Description | Type | Default |
+| ------------- | ------------- | ----------- | -------- | ----------- |
+| `description` | `description` | | `string` | `undefined` |
+| `imageAlt` | `image-alt` | | `string` | `''` |
+| `imageUrl` | `image-url` | | `string` | `null` |
+| `itemTitle` | `item-title` | | `string` | `undefined` |
+| `label` | `label` | | `string` | `undefined` |
+| `type` | `type` | | `string` | `undefined` |
+| `url` | `url` | | `string` | `undefined` |
+
+## Dependencies
+
+### Used by
+
+- [hy-general-list](../hy-general-list)
+
+### Graph
+
+```mermaid
+graph TD;
+ hy-general-list --> hy-general-list-item
+ style hy-general-list-item fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+---
+
+Helsinki University Design System
diff --git a/src/components/hy-general-list/hy-general-list.scss b/src/components/hy-general-list/hy-general-list.scss
new file mode 100644
index 0000000000000000000000000000000000000000..cd22a3a3e08ad8b986aeac89b2fb62c8d1fa456e
--- /dev/null
+++ b/src/components/hy-general-list/hy-general-list.scss
@@ -0,0 +1,9 @@
+:host {
+ display: block;
+}
+
+.hy-general-list {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+}
diff --git a/src/components/hy-general-list/hy-general-list.tsx b/src/components/hy-general-list/hy-general-list.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..037bf9b5af9f798715f17b45d17fb12da9f11885
--- /dev/null
+++ b/src/components/hy-general-list/hy-general-list.tsx
@@ -0,0 +1,60 @@
+export interface ListItemValue {
+ description: string;
+ id: string;
+ imageAlt: string;
+ imageUrl: string;
+ label: string;
+ title: string;
+ type: string;
+ url: string;
+}
+
+import {Component, Element, h, Prop, Watch} from '@stencil/core';
+
+@Component({
+ tag: 'hy-general-list',
+ styleUrl: 'hy-general-list.scss',
+ shadow: true,
+})
+export class HyGeneralList {
+ @Prop() dataItems: ListItemValue[] | string;
+ private _dataItems: ListItemValue[];
+ @Element() el: HTMLElement;
+
+ @Watch('dataItems')
+ arrayDataWatcher(newValue: ListItemValue[] | string) {
+ if (typeof newValue === 'string') {
+ this._dataItems = JSON.parse(newValue);
+ } else {
+ this._dataItems = newValue;
+ }
+ }
+
+ componentWillLoad() {
+ this.arrayDataWatcher(this.dataItems);
+ }
+
+ render() {
+ const classAttributes = ['hy-general-list'].join(' ');
+
+ return (
+ <ul class={classAttributes}>
+ {this._dataItems.map((item) => (
+ <li>
+ <hy-general-list-item
+ data-location={item.url}
+ description={item.description}
+ id={item.id}
+ imageAlt={item.imageAlt}
+ imageUrl={item.imageUrl}
+ item-title={item.title}
+ label={item.label}
+ type={item.type}
+ url={item.url}
+ ></hy-general-list-item>
+ </li>
+ ))}
+ </ul>
+ );
+ }
+}
diff --git a/src/components/hy-general-list/readme.md b/src/components/hy-general-list/readme.md
new file mode 100644
index 0000000000000000000000000000000000000000..c36a4fa0f295562a8858aa977e25d0c2102038c1
--- /dev/null
+++ b/src/components/hy-general-list/readme.md
@@ -0,0 +1,27 @@
+# hy-general-list
+
+<!-- Auto Generated Below -->
+
+## Properties
+
+| Property | Attribute | Description | Type | Default |
+| ----------- | ------------ | ----------- | --------------------------- | ----------- |
+| `dataItems` | `data-items` | | `ListItemValue[] \| string` | `undefined` |
+
+## Dependencies
+
+### Depends on
+
+- [hy-general-list-item](../hy-general-list-item)
+
+### Graph
+
+```mermaid
+graph TD;
+ hy-general-list --> hy-general-list-item
+ style hy-general-list fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+---
+
+Helsinki University Design System
diff --git a/src/components/hy-hero/hy-hero.scss b/src/components/hy-hero/hy-hero.scss
index 133841a5143fa3de759347bfed68ee5999ef2474..1841ea59a475f6aa3a9dbe45e27644a7355e3b78 100644
--- a/src/components/hy-hero/hy-hero.scss
+++ b/src/components/hy-hero/hy-hero.scss
@@ -270,16 +270,25 @@
}
@include breakpoint($wide) {
+ min-height: 338px;
padding: 52px 2rem;
}
+ @include breakpoint(1060px) {
+ min-height: 373px;
+ }
+
+ @include breakpoint(1160px) {
+ min-height: 480px;
+ }
+
@include breakpoint($extrawide) {
padding-left: 32px; // Original 24px + 8px
padding-right: 8px;
}
- @include breakpoint($xlarge) {
- padding-left: 0;
+ @include breakpoint(1260px) {
+ min-height: 443px;
}
@include breakpoint(1280px) {
@@ -287,12 +296,36 @@
padding-left: 0;
}
- @include breakpoint(1440px) {
- min-height: 540px;
+ @include breakpoint(1360px) {
+ min-height: 478px;
+ }
+
+ @include breakpoint(1460px) {
+ min-height: 513px;
+ }
+
+ @include breakpoint(1560px) {
+ min-height: 548px;
+ }
+
+ @include breakpoint($xlarge) {
+ padding-left: 0;
+ }
+
+ @include breakpoint(1660px) {
+ min-height: 583px;
+ }
+
+ @include breakpoint(1760px) {
+ min-height: 619px;
+ }
+
+ @include breakpoint(1860px) {
+ min-height: 654px;
}
@include breakpoint(1920px) {
- min-height: 720px;
+ min-height: 675px;
}
}
@@ -386,7 +419,7 @@
position: absolute;
right: 0;
top: 0;
- width: 60%;
+ width: 56.25%;
}
}
@@ -411,29 +444,59 @@
flex-direction: column;
justify-content: center;
margin: 0 auto;
- min-height: 360px;
+ min-height: 329px;
padding: 52px 2rem 52px calc(2rem - 8px);
position: relative;
width: 100%;
}
+ @include breakpoint(1060px) {
+ min-height: 364px;
+ }
+
+ @include breakpoint(1160px) {
+ min-height: 399px;
+ }
+
@include breakpoint($extrawide) {
- min-height: 400px;
padding: 80px 24px;
}
- @include breakpoint($overwide) {
- min-height: 450px;
+ @include breakpoint(1260px) {
+ min-height: 346px;
+ }
+
+ @include breakpoint(1360px) {
+ min-height: 374px;
+ }
+
+ @include breakpoint(1460px) {
+ min-height: 402px;
+ }
+
+ @include breakpoint(1560px) {
+ min-height: 430px;
}
@include breakpoint($xlarge) {
max-width: 1216px;
- min-height: 500px;
padding: 80px 0;
}
+ @include breakpoint(1660px) {
+ min-height: 448px;
+ }
+
+ @include breakpoint(1760px) {
+ min-height: 484px;
+ }
+
+ @include breakpoint(1860px) {
+ min-height: 519px;
+ }
+
@include breakpoint(1920px) {
- min-height: 600px;
+ min-height: 540px;
}
}
@@ -457,7 +520,7 @@
order: 1;
position: absolute;
top: 0;
- width: 40%;
+ width: 43.75%;
}
}
diff --git a/src/components/navigation/menu-item/menu-item.tsx b/src/components/navigation/menu-item/menu-item.tsx
index 016fcb8b8c91b97eac263a5ff31ad0cbbebb00d0..dc1b8934782622cfc489cd4e9088d5f2e5a5552a 100644
--- a/src/components/navigation/menu-item/menu-item.tsx
+++ b/src/components/navigation/menu-item/menu-item.tsx
@@ -22,6 +22,7 @@ export class MenuItem {
@Prop() menuLinkId: string = '';
@Prop() menuType: MenuType = MenuType.desktop;
@Prop() menuButtonSubmenuExpand?: string = '';
+ @Prop() menuButtonBreadcrumbMain?: string;
@Prop({mutable: true}) ariaExpanded: boolean = false;
@Prop({mutable: true, reflect: true}) depth: number = 0;
@Prop({mutable: true}) hasChildren: boolean = null;
@@ -38,10 +39,18 @@ export class MenuItem {
triggerType: 'add',
});
const currentParent = this.el.parentNode;
+
+ let parentLabel = currentParent.parentElement.getAttribute('label')
+ ? currentParent.parentElement.getAttribute('label')
+ : this.menuButtonBreadcrumbMain;
+
+ let isMainMenu = parentLabel == this.menuButtonBreadcrumbMain;
+
this.addBreadcrumb.emit({
url: this.url,
- label: currentParent.parentElement.getAttribute('label'),
+ label: parentLabel,
bid: this.menuLinkId,
+ isMainMenu: isMainMenu,
});
}
@@ -54,9 +63,13 @@ export class MenuItem {
// Notify breadcrumbs if item is in active trail.
if (this.inActiveTrail && !this.isActive) {
const currentParent = this.el.parentNode;
+
+ let parentLabel = currentParent.parentElement.getAttribute('label')
+ ? currentParent.parentElement.getAttribute('label')
+ : this.menuButtonBreadcrumbMain;
this.addBreadcrumb.emit({
url: this.url,
- label: currentParent.parentElement.getAttribute('label'),
+ label: parentLabel,
bid: this.menuLinkId,
});
}
diff --git a/src/components/navigation/menu-item/readme.md b/src/components/navigation/menu-item/readme.md
index aa75cc3843d0a5d4e47da4163a1e81fbb1b71aa0..415507a230276f4f23acf084ea2279959206df28 100644
--- a/src/components/navigation/menu-item/readme.md
+++ b/src/components/navigation/menu-item/readme.md
@@ -4,25 +4,26 @@
## Properties
-| Property | Attribute | Description | Type | Default |
-| ------------------------- | ---------------------------- | ----------- | -------------------------------------------------------------------------------------------------- | ------------------ |
-| `ariaExpanded` | `aria-expanded` | | `boolean` | `false` |
-| `depth` | `depth` | | `number` | `0` |
-| `hasChildren` | `has-children` | | `boolean` | `null` |
-| `inActiveTrail` | `in-active-trail` | | `boolean` | `false` |
-| `isActive` | `is-active` | | `boolean` | `false` |
-| `isActiveChild` | `is-active-child` | | `boolean` | `false` |
-| `isDemo` | `is-demo` | | `boolean` | `false` |
-| `isHeading` | `is-heading` | | `boolean` | `false` |
-| `isParent` | `is-parent` | | `boolean` | `false` |
-| `label` | `label` | | `string` | `''` |
-| `menuButtonSubmenuExpand` | `menu-button-submenu-expand` | | `string` | `''` |
-| `menuItemAlternative` | `menu-item-alternative` | | `boolean` | `false` |
-| `menuLinkId` | `menu-link-id` | | `string` | `''` |
-| `menuType` | `menu-type` | | `MenuType.desktop \| MenuType.mobile \| MenuType.sidenav \| MenuType.sidepanel \| MenuType.tablet` | `MenuType.desktop` |
-| `parentAsHeading` | `parent-as-heading` | | `string` | `''` |
-| `parentExpanded` | `parent-expanded` | | `boolean` | `false` |
-| `url` | `url` | | `string` | `''` |
+| Property | Attribute | Description | Type | Default |
+| -------------------------- | ----------------------------- | ----------- | -------------------------------------------------------------------------------------------------- | ------------------ |
+| `ariaExpanded` | `aria-expanded` | | `boolean` | `false` |
+| `depth` | `depth` | | `number` | `0` |
+| `hasChildren` | `has-children` | | `boolean` | `null` |
+| `inActiveTrail` | `in-active-trail` | | `boolean` | `false` |
+| `isActive` | `is-active` | | `boolean` | `false` |
+| `isActiveChild` | `is-active-child` | | `boolean` | `false` |
+| `isDemo` | `is-demo` | | `boolean` | `false` |
+| `isHeading` | `is-heading` | | `boolean` | `false` |
+| `isParent` | `is-parent` | | `boolean` | `false` |
+| `label` | `label` | | `string` | `''` |
+| `menuButtonBreadcrumbMain` | `menu-button-breadcrumb-main` | | `string` | `undefined` |
+| `menuButtonSubmenuExpand` | `menu-button-submenu-expand` | | `string` | `''` |
+| `menuItemAlternative` | `menu-item-alternative` | | `boolean` | `false` |
+| `menuLinkId` | `menu-link-id` | | `string` | `''` |
+| `menuType` | `menu-type` | | `MenuType.desktop \| MenuType.mobile \| MenuType.sidenav \| MenuType.sidepanel \| MenuType.tablet` | `MenuType.desktop` |
+| `parentAsHeading` | `parent-as-heading` | | `string` | `''` |
+| `parentExpanded` | `parent-expanded` | | `boolean` | `false` |
+| `url` | `url` | | `string` | `''` |
## Events
diff --git a/src/components/navigation/menu/menu.tsx b/src/components/navigation/menu/menu.tsx
index 0fb98ff94adb1147de9fa1295a8ed6e8842f4de0..2293aaf43215ed8e494e3cba89fb891b5c1c8e0e 100644
--- a/src/components/navigation/menu/menu.tsx
+++ b/src/components/navigation/menu/menu.tsx
@@ -34,6 +34,7 @@ export class Menu {
return e.bid;
})
.indexOf(data.detail.bid);
+
breadcrumbs.length = currentBreadcrumb;
for (let i = currentBreadcrumb, l = this.breadcrumbs.length; i < l; i++) {
@@ -64,6 +65,18 @@ export class Menu {
// Listener for adding a breadcrumb to mobile menu breadcrumbs.
@Listen('addBreadcrumb') addBreadcrumb(event) {
+ //console.log('Adding: ' + this.menuButtonBreadcrumbMain + ' ' + event. detail.url + ' ' + event.detail.label + ' ' + event.detail.isMainMenu);
+ /* if (this.breadcrumbs.length == 0 && !event.detail.isMainMenu) {
+ // add Main Menu
+ this.breadcrumbs = [
+ ...this.breadcrumbs,
+ {
+ label: this.menuButtonBreadcrumbMain,
+ bid: event.detail.bid,
+ url: this.logoUrl,
+ },
+ ];
+ } */
this.breadcrumbs = [
...this.breadcrumbs,
{
@@ -147,13 +160,12 @@ export class Menu {
<hy-menu-language is-mobile={true} data-menu-language={this.dataMenuLanguage} />
{this.breadcrumbs.length ? (
[
- this.breadcrumbs.map((breadcrumb, index) => {
- let current_label = index === 0 ? this.menuButtonBreadcrumbMain : breadcrumb.label;
+ this.breadcrumbs.map((breadcrumb) => {
return (
<hy-menu-mobile-breadcrumb
label-back={this.menuButtonBreadcrumbReturn}
label-front-page={this.labelFrontPage}
- label={current_label}
+ label={breadcrumb.label}
bid={breadcrumb.bid}
/>
);
diff --git a/src/components/site-header/site-header.tsx b/src/components/site-header/site-header.tsx
index 50c8d71e205b09b105900c7f89d3ca32e6ed87cb..85b0dab79199b37bfa841dde9603c19b877e4836 100644
--- a/src/components/site-header/site-header.tsx
+++ b/src/components/site-header/site-header.tsx
@@ -96,6 +96,10 @@ export class SiteHeader {
this.menuLabels = labels.menu_labels;
this.languageLabels = labels.language_labels;
this.searchLabels = labels.search_labels;
+
+ this.el.children[0].setAttribute('menu-button-breadcrumb-home', this.menuLabels['home']);
+ this.el.children[0].setAttribute('menu-button-breadcrumb-main', this.menuLabels['main']);
+ this.el.children[0].setAttribute('menu-button-breadcrumb-logourl', this.logoUrl);
}
// Check for the donation link information and set it to variables accordingly.