Skip to content
Snippets Groups Projects
Commit 21986d0f authored by druid's avatar druid
Browse files

Merge branch 'development'

parents 4a7e21c1 81d679a1
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 439 additions and 9 deletions
src/components.d.ts
+ 23
− 0
View file @ 21986d0f
......@@ -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>;
......
src/components/accordion-item/accordion-item.scss
+ 1
− 0
View file @ 21986d0f
......@@ -195,6 +195,7 @@
display: block;
height: 0;
padding: 0;
overflow: hidden;
transition: all 0.25s ease-in-out;
&--inner-wrapper {
......
src/components/cta-link/cta-link.scss
+ 20
− 0
View file @ 21986d0f
......@@ -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;
}
}
}
}
src/components/footer/hy-footer-action/hy-footer-action.scss
+ 9
− 0
View file @ 21986d0f
......@@ -56,5 +56,14 @@
svg {
fill: var(--grayscale-white);
}
&:hover {
label {
text-decoration: underline;
}
.hy-footer-action__up-button {
background-color: var(--brand-main);
}
}
}
}
src/components/footer/hy-footer-base/hy-footer-base.scss
+ 7
− 0
View file @ 21986d0f
......@@ -130,6 +130,13 @@
:last-child() {
margin-right: 0;
}
&:hover {
color: var(--grayscale-medium) !important;
svg {
fill: var(--grayscale-medium);
}
}
}
svg {
......
src/components/footer/hy-footer-base/hy-footer-base.tsx
+ 8
− 2
View file @ 21986d0f
......@@ -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>
......
src/components/footer/hy-footer-link-item/hy-footer-link-item.scss
+ 21
− 0
View file @ 21986d0f
......@@ -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;
}
}
}
src/components/hy-breadcrumbs/hy-breadcrumbs.scss
+ 22
− 4
View file @ 21986d0f
......@@ -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 {
......
src/components/hy-crisis-banner/hy-crisis-banner.scss 0 → 100644
+ 195
− 0
View file @ 21986d0f
: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;
}
}
}
src/components/hy-crisis-banner/hy-crisis-banner.tsx 0 → 100644
+ 39
− 0
View file @ 21986d0f
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>
);
}
}
src/components/hy-crisis-banner/readme.md 0 → 100644
+ 30
− 0
View file @ 21986d0f
# 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
src/components/hy-hero/hy-hero.scss
+ 16
− 1
View file @ 21986d0f
......@@ -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;
}
......
src/components/hy-shortcuts/hy-shortcuts.scss
+ 7
− 0
View file @ 21986d0f
......@@ -116,6 +116,13 @@
}
}
}
&:hover {
color: var(--brand-main);
svg {
fill: var(--brand-main);
}
}
}
}
}
src/components/icon/Alert.tsx 0 → 100644
+ 12
− 0
View file @ 21986d0f
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;
src/components/icon/HeartSupport.tsx 0 → 100644
+ 11
− 0
View file @ 21986d0f
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;
src/components/icon/icon.tsx
+ 3
− 0
View file @ 21986d0f
......@@ -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} />,
......
src/components/icon/icons.tsx
+ 2
− 0
View file @ 21986d0f
......@@ -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';
......
src/components/icon/readme.md
+ 2
− 0
View file @ 21986d0f
......@@ -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
......
src/components/navigation/menu-item-sidebar/menu-item-sidebar.scss
+ 4
− 2
View file @ 21986d0f
......@@ -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);
}
......
src/components/navigation/menu-language/menu-language.scss
+ 7
− 0
View file @ 21986d0f
......@@ -66,7 +66,14 @@
}
&:hover {
color: var(--brand-main);
cursor: pointer;
span {
color: var(--brand-main);
}
svg {
fill: var(--brand-main);
}
}
&.is-open {
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment