@erst-vg/vg-design-wrapper 2.0.2 → 2.1.0

package/src/components/VgPagination.vue

@@ -1,207 +1,207 @@
-<template>
-  <nav class="pagination" :aria-label="$t('erhvervsfremme.content.application.pagination.label')">
-    <div v-if="isMobile" class="mobile d-flex" data-testid="mobile-container">
-      <button
-        id="firstButton"
-        class="button button-arrow button-first"
-        :class="{ hidden: currentPage === 1 }"
-        type="button"
-        :aria-label="$t('erhvervsfremme.content.application.pagination.first.button.aria_label')"
-        @click="toPage(1)"
-      >
-        <VgIcon icon="paginationFirstPage" focusable="false" aria-hidden="true" />
-      </button>
-      <button
-        id="prevButton"
-        class="button button-arrow button-previous"
-        :class="{ hidden: currentPage === 1 }"
-        type="button"
-        :aria-label="$t('erhvervsfremme.content.application.pagination.previous.button.aria_label')"
-        @click="prevPage"
-      >
-        <VgIcon icon="paginationChevronLeft" focusable="false" aria-hidden="true" />
-      </button>
-      <span class="pagination-mobile">{{ paginationMobile }}</span>
-      <button
-        id="nextButton"
-        class="button button-arrow button-next"
-        :class="{ hidden: currentPage === pageCount }"
-        type="button"
-        :aria-label="$t('erhvervsfremme.content.application.pagination.next.button.aria_label')"
-        @click="nextPage"
-      >
-        <VgIcon icon="paginationChevronRight" focusable="false" aria-hidden="true" />
-      </button>
-      <button
-        id="lastButton"
-        class="button button-arrow button-last"
-        :class="{ hidden: currentPage === pageCount }"
-        type="button"
-        :aria-label="$t('erhvervsfremme.content.application.pagination.last.button.aria_label')"
-        @click="toPage(pageCount)"
-      >
-        <VgIcon icon="paginationLastPage" focusable="false" aria-hidden="true" />
-      </button>
-    </div>
-    <template v-else>
-      <!-- PREVIOUS BUTTON -->
-      <button
-        id="prevButton"
-        class="button button-link mr-4"
-        type="button"
-        :class="{ hidden: currentPage === 1 }"
-        :aria-label="$t('erhvervsfremme.content.application.pagination.backwards.button')"
-        data-testid="button-forrige"
-        @click="prevPage"
-      >
-        <VgIcon icon="paginationChevronLeft" focusable="false" aria-hidden="true" />
-        {{ $t('erhvervsfremme.content.application.pagination.backwards.button') }}
-      </button>
-      <!-- BEFORE DOTS -->
-      <template v-if="currentPage > 4">
-        <button
-          v-if="pageCount > 5"
-          :id="`toPage-${1}`"
-          class="button button-pagination"
-          type="button"
-          :aria-label="$t('erhvervsfremme.content.application.pagination.goto') + 1"
-          @click="toPage(1)"
-        >
-          1
-        </button>
-        <div v-if="pageCount > 6" class="dots">...</div>
-      </template>
-      <!-- BETWEEN DOTS -->
-      <button
-        v-for="pageNum in previousPages"
-        :id="`toPage-${pageNum}`"
-        :key="pageNum"
-        class="button button-pagination"
-        type="button"
-        :aria-label="$t('erhvervsfremme.content.application.pagination.goto') + pageNum"
-        @click="toPage(pageNum)"
-      >
-        {{ pageNum }}
-      </button>
-      <button
-        :id="`toPage-${currentPage}`"
-        class="button button-pagination button-active"
-        type="button"
-        :aria-label="$t('erhvervsfremme.content.application.pagination.currentpage') + currentPage"
-      >
-        {{ currentPage }}
-      </button>
-      <button
-        v-for="pageNum in upcomingPages"
-        :id="`toPage-${pageNum}`"
-        :key="pageNum"
-        class="button button-pagination"
-        type="button"
-        data-testid="button-step"
-        :aria-label="$t('erhvervsfremme.content.application.pagination.goto') + pageNum"
-        @click="toPage(pageNum)"
-      >
-        {{ pageNum }}
-      </button>
-      <!-- AFTER DOTS -->
-      <template v-if="pageCount - currentPage > 3">
-        <div v-if="pageCount > 6" class="dots">...</div>
-        <button
-          v-if="pageCount > 5"
-          :id="`toPage-${pageCount}`"
-          class="button button-pagination"
-          type="button"
-          :aria-label="$t('erhvervsfremme.content.application.pagination.goto') + pageCount"
-          @click="toPage(pageCount)"
-        >
-          {{ pageCount }}
-        </button>
-      </template>
-      <button
-        id="nextButton"
-        class="button button-link ml-0"
-        type="button"
-        :class="{ hidden: currentPage === pageCount }"
-        data-testid="button-naeste"
-        @click="nextPage"
-      >
-        {{ $t('erhvervsfremme.content.application.pagination.forwards.button') }}
-        <VgIcon icon="paginationChevronRight" focusable="false" aria-hidden="true" />
-      </button>
-    </template>
-  </nav>
-</template>
-
-<script setup lang="ts">
-import VgIcon from '@/components/VgIcon.vue';
-import { ParamType } from '@/utils/tekstnoegle-util';
-import range from 'lodash/range';
-import { computed, inject, onUnmounted, ref } from 'vue';
-
-const $t: (tekstnoegle: string, params?: ParamType) => string = inject('$t')!;
-
-const emits = defineEmits(['toPage']);
-const props = defineProps({
-  currentPage: {
-    type: Number,
-    required: true
-  },
-  pageCount: {
-    type: Number,
-    required: true
-  }
-});
-
-const paginationMobile = computed(() => $t('erhvervsfremme.content.application.pagination.mobile', [props.currentPage, props.pageCount]));
-
-const isMobile = computed(() => width.value < 768);
-
-const pagesAroundCurrent = computed((): number[] => {
-  let first;
-  if (props.currentPage < 5) {
-    first = 1;
-  } else if (props.pageCount - props.currentPage < 3) {
-    first = props.pageCount - 4;
-  } else {
-    first = props.currentPage - 1;
-  }
-  let last;
-  if (props.pageCount - props.currentPage < 4) {
-    last = props.pageCount;
-  } else if (props.currentPage < 5) {
-    last = 5;
-  } else {
-    last = props.currentPage + 1;
-  }
-  return range(first, last + 1);
-});
-
-const previousPages = computed(() => pagesAroundCurrent.value.filter(num => num < props.currentPage));
-const upcomingPages = computed(() => pagesAroundCurrent.value.filter(num => num > props.currentPage));
-
-const prevPage = (): void => {
-  if (props.currentPage > 1) {
-    toPage(props.currentPage - 1);
-  }
-};
-const nextPage = (): void => {
-  if (props.currentPage < props.pageCount) {
-    toPage(props.currentPage + 1);
-  }
-};
-const toPage = (num: number): void => {
-  emits('toPage', num);
-};
-
-const width = ref(window.innerWidth);
-
-const handleResize = (): void => {
-  width.value = window.innerWidth;
-};
-
-window.addEventListener('resize', handleResize);
-
-onUnmounted(() => {
-  window.removeEventListener('resize', handleResize);
-});
-</script>
+<template>
+  <nav class="pagination" :aria-label="$t('erhvervsfremme.content.application.pagination.label')">
+    <div v-if="isMobile" class="mobile d-flex" data-testid="mobile-container">
+      <button
+        id="firstButton"
+        class="button button-arrow button-first"
+        :class="{ hidden: currentPage === 1 }"
+        type="button"
+        :aria-label="$t('erhvervsfremme.content.application.pagination.first.button.aria_label')"
+        @click="toPage(1)"
+      >
+        <VgIcon icon="paginationFirstPage" focusable="false" aria-hidden="true" />
+      </button>
+      <button
+        id="prevButton"
+        class="button button-arrow button-previous"
+        :class="{ hidden: currentPage === 1 }"
+        type="button"
+        :aria-label="$t('erhvervsfremme.content.application.pagination.previous.button.aria_label')"
+        @click="prevPage"
+      >
+        <VgIcon icon="paginationChevronLeft" focusable="false" aria-hidden="true" />
+      </button>
+      <span class="pagination-mobile">{{ paginationMobile }}</span>
+      <button
+        id="nextButton"
+        class="button button-arrow button-next"
+        :class="{ hidden: currentPage === pageCount }"
+        type="button"
+        :aria-label="$t('erhvervsfremme.content.application.pagination.next.button.aria_label')"
+        @click="nextPage"
+      >
+        <VgIcon icon="paginationChevronRight" focusable="false" aria-hidden="true" />
+      </button>
+      <button
+        id="lastButton"
+        class="button button-arrow button-last"
+        :class="{ hidden: currentPage === pageCount }"
+        type="button"
+        :aria-label="$t('erhvervsfremme.content.application.pagination.last.button.aria_label')"
+        @click="toPage(pageCount)"
+      >
+        <VgIcon icon="paginationLastPage" focusable="false" aria-hidden="true" />
+      </button>
+    </div>
+    <template v-else>
+      <!-- PREVIOUS BUTTON -->
+      <button
+        id="prevButton"
+        class="button button-link mr-4"
+        type="button"
+        :class="{ hidden: currentPage === 1 }"
+        :aria-label="$t('erhvervsfremme.content.application.pagination.backwards.button')"
+        data-testid="button-forrige"
+        @click="prevPage"
+      >
+        <VgIcon icon="paginationChevronLeft" focusable="false" aria-hidden="true" />
+        {{ $t('erhvervsfremme.content.application.pagination.backwards.button') }}
+      </button>
+      <!-- BEFORE DOTS -->
+      <template v-if="currentPage > 4">
+        <button
+          v-if="pageCount > 5"
+          :id="`toPage-${1}`"
+          class="button button-pagination"
+          type="button"
+          :aria-label="$t('erhvervsfremme.content.application.pagination.goto') + 1"
+          @click="toPage(1)"
+        >
+          1
+        </button>
+        <div v-if="pageCount > 6" class="dots">...</div>
+      </template>
+      <!-- BETWEEN DOTS -->
+      <button
+        v-for="pageNum in previousPages"
+        :id="`toPage-${pageNum}`"
+        :key="pageNum"
+        class="button button-pagination"
+        type="button"
+        :aria-label="$t('erhvervsfremme.content.application.pagination.goto') + pageNum"
+        @click="toPage(pageNum)"
+      >
+        {{ pageNum }}
+      </button>
+      <button
+        :id="`toPage-${currentPage}`"
+        class="button button-pagination button-active"
+        type="button"
+        :aria-label="$t('erhvervsfremme.content.application.pagination.currentpage') + currentPage"
+      >
+        {{ currentPage }}
+      </button>
+      <button
+        v-for="pageNum in upcomingPages"
+        :id="`toPage-${pageNum}`"
+        :key="pageNum"
+        class="button button-pagination"
+        type="button"
+        data-testid="button-step"
+        :aria-label="$t('erhvervsfremme.content.application.pagination.goto') + pageNum"
+        @click="toPage(pageNum)"
+      >
+        {{ pageNum }}
+      </button>
+      <!-- AFTER DOTS -->
+      <template v-if="pageCount - currentPage > 3">
+        <div v-if="pageCount > 6" class="dots">...</div>
+        <button
+          v-if="pageCount > 5"
+          :id="`toPage-${pageCount}`"
+          class="button button-pagination"
+          type="button"
+          :aria-label="$t('erhvervsfremme.content.application.pagination.goto') + pageCount"
+          @click="toPage(pageCount)"
+        >
+          {{ pageCount }}
+        </button>
+      </template>
+      <button
+        id="nextButton"
+        class="button button-link ml-0"
+        type="button"
+        :class="{ hidden: currentPage === pageCount }"
+        data-testid="button-naeste"
+        @click="nextPage"
+      >
+        {{ $t('erhvervsfremme.content.application.pagination.forwards.button') }}
+        <VgIcon icon="paginationChevronRight" focusable="false" aria-hidden="true" />
+      </button>
+    </template>
+  </nav>
+</template>
+
+<script setup lang="ts">
+import VgIcon from '@/components/VgIcon.vue';
+import { ParamType } from '@/utils/tekstnoegle-util';
+import range from 'lodash/range';
+import { computed, inject, onUnmounted, ref } from 'vue';
+
+const $t: (tekstnoegle: string, params?: ParamType) => string = inject('$t')!;
+
+const emits = defineEmits(['toPage']);
+const props = defineProps({
+  currentPage: {
+    type: Number,
+    required: true
+  },
+  pageCount: {
+    type: Number,
+    required: true
+  }
+});
+
+const paginationMobile = computed(() => $t('erhvervsfremme.content.application.pagination.mobile', [props.currentPage, props.pageCount]));
+
+const isMobile = computed(() => width.value < 768);
+
+const pagesAroundCurrent = computed((): number[] => {
+  let first;
+  if (props.currentPage < 5) {
+    first = 1;
+  } else if (props.pageCount - props.currentPage < 3) {
+    first = props.pageCount - 4;
+  } else {
+    first = props.currentPage - 1;
+  }
+  let last;
+  if (props.pageCount - props.currentPage < 4) {
+    last = props.pageCount;
+  } else if (props.currentPage < 5) {
+    last = 5;
+  } else {
+    last = props.currentPage + 1;
+  }
+  return range(first, last + 1);
+});
+
+const previousPages = computed(() => pagesAroundCurrent.value.filter(num => num < props.currentPage));
+const upcomingPages = computed(() => pagesAroundCurrent.value.filter(num => num > props.currentPage));
+
+const prevPage = (): void => {
+  if (props.currentPage > 1) {
+    toPage(props.currentPage - 1);
+  }
+};
+const nextPage = (): void => {
+  if (props.currentPage < props.pageCount) {
+    toPage(props.currentPage + 1);
+  }
+};
+const toPage = (num: number): void => {
+  emits('toPage', num);
+};
+
+const width = ref(window.innerWidth);
+
+const handleResize = (): void => {
+  width.value = window.innerWidth;
+};
+
+window.addEventListener('resize', handleResize);
+
+onUnmounted(() => {
+  window.removeEventListener('resize', handleResize);
+});
+</script>

