Nxstage 812 quote

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>;

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;
     }
   }
 }

src/components/hy-main/hy-main.scss

@@ -31,6 +31,7 @@
         width: 80%;
       }
       @include breakpoint($overwide) {
+        border: 1px solid green;
         padding: 0 2rem;
       }
     }

src/components/hy-quote/hy-quote.scss

+: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);
+    }
+  }
+}

src/components/hy-quote/hy-quote.tsx

+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>
+    );
+  }
+}

src/components/hy-quote/readme.md

+# 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

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;
+      }
+    }
   }
 }

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} />,
 };

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';

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

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;
 }