@explorer-1/vue 1.0.6 → 1.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@explorer-1/vue",
-  "version": "1.0.6",
+  "version": "1.1.1",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -13,37 +13,38 @@
   "type": "module",
   "prettier": "@explorer-1/prettier-config",
   "dependencies": {
-    "@fancyapps/ui": "^4.0.26",
-    "@tailwindcss/forms": "^0.5.7",
-    "ag-grid-vue3": "^33.2.0",
-    "animejs": "^3.2.2",
+    "@fancyapps/ui": "^6.1.11",
+    "@tailwindcss/forms": "^0.5.11",
+    "ag-grid-vue3": "^35.0.1",
+    "animejs": "^4.3.5",
     "click-outside-vue3": "^4.0.1",
     "datebook": "^8.0.1",
-    "dayjs": "^1.11.11",
-    "fast-qs": "^2.0.3",
-    "lodash": "^4.17.21",
+    "dayjs": "^1.11.19",
+    "fast-qs": "^2.1.2",
+    "lodash": "^4.17.23",
     "mitt": "^3.0.1",
-    "sass": "^1.77.4",
-    "swiper": "^11.1.3",
-    "tailwindcss": "^3.4.3",
+    "sass": "^1.97.3",
+    "swiper": "^12.1.2",
+    "tailwindcss": "^3.4.19",
     "twitter-widgets": "^2.0.0",
-    "vue": "^3.5.3",
+    "vue": "^3.5.28",
     "vue-bind-once": "^0.2.1",
+    "vue-router": "^5.0.2",
     "vue3-compare-image": "^1.2.5",
-    "vue3-observe-visibility": "^1.0.1",
-    "@explorer-1/common": "2.0.4"
+    "vue3-observe-visibility": "^1.0.4",
+    "@explorer-1/common": "2.1.1"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^5.0.4",
-    "a11y-dialog": "^8.1.0",
-    "autoprefixer": "^10.4.19",
-    "postcss": "^8.4.38",
-    "postcss-import": "^16.1.0",
-    "typescript": "^5.4.5",
-    "unplugin-vue-components": "^0.27.0",
-    "vite": "^5.3.1",
-    "vite-plugin-dts": "^3.9.1",
-    "vue-tsc": "^2.0.6",
+    "@vitejs/plugin-vue": "^6.0.4",
+    "a11y-dialog": "^8.1.5",
+    "autoprefixer": "^10.4.24",
+    "postcss": "^8.5.6",
+    "postcss-import": "^16.1.1",
+    "typescript": "^5.9.3",
+    "unplugin-vue-components": "^31.0.0",
+    "vite": "^7.3.1",
+    "vite-plugin-dts": "^4.5.4",
+    "vue-tsc": "^3.2.4",
     "@explorer-1/prettier-config": "1.0.0"
   },
   "storybook": {

package/src/components/AttractionCard/AttractionCard.vue

@@ -0,0 +1,113 @@
+<script setup lang="ts">
+import type { PropType } from 'vue'
+import type { HeadingLevel } from './../BaseHeading/BaseHeading.vue'
+import BaseLink from './../BaseLink/BaseLink.vue'
+import BaseHeading from './../BaseHeading/BaseHeading.vue'
+import BaseImage from './../BaseImage/BaseImage.vue'
+import BaseImagePlaceholder from './../BaseImagePlaceholder/BaseImagePlaceholder.vue'
+import MetadataStacked from '../MetadataStacked/MetadataStacked.vue'
+
+const props = defineProps({
+  /**
+   * The link for the listing card.
+   */
+  url: {
+    type: String,
+    default: undefined
+  },
+  /**
+   * The title text for the listing card. Plain text only.
+   */
+  title: {
+    type: String,
+    default: undefined
+  },
+  /**
+   * The text for location metadata. Plain text only.
+   */
+  location: {
+    type: String,
+    default: undefined
+  },
+  /**
+   * The text name for the location icon. Defaults to Explorer-1 location icon. Plain text only.
+   */
+  locationIcon: {
+    type: String,
+    default: undefined
+  },
+  /**
+   * The text for the wait time metadata. Plain text only.
+   */
+  wait: {
+    type: String,
+    default: undefined
+  },
+  /**
+   * The image for the listing card.
+   */
+  image: {
+    type: Object
+  },
+  /**
+   * Controls the visibility of the Bookmark icon and its associated metadata.
+   */
+  showMyList: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * Change the heading level for semantic markup. This does not affect the style of the heading.
+   */
+  headingLevel: {
+    type: (String as PropType<HeadingLevel>) || null,
+    required: false,
+    default: 'h5'
+  }
+})
+</script>
+
+<template>
+  <BaseLink
+    variant="none"
+    :to="props.url"
+    class="SearchResultCard AttractionCard"
+    link-class="block"
+  >
+    <div
+      class="border-gray-light-mid lg:pb-10 lg:mb-10 relative grid grid-cols-12 gap-5 pb-6 mb-6 border-b"
+    >
+      <div class="col-span-9">
+        <BaseHeading
+          v-if="props.title"
+          :level="props.headingLevel"
+          size="h5"
+          class="mb-5"
+          >{{ props.title }}
+        </BaseHeading>
+        <MetadataStacked
+          :location="props.location"
+          :wait="props.wait"
+          :show-my-list="props.showMyList"
+          :location-icon="props.locationIcon"
+        />
+      </div>
+      <div
+        v-if="props.image"
+        class="SearchResultCard-image col-span-3"
+      >
+        <BaseImagePlaceholder aspect-ratio="square">
+          <BaseImage
+            v-if="props.image.src"
+            :src="props.image.src.url"
+            :width="props.image.src.width"
+            :height="props.image.src.height"
+            alt=""
+            object-fit-class="cover"
+            loading="lazy"
+          />
+        </BaseImagePlaceholder>
+      </div>
+    </div>
+  </BaseLink>
+</template>

package/src/components/BaseButton/BaseButton.stories.ts

@@ -8,8 +8,8 @@ export default {
   parameters: {
     slots: {
       default: 'The contents of the button, usually text. Override with `<template #default>`',
-      icon: 'Appears to the right of the `default` slot. Override with `<template #icon>`',
-      afterIcon: 'Appears to the right of the `icon` slot. Override with `<template #afterIcon>`'
+      iconLeft: 'Appears to the left of the `default` slot. Override with `<template #iconLeft>`',
+      iconRight: 'Appears to the right of the `default` slot. Override with `<template #iconRight>`'
     },
     docs: {
       description: {

package/src/components/BaseButton/BaseButton.vue

@@ -108,7 +108,7 @@ export default defineComponent({
     },
     variantClass(): string {
       let classes = variants[this.variant]
-      if (!this.$slots.default && this.$slots.icon) {
+      if (!this.$slots.default && (this.$slots.iconRight || this.$slots.iconLeft)) {
         classes = classes + ' -icon-only'
       } else if (this.compact) {
         classes = classes + ' -compact'
@@ -133,11 +133,11 @@ export default defineComponent({
     :to="computedTo ? computedTo : undefined"
     @click="$emit('click')"
   >
-    <span class="label block">
-      <slot name="default"></slot>
-      <slot name="icon"></slot>
-      <slot name="afterIcon"></slot>
-    </span>
+    <div class="label flex">
+      <span><slot name="iconLeft"></slot></span>
+      <span><slot name="default"></slot></span>
+      <span><slot name="iconRight"></slot></span>
+    </div>
   </component>
 </template>
 <style lang="scss">

package/src/components/BaseCarousel/BaseCarousel.vue

@@ -13,7 +13,7 @@
             class="swiper-prev xl:text-xl border-collapse"
             aria-label="Previous slide"
           >
-            <template #icon>
+            <template #iconRight>
               <IconPrev />
             </template>
           </BaseButton>
@@ -21,7 +21,7 @@
             class="swiper-next xl:text-xl border-collapse"
             aria-label="Next slide"
           >
-            <template #icon>
+            <template #iconRight>
               <IconNext />
             </template>
           </BaseButton>

package/src/components/BaseLink/BaseLink.stories.js

@@ -47,3 +47,11 @@ export const Unstyled = {
     variant: 'none'
   }
 }
+
+export const WithLeadingIcon = {
+  args: {
+    ...BaseLinkData,
+    variant: 'primary',
+    caretLeft: true
+  }
+}

package/src/components/BaseLink/BaseLink.vue

@@ -108,12 +108,24 @@ export default defineComponent({
       required: false,
       default: ''
     },
-    /** Customize the left margin of the caret using Tailwind classes */
+    /** Customize the left margin of the caret using Tailwind classes. Only applied when caretLeft is set to false. */
     caretMarginLeft: {
       type: String,
       required: false,
       default: ''
     },
+    /** Customize the right margin of the caret using Tailwind classes. Only applied when caretLeft is set to true. */
+    caretMarginRight: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    /** Modifies the icon and animation to appear on the left of the text slot */
+    caretLeft: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     /** Overrides the theme's `active` color and uses the `primary` color instead. */
     usePrimaryColor: {
       type: Boolean,
@@ -270,6 +282,8 @@ export default defineComponent({
           :arrow-class="caretClass"
           :color="caretColor"
           :margin-left="caretMarginLeft"
+          :margin-right="caretMarginRight"
+          :caret-left="caretLeft"
         >
           <slot></slot>
         </MixinAnimationCaret>
@@ -280,6 +294,8 @@ export default defineComponent({
         :arrow-class="caretClass"
         :color="caretColor"
         :margin-left="caretMarginLeft"
+        :margin-right="caretMarginRight"
+        :caret-left="caretLeft"
       >
         <slot></slot>
       </MixinAnimationCaret>
@@ -305,6 +321,8 @@ export default defineComponent({
           :arrow-class="caretClass"
           :color="caretColor"
           :margin-left="caretMarginLeft"
+          :margin-right="caretMarginRight"
+          :caret-left="caretLeft"
         >
           <slot></slot>
         </MixinAnimationCaret>
@@ -315,6 +333,8 @@ export default defineComponent({
         :arrow-class="caretClass"
         :color="caretColor"
         :margin-left="caretMarginLeft"
+        :margin-right="caretMarginRight"
+        :caret-left="caretLeft"
       >
         <slot></slot>
       </MixinAnimationCaret>

package/src/components/BlockAccordion/BlockAccordion.vue

@@ -26,7 +26,7 @@ export interface AccordionBlockObject {
   accordionItemsHeadingLevel: string
   accordionItems: AccordionItemBlock[]
 }
-interface BlockAccordionProps {
+export interface BlockAccordionProps {
   data: AccordionBlockObject
 }
 

package/src/components/BlockCsrTable/BlockCsrTable.vue

@@ -17,7 +17,7 @@ import { AgGridVue } from 'ag-grid-vue3'
 ModuleRegistry.registerModules([AllCommunityModule])
 ModuleRegistry.registerModules([ValidationModule])
 
-interface BlockCsrTableProps {
+export interface BlockCsrTableProps {
   rowData?: BlockCsrTableRow[]
   attachmentPrefix?: string
   apiEndpoint?: string

package/src/components/BlockCsrTable/CsrTestLimitsTable.vue

@@ -23,6 +23,7 @@ withDefaults(defineProps<CsrTestLimitsTableProps>(), {
 const headerClass = [
   'bg-jpl-blue-darker edu:bg-jpl-violet-darker font-secondary text-white text-sm border-gray-light-mid px-3 border-b text-left'
 ]
+// @ts-ignore
 const CsrTestLimitsTableRef = ref()
 const theme = themeMaterial.withParams({
   accentColor: 'rgb(25 156 227)', // jpl-blue-light

package/src/components/BlockCta/BlockCta.vue

@@ -20,7 +20,7 @@
       class="md:mt-5 md:mb-2 mt-4 mb-1"
     >
       {{ data.text }}
-      <template #icon><IconExternal class="ml-2 text-sm" /></template>
+      <template #iconRight><IconExternal class="ml-2 text-sm" /></template>
       <!-- TODO: replace with external link icon once icons are available -->
     </BaseButton>
   </div>

package/src/components/BlockGist/BlockGist.vue

@@ -9,11 +9,12 @@ export interface BlockGistData extends BlockData {
   id?: string
   url?: string
 }
-interface BlockGistProps {
+export interface BlockGistProps {
   data: BlockGistData
 }
 
 const props = defineProps<BlockGistProps>()
+// @ts-ignore
 const frame = ref()
 const loaded = ref(false)
 const checkGistLoaded = async () => {

package/src/components/BlockImageCarousel/BlockImageCarousel.vue

@@ -27,7 +27,7 @@
               class="swiper-prev !text-lg xl:!text-xl border-collapse"
               aria-label="Previous slide"
             >
-              <template #icon>
+              <template #iconRight>
                 <IconPrev />
               </template>
             </BaseButton>
@@ -35,7 +35,7 @@
               class="swiper-next !text-lg xl:!text-xl border-collapse"
               aria-label="Next slide"
             >
-              <template #icon>
+              <template #iconRight>
                 <IconNext />
               </template>
             </BaseButton>

package/src/components/BlockLinkCard/BlockLinkCardCollectionLg.vue

@@ -8,7 +8,7 @@ import BaseImagePlaceholder from './../BaseImagePlaceholder/BaseImagePlaceholder
 import BasePill from './../BasePill/BasePill.vue'
 import MetadataEduResource from './../MetadataEduResource/MetadataEduResource.vue'
 
-interface BlockLinkCardCollectionLgProps {
+export interface BlockLinkCardCollectionLgProps {
   theItem?: EduResourceCardObject
   metadataType?: ContentTypeKey
   metadataAttrs?: any

package/src/components/CalendarChip/CalendarChip.vue

@@ -4,7 +4,7 @@ import { useThemeStore } from '../../store/theme'
 import { mixinFormatSplitEventDates } from './../../utils/mixins'
 const themeStore = useThemeStore()
 
-interface CalendarChipProps {
+export interface CalendarChipProps {
   startDate?: string
   endDate?: string
   ongoing?: boolean

package/src/components/HeroInlineMedia/HeroInlineMedia.vue

@@ -12,7 +12,7 @@ import BlockImageStandard from './../BlockImage/BlockImageStandard.vue'
 import BlockVideo, { type BlockVideoData } from './../BlockVideo/BlockVideo.vue'
 import type { StreamfieldBlockData } from './../../interfaces'
 
-interface HeroInlineMediaProps {
+export interface HeroInlineMediaProps {
   heroBlocks: StreamfieldBlockData[]
   constrain?: boolean
 }

package/src/components/HomepageMissionsCarousel/HomepageMissionsCarousel.vue

@@ -62,7 +62,7 @@
                   class="swiper-prev xl:text-base -ml-16"
                   :aria-label="data.heading + ' - Previous slide'"
                 >
-                  <template #icon>
+                  <template #iconRight>
                     <span
                       class="arrow-wrapper"
                       aria-hidden="true"
@@ -82,7 +82,7 @@
                   class="swiper-next xl:text-base -mr-16"
                   :aria-label="data.heading + ' - Next slide'"
                 >
-                  <template #icon>
+                  <template #iconRight>
                     <span
                       class="arrow-wrapper"
                       aria-hidden="true"

package/src/components/Icons/IconBookmark.vue

@@ -0,0 +1,25 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    class="IconBookmark"
+    width="16"
+    height="21"
+    viewBox="0 0 16 21"
+    fill="none"
+  >
+    >
+    <path
+      d="M0 21L8 16.4062L16 21V0H0V21Z"
+      fill="#949494"
+    />
+  </svg>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue'
+export default defineComponent({
+  name: 'IconHourglass'
+})
+</script>
+<style lang="scss">
+@import '@explorer-1/common/src/scss/components/IconHourglass';
+</style>

package/src/components/Icons/IconHourglass.vue

@@ -0,0 +1,35 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    class="IconHourglass"
+    width="21"
+    height="20"
+    viewBox="0 0 21 20"
+    fill="none"
+  >
+    <g clip-path="url(#clip0_162_26354)">
+      <path
+        d="M0.875 0H0V1.875H0.875H1.16667V4.6875V5.07422L1.42188 5.34766L5.76042 9.99609L1.42188 14.6484L1.16667 14.9219V15.3086V18.1211H0.875L0 18.125V20H0.875H12.0604C11.3932 19.4961 10.8172 18.8594 10.3724 18.125H2.91667V15.6992L7 11.3242L9.35156 13.8438C9.40625 13.0898 9.57031 12.3711 9.83281 11.707L8.23594 10L12.5781 5.35156L12.8333 5.07812V4.69141V1.87891H13.125H14V0.00390625L13.125 0H0.875ZM11.0833 1.875V4.30078L7 8.67578L2.91667 4.30078V1.875H11.0833ZM21 14.375C21 12.8832 20.4469 11.4524 19.4623 10.3975C18.4777 9.34263 17.1424 8.75 15.75 8.75C14.3576 8.75 13.0223 9.34263 12.0377 10.3975C11.0531 11.4524 10.5 12.8832 10.5 14.375C10.5 15.8668 11.0531 17.2976 12.0377 18.3525C13.0223 19.4074 14.3576 20 15.75 20C17.1424 20 18.4777 19.4074 19.4623 18.3525C20.4469 17.2976 21 15.8668 21 14.375ZM16.3333 11.25V11.875V13.75H17.5H18.0833V15H17.5H15.75H15.1667V14.375V11.875V11.25H16.3333Z"
+        fill="currentColor"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_162_26354">
+        <rect
+          width="21"
+          height="20"
+          fill="white"
+        />
+      </clipPath>
+    </defs>
+  </svg>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue'
+export default defineComponent({
+  name: 'IconHourglass'
+})
+</script>
+<style lang="scss">
+@import '@explorer-1/common/src/scss/components/IconHourglass';
+</style>

package/src/components/Icons/IconLocationCrosshairs.vue

@@ -0,0 +1,26 @@
+<template>
+  <svg
+    class="IconLocationCrosshairs"
+    xmlns="http://www.w3.org/2000/svg"
+    width="32"
+    height="32"
+    viewBox="0 0 32 32"
+    fill="none"
+    aria-hidden="true"
+    focusable="false"
+  >
+    <path
+      d="M18 0V2V4.16875C23.025 5.00625 26.9937 8.975 27.8312 14H30H32V18H30H27.8312C26.9937 23.025 23.025 26.9937 18 27.8312V30V32H14V30V27.8312C8.975 26.9937 5.00625 23.025 4.16875 18H2H0V14H2H4.16875C5.00625 8.975 8.975 5.00625 14 4.16875V2V0H18ZM8 16C8 18.1217 8.84285 20.1566 10.3431 21.6569C11.8434 23.1571 13.8783 24 16 24C18.1217 24 20.1566 23.1571 21.6569 21.6569C23.1571 20.1566 24 18.1217 24 16C24 13.8783 23.1571 11.8434 21.6569 10.3431C20.1566 8.84285 18.1217 8 16 8C13.8783 8 11.8434 8.84285 10.3431 10.3431C8.84285 11.8434 8 13.8783 8 16ZM16 11C17.3261 11 18.5979 11.5268 19.5355 12.4645C20.4732 13.4021 21 14.6739 21 16C21 17.3261 20.4732 18.5979 19.5355 19.5355C18.5979 20.4732 17.3261 21 16 21C14.6739 21 13.4021 20.4732 12.4645 19.5355C11.5268 18.5979 11 17.3261 11 16C11 14.6739 11.5268 13.4021 12.4645 12.4645C13.4021 11.5268 14.6739 11 16 11Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue'
+export default defineComponent({
+  name: 'IconLocationCrosshairs'
+})
+</script>
+<style lang="scss">
+@import '@explorer-1/common/src/scss/components/IconLocationCrosshairs';
+</style>

package/src/components/Icons/IconMap.vue

@@ -0,0 +1,26 @@
+<template>
+  <svg
+    class="IconMap"
+    xmlns="http://www.w3.org/2000/svg"
+    width="25"
+    height="25"
+    viewBox="0 0 25 25"
+    fill="none"
+    aria-hidden="true"
+    focusable="false"
+  >
+    <path
+      d="M22.5 4.375V2.86719C22.1875 3.02344 20.1094 4.04687 16.2695 5.94141L9.05078 3.48828L8.69141 3.36719L8.34766 3.52734L3.03516 6.02734L2.49609 6.28125V22.1016C2.78125 21.9688 4.88672 20.9766 8.80469 19.1328L15.3398 21.3125C14.9805 20.7422 14.6328 20.1289 14.3398 19.4922C14.2539 19.3086 14.1719 19.1172 14.0938 18.9219L9.99609 17.5547V5.79297L14.9961 7.49219V11.6602C15.5195 11.0508 16.1562 10.543 16.8711 10.1602V7.73828L20.6211 5.88672V9.40625C21.2773 9.46875 21.9062 9.625 22.4961 9.86328L22.5 4.375ZM8.125 5.70703V17.3867L4.375 19.1523V7.47266L8.125 5.70703ZM20 11.25C17.4102 11.25 15.3125 13.3125 15.3125 15.8555C15.3125 19.5391 20 24.1406 20 24.1406C20 24.1406 24.6875 19.5352 24.6875 15.8555C24.6875 13.3125 22.5898 11.25 20 11.25ZM18.4375 15.9375C18.4375 15.5231 18.6021 15.1257 18.8951 14.8326C19.1882 14.5396 19.5856 14.375 20 14.375C20.4144 14.375 20.8118 14.5396 21.1049 14.8326C21.3979 15.1257 21.5625 15.5231 21.5625 15.9375C21.5625 16.3519 21.3979 16.7493 21.1049 17.0424C20.8118 17.3354 20.4144 17.5 20 17.5C19.5856 17.5 19.1882 17.3354 18.8951 17.0424C18.6021 16.7493 18.4375 16.3519 18.4375 15.9375Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue'
+export default defineComponent({
+  name: 'IconMap'
+})
+</script>
+<style lang="scss">
+@import '@explorer-1/common/src/scss/components/IconMap';
+</style>

package/src/components/Icons/Icons.stories.ts

@@ -3,6 +3,7 @@ import Icon360 from './Icon360.vue'
 import IconArrows from './IconArrows.vue'
 import IconAudio from './IconAudio.vue'
 import IconBook from './IconBook.vue'
+import IconBookmark from './IconBookmark.vue'
 import IconBookUser from './IconBookUser.vue'
 import IconBriefcase from './IconBriefcase.vue'
 import IconCalendar from './IconCalendar.vue'
@@ -20,10 +21,13 @@ import IconFilter from './IconFilter.vue'
 import IconForwardTen from './IconForwardTen.vue'
 import IconGrid from './IconGrid.vue'
 import IconHand from './IconHand.vue'
+import IconHourglass from './IconHourglass.vue'
 import IconInfo from './IconInfo.vue'
 import IconLink from './IconLink.vue'
 import IconList from './IconList.vue'
 import IconLocation from './IconLocation.vue'
+import IconLocationCrosshairs from './IconLocationCrosshairs.vue'
+import IconMap from './IconMap.vue'
 import IconMagnifyingGlass from './IconMagnifyingGlass.vue'
 import IconMedal from './IconMedal.vue'
 import IconMenu from './IconMenu.vue'
@@ -89,6 +93,7 @@ export default {
     IconLink,
     IconList,
     IconLocation,
+    IconMap,
     IconMagnifyingGlass,
     IconMedal,
     IconMenu,
@@ -160,6 +165,12 @@ export const Book = {
     template: '<IconBook />'
   })
 }
+export const Bookmark = {
+  render: () => ({
+    components: { IconBookmark },
+    template: '<IconBookmark />'
+  })
+}
 export const BookUser = {
   render: () => ({
     components: { IconBookUser },
@@ -262,6 +273,12 @@ export const Hand = {
     template: '<IconHand />'
   })
 }
+export const Hourglass = {
+  render: () => ({
+    components: { IconHourglass },
+    template: '<IconHourglass />'
+  })
+}
 export const Info = {
   render: () => ({
     components: { IconInfo },
@@ -286,6 +303,18 @@ export const Location = {
     template: '<IconLocation />'
   })
 }
+export const LocationCrosshairs = {
+  render: () => ({
+    components: { IconLocationCrosshairs },
+    template: '<IconLocationCrosshairs />'
+  })
+}
+export const Map = {
+  render: () => ({
+    components: { IconMap },
+    template: '<IconMap />'
+  })
+}
 export const MagnifyingGlass = {
   render: () => ({
     components: { IconMagnifyingGlass },

package/src/components/MetaPanel/MetaPanel.vue

@@ -152,7 +152,7 @@ const standardsIste = computed(() => {
                 @click="handleMetaPanel"
               >
                 {{ buttonText }}
-                <template #icon>
+                <template #iconRight>
                   <IconPlus
                     v-if="!metaPanelOpen"
                     class="text-xs ml-2"

package/src/components/MetadataEduResource/MetadataEduResource.vue

@@ -8,7 +8,7 @@ import IconProfile from './../Icons/IconProfile.vue'
 import IconTime from './../Icons/IconTime.vue'
 import { rangeifyGrades } from './../../utils/rangeifyGrades'
 
-interface MetadataEduResourceProps {
+export interface MetadataEduResourceProps {
   resource: EduResourceCardObject
   /** If compact styling should be used */
   compact?: boolean

package/src/components/MetadataEvent/MetadataEvent.vue

@@ -9,7 +9,7 @@ import IconLocation from './../Icons/IconLocation.vue'
 import { mixinFormatEventDates, mixinFormatEventTimeInHoursAndMinutes } from './../../utils/mixins'
 const themeStore = useThemeStore()
 
-interface MetadataEventProps {
+export interface MetadataEventProps {
   event: EventCardObject
   compact?: boolean
   allowBreak?: boolean