package/src/components/VgVideo.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="video">
+    <component :is="videoudbyder" :src="src" :alt="alt" :play-video="playVideo" class="video-player">
+      <template #preview="{ thumbnailUrl }">
+        <div v-if="!playVideo">
+          <button class="button-wrapper" aria-label="Afspil video" title="Afspil video" type="button" @click="playVideo = true">
+            <VgIcon icon="playVideo" />
+            <div class="video-frame" :style="thumbnailUrl && { 'background-image': 'url(' + thumbnailUrl + ')' }" />
+          </button>
+        </div>
+      </template>
+    </component>
+    <div class="cookie-banner">
+      <em>
+        NB: Udbyderen af servicen kan sætte en eller flere cookies, når du afspiller eller deler videoen.
+        <a href="/content/cookies/" target="_blank">Læs om cookies</a>
+      </em>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import VgIcon from '@/components/VgIcon.vue';
+import VgKalturaVideo from '@/components/VgKalturaVideo.vue';
+import VgVideoToolVideo from '@/components/VgVideoToolVideo.vue';
+import { computed, ref } from 'vue';
+
+const components = {
+  VgVideoToolVideo,
+  VgKalturaVideo
+};
+
+const props = defineProps({
+  src: {
+    type: String,
+    required: true
+  },
+  alt: {
+    type: String,
+    required: true
+  }
+});
+
+const playVideo = ref(false);
+
+const videoudbyder = computed(() => {
+  if (props.src.includes('videotool')) {
+    return components.VgVideoToolVideo;
+  } else if (props.src.includes('kaltura')) {
+    return components.VgKalturaVideo;
+  }
+  return '';
+});
+</script>
+
+<style lang="scss" scoped>
+@use '@/styles/custom/_vgVideo.scss';
+@use '@/styles/custom/_vgVideoFrame.scss';
+</style>

