merge local dev with orifin

package.json

 {
   "name": "@itcenteratunihelsinki/huds-lib",
-  "version": "0.0.28",
+  "version": "0.0.29",
   "description": "Helsinki University Design System library",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

src/components/heading/heading.scss

@@ -48,7 +48,7 @@
 
   &:after {
     background-color: transparent;
-    border-bottom: 1px dashed var(--grayscale-dark);
+    border-bottom: 1px solid var(--grayscale-dark);
     content: ' ';
     display: flex;
     height: 2px;
@@ -65,6 +65,80 @@
   }
 }
 
+// h2 used in landing pages: caps, bigger font
+h2.hy-heading__landingsection {
+  @include font-size(28px, 32px);
+  letter-spacing: -0.88px;
+  text-transform: uppercase;
+
+  @include breakpoint($narrow) {
+    // > 480px
+    @include font-size(40px, 40px);
+    letter-spacing: -1.25px;
+  }
+
+  @include breakpoint($extrawide) {
+    // > 1200px
+    @include font-size(48px, 48px);
+    letter-spacing: -1.6px;
+  }
+
+  @include breakpoint($overwide) {
+    // > 1400px
+    @include font-size(54px, 54px);
+    letter-spacing: -1.8px;
+  }
+}
+
+// h2 used in landing pages: no caps,  line, different font
+h2.hy-heading__contentsection {
+  flex-shrink: 2;
+  overflow: hidden;
+  width: 100%;
+
+  &:after {
+    background-color: transparent;
+    border-bottom: 1px solid var(--grayscale-dark);
+    content: ' ';
+    display: flex;
+    height: 2px;
+    width: 100%;
+    margin-left: 0;
+    margin-bottom: 1rem;
+    position: relative;
+    top: 50%;
+    transform: translateY(-50%);
+
+    @include breakpoint($medium) {
+      margin-left: 2rem;
+    }
+  }
+}
+
+// h3 on landing pages use the same fonts as h2 on content pages; no line; no caps
+h3.hy-heading__landingsection {
+  @include font-size(26px, 32px);
+  letter-spacing: -0.8px;
+
+  @include breakpoint($narrow) {
+    // > 480px
+    @include font-size(32px, 32px);
+    letter-spacing: -1px;
+  }
+
+  @include breakpoint($extrawide) {
+    // > 1200px
+    @include font-size(40px, 48px);
+    letter-spacing: -1.2px;
+  }
+
+  @include breakpoint($overwide) {
+    // > 1400px
+    @include font-size(40px, 48px);
+    letter-spacing: -1.2px;
+  }
+}
+
 /*
   H1 used in Hero and Introduction paragraphs.
 */
@@ -162,6 +236,7 @@ h2 {
   }
 }
 
+// default h3 used in content pages
 h3 {
   @include font-size(22px, 28px);
   letter-spacing: -0.7px;

src/components/heading/heading.tsx

@@ -23,9 +23,19 @@ export class Heading {
     const classAttributes = [
       'hy-heading',
       this.negative ? 'negative' : '',
-      this.section == 'introduction' ? 'hy-heading__introduction' : '',
+      `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 = [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 containerSectionClass = ['hy-heading__container', `hy-heading__container__${this.section}`].join(' ');
     return (
       <Host>

src/components/heading/readme.md

@@ -87,11 +87,11 @@ Provide heading attribute for the component to choose what type of heading to us
 
 ## Properties
 
-| Property   | Attribute  | Description | Type                                                                                                                              | Default                                 |
-| ---------- | ---------- | ----------- | --------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------- |
-| `heading`  | `heading`  |             | `HeadingVarians.default \| HeadingVarians.h2 \| HeadingVarians.h3 \| HeadingVarians.h4 \| HeadingVarians.h5 \| HeadingVarians.h6` | `HeadingVarians.default as any`         |
-| `negative` | `negative` |             | `boolean`                                                                                                                         | `false`                                 |
-| `section`  | `section`  |             | `HeadingSectionVariants.default \| HeadingSectionVariants.introduction \| HeadingSectionVariants.subSection`                      | `HeadingSectionVariants.default as any` |
+| Property   | Attribute  | Description | Type                                                                                                                                                                                                 | Default                                 |
+| ---------- | ---------- | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------- |
+| `heading`  | `heading`  |             | `HeadingVarians.default \| HeadingVarians.h2 \| HeadingVarians.h3 \| HeadingVarians.h4 \| HeadingVarians.h5 \| HeadingVarians.h6`                                                                    | `HeadingVarians.default as any`         |
+| `negative` | `negative` |             | `boolean`                                                                                                                                                                                            | `false`                                 |
+| `section`  | `section`  |             | `HeadingSectionVariants.contentPageHeader \| HeadingSectionVariants.default \| HeadingSectionVariants.introduction \| HeadingSectionVariants.landingPageHeader \| HeadingSectionVariants.subSection` | `HeadingSectionVariants.default as any` |
 
 ## Dependencies
 

src/utils/utils.ts

@@ -25,6 +25,8 @@ export enum HeadingSectionVariants {
   default = 'default',
   subSection = 'subsection',
   introduction = 'introduction',
+  landingPageHeader = 'landingsection',
+  contentPageHeader = 'contentsection',
 }
 
 export enum LinkVariants {