From 58bc4866cbb9a6788ed8a680ed9db1c7db0ca2fd Mon Sep 17 00:00:00 2001
From: Leonie Peters <leoniepeters@gmail.com>
Date: Fri, 25 Aug 2023 10:21:10 +0200
Subject: [PATCH] Add LandingSubSection component

---
 .../landing/LandingInfoCardGroup.vue          | 34 +++++---
 .../src/components/landing/LandingPage.vue    | 22 ++---
 .../components/landing/LandingSubSection.vue  | 87 +++++++++++++++++++
 .../landing/LandingSubSection.spec.js         | 22 +++++
 4 files changed, 140 insertions(+), 25 deletions(-)
 create mode 100644 packages/portal/src/components/landing/LandingSubSection.vue
 create mode 100644 packages/portal/tests/unit/components/landing/LandingSubSection.spec.js

diff --git a/packages/portal/src/components/landing/LandingInfoCardGroup.vue b/packages/portal/src/components/landing/LandingInfoCardGroup.vue
index b5b33708ee..a425b6a550 100644
--- a/packages/portal/src/components/landing/LandingInfoCardGroup.vue
+++ b/packages/portal/src/components/landing/LandingInfoCardGroup.vue
@@ -65,20 +65,34 @@
 </script>
 
 <style lang="scss" scoped>
-@import '@europeana/style/scss/variables';
+  @import '@europeana/style/scss/variables';
 
-.container {
-  padding-top: 4rem;
-  padding-bottom: 3rem;
+  .container {
+    padding-top: 4rem;
+    padding-bottom: 3rem;
 
-  @media (min-width: $bp-large) {
-    padding-top: 4.5rem;
+    @media (min-width: $bp-large) {
+      padding-top: 4.5rem;
+    }
   }
-}
 
-.header {
-  max-width: $max-text-column-width;
-}
+  .header {
+    max-width: $max-text-column-width;
+
+    h2 {
+      font-family: $font-family-ubuntu;
+      font-size: $font-size-large;
+      font-weight: 500;
+
+      @media (min-width: $bp-medium) {
+        font-size: $font-size-xl;
+      }
+
+      @media (min-width: $bp-4k) {
+        font-size: $font-size-xl-4k;
+      }
+    }
+  }
 </style>
 
 <docs lang="md">
diff --git a/packages/portal/src/components/landing/LandingPage.vue b/packages/portal/src/components/landing/LandingPage.vue
index b0e6b26c9c..e284f39787 100644
--- a/packages/portal/src/components/landing/LandingPage.vue
+++ b/packages/portal/src/components/landing/LandingPage.vue
@@ -18,6 +18,11 @@
         :text="section.text"
         :info-cards="section.hasPartCollection && section.hasPartCollection.items"
       />
+      <LandingSubSection
+        v-if="contentType(section, 'LandingSubSection')"
+        :title="section.name"
+        :text="section.text"
+      />
     </div>
   </div>
 </template>
@@ -30,7 +35,8 @@
 
     components: {
       LandingHero,
-      LandingInfoCardGroup: () => import('@/components/landing/LandingInfoCardGroup')
+      LandingInfoCardGroup: () => import('@/components/landing/LandingInfoCardGroup'),
+      LandingSubSection: () => import('@/components/landing/LandingSubSection')
     },
 
     props: {
@@ -76,19 +82,5 @@
       margin-top: -1.5rem;
     }
 
-    ::v-deep h2 {
-      font-family: $font-family-ubuntu;
-      font-size: $font-size-medium;
-      font-weight: 500;
-
-      @media (min-width: $bp-medium) {
-        font-size: $font-size-xl;
-      }
-
-      @media (min-width: $bp-4k) {
-        font-size: $font-size-xl-4k;
-      }
-    }
-
   }
 </style>
diff --git a/packages/portal/src/components/landing/LandingSubSection.vue b/packages/portal/src/components/landing/LandingSubSection.vue
new file mode 100644
index 0000000000..f196cc50de
--- /dev/null
+++ b/packages/portal/src/components/landing/LandingSubSection.vue
@@ -0,0 +1,87 @@
+<template>
+  <b-container>
+    <div class="header mx-auto">
+      <h2>
+        {{ title }}
+      </h2>
+      <!-- eslint-disable vue/no-v-html -->
+      <div
+        v-if="text"
+        class="text mb-3"
+        v-html="parseMarkdownHtml(text)"
+      />
+    <!-- eslint-enable vue/no-v-html -->
+    </div>
+  </b-container>
+</template>
+
+<script>
+  import parseMarkdownHtmlMixin from '@/mixins/parseMarkdownHtml';
+
+  export default {
+    name: 'LandingSubSection',
+
+    mixins: [parseMarkdownHtmlMixin],
+
+    props: {
+      /**
+       * H2 title to display above the info cards
+       */
+      title: {
+        type: String,
+        default: null
+      },
+      /**
+       * Text to display under title and above the info cards
+       */
+      text: {
+        type: String,
+        default: null
+      }
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+  @import '@europeana/style/scss/variables';
+
+  .container {
+    padding-top: 4rem;
+    padding-bottom: 2rem;
+
+    @media (min-width: $bp-medium) {
+      padding-bottom: 4rem;
+    }
+  }
+
+  .header {
+    max-width: $max-text-column-width;
+
+    h2 {
+      font-family: $font-family-ubuntu;
+      font-size: $font-size-large;
+      font-weight: 500;
+
+      @media (min-width: $bp-medium) {
+        font-size: $font-size-xl;
+      }
+
+      @media (min-width: $bp-4k) {
+        font-size: $font-size-xl-4k;
+      }
+    }
+  }
+
+  .text {
+    color: $mediumgrey;
+  }
+</style>
+
+<docs lang="md">
+  ```jsx
+    <LandingSubSection
+      title="This is a title for a sub section"
+      text="A __description__ what this section is all about"
+    />
+  ```
+</docs>
diff --git a/packages/portal/tests/unit/components/landing/LandingSubSection.spec.js b/packages/portal/tests/unit/components/landing/LandingSubSection.spec.js
new file mode 100644
index 0000000000..c93ad45507
--- /dev/null
+++ b/packages/portal/tests/unit/components/landing/LandingSubSection.spec.js
@@ -0,0 +1,22 @@
+import { createLocalVue, shallowMount } from '@vue/test-utils';
+
+import LandingSubSection from '@/components/landing/LandingSubSection.vue';
+
+const localVue = createLocalVue();
+
+const factory = (propsData) => shallowMount(LandingSubSection, {
+  localVue,
+  propsData,
+  stubs: ['b-container']
+});
+
+describe('components/landing/LandingSubSection', () => {
+  it('displays a title', () => {
+    const title = 'Title for an info card group';
+    const wrapper = factory({ title });
+
+    const titleElement = wrapper.find('h2');
+
+    expect(titleElement.text()).toBe(title);
+  });
+});