Merge branches 'develop' and 'develop' of github.com:os2ulf/os2udogla…

…er-frontend into develop

assets/css/_buttons.css

@@ -46,6 +46,19 @@
       background-color: var(--color-primary-darken-2);
       border-color: var(--color-primary-darken-2);
     }
+
+    &--ghost {
+      color: var(--color-primary);
+      background-color: transparent;
+      border: 2px solid var(--color-primary);
+      opacity: 1;
+
+      &:hover {
+        color: var(--color-primary-lighten-4);
+        background-color: var(--color-primary);
+        opacity: 1;
+      }
+    }
   }
 
   &--secondary {

components/view-components/KontaktProvider.vue

@@ -0,0 +1,130 @@
+<script setup lang="ts">
+const props = defineProps({
+  data: {
+    type: Array,
+    required: false,
+    default: null,
+  },
+});
+</script>
+
+<template>
+  <div class="contact">
+    <h3 class="contact__title">Kontakt udbyder</h3>
+    <div class="contact__item-container">
+      <div
+        class="contact__item-section"
+        v-for="person in props.data"
+        :key="person"
+      >
+        <div class="contact__heading-wrapper">
+          <div class="contact__person-heading">
+            <h4>
+              {{ person?.field_title }} -
+              {{ person?.field_name }}
+            </h4>
+            <div class="contact__contact-hours">
+              Træffetid:
+              {{ person?.field_office_availability_text }}
+            </div>
+          </div>
+
+          <div class="contact__button-wrapper">
+            <a
+              :href="'mailto:' + person?.field_email"
+              class="button button--primary contact__button"
+            >
+              <NuxtIcon class="contact__icon" name="envelope-alt" filled />
+              {{ person?.field_email }}
+            </a>
+            <a
+              :href="'tel:' + person?.field_phone"
+              class="button button--primary contact__button"
+            >
+              <NuxtIcon class="contact__icon" name="phone" filled />
+              {{ person?.field_phone }}
+            </a>
+            <NuxtLink
+              :to="person?.field_webpage?.url"
+              class="button button--primary contact__button"
+            >
+              <NuxtIcon class="contact__icon" name="language" filled />
+
+              {{ person?.field_webpage?.title }}
+            </NuxtLink>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="postcss" scoped>
+.contact {
+  background-color: var(--color-tertiary-lighten-4);
+  padding: 20px 20px @(--sm) 96px 168px;
+  color: var(--color-tertiary);
+  box-shadow: 0px 4px 10px 15px #40362e1a;
+
+  &__title {
+    margin-bottom: 32px;
+    text-align: center @(--sm) left;
+  }
+
+  &__item-section {
+    padding: 27px 0 @(--sm) 58px 0;
+    border-top: 1px solid var(--color-base-divider);
+  }
+
+  &__heading-wrapper {
+    display: grid @(--md) flex;
+    align-items: center;
+    align-items: center;
+    justify-content: space-between;
+
+    @media (--viewport-sm-max) {
+      justify-content: center;
+    }
+  }
+
+  &__person-heading {
+    @media (--viewport-sm-max) {
+      text-align: center;
+    }
+  }
+
+  &__button-wrapper {
+    display: grid @(--md) flex;
+
+    @media (--viewport-sm-max) {
+      justify-content: center;
+    }
+  }
+
+  &__button {
+    margin: 20px 0 0 0 @(--md) 0 16px 0 0;
+    width: 100% @(--sm) inherit;
+
+    &:last-child {
+      margin-right: 0 @(--sm) 0;
+    }
+  }
+
+  &__icon {
+    margin-right: 10px;
+
+    :deep(svg) {
+      height: 24px;
+      width: 24px;
+    }
+  }
+
+  &__contact-hours {
+    font-weight: 400;
+
+    @media (--viewport-sm-max) {
+      text-align: center;
+    }
+  }
+}
+</style>

components/view-components/PracticalInformation.vue

@@ -5,12 +5,29 @@ const props = defineProps({
     required: true,
     default: null,
   },
+  userProfilePage: {
+    type: Object,
+    required: false,
+    default: null,
+  },
 });
 </script>
 
 <template>
   <div class="practical-information">
-    <h3 class="practical-information__title">Praktisk information</h3>
+    <div
+      class="practical-information__provider-logo"
+      v-if="userProfilePage?.logo?.src"
+    >
+      <!-- TODO: Switchout once images are transformed BE -->
+      <img
+        :src="props.userProfilePage?.logo?.src"
+        :alt="userProfilePage.logo?.alt"
+      />
+    </div>
+    <h3 class="practical-information__title">
+      {{ !props.userProfilePage ? 'Praktisk information' : 'Udbyder' }}
+    </h3>
 
     <!--Practical information data for loop START -->
     <div v-for="(item, index) in props.data" :key="index">
@@ -40,6 +57,26 @@ const props = defineProps({
         </div>
       </div>
 
+      <!-- User Profile element -->
+      <div v-else-if="item.type === 'user_profile'">
+        <div class="practical-information__item-container">
+          <div class="practical-information__item-heading">
+            {{ item.title }}
+          </div>
+        </div>
+
+        <div class="practical-information__user-profile-content-wrapper">
+          <slot></slot>
+        </div>
+
+        <div class="practical-information__user-profile-button">
+          <BaseButton
+            :button-data="{ title: 'Kontakt udbyder' }"
+            class="button button--secondary button--secondary--ghost"
+          />
+        </div>
+      </div>
+
       <!-- Basic element with title, content & description -->
       <div v-else class="practical-information__item-container">
         <div class="practical-information__item-heading">{{ item.title }}</div>
@@ -134,6 +171,10 @@ const props = defineProps({
   border: 2px solid var(--color-primary-lighten-4);
   box-shadow: 0 4px 10px 4px #297f781a;
 
+  &__provider-logo {
+    margin-bottom: 22px;
+  }
+
   &__title {
     margin: 0;
   }
@@ -242,6 +283,14 @@ const props = defineProps({
     }
   }
 
+  &__user-profile-button {
+    padding-top: 11px @(--sm) 22px;
+  }
+
+  &__user-profile-content-wrapper {
+    padding-top: 8px;
+  }
+
   details {
     .expanded {
       display: none;