package/src/components/VgVideoToolVideo.vue

@@ -0,0 +1,70 @@
+<template>
+  <div>
+    <iframe
+      v-if="playVideo"
+      class="video-frame"
+      title="Videotool player"
+      type="text/html"
+      :alt="alt"
+      :src="src"
+      webkitallowfullscreen
+      mozallowfullscreen
+      allowfullscreen
+      allow="autoplay; fullscreen"
+      data-testid="iframe"
+    ></iframe>
+    <slot name="preview" :thumbnail-url="thumbnailUrl" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import axios, { AxiosRequestConfig } from 'axios';
+import { onMounted, ref } from 'vue';
+
+const props = defineProps({
+  src: {
+    type: String,
+    required: true
+  },
+  alt: {
+    type: String,
+    required: true
+  },
+  playVideo: {
+    type: Boolean,
+    required: true
+  }
+});
+
+const thumbnailUrl = ref<string>('');
+
+onMounted(async () => {
+  getThumbnailUrl(props.src).then(url => (thumbnailUrl.value = url));
+});
+
+async function getThumbnailUrl(pageUrl: string): Promise<string> {
+  let url = '';
+  const options: AxiosRequestConfig = {
+    method: 'GET',
+    headers: { 'content-type': 'text/html' },
+    url: pageUrl
+  };
+  try {
+    const xhr = await axios(options);
+    if (xhr) {
+      const groups = xhr.data?.match(/<meta property="og:image" content="https:(.*?)">/);
+      if (groups?.length > 0) {
+        url = groups[1];
+      }
+    }
+  } catch {
+    // eslint-disable-next-line no-console
+    console.log(`Error resolving thumbnail url from "${pageUrl}"`);
+  }
+  return url;
+}
+</script>
+
+<style lang="scss" scoped>
+@use '@/styles/custom/_vgVideoFrame.scss';
+</style>

