Merge pull request #2068 from vrk-kpa/AV-2061_add_links_to_suojattudata

AV-2061: Add links to suojattudata

drupal/modules/avoindata-explore/avoindata_explore.module

@@ -33,6 +33,10 @@ function avoindata_explore_theme($existing, $type, $theme, $path) {
       'variables' => ['language' => NULL,],
       'template' => 'avoindata_support_block',
     ],
+    'avoindata_external' => [
+      'variables' => ['language' => NULL,],
+      'template' => 'avoindata_external_block'
+    ]
   ];
 }
 

drupal/modules/avoindata-explore/src/Plugin/Block/ExternalBlock.php

@@ -0,0 +1,28 @@
+<?php
+
+namespace Drupal\avoindata_explore\Plugin\Block;
+
+use Drupal\Core\Block\BlockBase;
+
+/**
+ * Provides a 'Avoindata external' Block.
+ *
+ * @Block(
+ *   id = "avoindata_external",
+ *   admin_label = @Translation("Avoindata External"),
+ *   category = @Translation("Avoindata External"),
+ * )
+ */
+class ExternalBlock extends BlockBase {
+
+  /**
+   * {@inheritdoc}
+   */
+  public function build() {
+    return [
+      '#language' => \Drupal::languageManager()->getCurrentLanguage()->getId(),
+      '#theme' => 'avoindata_external',
+    ];
+  }
+
+}

drupal/modules/avoindata-explore/templates/avoindata_external_block.html.twig

@@ -0,0 +1,51 @@
+{#
+/**
+ * @file
+ * Avoindata External Block
+ *
+ * @ingroup themeable
+ */
+#}
+
+<div class="avoindata-external pb-4">
+  <div class="avoindata-block-container justify-content-center">
+    <div class="row avoindata-block-header-row pt-3">
+      <h2>
+        {% trans %}
+          All finnish restricted data from one place
+        {% endtrans %}
+      </h2>
+    </div>
+
+    <div class="avoindata-block-items mt-3 mb-3">
+
+      <div class="avoindata-block-card mt-2">
+        <div class="avoindata-block-card-icon avoindata-external-service">
+          <img src="/themes/avoindata/images/logo-suomifi.svg"/>
+        </div>
+
+        <div class="avoindata-block-card-content">
+          <div class="avoindata-block-card-title">
+            <h3>
+              {% trans %}
+                Suomi.fi-suojattudata
+              {% endtrans %}
+            </h3>
+          </div>
+
+          <div class="avoindata-block-card-text">
+            <i class="far fa-chevron-right"></i>
+            <a href="https://suojattudata.fi">
+              {% trans %}
+               Navigate to site
+              {% endtrans %}
+            </a>
+          </div>
+        </div>
+
+      </div>
+
+    </div>
+
+  </div>
+</div>

drupal/modules/avoindata-header/templates/avoindata_header.html.twig

@@ -27,6 +27,12 @@
       {{ drupal_region('navigation') }}
     </div>
 
+
+    <a class="link-button borderless external" href="https://suojattudata.fi" target="_blank">
+      Suomi.fi-suojattudata
+    </a>
+
+
     {# Navigation (collapsible) #}
     <div id="navbar-collapse" class="navbar-collapse collapse">
       {{ drupal_region('navigation_collapsible') }}

drupal/modules/avoindata-theme/config/install/block.block.avoindata_external.yml

@@ -0,0 +1,24 @@
+langcode: fi
+status: true
+dependencies:
+  module:
+    - system
+  theme:
+    - avoindata
+id: avoindata_external
+theme: avoindata
+region: content
+weight: 5
+provider: null
+plugin: avoindata_external
+settings:
+  id: avoindata_external
+  label: 'Avoindata External'
+  provider: avoindata_external
+  label_display: '0'
+visibility:
+  request_path:
+    id: request_path
+    pages: '<front>'
+    negate: false
+    context_mapping: {  }

opendata-assets/src/less/drupal/overrides.less

@@ -417,14 +417,20 @@ p:last-child,
   }
 }
 
-.block-avoindata-support {
+.block-avoindata-support,
+.block-avoindata-external {
   margin-top: 30px;
 }
 
 .avoindata-explore,
 .avoindata-support {
   background-color: @suomi-highlightLight3;
+}
+
 
+.avoindata-explore,
+.avoindata-support,
+.avoindata-external {
   h2 {
     font-family: @font-family-sans-serif-semibold;
     font-size: @font-size__module-h1;
@@ -480,6 +486,24 @@ p:last-child,
   }
 }
 
+.avoindata-external {
+  background-color: @suomi-highlightLight2;
+
+  .avoindata-block-card {
+    width: 470px;
+  }
+
+  .avoindata-block-card-icon {
+    max-width: 125px;
+  }
+
+  .avoindata-block-card-content {
+    width: max-content;
+    padding-right: 20px;
+  }
+}
+
+
 .avoindata-block-card-icon {
   height: 100%;
   width: 35%;
@@ -528,6 +552,10 @@ p:last-child,
   background-color: @suomi-depthLight3;
 }
 
+.avoindata-external-service{
+  background-color: @suomi-depthSecondaryDark1;
+}
+
 .avoindata-datasetlist {
   padding: 10px 50px 25px;
   background-color: #f7f7f8;

opendata-assets/src/less/navbars.less

@@ -376,6 +376,45 @@ End of dropdown CSS
     font-size: 18px;
   }
 
+  .link-button {
+    color: @link-default-color;
+    border: 1px solid @link-default-color;
+    background: transparent;
+    padding: 0 20px;
+    margin: 10px;
+    border-radius: 2px;
+    box-shadow: none;
+    display: flex;
+    line-height: 40px;
+    font-weight: @font-weight-heavier;
+    letter-spacing: 0.4px;
+    font-size: @font-size-smaller-base;
+    text-decoration: none;
+    align-items: center;
+    gap: 8px;
+    float: right;
+
+    &.borderless {
+      border: 1px solid transparent;
+    }
+
+    &.external {
+      &::before {
+        font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free", sans-serif;
+        font-size: 16px;
+        align-self: center;
+        content: "\f35d"
+      }
+    }
+
+    &:hover {
+      color: @link-default-color;
+      border: 1px solid @suomi-depthBase;
+      background: linear-gradient(to top, transparent 0%, rgb(255 255 255 / 8.5%) 100%);
+      text-decoration: none;
+    }
+  }
+
   .navbar-collapse {
     border: 0;
   }