AV-2487: Implement suomifi design to hero

drupal/modules/avoindata-hero/avoindata_hero.module

@@ -90,13 +90,11 @@ class AvoindataHeroHandler implements TrustedCallbackInterface
 
     foreach ($statistics as $statistic) {
     $statistics_markup .= <<<EOT
-        <div class="text-center">
-                    <h2>{$statistic['count']}</h2>
-                    <h4>
-                        <a href="/data/{$language}/{$statistic['url']}">
-                            <strong>{$statistic['text']}</strong>
-                        </a>
-                    </h4>
+        <div class="text-center hero-stats">
+                    <a href="/data/{$language}/{$statistic['url']}">
+                      <div class="hero-count">{$statistic['count']}</div>
+                      <div class="hero-text">{$statistic['text']}</div>
+                    </a>
                 </div>
 EOT;
     }

drupal/modules/avoindata-hero/templates/avoindata_hero_form.html.twig

@@ -11,52 +11,48 @@
     {{ form.form_build_id }}
     {{ form.form_token }}
     {{ form.form_id }}
-    <div class="avoindata-hero-search-container">
-        <div>
-            <div class="d-inline-block avoindata-frontpage-header-text-container">
-                <h1>
-                    {% trans %}
-                        All Finnish open data from one place
-                    {% endtrans %}
-                </h1>
-            </div>
+    <div class="avoindata-hero-search-container container">
+        <div class="d-inline-block avoindata-frontpage-header-text-container">
+            <h1>
+                {% trans %}
+                    All Finnish open data from one place
+                {% endtrans %}
+            </h1>
         </div>
         <!-- TODO: Change justify "evenly" to "between" -->
         <div class="d-flex flex-wrap justify-content-evenly mt-2">
           {{ form.statistics }}
         </div>
-        <div class="ytp-bg-highlight-base d-flex p-3 mt-4">
-            <div class="flex-1">
+        <div class="hero-search-form">
+          <div class="ytp-bg-highlight-base d-flex p-1 mt-4">
+              <div class="flex-1">
                 <div class="ytp-input-with-icon-frontpage">
-                    {% set placeholder %}
-                        {%- trans -%}
-                        Type what are you searching for
-                        {%- endtrans -%}
-                    {% endset %}
-                    <input
-                        id="edit-search"
-                        name="search"
-                        type="text"
-                        class="ytp-input-element-frontpage color-depth-dark27"
-                        placeholder="{{ placeholder }}"
-                    >
+                  {% set placeholder %}
+                      {%- trans -%}
+                      Type what are you searching for
+                      {%- endtrans -%}
+                  {% endset %}
+                  <input
+                      id="edit-search"
+                      name="search"
+                      type="text"
+                      class="ytp-input-element-frontpage color-depth-dark27"
+                      placeholder="{{ placeholder }}"
+                  >
+                  <button type="submit" class="hero-button-submit" aria-label="{% trans %}Search{% endtrans %}">
+                    <i class="fa fa-search" aria-hidden="true"></i>
+                  </button>
                 </div>
-            </div>
-            <div class="position-relative">
-                <button type="submit" class="hero-button-submit">
-                    {% trans %}
-                        Search
-                    {% endtrans %}
-                </button>
-            </div>
-        </div>
-        {{ form.searchfilter }}
-        <div class="d-flex mt-3 justify-content-end">
-            <a href="/data/{{ form['#language'] }}/advanced_search">
-                {% trans %}
-                    Use advanced search
-                {% endtrans %}
-            </a>
+              </div>
+          </div>
+          {{ form.searchfilter }}
+          <div class="d-flex mt-3 justify-content-end">
+              <a href="/data/{{ form['#language'] }}/advanced_search">
+                  {% trans %}
+                      Use advanced search
+                  {% endtrans %}
+              </a>
+          </div>
         </div>
     </div>
 </div>

opendata-assets/src/scss/common.scss

