@explorer-1/vue 1.1.0 → 1.1.2

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/MetadataStacked/MetadataStacked.stories.js

@@ -0,0 +1,21 @@
+import MetadataStacked from './MetadataStacked.vue'
+
+export default {
+  title: 'Components/Utilities/MetadataStacked',
+  component: MetadataStacked,
+  tags: [],
+  excludeStories: /.*Data$/
+}
+
+// data
+export const MetadataStackedData = {
+  location: 'Building 179, Highbay 1',
+  locationIcon: '',
+  wait: '45 minute wait',
+  showMyList: true
+}
+
+export const BaseStory = {
+  name: 'MetadataStacked',
+  args: MetadataStackedData
+}

package/src/components/MetadataStacked/MetadataStacked.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import IconBookmark from '../Icons/IconBookmark.vue'
+import IconHourglass from '../Icons/IconHourglass.vue'
+import IconLocation from '../Icons/IconLocation.vue'
+
+const props = defineProps({
+  /**
+   * 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
+  },
+  /**
+   * Controls the visibility of the Bookmark icon and its associated metadata.
+   */
+  showMyList: {
+    type: Boolean,
+    default: false
+  }
+})
+</script>
+
+<template>
+  <div class="MetadataStacked inline-flex flex-col flex-start gap-2.5 text-body-md">
+    <div
+      v-if="props.location"
+      class="flex flex-row gap-2.5 items-center self-stretch"
+    >
+      <img
+        v-if="props.locationIcon"
+        :src="props.locationIcon"
+        class="w-4 h-4"
+        alt=""
+      />
+      <IconLocation
+        v-else
+        class="MetadataStackedIcon text-jpl-red"
+      />
+      <span>{{ props.location }}</span>
+    </div>
+    <div
+      v-if="props.wait"
+      class="flex flex-row gap-2.5 items-center self-stretch"
+    >
+      <IconHourglass class="MetadataStackedIcon text-jpl-red" />
+      <span>{{ props.wait }}</span>
+    </div>
+    <div
+      v-if="props.showMyList"
+      class="flex flex-row gap-2.5 items-center self-stretch"
+    >
+      <IconBookmark class="MetadataStackedIcon text-gray-mid" />
+      <span class="italic">Added to my list</span>
+    </div>
+  </div>
+</template>

package/src/components/MissionDetailHero/MissionDetailHero.vue

@@ -64,7 +64,7 @@
                 compact
               >
                 Visit Mission Website
-                <template #icon>
+                <template #iconRight>
                   <IconExternal class="ml-2 text-base" />
                 </template>
               </BaseButton>

package/src/components/MissionDetailHighlights/MissionDetailHighlightsCarousel.vue

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

package/src/components/MixinAnimationCaret/MixinAnimationCaret.vue