package/src/styles/custom/_vgAccordion.scss

@@ -1,39 +1,39 @@
-.vg-accordion {
-  .accordion-button {
-    &[aria-expanded='true'] {
-      .open {
-        display: none;
-      }
-    }
-    &[aria-expanded='false'] {
-      .close {
-        display: none;
-      }
-    }
-  }
-
-  .top-wrapper {
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6 {
-      max-width: 100%;
-      font-family: var(--site-primary-font);
-    }
-  }
-}
-
-.accordion-bulk-button {
-  display: block;
-  line-height: 1.5em;
-  padding-left: 0;
-  margin-left: auto;
-  background-image: none !important;
-  color: var(--site-primary);
-
-  &:focus {
-    color: var(--site-primary);
-  }
-}
+.vg-accordion {
+  .accordion-button {
+    &[aria-expanded='true'] {
+      .open {
+        display: none;
+      }
+    }
+    &[aria-expanded='false'] {
+      .close {
+        display: none;
+      }
+    }
+  }
+
+  .top-wrapper {
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      max-width: 100%;
+      font-family: var(--site-primary-font);
+    }
+  }
+}
+
+.accordion-bulk-button {
+  display: block;
+  line-height: 1.5em;
+  padding-left: 0;
+  margin-left: auto;
+  background-image: none !important;
+  color: var(--site-primary);
+
+  &:focus {
+    color: var(--site-primary);
+  }
+}

package/src/styles/custom/_vgCard.scss

@@ -1,15 +1,15 @@
-.text {
-  pre {
-    white-space: pre-line;
-  }
-}
-
-.udvidet-cardgruppe-card {
-  &:hover {
-    h3,
-    .card-titel {
-      text-decoration: underline;
-      color: var(--link-color);
-    }
-  }
-}
+.text {
+  pre {
+    white-space: pre-line;
+  }
+}
+
+.udvidet-cardgruppe-card {
+  &:hover {
+    h3,
+    .card-titel {
+      text-decoration: underline;
+      color: var(--link-color);
+    }
+  }
+}

package/src/styles/custom/_vgIcon.scss

@@ -1,3 +1,3 @@
-.icon {
-  fill: currentColor;
-}
+.icon {
+  fill: currentColor;
+}

package/src/styles/custom/_vgListe.scss

@@ -1,3 +1,3 @@
-.centered-button {
-  margin: 24px auto 0px !important;
-}
+.centered-button {
+  margin: 24px auto 0px !important;
+}