Merge branch 'development' of version.helsinki.fi:julkiset-sivut/design-system-lib into development

src/components/adjacent-image-text/adjacent-image-text.tsx

@@ -30,8 +30,8 @@ export class AdjacentImageText implements ComponentInterface {
 
     const imageLeftClassAttributes = ['hy-adjacent-image-text__image-container'].join(' ');
 
-    const aspectRatioWidth = 3;
-    const aspectRatioHeight = 2;
+    const aspectRatioWidth = 6;
+    const aspectRatioHeight = 4;
     const aspect = (aspectRatioHeight / aspectRatioWidth) * 100;
     const aspectRatio = {
       '--aspectRatio': `${aspect}%` as 'aspectRatio',

src/components/heading/heading.scss

@@ -5,12 +5,10 @@
 .hy-heading__container {
   display: flex;
   flex-direction: column-reverse;
-  padding: 1.5rem 0 1rem;
   width: 100%;
 
   @include breakpoint($medium) {
     flex-direction: row;
-    padding: 2rem 0 1.5rem;
   }
 
   &__subsection {
@@ -21,13 +19,36 @@
     }
   }
 
-  h1 {
-    padding: 0.5rem 0 1.375rem;
+  // H1 content page title
+  h1.hy-heading__default {
+    padding: 8px 0 24px 0;
+
+    @include breakpoint($wide) {
+      // > 960px
+      padding: 16px 0 28px 0;
+    }
+
+    @include breakpoint($extrawide) {
+      // > 1200px
+      padding: 16px 0 32px 0;
+    }
+  }
+
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    padding: 1.5rem 0 1rem;
 
     @include breakpoint($medium) {
-      padding: 1rem 0 2.375rem;
+      padding: 2rem 0 1.5rem;
     }
   }
+
+  .hy-heading__introduction {
+    padding: 0;
+  }
 }
 
 .hy-heading {
@@ -140,17 +161,16 @@ h3.hy-heading__landingsection {
 }
 
 /*
-  H1 used in Hero and Introduction paragraphs.
+  H1 used in Hero paragraph.
 */
-.hy-heading__introduction {
+h1.hy-heading__introduction {
+  @include font-size(32px, 32px);
   @include font-weight($bold);
 
   color: inherit;
   font-family: var(--main-font-family);
-  margin-bottom: var(--gutter-medium);
-
-  @include font-size(32px, 32px);
   letter-spacing: -1px;
+  margin-bottom: 0;
 
   @include breakpoint($narrow) {
     // > 480px
@@ -171,6 +191,49 @@ h3.hy-heading__landingsection {
   }
 }
 
+/*
+  H2 used in Introduction paragraph.
+*/
+h2.hy-heading__introduction {
+  @include font-size(28px, 32px);
+  @include font-weight($bold);
+
+  //color: inherit;
+  font-family: var(--main-font-family);
+  letter-spacing: -0.88px;
+  margin-bottom: 16px;
+  margin-top: 36px;
+  padding: 0;
+  text-transform: uppercase;
+
+  @include breakpoint($narrow) {
+    // > 960px
+    @include font-size(40px, 40px);
+    letter-spacing: -1.25px;
+    margin-bottom: 24px;
+    margin-top: 46px;
+  }
+
+  @include breakpoint($wide) {
+    // > 960px
+    @include font-size(40px, 40px);
+    letter-spacing: -1.25px;
+    margin-top: 0;
+  }
+
+  @include breakpoint($extrawide) {
+    // > 1200px
+    @include font-size(48px, 52px);
+    letter-spacing: -1.6px;
+  }
+
+  @include breakpoint($overwide) {
+    // > 1400px
+    @include font-size(54px, 40px);
+    letter-spacing: -1.69px;
+  }
+}
+
 h1,
 h2,
 h3,
@@ -183,8 +246,9 @@ h6 {
   padding: 0;
   margin: 0;
   width: 100%;
+
   &.negative {
-    color: white;
+    color: var(--grayscale-white);
   }
 }
 

src/components/heading/heading.tsx

@@ -20,21 +20,9 @@ export class Heading {
 
   render() {
     const headingInVariants = this.heading in HeadingVarians;
-    const classAttributes = [
-      'hy-heading',
-      this.negative ? 'negative' : '',
-      `hy-heading__${this.section}`,
-      //this.section == 'introduction' ? 'hy-heading__introduction' : '',
-      //this.section == 'landingsection' ? `hy-heading__landingsection` : '',
-      //this.section == 'contentsection' ? `hy-heading__contentsection` : '',
-    ];
-    //const sectionClassAttributes = [this.section == 'subsection' ? `hy-heading__${this.section}` : ''].join(' ');
-    const sectionClassAttributes = [
-      `hy-heading__${this.section}`,
-      //this.section == 'subsection' ? `hy-heading__${this.section}` : '',
-      //this.section == 'landingsection' ? `hy-heading__${this.section}` : '',
-      //this.section == 'contentsection' ? `hy-heading__${this.section}` : '',
-    ].join(' ');
+    const classAttributes = ['hy-heading', this.negative ? 'negative' : '', `hy-heading__${this.section}`];
+
+    const sectionClassAttributes = [`hy-heading__${this.section}`].join(' ');
 
     const containerSectionClass = ['hy-heading__container', `hy-heading__container__${this.section}`].join(' ');
     return (

src/components/heading/readme.md

@@ -99,6 +99,7 @@ Provide heading attribute for the component to choose what type of heading to us
 
 - [hy-hero](../hy-hero)
 - [hy-introduction](../hy-introduction)
+- [hy-shortcuts](../hy-shortcuts)
 
 ### Graph
 
@@ -106,6 +107,7 @@ Provide heading attribute for the component to choose what type of heading to us
 graph TD;
   hy-hero --> hy-heading
   hy-introduction --> hy-heading
+  hy-shortcuts --> hy-heading
   style hy-heading fill:#f9f,stroke:#333,stroke-width:4px
 ```
 

src/components/hy-box/readme.md

@@ -25,7 +25,6 @@
 - [hy-accordion-item](../accordion-item)
 - [hy-adjacent-image-text](../adjacent-image-text)
 - [hy-banner](../hy-banner)
-- [hy-ingress](../ingress)
 - [hy-introduction](../hy-introduction)
 - [hy-key-figure-group](../hy-key-figure-group)
 - [hy-key-highlight-group](../hy-key-highlight-group)
@@ -42,7 +41,6 @@ graph TD;
   hy-accordion-item --> hy-box
   hy-adjacent-image-text --> hy-box
   hy-banner --> hy-box
-  hy-ingress --> hy-box
   hy-introduction --> hy-box
   hy-key-figure-group --> hy-box
   hy-key-highlight-group --> hy-box

src/components/hy-hero/hy-hero.scss

@@ -151,23 +151,23 @@
     letter-spacing: -1.88px;
     margin-top: -32px;
     max-width: 80%;
-    padding: 32px 32px 24px 0;
+    padding: 32px 32px 0 0;
     text-transform: uppercase;
     z-index: 2;
 
     @include breakpoint($medium) {
       @include font-size(48px, 54px);
       margin-top: -48px;
-      padding: 48px 40px 28px 0;
+      padding: 48px 40px 0 0;
     }
 
     @include breakpoint($wide) {
       @include font-size(60px, 60px);
 
-      margin: 0 0 -24px 0;
-      padding: 24px 24px 24px 0;
-      width: fit-content;
+      margin: 0;
       max-width: 56.94%;
+      padding: 24px 24px 0 0;
+      width: fit-content;
     }
   }
 
@@ -178,15 +178,18 @@
     font-family: var(--main-font-family);
     font-weight: 600;
     letter-spacing: -0.1px;
-    padding: 0;
+    padding: 24px 24px 32px 0;
+
+    @include breakpoint($narrow) {
+      padding: 28px 24px 40px 0;
+    }
 
     @include breakpoint($wide) {
       @include font-size(18px, 24px);
 
       line-height: 32px;
-      padding: 24px 24px 24px 0;
-      width: fit-content;
       max-width: 48.33%;
+      width: fit-content;
     }
   }
 
@@ -233,9 +236,13 @@
       padding: 32px 0 40px 0;
       width: fit-content;
 
+      @include breakpoint($narrow) {
+        padding: 0 24px 48px 0;
+      }
+
       @include breakpoint($wide) {
         align-self: flex-start;
-        padding: 0 24px 24px 0;
+        padding: 0 24px 56px 0;
       }
     }
   }

src/components/hy-shortcuts/hy-shortcuts.scss

@@ -5,24 +5,6 @@
 .hy-shortcuts {
   overflow: hidden;
 
-  .list-title {
-    color: var(--brand-main-nearly-black);
-    font-family: var(--main-font-family);
-    font-size: 22px;
-    font-weight: bold;
-    letter-spacing: -0.69px;
-    line-height: 22px;
-    padding: 48px 0 20px 0;
-    text-transform: uppercase;
-
-    @include breakpoint($medium) {
-      font-size: 26px;
-      letter-spacing: -0.82px;
-      line-height: 26px;
-      padding: 56px 0 24px 0;
-    }
-  }
-
   .shortcut-link-container {
     display: flex;
     flex-wrap: wrap;

src/components/hy-shortcuts/hy-shortcuts.tsx

@@ -4,6 +4,7 @@ export interface ShortcutLinkValue {
 }
 
 import {Component, ComponentInterface, h, Host, Prop, Watch} from '@stencil/core';
+import {HeadingVarians} from '../../utils/utils';
 
 @Component({
   tag: 'hy-shortcuts',
@@ -38,7 +39,11 @@ export class HyShortcuts implements ComponentInterface {
     return (
       <Host>
         <div class={classAttributes}>
-          {this.listHeading.length > 0 && <div class={'list-title'}>{this.listHeading}</div>}
+          {this.listHeading.length > 0 && (
+            <hy-heading class="list-title" heading={HeadingVarians.h2}>
+              {this.listHeading}
+            </hy-heading>
+          )}
           <div class="shortcut-link-container">
             {this._dataItems.map((x, index) => {
               let isFirstLine = '';

src/components/hy-shortcuts/readme.md

@@ -13,6 +13,7 @@
 
 ### Depends on
 
+- [hy-heading](../heading)
 - [hy-icon](../icon)
 - [hy-box](../hy-box)
 
@@ -20,6 +21,7 @@
 
 ```mermaid
 graph TD;
+  hy-shortcuts --> hy-heading
   hy-shortcuts --> hy-icon
   hy-shortcuts --> hy-box
   style hy-shortcuts fill:#f9f,stroke:#333,stroke-width:4px

src/components/ingress/ingress.scss

@@ -8,4 +8,16 @@ p.hy-ingress {
   font-size: 20px;
   letter-spacing: -0.1px;
   line-height: 32px;
+  margin: 0;
+  margin-bottom: 3.25rem;
+
+  @include breakpoint($narrow) {
+    // > 480px
+    margin-bottom: 4.5rem;
+  }
+
+  @include breakpoint($wide) {
+    // > 960px
+    margin-bottom: 5.5rem;
+  }
 }

src/components/ingress/ingress.tsx

@@ -3,7 +3,7 @@ import {Component, h, Host} from '@stencil/core';
 @Component({
   tag: 'hy-ingress',
   styleUrl: 'ingress.scss',
-  shadow: true,
+  shadow: false,
 })
 export class Ingress {
   render() {
@@ -13,7 +13,6 @@ export class Ingress {
         <p class={classAttributes.join(' ')}>
           <slot></slot>
         </p>
-        <hy-box pb="3, 5, 6" />
       </Host>
     );
   }

src/components/ingress/readme.md

@@ -2,20 +2,6 @@
 
 <!-- Auto Generated Below -->
 
-## Dependencies
-
-### Depends on
-
-- [hy-box](../hy-box)
-
-### Graph
-
-```mermaid
-graph TD;
-  hy-ingress --> hy-box
-  style hy-ingress fill:#f9f,stroke:#333,stroke-width:4px
-```
-
 ---
 
 Helsinki University Design System