Merge branch 'fix_h2_line' into 'development'

Fix h2 subsection line

See merge request julkiset-sivut/design-system-lib!62

src/components/heading/heading.scss

@@ -62,7 +62,8 @@
 /*
   Headers (ex. h2, h3) used in Content pages (no caps and line).
 */
-.hy-heading__subsection {
+.hy-heading__subsection--divider,
+.hy-heading__contentsection--divider {
   flex-shrink: 2;
   overflow: hidden;
   width: 100%;
@@ -111,31 +112,6 @@ h2.hy-heading__landingsection {
   }
 }
 
-// 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);

src/components/heading/heading.tsx

@@ -22,7 +22,7 @@ export class Heading {
     const headingInVariants = this.heading in HeadingVarians;
     const classAttributes = ['hy-heading', this.negative ? 'negative' : '', `hy-heading__${this.section}`];
 
-    const sectionClassAttributes = [`hy-heading__${this.section}`].join(' ');
+    const sectionClassAttributes = [`hy-heading__${this.section}--divider`].join(' ');
 
     const containerSectionClass = ['hy-heading__container', `hy-heading__container__${this.section}`].join(' ');
     return (

src/components/paragraph-text/paragraph-text.scss

@@ -7,9 +7,124 @@
   font-family: var(--main-font-family);
   font-size: 14px;
   line-height: 20px;
-  
+
   @include breakpoint($medium) {
     font-size: var(--base-font-size);
     line-height: 24px;
   }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    color: var(--brand-main-nearly-black);
+    font-family: var(--main-font-family);
+    font-weight: 700;
+    padding: 0 0 1rem;
+    margin: 0;
+    width: 100%;
+
+    @include breakpoint($medium) {
+      padding: 0 0 1.5rem;
+    }
+
+    &.negative {
+      color: var(--grayscale-white);
+    }
+  }
+
+  h1 {
+    @include font-size(32px, 32px);
+    letter-spacing: -1px;
+    text-transform: uppercase;
+
+    @include breakpoint($narrow) {
+      // > 480px
+      @include font-size(46px, 52px);
+      letter-spacing: -1.5px;
+    }
+
+    @include breakpoint($extrawide) {
+      // > 1200px
+      @include font-size(52px, 64px);
+      letter-spacing: -1.6px;
+    }
+
+    @include breakpoint($overwide) {
+      // > 1400px
+      @include font-size(52px, 64px);
+      letter-spacing: -1.6px;
+    }
+  }
+
+  // default h2 used in content pages
+  h2 {
+    @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;
+    }
+  }
+
+  // default h3 used in content pages
+  h3 {
+    @include font-size(22px, 28px);
+    letter-spacing: -0.7px;
+
+    @include breakpoint($narrow) {
+      // > 480px
+      @include font-size(26px, 32px);
+      letter-spacing: -0.8px;
+    }
+  }
+
+  h4 {
+    @include font-size(18px, 24px);
+    letter-spacing: -0.56px;
+
+    @include breakpoint($narrow) {
+      // > 480px
+      @include font-size(22px, 28px);
+      letter-spacing: -0.69px;
+    }
+  }
+
+  h5 {
+    @include font-size(16px, 20px);
+    letter-spacing: -0.5px;
+
+    @include breakpoint($narrow) {
+      // > 480px
+      @include font-size(18px, 24px);
+      letter-spacing: -0.56px;
+    }
+  }
+
+  h6 {
+    @include font-size(14px, 16px);
+    letter-spacing: -0.44px;
+
+    @include breakpoint($narrow) {
+      // > 480px
+      @include font-size(16px, 20px);
+      letter-spacing: -0.5px;
+    }
+  }
 }

src/index.html

@@ -244,7 +244,7 @@
         <section>
           <a href="#this-is-an-accordion-item-3--title">Click here to go to Accordion Item 3</a>
         </section>
-
+        <hy-heading heading="h2" section="subsection">This is a subsection heading</hy-heading>
         <hy-shortcuts
           list-heading="Shortcuts list heading number one"
           data-items='[
@@ -254,7 +254,15 @@
   {"heading":"Example link label three", "url":"https://yle.fi"}]'
         >
         </hy-shortcuts>
-
+        <hy-hero
+          color-variant="blue"
+          image="https://www.helsinki.fi/sites/default/files/styles/16_9_huge/public/ambassadors_toolo_4_1920x1080_original_hero_valoisampi.jpg"
+          heading="Congratulations to our new students"
+          description="University of Helsinki is ranged high in comparison with the worlds research universities."
+          url="https://www.helsinki.fi/fi/uutiset"
+          url-title="See latest publications"
+          sc-label="Aria label"
+        />
         <hy-banner
           text-title="Check upcoming conferences"
           text-description="Take advantage of our curated list of high profile conferences near Helsinki and in the Nordics."