feat: add button to info-message element

Author: sifferhans

components/DocumentList.vue

@@ -306,26 +306,7 @@ onMounted(() => {
             />
 
             <template v-else-if="item.type === 'InfoMessage'">
-              <NuxtLink
-                v-if="item.link"
-                :to="parseLink(item.link)"
-                :target="isInternalLink(item.link || '') ? '_self' : '_blank'"
-                class="col-span-full flex gap-3 rounded-2xl bg-background-2 p-4 font-medium"
-              >
-                <div>
-                  <NuxtIcon name="icon.alert" class="text-2xl" />
-                </div>
-                {{ item.translatedMessage }}
-              </NuxtLink>
-              <div
-                v-else
-                class="col-span-full flex gap-3 rounded-2xl bg-background-2 p-4 font-medium"
-              >
-                <div>
-                  <NuxtIcon name="icon.alert" class="text-2xl" />
-                </div>
-                {{ item.translatedMessage }}
-              </div>
+              <InfoMessageItem :item="item" />
             </template>
 
             <template v-else-if="item.type === 'project_box_v2'">

components/InfoMessageItem.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import type { InfoMessageModel } from "@bcc-code/bmm-sdk-fetch";
+
+defineProps<{
+  item: InfoMessageModel;
+}>();
+</script>
+
+<template>
+  <div class="col-span-full">
+    <NuxtLink
+      v-if="item.link"
+      :to="parseLink(item.link)"
+      :target="isInternalLink(item.link || '') ? '_self' : '_blank'"
+      class="col-span-full flex gap-3 rounded-2xl bg-background-2 p-4 font-medium"
+    >
+      <div>
+        <NuxtIcon name="icon.alert" class="text-2xl" />
+      </div>
+      <div class="flex flex-wrap items-center gap-3">
+        {{ item.messageText }}
+        <ButtonStyled
+          v-if="item.translatedButtonText"
+          intent="secondary"
+          size="small"
+          class="-my-1 brightness-95 dark:brightness-150"
+        >
+          {{ item.translatedButtonText }}
+          <NuxtIcon name="icon.chevron.right" class="ml-auto text-lg" />
+        </ButtonStyled>
+      </div>
+    </NuxtLink>
+    <div
+      v-else
+      class="col-span-full flex gap-3 rounded-2xl bg-background-2 p-4 font-medium"
+    >
+      <div>
+        <NuxtIcon name="icon.alert" class="text-2xl" />
+      </div>
+      {{ item.messageText }}
+    </div>
+  </div>
+</template>

components/page-editor/PageEditorElement.vue

@@ -170,6 +170,18 @@ const shouldShowField = (value: unknown) =>
                 label="Link"
                 :element
               />
+              <PageEditorInput
+                v-if="element.link && shouldShowField(element.buttonTextNb)"
+                v-model="element.buttonTextNb"
+                label="Norwegian Button Text"
+                :element
+              />
+              <PageEditorInput
+                v-if="element.link && shouldShowField(element.buttonTextEn)"
+                v-model="element.buttonTextEn"
+                label="English Button Text"
+                :element
+              />
             </div>
           </template>
           <template v-if="element.type === PageEditorElementTypes.Header">

package.json

@@ -21,7 +21,7 @@
   },
   "dependencies": {
     "@auth0/auth0-vue": "^2.3.3",
-    "@bcc-code/bmm-sdk-fetch": "^8.8.8",
+    "@bcc-code/bmm-sdk-fetch": "^8.9.0",
     "@floating-ui/vue": "^1.0.6",
     "@headlessui/vue": "^1.7.19",
     "@microsoft/applicationinsights-web": "^3.0.8",