@@ -39,11 +39,23 @@ export default defineComponent({
       default: 'ml-1',
       required: false
     },
+    /** Default margin right class. Only appled when  when Only Use TailwindCSS classes */
+    marginRight: {
+      type: String,
+      default: 'mr-1',
+      required: false
+    },
     /** Appends .caret-inline to .MixinAnimationCaret */
     inline: {
       type: Boolean,
       default: false,
       required: false
+    },
+    /** Modify the caret icon and animation to appear on the left of the slot text */
+    caretLeft: {
+      type: Boolean,
+      default: false,
+      required: false
     }
   },
   computed: {
@@ -62,6 +74,7 @@ export default defineComponent({
 </script>
 <template>
   <span
+    v-if="!caretLeft"
     class="MixinAnimationCaret"
     :class="computedClass"
   >
@@ -81,6 +94,27 @@ export default defineComponent({
       </span>
     </span>
   </span>
+  <span
+    v-else
+    class="MixinAnimationCaret MixinAnimationCaretReverse"
+    :class="computedClass"
+  >
+    <span
+      class="arrow-wrapper"
+      :class="[arrowClass, color, marginRight]"
+      aria-hidden="true"
+    >
+      <span class="arrow right-0">
+        <IconCaret />
+      </span>
+      <span class="arrow-fixed right-0">
+        <IconCaret />
+      </span>
+    </span>
+    <span>
+      <slot></slot>
+    </span>
+  </span>
 </template>
 <style lang="scss">
 @import '@explorer-1/common/src/scss/components/MixinAnimationCaret';

package/src/components/MixinCarousel/MixinCarousel.vue

@@ -54,7 +54,7 @@
                 class="swiper-prev !text-lg xl:!text-xl"
                 :aria-label="heading + ' - Previous slide'"
               >
-                <template #icon>
+                <template #iconRight>
                   <span
                     class="arrow-wrapper"
                     aria-hidden="true"
@@ -74,7 +74,7 @@
                 class="swiper-next !text-lg xl:!text-xl"
                 :aria-label="heading + ' - Next slide'"
               >
-                <template #icon>
+                <template #iconRight>
                   <span
                     class="arrow-wrapper"
                     aria-hidden="true"

package/src/components/NavSecondary/NavSecondary.vue

@@ -8,7 +8,8 @@
       'has-intro': hasIntro,
       '!bg-transparent border-none': invert,
       '-scrolled-up': scrollDirection === 'up',
-      '-at-top': posY === 0
+      '-at-top': posY === 0,
+      'show-on-mobile': showOnMobile
     }"
   >
     <div
@@ -56,7 +57,7 @@ import type { BreadcrumbPathObject } from './../../interfaces'
 
 export default defineComponent({
   /**
-   * This component is only visible on large viewports. Mobile secondary nav is handled in the \`NavMobile\` component.
+   * This component is only visible on large viewports by default. Mobile secondary nav is handled in the \`NavMobile\` component.
    *
    * The complexity of this component is due to the need for it to be populated from multiple data sources
    * SecondaryNav will first check to see if there is a navigation override from the data fetched for this specific page (data.breadcrumb and store.header.secondaryNav)
@@ -75,19 +76,27 @@ export default defineComponent({
       required: false,
       default: undefined
     },
+    /** If hero content appears above the secondary navigation */
     hasIntro: {
       type: Boolean,
       required: false,
       default: false
     },
+    /** If colors should be inverted */
     invert: {
       type: Boolean,
       required: false,
       default: false
     },
+    /** If this should be in jump menu mode (changes color and store) */
     jumpMenu: {
       type: Boolean,
       default: false
+    },
+    /** Whether or not this should be visible on mobile devices */
+    showOnMobile: {
+      type: Boolean,
+      default: false
     }
   },
   data(): {

package/src/components/NavSocial/NavSocial.vue

@@ -17,7 +17,7 @@
       target="_blank"
       rel="noopener"
     >
-      <template #icon>
+      <template #iconRight>
         <IconSocialFacebook v-if="item.facebook" />
         <IconSocialTwitter v-else-if="item.twitter" />
         <IconSocialInstagram v-else-if="item.instagram" />

package/src/components/SearchFilterGroup/SearchFilterGroup.vue

@@ -49,9 +49,12 @@
                 "
                 class="form-check-label pl-2 tracking-normal align-middle"
               >
-                <span class="font-bold font-display">{{
-                  prettyFilterNames(bucket.key_as_string ? bucket.key_as_string : bucket.key)
-                }}</span>
+                <span class="font-bold font-display">
+                  {{
+                    bucket.label ||
+                    prettyFilterNames(bucket.key_as_string ? bucket.key_as_string : bucket.key)
+                  }}
+                </span>
                 <span class="text-gray-mid-dark font-normal text-sm">
                   ({{ bucket.doc_count.toLocaleString() }})
                 </span>
@@ -105,7 +108,10 @@
               class="form-check-label pl-2 tracking-normal align-middle"
               :class="{ 'font-display font-bold': styleAsAccordion }"
             >
-              {{ prettyFilterNames(bucket.key_as_string ? bucket.key_as_string : bucket.key) }}
+              {{
+                bucket.label ||
+                prettyFilterNames(bucket.key_as_string ? bucket.key_as_string : bucket.key)
+              }}
               <span class="text-gray-mid-dark text-sm font-normal">
                 ({{ bucket.doc_count.toLocaleString() }})
               </span>

package/src/components/SearchPagination/SearchPagination.vue

@@ -10,7 +10,7 @@
       :disabled="currentPage === 1"
       @click="previousPage()"
     >
-      <template #icon> <IconPrev /> </template
+      <template #iconRight> <IconPrev /> </template
     ></BaseButton>
 
     <div class="sm:hidden px-4 pt-1">Page {{ currentPage }} of {{ totalPages }}</div>
@@ -53,7 +53,7 @@
       aria-label="Next"
       @click="nextPage()"
     >
-      <template #icon> <IconNext /> </template
+      <template #iconRight> <IconNext /> </template
     ></BaseButton>
   </div>
 </template>

package/src/components/SearchResultCard/SearchResultCard.stories.js

@@ -77,3 +77,14 @@ export const EduEventCard = {
     pageContentType: 'edu_events_edueventpage'
   }
 }
+
+export const AttractionCard = {
+  args: {
+    ...SearchResultCardData,
+    isAttraction: true,
+    location: 'Building 179, Highbay 1',
+    locationIcon: '',
+    wait: '45 minute wait',
+    showMyList: true
+  }
+}

package/src/components/SearchResultCard/SearchResultCard.vue

@@ -60,6 +60,17 @@
       :topic="topic"
       :title="title"
     />
+    <AttractionCard
+      v-else-if="isAttraction"
+      :url="url"
+      :image="image"
+      :heading-level="headingLevel"
+      :title="title"
+      :location="location"
+      :wait="wait"
+      :show-my-list="showMyList"
+      :location-icon="locationIcon"
+    />
     <BaseLink
       v-else
       variant="none"
@@ -229,6 +240,7 @@ import BaseImage from './../BaseImage/BaseImage.vue'
 import BaseImagePlaceholder from './../BaseImagePlaceholder/BaseImagePlaceholder.vue'
 import EventCard from './../EventCard/EventCard.vue'
 import BlockLinkCard from './../BlockLinkCard/BlockLinkCard.vue'
+import AttractionCard from './../AttractionCard/AttractionCard.vue'
 import { lookupContentType } from '../../utils/lookupContentType'
 import type { HeadingLevel } from './../BaseHeading/BaseHeading.vue'
 
@@ -241,7 +253,8 @@ export default defineComponent({
     BaseImagePlaceholder,
     EventCard,
     BlockLinkCard,
-    PodcastEpisodeCard
+    PodcastEpisodeCard,
+    AttractionCard
   },
   props: {
     url: {
@@ -307,6 +320,10 @@ export default defineComponent({
       type: Boolean,
       default: false
     },
+    isAttraction: {
+      type: Boolean,
+      required: false
+    },
     media: {
       type: String,
       required: false,
@@ -375,6 +392,19 @@ export default defineComponent({
     time: {
       type: Object as PropType<EduResourcesTime>,
       default: undefined
+    },
+    wait: {
+      type: String,
+      required: false,
+      default: undefined
+    },
+    showMyList: {
+      type: Boolean,
+      default: false
+    },
+    locationIcon: {
+      type: String,
+      default: ''
     }
   },
   computed: {