@@ -1,9 +1,8 @@
 @use "./variables/suomifidesign" as tokens;
 @import 'variables';
 
-
-body {
-  color: tokens.$fi-color-black-base;
+:root {
+  --bs-body-color: #{tokens.$fi-color-black-base};
 }
 
 h1,
@@ -12,7 +11,6 @@ h3,
 h4,
 h5,
 h6 {
-  color: tokens.$fi-color-black-base;
   text-rendering: optimizelegibility;
 }
 

opendata-assets/src/scss/components/forms.scss

@@ -534,7 +534,6 @@ fieldset.checkboxes {
   @extend .ytp-input-with-icon;
 
   height: 40px;
-  margin-right: 10px;
 }
 
 .ytp-group-title {

opendata-assets/src/scss/drupal/style.scss

@@ -135,11 +135,11 @@ p:last-child,
 
 // Drupal Hero Module
 .avoindata-hero {
-  // TODO: use suomi.fi colors
-  background-color: $suomi-brandBase;
+  background: $background-hero-image 50%/cover no-repeat;
   padding: 60px 50px;
   position: relative;
-  color: $popularTextColor;
+  color: tokens.$fi-color-white-base;
+  border-bottom: tokens.$fi-color-developer-turquoise 10px solid;
 
   &::before {
     content: '';
@@ -156,24 +156,27 @@ p:last-child,
   }
 
   h1 {
-    font-size: $font-size__module-large-h1;
-    font-weight: $font-weight-heavier;
-    font-family: $font-family-sans-serif-semibold;
+    @include tokens.fi-text-heading1-hero;
   }
 
   p {
     line-height: 23px;
   }
 
   a {
-    color: $popularTextColor;
+    color: tokens.$fi-color-white-base;
     text-decoration: none;
   }
 
+  .hero-count {
+    @include tokens.fi-text-heading2
+  }
+
+  .hero-text {
+    @include tokens.fi-text-heading4;
+  }
+
   .avoindata-hero-search-container {
-    max-width: $opendata-container-max-width;
-    float: none;
-    display: block;
     margin: 0 auto;
 
     // NOTE: Without this you can't click the content inside.
@@ -230,6 +233,11 @@ p:last-child,
       border-radius: 0 4px 4px 0;
     }
   }
+
+  .hero-search-form {
+    max-width: map-get($container-max-widths, md);
+    margin: auto;
+  }
 }
 
 // Avoindata Categories
@@ -1806,6 +1814,5 @@ p:last-child,
   border-radius: 2px;
   border: none;
   height: 40px;
-  width: 64px;
-  color: white;
+  color: tokens.$fi-color-depth-dark1;
 }

opendata-assets/src/scss/fonts.scss

@@ -42,3 +42,68 @@
     url('../fonts/source-sans-pro-v21-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
     url('../fonts/source-sans-pro-v21-latin-600.svg#SourceSansPro') format('svg'); /* Legacy iOS */
 }
