diff --git a/src/components.d.ts b/src/components.d.ts
index 11f6df4bd4808c7ed0ffb1670bb68a493ad947ea..40953f94d873d8aa019c8331688976b186f0f8ca 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -16,6 +16,7 @@ import {
CtaLinkVariants,
FooterLinkItemColor,
FooterLinkVariants,
+ FooterVariant,
GridAlignVariants,
GridColumns,
GridColumnsLg,
@@ -262,6 +263,12 @@ export namespace Components {
courseTeachingLanguage?: string;
variant: CourseVariants;
}
+ interface HyCrisisBanner {
+ bannerDescription?: string;
+ bannerTitle: string;
+ linkTitle?: string;
+ linkUrl?: string;
+ }
interface HyCtaButton {
headerstyle: string;
isExternal: boolean;
@@ -750,6 +757,7 @@ export namespace Components {
color: ColorVariant;
label?: string;
size: SiteLogoSize;
+ type: FooterVariant;
url?: string;
}
interface HySiteSearch {
@@ -915,6 +923,11 @@ declare global {
prototype: HTMLHyContentListItemElement;
new (): HTMLHyContentListItemElement;
};
+ interface HTMLHyCrisisBannerElement extends Components.HyCrisisBanner, HTMLStencilElement {}
+ var HTMLHyCrisisBannerElement: {
+ prototype: HTMLHyCrisisBannerElement;
+ new (): HTMLHyCrisisBannerElement;
+ };
interface HTMLHyCtaButtonElement extends Components.HyCtaButton, HTMLStencilElement {}
var HTMLHyCtaButtonElement: {
prototype: HTMLHyCtaButtonElement;
@@ -1282,6 +1295,7 @@ declare global {
'hy-checkbox': HTMLHyCheckboxElement;
'hy-content-list': HTMLHyContentListElement;
'hy-content-list-item': HTMLHyContentListItemElement;
+ 'hy-crisis-banner': HTMLHyCrisisBannerElement;
'hy-cta-button': HTMLHyCtaButtonElement;
'hy-cta-link': HTMLHyCtaLinkElement;
'hy-desktop-menu-links': HTMLHyDesktopMenuLinksElement;
@@ -1562,6 +1576,12 @@ declare namespace LocalJSX {
courseTeachingLanguage?: string;
variant?: CourseVariants;
}
+ interface HyCrisisBanner {
+ bannerDescription?: string;
+ bannerTitle?: string;
+ linkTitle?: string;
+ linkUrl?: string;
+ }
interface HyCtaButton {
headerstyle?: string;
isExternal?: boolean;
@@ -2064,6 +2084,7 @@ declare namespace LocalJSX {
color?: ColorVariant;
label?: string;
size?: SiteLogoSize;
+ type?: FooterVariant;
url?: string;
}
interface HySiteSearch {
@@ -2173,6 +2194,7 @@ declare namespace LocalJSX {
'hy-checkbox': HyCheckbox;
'hy-content-list': HyContentList;
'hy-content-list-item': HyContentListItem;
+ 'hy-crisis-banner': HyCrisisBanner;
'hy-cta-button': HyCtaButton;
'hy-cta-link': HyCtaLink;
'hy-desktop-menu-links': HyDesktopMenuLinks;
@@ -2263,6 +2285,7 @@ declare module '@stencil/core' {
'hy-checkbox': LocalJSX.HyCheckbox & JSXBase.HTMLAttributes<HTMLHyCheckboxElement>;
'hy-content-list': LocalJSX.HyContentList & JSXBase.HTMLAttributes<HTMLHyContentListElement>;
'hy-content-list-item': LocalJSX.HyContentListItem & JSXBase.HTMLAttributes<HTMLHyContentListItemElement>;
+ 'hy-crisis-banner': LocalJSX.HyCrisisBanner & JSXBase.HTMLAttributes<HTMLHyCrisisBannerElement>;
'hy-cta-button': LocalJSX.HyCtaButton & JSXBase.HTMLAttributes<HTMLHyCtaButtonElement>;
'hy-cta-link': LocalJSX.HyCtaLink & JSXBase.HTMLAttributes<HTMLHyCtaLinkElement>;
'hy-desktop-menu-links': LocalJSX.HyDesktopMenuLinks & JSXBase.HTMLAttributes<HTMLHyDesktopMenuLinksElement>;
diff --git a/src/components/accordion-item/accordion-item.scss b/src/components/accordion-item/accordion-item.scss
index 2e4bf823e0a472f095396d7b05e157eaa589a879..c74122a0fad72df20f250907bcee2eeda40d0fbb 100644
--- a/src/components/accordion-item/accordion-item.scss
+++ b/src/components/accordion-item/accordion-item.scss
@@ -195,6 +195,7 @@
display: block;
height: 0;
padding: 0;
+ overflow: hidden;
transition: all 0.25s ease-in-out;
&--inner-wrapper {
diff --git a/src/components/cta-link/cta-link.scss b/src/components/cta-link/cta-link.scss
index 8ac25a9ae7769b9d3d43be245383544f37d0da3b..a505ced3377d48118b0d49dfa73e1078847aa577 100644
--- a/src/components/cta-link/cta-link.scss
+++ b/src/components/cta-link/cta-link.scss
@@ -37,6 +37,16 @@
padding: 10.29px;
}
}
+
+ &:hover {
+ span {
+ color: var(--brand-main) !important;
+ text-decoration: underline;
+ }
+ svg {
+ background-color: var(--brand-main) !important;
+ }
+ }
}
&.link-list {
@@ -78,5 +88,15 @@
}
}
}
+
+ &:hover {
+ span {
+ color: var(--brand-main) !important;
+ text-decoration: underline;
+ }
+ .hy-icon-wrapper {
+ background-color: var(--brand-main) !important;
+ }
+ }
}
}
diff --git a/src/components/footer/hy-footer-action/hy-footer-action.scss b/src/components/footer/hy-footer-action/hy-footer-action.scss
index 828b97dd7aa23a079a9939d593cc036edc8c7e1c..9b4df2caa1012c024c2240e65db5f2bf71895b7c 100644
--- a/src/components/footer/hy-footer-action/hy-footer-action.scss
+++ b/src/components/footer/hy-footer-action/hy-footer-action.scss
@@ -56,5 +56,14 @@
svg {
fill: var(--grayscale-white);
}
+
+ &:hover {
+ label {
+ text-decoration: underline;
+ }
+ .hy-footer-action__up-button {
+ background-color: var(--brand-main);
+ }
+ }
}
}
diff --git a/src/components/footer/hy-footer-base/hy-footer-base.scss b/src/components/footer/hy-footer-base/hy-footer-base.scss
index ca7970495aa333379d4cf395bdac00b2d626c95f..70d85044e05c3b73c045463e0445daaac31e1bfd 100644
--- a/src/components/footer/hy-footer-base/hy-footer-base.scss
+++ b/src/components/footer/hy-footer-base/hy-footer-base.scss
@@ -130,6 +130,13 @@
:last-child() {
margin-right: 0;
}
+
+ &:hover {
+ color: var(--grayscale-medium) !important;
+ svg {
+ fill: var(--grayscale-medium);
+ }
+ }
}
svg {
diff --git a/src/components/footer/hy-footer-base/hy-footer-base.tsx b/src/components/footer/hy-footer-base/hy-footer-base.tsx
index 137e85d078dd27ee59cc3ffc2edaac82387a0e88..d924ff5c1420850af534315fd56c42d6a1ce4851 100644
--- a/src/components/footer/hy-footer-base/hy-footer-base.tsx
+++ b/src/components/footer/hy-footer-base/hy-footer-base.tsx
@@ -13,7 +13,7 @@ export interface FooterBaseSome {
}
import {Component, ComponentInterface, Watch, Host, Prop, h} from '@stencil/core';
-import {FooterLinkItemColor, SiteLogoSize, ColorVariant} from '../../../utils/utils';
+import {FooterLinkItemColor, SiteLogoSize, ColorVariant, FooterVariant} from '../../../utils/utils';
@Component({
tag: 'hy-footer-base',
@@ -80,7 +80,13 @@ export class HyFooterBase implements ComponentInterface {
<div class="hy-footer-base">
<div class="hy-footer-base__left">
<div class="hy-footer-base__logo">
- <hy-site-logo size={56} color={logoColor} url={this.logoUrl} label={this.logoLabel} />
+ <hy-site-logo
+ type={FooterVariant.footer}
+ size={56}
+ color={logoColor}
+ url={this.logoUrl}
+ label={this.logoLabel}
+ />
</div>
<div class="hy-footer-base__content">
<slot name="content"></slot>
diff --git a/src/components/footer/hy-footer-link-item/hy-footer-link-item.scss b/src/components/footer/hy-footer-link-item/hy-footer-link-item.scss
index c1f4d546b27ff95a64244ac2c59028cc6d387c29..c549328f5a113da9bd666666f586a1665c331b2c 100644
--- a/src/components/footer/hy-footer-link-item/hy-footer-link-item.scss
+++ b/src/components/footer/hy-footer-link-item/hy-footer-link-item.scss
@@ -63,6 +63,13 @@ hy-footer-link-item[main-link] {
.hy-footer-link-item__icon svg {
fill: var(--grayscale-white);
}
+
+ &:hover {
+ color: var(--grayscale-medium) !important;
+ svg {
+ fill: var(--grayscale-medium);
+ }
+ }
}
&__color-black {
@@ -72,6 +79,14 @@ hy-footer-link-item[main-link] {
.hy-footer-link-item__icon svg {
fill: var(--grayscale-black);
}
+
+ &:hover {
+ color: var(--brand-main) !important;
+ text-decoration: underline;
+ svg {
+ fill: var(--brand-main);
+ }
+ }
}
&__main {
@@ -97,4 +112,10 @@ hy-footer-link-item[main-link] {
top: 50%;
transform: translateY(-50%);
}
+
+ &:hover {
+ h3 a {
+ color: var(--brand-main) !important;
+ }
+ }
}
diff --git a/src/components/hy-breadcrumbs/hy-breadcrumbs.scss b/src/components/hy-breadcrumbs/hy-breadcrumbs.scss
index fc58c575f6916b82a6b4f3aa60e37917abc01b05..a7553c617db196e35dcabbaf3899f20306f04a21 100644
--- a/src/components/hy-breadcrumbs/hy-breadcrumbs.scss
+++ b/src/components/hy-breadcrumbs/hy-breadcrumbs.scss
@@ -89,6 +89,13 @@
}
}
+ &:hover {
+ a {
+ color: var(--brand-main);
+ text-decoration: underline;
+ }
+ }
+
&:focus {
outline: auto;
}
@@ -105,6 +112,13 @@
stroke: var(--brand-main-light);
}
}
+
+ &:hover {
+ svg {
+ fill: var(--brand-main) !important;
+ stroke: var(--brand-main) !important;
+ }
+ }
}
.breadcrumb-item.main {
@@ -221,6 +235,14 @@
.breadcrumb-item__current {
flex: 0 2 auto;
min-width: 0;
+
+ &:hover {
+ a {
+ cursor: default;
+ color: var(--grayscale-dark) !important;
+ text-decoration: none !important;
+ }
+ }
}
.breadcrumb-item__current a {
@@ -232,10 +254,6 @@
text-overflow: ellipsis;
white-space: nowrap;
min-height: auto;
-
- &:hover {
- cursor: default;
- }
}
.intermediate {
diff --git a/src/components/hy-crisis-banner/hy-crisis-banner.scss b/src/components/hy-crisis-banner/hy-crisis-banner.scss
new file mode 100644
index 0000000000000000000000000000000000000000..29d375deed40ffcddc9f4668099851860bfb432d
--- /dev/null
+++ b/src/components/hy-crisis-banner/hy-crisis-banner.scss
@@ -0,0 +1,195 @@
+:host {
+ box-shadow: inset 0 -20px 20px -20px rgba(14, 104, 139, 0.1);
+ display: block;
+}
+
+.hy-crisis-banner__container {
+ display: flex;
+ margin: 0 auto;
+ max-width: 1216px;
+}
+
+.hy-crisis-banner__indicator {
+ background-color: var(--additional-yellow);
+ flex-shrink: 0;
+
+ @include breakpoint($narrow) {
+ align-items: center;
+ display: flex;
+ justify-content: center;
+ }
+}
+
+.hy-crisis-banner__indicator-icon {
+ margin-left: 8px;
+ margin-right: 8px;
+ margin-top: 10px;
+
+ @include breakpoint($narrow) {
+ margin-left: 10px;
+ margin-right: 10px;
+ margin-top: 0;
+ }
+
+ svg {
+ height: 22px;
+ width: 22px;
+
+ circle {
+ fill: var(--grayscale-white);
+ }
+
+ path {
+ fill: var(--additional-yellow);
+ }
+ }
+}
+
+.hy-crisis-banner__content-wrapper {
+ align-items: baseline;
+ display: flex;
+ flex-direction: column;
+ flex-grow: 1;
+ padding: 12px 0 12px 12px;
+
+ @include breakpoint($narrow) {
+ align-items: center;
+ flex-direction: row;
+ justify-content: space-between;
+ padding: 14px 0 14px 14px;
+ }
+
+ @include breakpoint($wide) {
+ padding: 20px 0 20px 20px;
+ }
+}
+
+.hy-crisis-banner__content {
+ @include breakpoint($narrow) {
+ max-width: 61.22%;
+ width: 100%;
+ }
+
+ @include breakpoint($wide) {
+ max-width: 65.83%;
+ }
+
+ @include breakpoint($extrawide) {
+ max-width: 65.79%;
+ }
+}
+
+.hy-crisis-banner__title {
+ @include font-size(14px, 16px);
+ color: var(--grayscale-black);
+ font-family: var(--main-font-family);
+ font-weight: 600;
+ letter-spacing: -0.07px;
+ margin: 0;
+
+ @include breakpoint($narrow) {
+ @include font-size(16px, 20px);
+ letter-spacing: -0.08px;
+ }
+
+ @include breakpoint($wide) {
+ @include font-size(20px, 26px);
+ letter-spacing: -0.1px;
+ }
+}
+
+.hy-crisis-banner__description {
+ @include font-size(14px, 16px);
+ color: var(--grayscale-black);
+ font-family: var(--main-font-family);
+ font-weight: 600;
+ letter-spacing: -0.07px;
+ margin: 0;
+
+ @include breakpoint($narrow) {
+ @include font-size(16px, 20px);
+ letter-spacing: -0.08px;
+ }
+
+ @include breakpoint($wide) {
+ @include font-size(20px, 26px);
+ letter-spacing: -0.1px;
+ }
+
+ p {
+ margin-top: 0;
+
+ &:last-of-type {
+ margin-bottom: 0;
+ }
+ }
+}
+
+.hy-crisis-banner__link {
+ @include font-size(14px, 19px);
+ align-items: center;
+ color: var(--brand-main-light);
+ display: inline-flex;
+ font-family: var(--main-font-family);
+ font-weight: 600;
+ letter-spacing: -0.07px;
+ margin-left: auto;
+ margin-top: 12px;
+ text-decoration: none;
+
+ @include breakpoint($narrow) {
+ @include font-size(16px, 22px);
+ flex-shrink: 0;
+ letter-spacing: -0.08px;
+ margin-left: 24px;
+ margin-top: 0;
+ text-align: right;
+ }
+
+ @include breakpoint($wide) {
+ @include font-size(20px, 32px);
+ letter-spacing: -0.1px;
+ }
+
+ @include breakpoint($extrawide) {
+ margin-left: 32px;
+ }
+
+ &:hover,
+ &:focus {
+ color: var(--brand-main);
+ text-decoration: underline;
+
+ .hy-crisis-banner__link-icon svg {
+ fill: var(--brand-main);
+ }
+ }
+}
+
+.hy-crisis-banner__link-icon {
+ margin-left: 4px;
+
+ @include breakpoint($narrow) {
+ margin-left: 8px;
+ }
+
+ @include breakpoint($extrawide) {
+ margin-left: 12px;
+ }
+
+ svg {
+ fill: var(--brand-main-light);
+ height: 12px;
+ width: 11px;
+
+ @include breakpoint($narrow) {
+ height: 14px;
+ width: 13px;
+ }
+
+ @include breakpoint($wide) {
+ height: 16px;
+ width: 16px;
+ }
+ }
+}
diff --git a/src/components/hy-crisis-banner/hy-crisis-banner.tsx b/src/components/hy-crisis-banner/hy-crisis-banner.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..ab3a678b0f05509eddcc41c5b54ed7ccff2ad663
--- /dev/null
+++ b/src/components/hy-crisis-banner/hy-crisis-banner.tsx
@@ -0,0 +1,39 @@
+import {Component, Host, h, Prop} from '@stencil/core';
+
+@Component({
+ tag: 'hy-crisis-banner',
+ styleUrl: 'hy-crisis-banner.scss',
+ shadow: true,
+})
+export class HyCrisisBanner {
+ @Prop() bannerTitle: string;
+ @Prop() bannerDescription?: string;
+ @Prop() linkTitle?: string;
+ @Prop() linkUrl?: string;
+
+ render() {
+ return (
+ <Host class="hy-crisis-banner" role="alert">
+ <div class="hy-crisis-banner__container">
+ <div class="hy-crisis-banner__indicator">
+ <hy-icon class={'hy-crisis-banner__indicator-icon'} icon={'hy-icon-alert'} />
+ </div>
+ <div class="hy-crisis-banner__content-wrapper">
+ <div class="hy-crisis-banner__content">
+ <h3 class="hy-crisis-banner__title">{this.bannerTitle}</h3>
+ {this.bannerDescription && (
+ <div class="hy-crisis-banner__description" innerHTML={this.bannerDescription}></div>
+ )}
+ </div>
+ {this.linkUrl && (
+ <a class="hy-crisis-banner__link" href={this.linkUrl}>
+ {this.linkTitle}
+ <hy-icon class={'hy-crisis-banner__link-icon'} icon={'hy-icon-arrow-to-right'} />
+ </a>
+ )}
+ </div>
+ </div>
+ </Host>
+ );
+ }
+}
diff --git a/src/components/hy-crisis-banner/readme.md b/src/components/hy-crisis-banner/readme.md
new file mode 100644
index 0000000000000000000000000000000000000000..0424953fb08c6360de9202075df34e2d566173f9
--- /dev/null
+++ b/src/components/hy-crisis-banner/readme.md
@@ -0,0 +1,30 @@
+# hy-crisis-banner
+
+<!-- Auto Generated Below -->
+
+## Properties
+
+| Property | Attribute | Description | Type | Default |
+| ------------------- | -------------------- | ----------- | -------- | ----------- |
+| `bannerDescription` | `banner-description` | | `string` | `undefined` |
+| `bannerTitle` | `banner-title` | | `string` | `undefined` |
+| `linkTitle` | `link-title` | | `string` | `undefined` |
+| `linkUrl` | `link-url` | | `string` | `undefined` |
+
+## Dependencies
+
+### Depends on
+
+- [hy-icon](../icon)
+
+### Graph
+
+```mermaid
+graph TD;
+ hy-crisis-banner --> hy-icon
+ style hy-crisis-banner 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 92dc54c76328fd630644a41b713d69212706bd52..afbd0450a51a762b7ae2fc22afe634addbae1f3c 100644
--- a/src/components/hy-hero/hy-hero.scss
+++ b/src/components/hy-hero/hy-hero.scss
@@ -270,6 +270,18 @@
@include breakpoint($xlarge) {
padding-left: 0;
}
+
+ @include breakpoint(1280px) {
+ padding-left: 0;
+ }
+
+ @include breakpoint(1440px) {
+ min-height: 540px;
+ }
+
+ @include breakpoint(1920px) {
+ min-height: 720px;
+ }
}
.hy-hero__image-container {
@@ -391,8 +403,11 @@
min-height: 450px;
}
- @include breakpoint($xlarge) {
+ @include breakpoint(1280px) {
max-width: 1216px;
+ }
+
+ @include breakpoint($xlarge) {
min-height: 500px;
padding: 80px 0;
}
diff --git a/src/components/hy-shortcuts/hy-shortcuts.scss b/src/components/hy-shortcuts/hy-shortcuts.scss
index 7bcb2bd551b21a2c9fcfbf37c637fd65c79046ff..3cc5b5c711ee7bc60aff9e4ec39b4a0d53db69ba 100644
--- a/src/components/hy-shortcuts/hy-shortcuts.scss
+++ b/src/components/hy-shortcuts/hy-shortcuts.scss
@@ -116,6 +116,13 @@
}
}
}
+
+ &:hover {
+ color: var(--brand-main);
+ svg {
+ fill: var(--brand-main);
+ }
+ }
}
}
}
diff --git a/src/components/icon/Alert.tsx b/src/components/icon/Alert.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..8e7ff4e25445f6c28d4f439f85ad21c89269c297
--- /dev/null
+++ b/src/components/icon/Alert.tsx
@@ -0,0 +1,12 @@
+import {h} from '@stencil/core';
+
+function SvgAlert(props) {
+ return (
+ <svg viewBox="0 0 32 32" {...props}>
+ <circle cx="16" cy="16" r="16" />
+ <path d="M17.6,18.79H15l-.55-10.5h3.72Zm-3.21,3.67a1.8,1.8,0,0,1,.48-1.36,2,2,0,0,1,1.41-.46,1.94,1.94,0,0,1,1.38.47,1.83,1.83,0,0,1,.49,1.35,1.79,1.79,0,0,1-.5,1.34,1.84,1.84,0,0,1-1.37.49,1.93,1.93,0,0,1-1.4-.48A1.79,1.79,0,0,1,14.39,22.46Z" />
+ </svg>
+ );
+}
+
+export default SvgAlert;
diff --git a/src/components/icon/HeartSupport.tsx b/src/components/icon/HeartSupport.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..e6e35060f470e870401503d140bc60080032a259
--- /dev/null
+++ b/src/components/icon/HeartSupport.tsx
@@ -0,0 +1,11 @@
+import {h} from '@stencil/core';
+
+function SvgHeartSupport(props) {
+ return (
+ <svg viewBox="0 0 16 16" {...props}>
+ <path d="M1.26234059,1.47444321 C-0.421989103,3.44260781 -0.419570856,6.56432454 1.26234059,8.53342384 L7.39772074,15.7174761 C7.55302345,15.8974257 7.76996687,16 7.99652384,16 C8.22388007,16 8.44082554,15.897419 8.59532694,15.7174761 C10.641492,13.3259819 12.6907721,10.931817 14.7370601,8.5403228 C16.4213898,6.57215821 16.4205701,3.44955129 14.7370601,1.48134218 C13.0535502,-0.486866922 10.2157575,-0.486822413 8.53138685,1.48134218 L7.99982331,2.10029098 L7.46825978,1.47437645 C6.62609494,0.490294152 5.49814655,0 4.36859966,0 C3.23880685,0 2.10442346,0.490360916 1.26234059,1.47444321 Z M6.35964437,3.16815532 L7.43710533,4.37841446 C7.58389377,4.54236759 7.78894356,4.63582365 8.00307984,4.63582365 C8.21797156,4.63582365 8.42302328,4.5423615 8.56905435,4.37841446 L9.64045249,3.18084837 C10.6672219,2.02367291 12.2031147,2.02367291 13.2299229,3.18084837 C14.2566924,4.33802382 14.2566924,6.24360205 13.2299229,7.40077751 C11.4835935,9.3682191 9.74020842,11.3325787 7.99399527,13.3 L2.77007709,7.39449182 C1.74330764,6.23492374 1.74330764,4.32524968 2.77007709,3.16807422 C3.28382985,2.58908096 3.92699415,2.3 4.56785341,2.3 C5.20879014,2.3 5.84589161,2.58918234 6.35964437,3.16815532 Z"></path>
+ </svg>
+ );
+}
+
+export default SvgHeartSupport;
diff --git a/src/components/icon/icon.tsx b/src/components/icon/icon.tsx
index 851e564ac6bb56847aede98960bffa8e2745ed45..7923a25d264b38a63ff35af1d9b14cf2c28a7a46 100644
--- a/src/components/icon/icon.tsx
+++ b/src/components/icon/icon.tsx
@@ -8,6 +8,7 @@ const iconNames: IconName = {
'hy-icon-arrow-left': (p) => <icons.IconArrowLeft {...p} />,
'hy-icon-arrow-right': (p) => <icons.IconArrowRight {...p} />,
'hy-icon-arrow-to-right': (p) => <icons.IconArrowToRight {...p} />,
+ 'hy-icon-alert': (p) => <icons.Alert {...p} />,
'hy-icon-arrow-up': (p) => <icons.ArrowUp {...p} />,
'hy-icon-camera': (p) => <icons.Camera {...p} />,
'hy-icon-caret-down': (p) => <icons.CaretDown {...p} />,
@@ -16,6 +17,8 @@ const iconNames: IconName = {
'hy-icon-dot-arrow-right': (p) => <icons.DotArrowRight {...p} />,
'hy-icon-done': (p) => <icons.Done {...p} />,
'hy-icon-euro': (p) => <icons.Euro {...p} />,
+ 'hy-icon-heart': (p) => <icons.Heart {...p} />,
+ 'hy-icon-heart-support': (p) => <icons.HeartSupport {...p} />,
'hy-icon-link': (p) => <icons.Url {...p} />,
'hy-icon-globe': (p) => <icons.Globe {...p} />,
'hy-icon-hamburger': (p) => <icons.Hamburger {...p} />,
diff --git a/src/components/icon/icons.tsx b/src/components/icon/icons.tsx
index 5818b0cd927f2a069d5dec14b72808868716b19f..3e7fbf85bf2e309480f9140182d034fb42bf0855 100644
--- a/src/components/icon/icons.tsx
+++ b/src/components/icon/icons.tsx
@@ -55,6 +55,7 @@ export const IconQuote: FunctionalComponent = (props: any) => {
};
export {default as AddToTodoList} from './AddToTodoList';
+export {default as Alert} from './Alert';
export {default as ArrowDown} from './ArrowDown';
export {default as ArrowUp} from './ArrowUp';
export {default as Arrow} from './Arrow';
@@ -98,6 +99,7 @@ export {default as GooglePlus} from './GooglePlus';
export {default as Grid} from './Grid';
export {default as Hamburger} from './Hamburger';
export {default as Heart} from './Heart';
+export {default as HeartSupport} from './HeartSupport';
export {default as Helsinginyliopisto} from './Helsinginyliopisto';
export {default as Home} from './Home';
export {default as HorizontalResize} from './HorizontalResize';
diff --git a/src/components/icon/readme.md b/src/components/icon/readme.md
index ccd10150fd514cf1f8657e311293101c7c0f7513..26a9d79ddd4cd58a379350ea11e06f459780c13b 100644
--- a/src/components/icon/readme.md
+++ b/src/components/icon/readme.md
@@ -19,6 +19,7 @@
- [hy-button](../button)
- [hy-checkbox](../hy-checkbox)
- [hy-content-list-item](../courses/hy-content-list-item)
+- [hy-crisis-banner](../hy-crisis-banner)
- [hy-cta-button](../cta-button)
- [hy-cta-link](../cta-link)
- [hy-desktop-menu-links](../site-header/hy-desktop-menu-links)
@@ -59,6 +60,7 @@ graph TD;
hy-button --> hy-icon
hy-checkbox --> hy-icon
hy-content-list-item --> hy-icon
+ hy-crisis-banner --> hy-icon
hy-cta-button --> hy-icon
hy-cta-link --> hy-icon
hy-desktop-menu-links --> hy-icon
diff --git a/src/components/navigation/menu-item-sidebar/menu-item-sidebar.scss b/src/components/navigation/menu-item-sidebar/menu-item-sidebar.scss
index fc2699ebc7f65d974ac207012222158259ae0b67..a5a75f7623ebcd742daa9b2f9c10949770c9fee8 100644
--- a/src/components/navigation/menu-item-sidebar/menu-item-sidebar.scss
+++ b/src/components/navigation/menu-item-sidebar/menu-item-sidebar.scss
@@ -189,8 +189,10 @@
}
&:hover {
- color: var(--brand-main-nearly-black);
-
+ a {
+ color: var(--brand-main) !important;
+ text-decoration: underline;
+ }
.hy-menu-item__parent__icon__svg {
fill: var(--brand-main-nearly-black);
}
diff --git a/src/components/navigation/menu-language/menu-language.scss b/src/components/navigation/menu-language/menu-language.scss
index ba583d5651d5cdd6c42f31b753987d324d4c7d15..44696d8a8c561af78fc78fc393da48fc13ba2056 100644
--- a/src/components/navigation/menu-language/menu-language.scss
+++ b/src/components/navigation/menu-language/menu-language.scss
@@ -66,7 +66,14 @@
}
&:hover {
+ color: var(--brand-main);
cursor: pointer;
+ span {
+ color: var(--brand-main);
+ }
+ svg {
+ fill: var(--brand-main);
+ }
}
&.is-open {
diff --git a/src/components/navigation/menu-sidebar/menu-sidebar.scss b/src/components/navigation/menu-sidebar/menu-sidebar.scss
index 795c2c227337ab4bd87ac4a1da0b1daa6ec26edc..f3e5559426afaf282f67580f68f8b896d02cd3ef 100644
--- a/src/components/navigation/menu-sidebar/menu-sidebar.scss
+++ b/src/components/navigation/menu-sidebar/menu-sidebar.scss
@@ -129,6 +129,8 @@
&:hover {
cursor: pointer;
+ color: var(--brand-main);
+ text-decoration: underline;
}
svg {
diff --git a/src/components/paragraph-text/paragraph-text.scss b/src/components/paragraph-text/paragraph-text.scss
index 8f34f87eb4d376f782c8931ef4de5e3f1287bd45..4578320a476fe1263ab1fb796cd09afd27dcb6bc 100644
--- a/src/components/paragraph-text/paragraph-text.scss
+++ b/src/components/paragraph-text/paragraph-text.scss
@@ -55,11 +55,33 @@
color: var(--link-blue);
font-family: var(--main-font-family);
font-weight: 600;
+ display: inline-flex;
@include breakpoint($narrow) {
@include font-size(16px, 24px);
letter-spacing: -0.1px;
}
+
+ &:hover {
+ color: var(--brand-main);
+ }
+ }
+
+ a[target='_blank']:after {
+ display: block;
+ content: url("data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 30 29' fill='rgb(4,121,165)'> <polygon points='29.207 13.783 14.756 .717 14.055 0 11.402 3.118 10.732 3.835 19.665 11.974 0 11.974 0 17.026 19.756 17.026 11.494 24.447 10.823 25.071 11.402 25.882 13.476 28.189 14.055 29 30 14.594' /> </svg>");
+ margin-left: 3px;
+ transform: rotate(315deg);
+
+ &:hover {
+ content: url("data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 30 29' fill='pink'> <polygon points='29.207 13.783 14.756 .717 14.055 0 11.402 3.118 10.732 3.835 19.665 11.974 0 11.974 0 17.026 19.756 17.026 11.494 24.447 10.823 25.071 11.402 25.882 13.476 28.189 14.055 29 30 14.594' /> </svg>");
+ }
+ }
+
+ a[target='_blank']:hover {
+ &:after {
+ content: url("data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 30 29' fill='rgb(14,104,139)'> <polygon points='29.207 13.783 14.756 .717 14.055 0 11.402 3.118 10.732 3.835 19.665 11.974 0 11.974 0 17.026 19.756 17.026 11.494 24.447 10.823 25.071 11.402 25.882 13.476 28.189 14.055 29 30 14.594' /> </svg>");
+ }
}
p {
diff --git a/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.scss b/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.scss
index a17bbe74a2a66780a5d3a95f758dd7ee79fc666f..0c62a2de7ea7e45ff8eb1bc56a75a8dbaeb8974b 100644
--- a/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.scss
+++ b/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.scss
@@ -184,6 +184,16 @@
&__title {
padding-right: 5px;
}
+
+ &:hover {
+ cursor: pointer;
+ span {
+ color: var(--brand-main);
+ }
+ svg {
+ fill: var(--brand-main);
+ }
+ }
}
}
diff --git a/src/components/site-header/site-header.scss b/src/components/site-header/site-header.scss
index 26292ff750eaf43096feda54e00f2b5b17ebd925..c48320bbb1a9bac2ce2f5e516ca62db7aeb44849 100644
--- a/src/components/site-header/site-header.scss
+++ b/src/components/site-header/site-header.scss
@@ -48,6 +48,7 @@
}
&__logo-container {
+ color: var(--brand-main-nearly-black);
margin: 16px 8px;
@include breakpoint($narrow) {
@@ -61,6 +62,17 @@
@include breakpoint($extrawide) {
margin: 16px;
}
+
+ &:hover {
+ color: var(--brand-main);
+ a,
+ span {
+ color: var(--brand-main) !important;
+ }
+ svg {
+ fill: var(--brand-main);
+ }
+ }
}
&__menu-container {
@@ -202,6 +214,16 @@
margin: 0 8px;
padding: 10px 0;
}
+
+ &:hover {
+ color: var(--brand-main);
+ span {
+ color: var(--brand-main);
+ }
+ svg {
+ fill: var(--brand-main);
+ }
+ }
}
}
diff --git a/src/components/site-header/site-header.tsx b/src/components/site-header/site-header.tsx
index 8be0aa04bcf7710f5314dec14d04e4a1bc6aacb1..d38a503eff5d7ae815777a233de73b15f41e4108 100644
--- a/src/components/site-header/site-header.tsx
+++ b/src/components/site-header/site-header.tsx
@@ -221,7 +221,7 @@ export class SiteHeader {
{this.donateLink.map((i) => {
return (
<a class={'menu--secondary__item hy-link__donate'} href={i.url}>
- <hy-icon icon={'hy-icon-euro'} size={14} fill={ColorVariant.black} />
+ <hy-icon icon={'hy-icon-heart-support'} size={14} fill={ColorVariant.black} />
<span class={'hy-link__donate__label'}>{i.label}</span>
</a>
);
@@ -255,7 +255,7 @@ export class SiteHeader {
{this.donateLink.map((i) => {
return (
<a class={'menu--secondary__item hy-link__donate'} href={i.url}>
- <hy-icon icon={'hy-icon-euro'} size={14} fill={ColorVariant.black} />
+ <hy-icon icon={'hy-icon-heart-support'} size={14} fill={ColorVariant.black} />
<span class={'hy-link__donate__label'}>{i.label}</span>
</a>
);
diff --git a/src/components/site-header/site-logo/readme.md b/src/components/site-header/site-logo/readme.md
index 6ca8f13049d858c93942fb48a91d43d31cca698b..cdb7cfb5f3b4f5a6b2b6f81859cb1904aeb5215d 100644
--- a/src/components/site-header/site-logo/readme.md
+++ b/src/components/site-header/site-logo/readme.md
@@ -4,12 +4,13 @@
## 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` |
-| `url` | `url` | | `string` | `undefined` |
+| 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` |
## Dependencies
diff --git a/src/components/site-header/site-logo/site-logo.scss b/src/components/site-header/site-logo/site-logo.scss
index 7f4314ec367e3ed40fa419049886092068123490..3bd9dc7ddc3164be745d2f4d4693d28ef7c55f95 100644
--- a/src/components/site-header/site-logo/site-logo.scss
+++ b/src/components/site-header/site-logo/site-logo.scss
@@ -68,4 +68,27 @@
width: 64px;
}
}
+
+ &__header {
+ &:hover {
+ color: var(--brand-main);
+ a,
+ span {
+ color: var(--brand-main) !important;
+ }
+ svg {
+ fill: var(--brand-main);
+ }
+ }
+ }
+ &__footer {
+ &:hover {
+ span {
+ color: var(--grayscale-medium) !important;
+ }
+ svg {
+ fill: var(--grayscale-medium) !important;
+ }
+ }
+ }
}
diff --git a/src/components/site-header/site-logo/site-logo.tsx b/src/components/site-header/site-logo/site-logo.tsx
index 7f06639326843659c2310a2218d3d5d67628eec3..723cb51aad1da1427038ff420c307ff5d7e48588 100644
--- a/src/components/site-header/site-logo/site-logo.tsx
+++ b/src/components/site-header/site-logo/site-logo.tsx
@@ -1,5 +1,5 @@
import {Component, h, Host, Prop} from '@stencil/core';
-import {ColorVariant, SiteLogoSize} from '../../../utils/utils';
+import {ColorVariant, FooterVariant, SiteLogoSize} from '../../../utils/utils';
@Component({
tag: 'hy-site-logo',
@@ -7,14 +7,16 @@ import {ColorVariant, SiteLogoSize} from '../../../utils/utils';
shadow: false,
})
export class SiteLogo {
+ @Prop() type: FooterVariant = FooterVariant.header;
@Prop() color: ColorVariant = ColorVariant.black;
@Prop() label?: string;
@Prop() size: SiteLogoSize = SiteLogoSize.big;
@Prop() url?: string;
render() {
+ const classAttributes = ['hy-site-logo', `hy-site-logo__${this.type}`].join(' ');
return this.url ? (
- <Host class={'hy-site-logo'}>
+ <Host class={classAttributes}>
<a href={this.url}>
<hy-icon class={'hy-site-logo__icon'} icon={'hy-icon-hy-logo'} size={this.size} fill={this.color} />
<span class={'hy-site-logo__label'} style={{color: this.color}}>
@@ -23,7 +25,7 @@ export class SiteLogo {
</a>
</Host>
) : this.label ? (
- <Host class={'hy-site-logo'}>
+ <Host class={classAttributes}>
<hy-icon class={'hy-site-logo__icon'} icon={'hy-icon-hy-logo'} size={this.size} fill={this.color} />
<span class={'hy-site-logo__label'} style={{color: this.color}}>
{this.label}
diff --git a/src/components/site-header/site-search/site-search.scss b/src/components/site-header/site-search/site-search.scss
index 700aa57a14613dcc707d49a4aeb5b306d485d37c..bfe7698ccc48afd42c081914a37a8af843286a59 100644
--- a/src/components/site-header/site-search/site-search.scss
+++ b/src/components/site-header/site-search/site-search.scss
@@ -12,7 +12,6 @@
@include breakpoint($wide) {
flex-direction: row-reverse;
- //padding: 4px 0;
padding: 0;
&:focus {
@@ -82,6 +81,18 @@
width: 16px;
}
}
+
+ &:hover {
+ color: var(--brand-main);
+ cursor: pointer;
+
+ span {
+ color: var(--brand-main);
+ }
+ svg {
+ fill: var(--brand-main);
+ }
+ }
}
.site-search {
diff --git a/src/utils/utils.ts b/src/utils/utils.ts
index c4fa3e0755722d696da99c843bc267dd29b8e4d1..bd9bf643788dbecadb0ea64f69b63b14d6f8efa2 100644
--- a/src/utils/utils.ts
+++ b/src/utils/utils.ts
@@ -171,6 +171,11 @@ export enum SiteLogoSize {
large = 80,
}
+export enum FooterVariant {
+ header = 'header',
+ footer = 'footer',
+}
+
export enum ColorVariant {
black = 'var(--brand-main-nearly-black)',
white = 'var(--grayscale-white)',