diff --git a/src/components.d.ts b/src/components.d.ts
index 4b9ad4b5725494ba56f801dbfa28a73ce73ab281..d332d925e5a483bca4631c46a43bf740341de8bd 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -360,6 +360,9 @@ export namespace Components {
imageUrl?: string;
textTitle?: string;
}
+ interface HyQuote {
+ quoteSignature?: string;
+ }
interface HyRow {
/**
* justify-content property.
@@ -639,6 +642,11 @@ declare global {
prototype: HTMLHyProminentImageElement;
new (): HTMLHyProminentImageElement;
};
+ interface HTMLHyQuoteElement extends Components.HyQuote, HTMLStencilElement {}
+ var HTMLHyQuoteElement: {
+ prototype: HTMLHyQuoteElement;
+ new (): HTMLHyQuoteElement;
+ };
interface HTMLHyRowElement extends Components.HyRow, HTMLStencilElement {}
var HTMLHyRowElement: {
prototype: HTMLHyRowElement;
@@ -739,6 +747,7 @@ declare global {
'hy-process': HTMLHyProcessElement;
'hy-process-flow-box': HTMLHyProcessFlowBoxElement;
'hy-prominent-image': HTMLHyProminentImageElement;
+ 'hy-quote': HTMLHyQuoteElement;
'hy-row': HTMLHyRowElement;
'hy-section-container': HTMLHySectionContainerElement;
'hy-shortcuts': HTMLHyShortcutsElement;
@@ -1082,6 +1091,9 @@ declare namespace LocalJSX {
imageUrl?: string;
textTitle?: string;
}
+ interface HyQuote {
+ quoteSignature?: string;
+ }
interface HyRow {
/**
* justify-content property.
@@ -1184,6 +1196,7 @@ declare namespace LocalJSX {
'hy-process': HyProcess;
'hy-process-flow-box': HyProcessFlowBox;
'hy-prominent-image': HyProminentImage;
+ 'hy-quote': HyQuote;
'hy-row': HyRow;
'hy-section-container': HySectionContainer;
'hy-shortcuts': HyShortcuts;
@@ -1249,6 +1262,7 @@ declare module '@stencil/core' {
'hy-process': LocalJSX.HyProcess & JSXBase.HTMLAttributes<HTMLHyProcessElement>;
'hy-process-flow-box': LocalJSX.HyProcessFlowBox & JSXBase.HTMLAttributes<HTMLHyProcessFlowBoxElement>;
'hy-prominent-image': LocalJSX.HyProminentImage & JSXBase.HTMLAttributes<HTMLHyProminentImageElement>;
+ 'hy-quote': LocalJSX.HyQuote & JSXBase.HTMLAttributes<HTMLHyQuoteElement>;
'hy-row': LocalJSX.HyRow & JSXBase.HTMLAttributes<HTMLHyRowElement>;
'hy-section-container': LocalJSX.HySectionContainer & JSXBase.HTMLAttributes<HTMLHySectionContainerElement>;
'hy-shortcuts': LocalJSX.HyShortcuts & JSXBase.HTMLAttributes<HTMLHyShortcutsElement>;
diff --git a/src/components/hy-main-content-wrapper/hy-main-content-wrapper.scss b/src/components/hy-main-content-wrapper/hy-main-content-wrapper.scss
index 42aa09b56d202a1e5d3a0056aa9405416801ec0b..706861a8df763f183c86648d9dadf8b7b71bea6e 100644
--- a/src/components/hy-main-content-wrapper/hy-main-content-wrapper.scss
+++ b/src/components/hy-main-content-wrapper/hy-main-content-wrapper.scss
@@ -19,7 +19,9 @@
// Large desktop Layout >1441px
@include breakpoint($overwide) {
- max-width: 80rem; // 1216px + (32px + 32px side margins)
+ border: 1px solid red;
+ max-width: 1216px;
+ padding: 0;
}
}
}
@@ -39,7 +41,8 @@
// Large desktop Layout >1441px
@include breakpoint($overwide) {
- max-width: 94rem; // 1440px + (32px + 32px side margins)
+ max-width: 1440px;
+ padding: 0;
}
}
}
diff --git a/src/components/hy-main/hy-main.scss b/src/components/hy-main/hy-main.scss
index d4563441f5704031f5f79a624dc62ec53a8a86b4..05be8564d38b54fe8598ba0b46defba62e5b10ff 100644
--- a/src/components/hy-main/hy-main.scss
+++ b/src/components/hy-main/hy-main.scss
@@ -31,6 +31,7 @@
width: 80%;
}
@include breakpoint($overwide) {
+ border: 1px solid green;
padding: 0 2rem;
}
}
diff --git a/src/components/hy-quote/hy-quote.scss b/src/components/hy-quote/hy-quote.scss
new file mode 100644
index 0000000000000000000000000000000000000000..8a7c4e83946bc1f8b3e0ace2ee0f87dff1ab18ad
--- /dev/null
+++ b/src/components/hy-quote/hy-quote.scss
@@ -0,0 +1,94 @@
+:host {
+ display: block;
+}
+
+.hy-quote {
+ display: flex;
+ flex-direction: row;
+
+ padding: 0 8px;
+
+ @include breakpoint($narrow) {
+ flex-direction: column;
+ padding: 0;
+ }
+
+ @include breakpoint($wide) {
+ flex-direction: row;
+ }
+
+ &__icon-wrapper {
+ margin-right: 20px;
+
+ @include breakpoint($narrow) {
+ margin-right: 0;
+ }
+
+ @include breakpoint($wide) {
+ margin-right: 24px;
+ }
+
+ @include breakpoint($overwide) {
+ margin-right: 32px;
+ }
+ }
+
+ &__icon {
+ svg {
+ fill: var(--brand-main-light);
+ height: 32px;
+ width: 32px;
+
+ @include breakpoint($wide) {
+ height: 40px;
+ width: 40px;
+ }
+ @include breakpoint($overwide) {
+ height: 48px;
+ width: 48px;
+ }
+ }
+ }
+
+ &__text {
+ @include font-size(16px, 24px);
+
+ color: var(--grayscale-black);
+ font-family: var(--main-font-family);
+ font-weight: 600;
+ letter-spacing: -0.1px;
+ padding-bottom: 16px;
+ padding-top: 0;
+
+ @include breakpoint($narrow) {
+ @include font-size(18px, 28px);
+ padding-top: 16px;
+ }
+
+ @include breakpoint($extrawide) {
+ @include font-size(20px, 32px);
+ padding-top: 0;
+ }
+ }
+
+ &__signature:before {
+ @include font-size(14px, 20px);
+ display: inline-block;
+ color: var(--grayscale-dark);
+ content: '-';
+ font-family: var(--main-font-family);
+ letter-spacing: 0;
+ padding-right: 3px;
+ }
+
+ &__signature {
+ @include font-size(14px, 20px);
+ color: var(--grayscale-dark);
+ font-family: var(--main-font-family);
+ letter-spacing: 0;
+
+ @include breakpoint($narrow) {
+ @include font-size(16px, 24px);
+ }
+ }
+}
diff --git a/src/components/hy-quote/hy-quote.tsx b/src/components/hy-quote/hy-quote.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..bf12c676607fb08ca1aa22f2bb782de37d64d901
--- /dev/null
+++ b/src/components/hy-quote/hy-quote.tsx
@@ -0,0 +1,28 @@
+import {Component, h, Prop} from '@stencil/core';
+
+@Component({
+ tag: 'hy-quote',
+ styleUrl: 'hy-quote.scss',
+ shadow: true,
+})
+export class HyQuote {
+ @Prop() quoteSignature?: string;
+
+ render() {
+ return (
+ <div class="hy-quote">
+ <span class="hy-quote__icon-wrapper">
+ <div class="hy-quote__icon">
+ <hy-icon icon={'hy-icon-quote'} size={48} />
+ </div>
+ </span>
+ <div class="hy-quote-text-wrapper">
+ <div class="hy-quote__text">
+ <slot></slot>
+ </div>
+ {this.quoteSignature && <div class="hy-quote__signature">{this.quoteSignature}</div>}
+ </div>
+ </div>
+ );
+ }
+}
diff --git a/src/components/hy-quote/readme.md b/src/components/hy-quote/readme.md
new file mode 100644
index 0000000000000000000000000000000000000000..64a197c9f64b564266c763a2a59bb23aa750d942
--- /dev/null
+++ b/src/components/hy-quote/readme.md
@@ -0,0 +1,27 @@
+# hy-quote
+
+<!-- Auto Generated Below -->
+
+## Properties
+
+| Property | Attribute | Description | Type | Default |
+| ---------------- | ----------------- | ----------- | -------- | ----------- |
+| `quoteSignature` | `quote-signature` | | `string` | `undefined` |
+
+## Dependencies
+
+### Depends on
+
+- [hy-icon](../icon)
+
+### Graph
+
+```mermaid
+graph TD;
+ hy-quote --> hy-icon
+ style hy-quote fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+---
+
+Helsinki University Design System
diff --git a/src/components/hy-two-columns/hy-two-columns.scss b/src/components/hy-two-columns/hy-two-columns.scss
index 2ef3d9bf202caacc6d2e690ffe66387619e26f64..00a6837dede32884cce845cf1c230f5df8d42ec7 100644
--- a/src/components/hy-two-columns/hy-two-columns.scss
+++ b/src/components/hy-two-columns/hy-two-columns.scss
@@ -30,16 +30,17 @@
}
.hy-two-columns--side {
- padding-left: 0;
- padding-right: 0;
+ margin-left: 0;
+ margin-right: 0;
+ @include breakpoint($narrow) {
+ margin-right: 5.79%;
+ }
@include breakpoint($medium) {
- padding-left: 0;
- padding-right: calc(100% / 12 * 0.5 + var(--gutter-medium));
+ margin-right: 8.5%;
}
@include breakpoint($overwide) {
- padding-right: calc(100% / 12 * 0.5 + var(--gutter-extrawide));
}
}
}
@@ -49,8 +50,11 @@
flex-basis: 100%;
width: 100%;
- @include breakpoint($medium) {
- flex-basis: calc(100% / 12 * 7);
+ @include breakpoint($narrow) {
+ flex-basis: 67.01%;
+ }
+ @include breakpoint($wide) {
+ flex-basis: 63%;
}
[slot='main'] {
@@ -61,22 +65,32 @@
&--side {
display: flex;
flex-basis: 100%;
+ margin-left: 0;
+ margin-right: 0;
padding-left: 0;
padding-right: 0;
width: 100%;
- @include breakpoint($medium) {
- flex-basis: calc(100% / 12 * 5);
- padding-left: calc(100% / 12 * 0.5 + var(--gutter-medium));
- padding-right: 0;
+ @include breakpoint($narrow) {
+ flex-basis: 32.99%; // sidebar width is always 4.5 column of the global 12-col content area grid.
+ margin-left: 5.79%; // (half of the column+gutter) of global 12-col grid = gap between main and sidebar
}
-
- @include breakpoint($overwide) {
- padding-left: calc(100% / 12 * 0.5 + var(--gutter-extrawide));
+ @include breakpoint($wide) {
+ flex-basis: 37%;
+ margin-left: 8.5%; // (1 column + gutter) of global 12-col grid = gap between main and sidebar
+ padding: 0;
}
[slot='side'] {
width: 100%;
}
+
+ // Key figure block inside Sidebar
+ hy-key-figure {
+ padding: 0 10.67%;
+ @include breakpoint($narrow) {
+ padding: 0;
+ }
+ }
}
}
diff --git a/src/components/icon/icon.tsx b/src/components/icon/icon.tsx
index 9c30a061bb07017eaf0ebbd1b7ad5be95314d5db..856929d6109691eb610f894d762a1386d25a19e3 100644
--- a/src/components/icon/icon.tsx
+++ b/src/components/icon/icon.tsx
@@ -19,6 +19,7 @@ const iconNames: IconName = {
'hy-icon-hy-logo': (p) => <icons.HyLogo {...p} />,
'hy-icon-image-gallery': (p) => <icons.ImageGallery {...p} />,
'hy-icon-link-arrow-down': (p) => <icons.LinkArrowDown {...p} />,
+ 'hy-icon-quote': (p) => <icons.IconQuote {...p} />,
'hy-icon-remove': (p) => <icons.Remove {...p} />,
'hy-icon-search': (p) => <icons.Search {...p} />,
};
diff --git a/src/components/icon/icons.tsx b/src/components/icon/icons.tsx
index 65225219c4a250770decd5d9461930ba4f0e5ea8..046b44e4d473b1790001f4626d8509ff57d5b930 100644
--- a/src/components/icon/icons.tsx
+++ b/src/components/icon/icons.tsx
@@ -42,6 +42,18 @@ export const IconArrowToRight: FunctionalComponent = (props: any) => {
);
};
+export const IconQuote: FunctionalComponent = (props: any) => {
+ return (
+ <svg viewBox="0 0 1000 660" {...props}>
+ <path
+ id="Quote-icon"
+ d="M222.8,660C330.3,422.9,407.2,212.5,453.5,29L433.8,0H131.1C104,186.2,60.3,406.2,0,660H222.8z M769.3,660
+ C876.8,422.9,953.7,212.5,1000,29l0,0L981.7,0H678.9c-29.7,202-74.7,422-135,660l0,0H769.3z"
+ />
+ </svg>
+ );
+};
+
export {default as AddToTodoList} from './AddToTodoList';
export {default as ArrowDown} from './ArrowDown';
export {default as ArrowUp} from './ArrowUp';
diff --git a/src/components/icon/readme.md b/src/components/icon/readme.md
index 3c1937f7e6e12131ccfaf394e37887e0792a2869..f60cfe02de93c63e5b28111f26ae3030efaf56e0 100644
--- a/src/components/icon/readme.md
+++ b/src/components/icon/readme.md
@@ -24,6 +24,7 @@
- [hy-menu-item](../navigation/menu-item)
- [hy-menu-language](../navigation/menu-language)
- [hy-menu-mobile-breadcrumb](../navigation/menu-mobile-breadcrumb)
+- [hy-quote](../hy-quote)
- [hy-shortcuts](../hy-shortcuts)
- [hy-site-header](../site-header)
- [hy-site-logo](../site-header/site-logo)
@@ -44,6 +45,7 @@ graph TD;
hy-menu-item --> hy-icon
hy-menu-language --> hy-icon
hy-menu-mobile-breadcrumb --> hy-icon
+ hy-quote --> hy-icon
hy-shortcuts --> hy-icon
hy-site-header --> hy-icon
hy-site-logo --> hy-icon
diff --git a/src/components/link-box/link-box.scss b/src/components/link-box/link-box.scss
index dd83d1b0819896babdd78d53d45e1558c562c007..282cfd4ae0f70f381981f8cc891adab507a81442 100644
--- a/src/components/link-box/link-box.scss
+++ b/src/components/link-box/link-box.scss
@@ -34,7 +34,9 @@
width: 100%;
}
}
+
:host(.big) {
+ display: flex;
@include breakpoint($medium) {
flex-grow: 1;
max-width: calc(((100% - #{var(--gutter-medium)} * 11) / 12) * 4 + #{var(--gutter-medium)} * 3);
@@ -49,7 +51,9 @@
width: calc(((100% - #{var(--gutter-extrawide)} * 11) / 12) * 4 + #{var(--gutter-extrawide)} * 3);
}
}
+
:host(.small) {
+ display: flex;
@include breakpoint($medium) {
flex-grow: 1;
max-width: calc(((100% - #{var(--gutter-medium)} * 11) / 12) * 6 + #{var(--gutter-medium)} * 5);
@@ -65,10 +69,12 @@
}
}
:host(.big:nth-of-type(3n + 0)) {
+ display: flex;
margin-right: 0;
}
:host(.small:nth-of-type(2n + 0)) {
+ display: flex;
@include breakpoint($medium) {
margin-right: 0;
}
@@ -81,12 +87,14 @@
}
:host(.small:nth-of-type(4n + 0)) {
+ display: flex;
@include breakpoint($medium) {
margin-right: 0;
}
}
:host(:last-of-type) {
+ display: flex;
margin-right: 0;
}