@erst-vg/vg-design-wrapper 2.0.1 → 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

@@ -1,65 +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">
-      <!-- eslint-disable-next-line vue/no-v-html -->
-      <div v-html="cookiebanner" />
-    </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 VgVimeoVideo from '@/components/VgVimeoVideo.vue';
-import { computed, ref } from 'vue';
-
-const components = {
-  VgVimeoVideo,
-  VgVideoToolVideo,
-  VgKalturaVideo
-};
-
-const props = defineProps({
-  src: {
-    type: String,
-    required: true
-  },
-  alt: {
-    type: String,
-    required: true
-  },
-  cookiebanner: {
-    type: String,
-    required: true
-  }
-});
-
-const playVideo = ref(false);
-
-const videoudbyder = computed(() => {
-  if (props.src.includes('vimeo')) {
-    return components.VgVimeoVideo;
-  } else 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>
+<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>