+
+/* source-sans-pro fonts from suomifi for using with tokens */
+@font-face{
+  font-family: 'Source Sans Pro';
+  font-weight: 200;
+  font-style: normal;
+  font-stretch: normal;
+  src: url('../fonts/SourceSansPro-ExtraLight.ttf.woff2') format('woff2')
+}
+
+@font-face{
+  font-family: 'Source Sans Pro';
+  font-weight: 200;
+  font-style: italic;
+  font-stretch: normal;
+  src: url('../fonts/SourceSansPro-ExtraLightIt.ttf.woff2') format('woff2')
+}
+
+@font-face{
+  font-family: 'Source Sans Pro';
+  font-weight: 300;
+  font-style: normal;
+  font-stretch: normal;
+  src: url('../fonts/SourceSansPro-Light.ttf.woff2') format('woff2')
+}
+
+@font-face{
+  font-family: 'Source Sans Pro';
+  font-weight: 300;
+  font-style: italic;
+  font-stretch: normal;
+  src: url('../fonts/SourceSansPro-LightIt.ttf.woff2') format('woff2')
+}
+
+@font-face{
+  font-family: 'Source Sans Pro';
+  font-weight: 400;
+  font-style: normal;
+  font-stretch: normal;
+  src: url('../fonts/SourceSansPro-Regular.ttf.woff2') format('woff2')
+}
+
+@font-face{
+  font-family: 'Source Sans Pro';
+  font-weight: 400;
+  font-style: italic;
+  font-stretch: normal;
+  src: url('../fonts/SourceSansPro-It.ttf.woff2') format('woff2')
+}
+
+@font-face{
+  font-family: 'Source Sans Pro';
+  font-weight: 600;
+  font-style: normal;
+  font-stretch: normal;
+  src: url('../fonts/SourceSansPro-Semibold.ttf.woff2') format('woff2')
+}
+
+@font-face{
+  font-family: 'Source Sans Pro';
+  font-weight: 600;
+  font-style: italic;
+  font-stretch: normal;
+  src: url('../fonts/SourceSansPro-SemiboldIt.ttf.woff2') format('woff2')
+}

opendata-assets/src/scss/utility.scss

@@ -114,88 +114,6 @@
   @include flex(2 2 0);
 }
 
-// --------------------
-// MARGINS AND PADDINGS
-// --------------------
-// This function creates bootstrap 4 like padding and margin classes
-// https://getbootstrap.com/docs/4.3/utilities/spacing/
-@mixin make-margin-padding-css($index, $size-px) {
-  .p-#{$index} {
-    padding: $size-px;
-  }
-
-  .pt-#{$index} {
-    padding-top: $size-px;
-  }
-
-  .pr-#{$index} {
-    padding-right: $size-px;
-  }
-
-  .pb-#{$index} {
-    padding-bottom: $size-px;
-  }
-
-  .pl-#{$index} {
-    padding-left: $size-px;
-  }
-
-  .px-#{$index} {
-    padding-left: $size-px;
-    padding-right: $size-px;
-  }
-
-  .py-#{$index} {
-    padding-top: $size-px;
-    padding-bottom: $size-px;
-  }
-
-  .m-#{$index} {
-    margin: $size-px;
-  }
-
-  .mt-#{$index} {
-    margin-top: $size-px;
-  }
-
-  .mr-#{$index} {
-    margin-right: $size-px;
-  }
-
-  .mb-#{$index} {
-    margin-bottom: $size-px;
-  }
-
-  .ml-#{$index} {
-    margin-left: $size-px;
-  }
-
-  .mx-#{$index} {
-    margin-left: $size-px;
-    margin-right: $size-px;
-  }
-
-  .my-#{$index} {
-    margin-top: $size-px;
-    margin-bottom: $size-px;
-  }
-}
-
-@mixin make-margins-and-paddings($size: 4, $index: 1, $increment: 2) {
-  @if $size < 128 {
-    @include make-margins-and-paddings($size * $increment, $index + 1);
-
-    $size-px: unquote('#{$size}px');
-
-    @include make-margin-padding-css($index, $size-px);
-  }
-}
-
-// Creates with index 0, by adding this here it can be overriden with custom numbers
-// example: <div class="m-0 mb-2">  <---  resets other margins to zero but margin bottom is 2
-@include make-margin-padding-css(0, 0);
-@include make-margins-and-paddings;
-
 // ------
 // COLORS
 // ------

opendata-assets/src/scss/variables.scss

@@ -31,7 +31,7 @@ $brand-primary: $opendata-brand-primary;
 $brand-info: $opendata-brand-decorative;
 $opendata-container-max-width: 1110px;
 $opendata-categories-container-max-width: 1500px;
-$background-hero-image: url("/themes/avoindata/images/logo/opendata.svg");
+$background-hero-image: url("/themes/avoindata/images/developer_frontpage_hero.webp");
 
 // Bootstrap: Alerts
 $alert-padding: 8px;