@apptegy/nuxt-navigation 0.1.125 → 0.2.0-alpha.0

package/dist/runtime/components/Nav/HelpArticles.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     class="help-btn-wrapper"
-    :class="{ collapsed }"
+    :class="[isBeaconNavEnabled ? 'beacon' : 'classic', { collapsed }]"
   >
     <button
       v-if="schoolWebsite"
@@ -83,8 +83,9 @@
 </template>
 
 <script setup>
-import { useSidebar, navigateTo, useAuth } from "#imports";
+import { useSidebar, navigateTo, useAuth, useNuxtApp } from "#imports";
 import { ref, computed, onMounted } from "vue";
+const { $ld } = useNuxtApp();
 const { userProfile } = useAuth();
 const props = defineProps({
   helpArticleOptions: { type: Array, required: true, default: () => [] },
@@ -105,6 +106,9 @@ const userRoomsRole = computed(() => {
   return userProfile.value?.roles?.rooms;
 });
 const hasArticles = computed(() => !!props.helpArticleOptions?.values?.length);
+const isBeaconNavEnabled = computed(() => {
+  return Boolean($ld?.flags?.beaconNavEnabled);
+});
 onMounted(() => {
   isDropdown.value = !!props.helpArticleOptions?.values?.length;
   dropdownScrollHeight.value = helpBtnActions.value?.scrollHeight + 12;
@@ -122,7 +126,7 @@ async function goToWebsite() {
 </script>
 
 <style scoped>
-.help-btn-wrapper {
+.help-btn-wrapper.classic {
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -131,12 +135,12 @@ async function goToWebsite() {
   text-transform: uppercase;
   padding-left: 8px;
 }
-.help-btn-wrapper.collapsed {
+.help-btn-wrapper.classic.collapsed {
   justify-content: center;
   flex-direction: column;
   padding-left: 0;
 }
-.help-btn-wrapper .help-articles-btn {
+.help-btn-wrapper.classic .help-articles-btn {
   cursor: pointer;
   display: flex;
   align-items: center;
@@ -145,31 +149,31 @@ async function goToWebsite() {
   border: none;
   text-transform: inherit;
 }
-.help-btn-wrapper .help-articles-btn:focus-visible {
+.help-btn-wrapper.classic .help-articles-btn:focus-visible {
   outline: var(--orange) solid 2px;
   outline-offset: 0;
   box-shadow: inset 0 0 0 3px var(--primary-white);
   border-radius: 3px;
 }
-.help-btn-wrapper .help-articles-btn .help-center-btn-icon {
+.help-btn-wrapper.classic .help-articles-btn .help-center-btn-icon {
   min-width: 32px;
   width: 32px;
 }
-.help-btn-wrapper .help-articles-btn.collapsed {
+.help-btn-wrapper.classic .help-articles-btn.collapsed {
   padding: 10px 0px;
 }
-.help-btn-wrapper .help-btn-actions {
+.help-btn-wrapper.classic .help-btn-actions {
   visibility: hidden;
   max-height: 0px;
   overflow-y: hidden;
   transition: all 0.5s ease-in-out;
 }
-.help-btn-wrapper .help-btn-actions.expanded {
+.help-btn-wrapper.classic .help-btn-actions.expanded {
   visibility: visible;
   margin-top: -8px;
   padding-bottom: 6px;
 }
-.help-btn-wrapper .help-btn-action {
+.help-btn-wrapper.classic .help-btn-action {
   border: none;
   padding: 0;
   background: none;
@@ -180,7 +184,7 @@ async function goToWebsite() {
   position: relative;
   padding: 6px 51px 6px 45px;
 }
-.help-btn-wrapper .help-btn-action:hover:before {
+.help-btn-wrapper.classic .help-btn-action:hover:before {
   content: "";
   z-index: -1;
   position: absolute;
@@ -190,19 +194,106 @@ async function goToWebsite() {
   left: -45px;
   background-color: var(--nav-background-color, var(--purple-70));
 }
-.help-btn-wrapper .caret-icon {
+.help-btn-wrapper.classic .caret-icon {
   margin-left: auto;
   transition: transform 0.2s ease-in-out;
   background: none;
 }
-.help-btn-wrapper .caret-icon.collapse {
+.help-btn-wrapper.classic .caret-icon.collapse {
   transform: rotate(0.5turn);
 }
-.help-btn-wrapper svg {
+.help-btn-wrapper.classic svg {
   border-radius: 4px;
   color: var(--nav-icon-color, #662e80);
 }
-.help-btn-wrapper span {
+.help-btn-wrapper.classic span {
+  color: var(--nav-text-color, var(--primary-white));
+  margin-left: 8px;
+  font-size: 12px;
+  letter-spacing: 0.4px;
+  line-height: 16px;
+}
+.help-btn-wrapper.beacon {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  width: 100%;
+  text-transform: uppercase;
+  padding-left: 8px;
+}
+.help-btn-wrapper.beacon.collapsed {
+  justify-content: center;
+  flex-direction: column;
+  padding-left: 0;
+}
+.help-btn-wrapper.beacon .help-articles-btn {
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  background: none;
+  padding: 10px 0px 10px 8px;
+  border: none;
+  text-transform: inherit;
+}
+.help-btn-wrapper.beacon .help-articles-btn:focus-visible {
+  outline: var(--orange) solid 2px;
+  outline-offset: 0;
+  box-shadow: inset 0 0 0 3px var(--primary-white);
+  border-radius: 3px;
+}
+.help-btn-wrapper.beacon .help-articles-btn .help-center-btn-icon {
+  min-width: 32px;
+  width: 32px;
+}
+.help-btn-wrapper.beacon .help-articles-btn.collapsed {
+  padding: 10px 0px;
+}
+.help-btn-wrapper.beacon .help-btn-actions {
+  visibility: hidden;
+  max-height: 0px;
+  overflow-y: hidden;
+  transition: all 0.5s ease-in-out;
+}
+.help-btn-wrapper.beacon .help-btn-actions.expanded {
+  visibility: visible;
+  margin-top: -8px;
+  padding-bottom: 6px;
+}
+.help-btn-wrapper.beacon .help-btn-action {
+  border: none;
+  padding: 0;
+  background: none;
+  color: var(--nav-text-color, var(--primary-white));
+  cursor: pointer;
+  font-size: 14px;
+  text-align: left;
+  position: relative;
+  padding: 6px 51px 6px 45px;
+}
+.help-btn-wrapper.beacon .help-btn-action:hover:before {
+  content: "";
+  z-index: -1;
+  position: absolute;
+  top: 0px;
+  bottom: 0px;
+  right: 0px;
+  left: -45px;
+  background-color: var(--nav-background-color, var(--purple-70));
+}
+.help-btn-wrapper.beacon .caret-icon {
+  margin-left: auto;
+  transition: transform 0.2s ease-in-out;
+  background: none;
+}
+.help-btn-wrapper.beacon .caret-icon.collapse {
+  transform: rotate(0.5turn);
+}
+.help-btn-wrapper.beacon svg {
+  border-radius: 4px;
+  color: inherit;
+}
+.help-btn-wrapper.beacon span {
   color: var(--nav-text-color, var(--primary-white));
   margin-left: 8px;
   font-size: 12px;

package/dist/runtime/components/Nav/NotificationItem.vue

@@ -3,127 +3,95 @@
     class="notification-item"
     :class="{ 'notification-item--in-badge': showBadgeActions }"
   >
-    <div class="notification-item__header">
+    <div
+      class="notification-item__main"
+      role="button"
+      tabindex="0"
+      @click="handleClick"
+      @keydown.enter.prevent="handleClick"
+    >
       <div
-        class="notification-item__main"
-        role="button"
-        tabindex="0"
-        @click="handleClick"
-        @keydown.enter.prevent="handleClick"
+        class="notification-item__avatar"
+        :style="{ '--type-accent': typeAccent }"
       >
-        <div
-          class="notification-item__avatar"
-          :style="{ '--type-accent': typeAccent }"
-        >
-          <div class="notification-item__avatar-ring">
-            <NavAvatar
-              :name="primaryActor.name"
-              :src="primaryActor.avatarUrl"
-              class="notification-item__avatar-image"
-            />
-          </div>
-          <span
-            v-if="groupBadgeLabel"
-            class="notification-item__group-badge"
-            aria-hidden="true"
-          >
-            {{ groupBadgeLabel }}
-          </span>
-          <span
-            v-else
-            class="notification-item__type-badge"
-            aria-hidden="true"
-          >
-            <component :is="typeIcon" />
-          </span>
-        </div>
-
-        <div class="notification-item__content">
-          <p class="notification-item__message">
-            {{ item.actionText }}
-          </p>
-          <p class="notification-item__meta">
-            <span>{{ item.timestampLabel }}</span>
-            <template v-if="item.contextLabel">
-              <span
-                class="notification-item__meta-separator"
-                aria-hidden="true"
-                >·</span
-              >
-              <span>{{ item.contextLabel }}</span>
-            </template>
-          </p>
-          <Tag
-            v-if="item.stateLabel"
-            :value="item.stateLabel"
-            severity="secondary"
-            class="notification-item__state-chip"
+        <div class="notification-item__avatar-ring">
+          <NavAvatar
+            :name="primaryActor.name"
+            :src="primaryActor.avatarUrl"
+            class="notification-item__avatar-image"
           />
         </div>
-      </div>
-
-      <div class="notification-item__actions">
         <span
-          v-if="showBadgeActions"
-          class="notification-item__unread-dot"
+          v-if="groupBadgeLabel"
+          class="notification-item__group-badge"
           aria-hidden="true"
-        />
-        <Button
-          v-if="showBadgeActions"
-          type="button"
-          severity="secondary"
-          text
-          rounded
-          class="notification-item__dismiss"
-          :aria-label="$t('navigation.notificationsPanel.dismiss')"
-          @click="handleDismiss"
         >
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="16"
-            height="16"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            aria-hidden="true"
-          >
-            <path d="M18 6 6 18" />
-            <path d="m6 6 12 12" />
-          </svg>
-        </Button>
+          {{ groupBadgeLabel }}
+        </span>
+        <span
+          class="notification-item__type-badge"
+          aria-hidden="true"
+        >
+          <component :is="typeIcon" />
+        </span>
+      </div>
+
+      <div class="notification-item__content">
+        <p class="notification-item__message">
+          {{ item.actionText }}
+        </p>
+        <p class="notification-item__meta">
+          <span>{{ item.timestampLabel }}</span>
+          <template v-if="item.contextLabel">
+            <span
+              class="notification-item__meta-separator"
+              aria-hidden="true"
+              >·</span
+            >
+            <span>{{ item.contextLabel }}</span>
+          </template>
+        </p>
+        <Tag
+          v-if="item.stateLabel"
+          :value="item.stateLabel"
+          severity="secondary"
+          class="notification-item__state-chip"
+        />
       </div>
     </div>
 
-    <div
-      v-if="item.summary"
-      class="notification-item__summary"
-      role="button"
-      tabindex="0"
-      @click="handleClick"
-      @keydown.enter.prevent="handleClick"
-    >
-      <template v-if="reactionEmojis.length">
-        <span
-          class="notification-item__reactions"
+    <div class="notification-item__actions">
+      <span
+        v-if="showBadgeActions"
+        class="notification-item__unread-dot"
+        aria-hidden="true"
+      />
+      <Button
+        v-if="showBadgeActions"
+        type="button"
+        severity="secondary"
+        text
+        rounded
+        class="notification-item__dismiss"
+        :aria-label="$t('navigation.notificationsPanel.dismiss')"
+        @click="handleDismiss"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="16"
+          height="16"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
           aria-hidden="true"
         >
-          <span
-            v-for="(emoji, index) in reactionEmojis"
-            :key="`${emoji}-${index}`"
-            class="notification-item__reaction"
-          >{{ emoji }}</span>
-        </span>
-        <span class="notification-item__summary-on">
-          {{ " " }}{{ $t("navigation.notificationsPanel.summaryOn") }}{{ " " }}
-        </span>
-      </template>
-      <span class="notification-item__summary-text">
-        <template v-if="reactionEmojis.length">"{{ item.summary }}"</template>
-        <template v-else>{{ item.summary }}</template>
-      </span>
+          <path d="M18 6 6 18" />
+          <path d="m6 6 12 12" />
+        </svg>
+      </Button>
     </div>
   </div>
 </template>
@@ -140,7 +108,6 @@ const emit = defineEmits(["dismiss", "select"]);
 const primaryActor = computed(() => props.item.actors[0] || { name: "" });
 const typeAccent = computed(() => getTypeAccent(props.item.type));
 const showBadgeActions = computed(() => isInBadge(props.item));
-const reactionEmojis = computed(() => props.item.reactionEmojis ?? []);
 const groupBadgeLabel = computed(() => {
   const count = props.item.groupCount ?? Math.max(props.item.actors.length - 1, 0);
   return count > 0 ? `+${count}` : "";
@@ -222,8 +189,10 @@ function handleDismiss(event) {
 
 <style scoped>
 .notification-item {
-  display: flex;
-  flex-direction: column;
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: 12px;
+  align-items: start;
   width: 100%;
   padding: 12px;
   border: 1px solid rgb(232, 232, 236);
@@ -234,12 +203,6 @@ function handleDismiss(event) {
   box-shadow: none;
   transition: border-color 0.15s ease, box-shadow 0.15s ease;
 }
-.notification-item__header {
-  display: grid;
-  grid-template-columns: 1fr auto;
-  gap: 12px;
-  align-items: start;
-}
 .notification-item__main {
   display: grid;
   grid-template-columns: auto 1fr;
@@ -345,38 +308,6 @@ function handleDismiss(event) {
 .notification-item__state-chip {
   margin-top: 8px;
 }
-.notification-item__summary {
-  margin-top: 12px;
-  padding-top: 12px;
-  border-top: 1px solid rgb(232, 232, 236);
-  cursor: pointer;
-  font-size: 13px;
-  line-height: 18px;
-  color: var(--grey-70, #4b5563);
-}
-.notification-item__summary:focus-visible {
-  outline: 2px solid var(--purple-60, #662e80);
-  outline-offset: 2px;
-  border-radius: 4px;
-}
-.notification-item__reactions {
-  display: inline;
-  white-space: nowrap;
-}
-.notification-item__reaction {
-  font-size: 14px;
-  line-height: 1;
-}
-.notification-item__summary-on {
-  margin-inline: 0.25em;
-  color: var(--grey-50, #747474);
-}
-.notification-item__summary-text {
-  font-style: italic;
-  color: var(--grey-70, #4b5563);
-  white-space: normal;
-  overflow-wrap: anywhere;
-}
 .notification-item__actions {
   display: flex;
   align-items: center;

package/dist/runtime/components/Nav/NotificationItem.vue.d.ts

@@ -3,10 +3,10 @@ type __VLS_Props = {
     item: INotificationItem;
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    select: (item: INotificationItem) => any;
     dismiss: (id: string) => any;
+    select: (item: INotificationItem) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onSelect?: ((item: INotificationItem) => any) | undefined;
     onDismiss?: ((id: string) => any) | undefined;
+    onSelect?: ((item: INotificationItem) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/runtime/components/Nav/NotificationsPanel.vue.d.ts

@@ -13,11 +13,6 @@ type __VLS_Props = {
     mobile?: boolean;
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    select: (payload: {
-        item: INotificationsPanelData["groups"][number]["notifications"][number];
-        tabId: string;
-        filterId: string;
-    }) => any;
     "update:activeTabId": (id: string) => any;
     "update:activeFilterId": (id: string) => any;
     "update:filterCatalog": (filters: INotificationFilter[]) => any;
@@ -31,13 +26,13 @@ declare const _default: import("vue").DefineComponent<__VLS_Props, void, {}, {},
         tabId: string;
         filterId: string;
     }) => any;
-    close: () => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onSelect?: ((payload: {
+    select: (payload: {
         item: INotificationsPanelData["groups"][number]["notifications"][number];
         tabId: string;
         filterId: string;
-    }) => any) | undefined;
+    }) => any;
+    close: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     "onUpdate:activeTabId"?: ((id: string) => any) | undefined;
     "onUpdate:activeFilterId"?: ((id: string) => any) | undefined;
     "onUpdate:filterCatalog"?: ((filters: INotificationFilter[]) => any) | undefined;
@@ -51,6 +46,11 @@ declare const _default: import("vue").DefineComponent<__VLS_Props, void, {}, {},
         tabId: string;
         filterId: string;
     }) => any) | undefined;
+    onSelect?: ((payload: {
+        item: INotificationsPanelData["groups"][number]["notifications"][number];
+        tabId: string;
+        filterId: string;
+    }) => any) | undefined;
     onClose?: (() => any) | undefined;
 }>, {
     loading: boolean;