@explorer-1/vue 0.2.15 → 0.2.17

package/src/components/MetaPanel/MetaPanel.vue

@@ -0,0 +1,237 @@
+<script setup lang="ts">
+import { computed, reactive, ref } from 'vue'
+import {
+  MetaPanelTheme,
+  EduResourcesGradeLevel,
+  EduResourceStandardItem,
+  EduResourcesSubject,
+  EduResourcesTime
+} from './../../interfaces'
+import MetaPanelAccordion from './../MetaPanelAccordion/MetaPanelAccordion.vue'
+import MetaPanelItems from './../MetaPanelItems/MetaPanelItems.vue'
+import IconMinus from './../Icons/IconMinus.vue'
+import IconPlus from './../Icons/IconPlus.vue'
+import BaseButton from './../BaseButton/BaseButton.vue'
+
+interface MetaPanelProps {
+  button?: string
+  theme?: MetaPanelTheme
+  primarySubject?: EduResourcesSubject
+  additionalSubjects?: EduResourcesSubject[]
+  gradeLevels?: EduResourcesGradeLevel[]
+  time?: EduResourcesTime
+  standards?: EduResourceStandardItem[]
+  negativeTop?: boolean
+  negativeBottom?: boolean
+}
+
+// define props
+const props = withDefaults(defineProps<MetaPanelProps>(), {
+  button: undefined,
+  theme: 'primary',
+  primarySubject: undefined,
+  additionalSubjects: undefined,
+  gradeLevels: undefined,
+  time: undefined,
+  standards: undefined,
+  negativeTop: false,
+  negativeBottom: false
+})
+const { button, theme, primarySubject, additionalSubjects, gradeLevels, time, standards } =
+  reactive(props)
+
+const metaPanelOpen = ref(false)
+
+const handleMetaPanel = () => {
+  metaPanelOpen.value = !metaPanelOpen.value
+}
+
+const buttonText = computed(() => {
+  let text = button
+  if (text) {
+    if (metaPanelOpen.value) {
+      text = text.replace('View', 'Hide')
+    }
+  }
+  return text
+})
+
+const backgroundClass = computed(() => {
+  let classes = 'bg-gray-light'
+  if (theme === 'stars') {
+    classes = 'bg-primary bg-stars bg-auto lg:bg-cover'
+  }
+  return classes
+})
+const headingClass = computed(() => {
+  let classes = 'text-primary'
+  if (theme === 'secondary') {
+    classes = 'text-secondary'
+  }
+  return classes
+})
+const borderClass = computed(() => {
+  let classes = 'border-t border-gray-light-mid'
+  if (theme === 'stars') {
+    classes = ''
+  }
+  return classes
+})
+
+interface SortedStandards {
+  [key: string]: EduResourceStandardItem[]
+}
+const sortedStandards = computed((): SortedStandards | undefined => {
+  if (standards) {
+    const sorted = standards.reduce<SortedStandards>((acc, item) => {
+      const type = item.standard.type
+      // Initialize array for type if it doesn't exist
+      if (!acc[type]) {
+        acc[type] = []
+      }
+      // Add item to the appropriate type array
+      acc[type].push(item)
+      return acc
+    }, {})
+    return sorted
+  }
+  return undefined
+})
+
+const standardsEla = computed(() => {
+  return sortedStandards.value ? sortedStandards.value['ccss_english_language_arts'] : undefined
+})
+const standardsMath = computed(() => {
+  return sortedStandards.value ? sortedStandards.value['ccss_math'] : undefined
+})
+const standardsNgss = computed(() => {
+  return sortedStandards.value ? sortedStandards.value['ngss'] : undefined
+})
+const standardsIste = computed(() => {
+  return sortedStandards.value ? sortedStandards.value['iste'] : undefined
+})
+</script>
+
+<template>
+  <section
+    aria-label="Metadata"
+    class="MetaPanel z-20 relative overflow-hidden"
+    :class="{
+      '-mt-14': negativeTop,
+      '-mb-14': negativeBottom
+    }"
+  >
+    <div class="MixedBleedGrid pl-4 lg:pl-0">
+      <div
+        class="col-start-container lg:col-start-indent-col-2 col-end-bleed lg:grid grid-cols-subgrid"
+        :class="backgroundClass"
+      >
+        <div class="is-this-needed col-start-container lg:col-start-indent-col-2 col-end-container">
+          <div class="MetaPanel-heading lg:grid grid-cols-12 col-end-container container">
+            <div class="col-start-1 col-end-10 xl:col-end-9 pl-4 lg:pl-10 pr-2 py-6 lg:py-10">
+              <MetaPanelItems
+                :theme="theme"
+                :primary-subject="primarySubject"
+                :additional-subjects="additionalSubjects"
+                :grade-levels="gradeLevels"
+                :time="time"
+              />
+            </div>
+            <div
+              v-if="button"
+              class="ThemeVariantLight col-start-10 col-end-13 pl-4 pt-4 pb-6 lg:py-10 lg:text-right"
+            >
+              <BaseButton
+                variant="secondary"
+                class="MetaPanel-button"
+                :aria-expanded="metaPanelOpen"
+                compact
+                @click="handleMetaPanel"
+              >
+                {{ buttonText }}
+                <template #icon>
+                  <IconPlus
+                    v-if="!metaPanelOpen"
+                    class="text-xs ml-2"
+                  />
+                  <IconMinus
+                    v-else
+                    class="text-xs ml-2"
+                  />
+                </template>
+              </BaseButton>
+            </div>
+          </div>
+        </div>
+        <div
+          v-if="standards"
+          v-show="metaPanelOpen"
+          class="MetaPanel-panel col-start-container lg:col-start-indent-col-2 col-end-bleed lg:grid grid-cols-subgrid bg-gray-light pb-3 lg:pb-6"
+        >
+          <div
+            class="container col-start-container lg:col-start-indent-col-2 col-end-container px-8 lg:px-[3rem] xl:px-[5.8rem]"
+          >
+            <div
+              class="pt-6 lg:pt-7"
+              :class="borderClass"
+            >
+              <div
+                class="text-subtitle mb-5"
+                :class="headingClass"
+              >
+                Standards
+                <span class="sr-only">.</span>
+              </div>
+              <div class="w-full lg:grid grid-cols-2 lg:gap-6 xl:gap-10">
+                <div v-if="standardsEla">
+                  <div class="text-base font-semibold text-gray-dark mb-4">
+                    English Language Arts Standards
+                  </div>
+                  <span class="sr-only">.</span>
+                  <MetaPanelAccordion
+                    :standards="standardsEla"
+                    class="mb-6"
+                  />
+                </div>
+                <div v-if="standardsMath">
+                  <div class="text-base font-semibold text-gray-dark mb-4">
+                    Common Core State Standards For Math
+                  </div>
+                  <span class="sr-only">.</span>
+                  <MetaPanelAccordion
+                    :standards="standardsMath"
+                    class="mb-6"
+                  />
+                </div>
+                <div v-if="standardsNgss">
+                  <div class="text-base font-semibold text-gray-dark mb-4">
+                    Next Generation Science Standards
+                  </div>
+                  <span class="sr-only">.</span>
+                  <MetaPanelAccordion
+                    :standards="standardsNgss"
+                    class="mb-6"
+                  />
+                </div>
+                <div v-if="standardsIste">
+                  <div class="text-base font-semibold text-gray-dark mb-4">
+                    Technology Standards (ISTE)
+                  </div>
+                  <span class="sr-only">.</span>
+                  <MetaPanelAccordion :standards="standardsIste" />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+<style lang="scss">
+.MetaPanel {
+  .MetaPanel-button {
+    @apply border-[1px] font-primary normal-case tracking-normal font-bold text-lg py-2 bg-white;
+  }
+}
+</style>

package/src/components/MetaPanelAccordion/MetaPanelAccordion.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { reactive } from 'vue'
+import type { AccordionItemObject, EduResourceStandardItem } from './../../interfaces'
+import BaseAccordionItem from './../BaseAccordionItem/BaseAccordionItem.vue'
+
+interface MetaPanelAccordionProps {
+  standards?: EduResourceStandardItem[]
+}
+const props = withDefaults(defineProps<MetaPanelAccordionProps>(), {
+  standards: undefined
+})
+const { standards } = reactive(props)
+</script>
+
+<template>
+  <div class="MetaPanelAccordion">
+    <BaseAccordionItem
+      v-for="(item, index) in standards"
+      :key="index"
+      heading-level="h3"
+      class="mb-2 bg-white"
+      :item="item.standard as AccordionItemObject"
+    >
+      <template #heading>
+        <div class="w-full text-left pr-5">
+          <div class="text-sm tracking-normal text-action mb-0 can-hover:group-hover:underline">
+            {{ item.standard.domain?.domain }}
+          </div>
+          <div class="text-sm text-gray-mid-dark font-normal tracking-normal">
+            {{ item.standard.code }}
+          </div>
+        </div>
+      </template>
+      <template #panelContents>
+        <div class="pl-3 pb-3 pr-8 text-sm text-gray-dark">
+          <p>{{ item.standard.definition }}</p>
+        </div>
+      </template>
+    </BaseAccordionItem>
+  </div>
+</template>
+<style lang="scss">
+.MetaPanelAccordion {
+  .BaseAccordionItem {
+    .BaseAccordionHeader {
+      @apply bg-white;
+      > div {
+        @apply border-none;
+      }
+      button.BaseAccordion-trigger {
+        @apply py-2 px-3;
+        @apply can-hover:hover:no-underline;
+      }
+    }
+    &.-open {
+      .BaseAccordionHeader {
+        button.BaseAccordion-trigger {
+          @apply pb-0;
+        }
+      }
+    }
+  }
+}
+</style>

package/src/components/MetaPanelItems/MetaPanelItems.stories.js

@@ -0,0 +1,27 @@
+import MetaPanelItems from './MetaPanelItems.vue'
+
+export default {
+  title: 'Components/Utilities/MetaPanelItems',
+  component: MetaPanelItems,
+  tags: ['!autodocs']
+}
+
+// stories
+export const BaseStory = {
+  name: 'MetaPanelItems',
+  args: {
+    primarySubject: { subject: 'Math' },
+    additionalSubjects: [{ subject: 'Science' }],
+    time: { time: '30mins - hr' },
+    gradeLevels: [
+      { gradeLevel: 'All Ages' },
+      { gradeLevel: 'K' },
+      { gradeLevel: '1' },
+      { gradeLevel: '2' },
+      { gradeLevel: '5' },
+      { gradeLevel: '6' },
+      { gradeLevel: '7' },
+      { gradeLevel: '8' }
+    ]
+  }
+}

package/src/components/MetaPanelItems/MetaPanelItems.vue

@@ -0,0 +1,186 @@
+<script setup lang="ts">
+import { computed, reactive } from 'vue'
+import { rangeifyGrades } from './../../utils/rangeifyGrades'
+import {
+  MetaPanelTheme,
+  EduResourcesSubject,
+  EduResourcesGradeLevel,
+  EduResourcesTime
+} from './../../interfaces'
+import IconSubject from './../Icons/IconSubject.vue'
+import IconProfile from './../Icons/IconProfile.vue'
+import IconTime from './../Icons/IconTime.vue'
+
+interface MetaPanelProps {
+  theme?: MetaPanelTheme
+  primarySubject: EduResourcesSubject
+  additionalSubjects?: EduResourcesSubject[]
+  gradeLevels?: EduResourcesGradeLevel[]
+  time?: EduResourcesTime
+}
+
+// define props
+const props = withDefaults(defineProps<MetaPanelProps>(), {
+  theme: 'primary',
+  primarySubject: undefined,
+  additionalSubjects: undefined,
+  gradeLevels: undefined,
+  time: undefined
+})
+
+const { theme, primarySubject, additionalSubjects, gradeLevels, time } = reactive(props)
+
+const audience = computed(() => {
+  return gradeLevels ? rangeifyGrades(gradeLevels) : undefined
+})
+
+const subjects = computed(() => {
+  let combinedArray = [primarySubject.subject]
+  let output = undefined
+  if (additionalSubjects) {
+    const filteredArray = additionalSubjects.map((item) => item.subject)
+    combinedArray = combinedArray.concat(filteredArray)
+  }
+  output = combinedArray.join(', ')
+  return output
+})
+
+const iconColor = computed(() => {
+  let classes = 'text-primary'
+  if (theme === 'secondary') {
+    classes = 'text-secondary'
+  } else if (theme === 'stars') {
+    classes = 'text-white'
+  }
+  return classes
+})
+const headingColor = computed(() => {
+  let classes = 'text-primary'
+  if (theme === 'secondary') {
+    classes = 'text-secondary'
+  } else if (theme === 'stars') {
+    classes = 'text-white opacity-60'
+  }
+
+  return classes
+})
+const textColor = computed(() => {
+  let classes = 'text-gray-dark'
+  if (theme === 'stars') {
+    classes = 'text-white'
+  }
+  return classes
+})
+const themeVariant = computed(() => {
+  let variant = 'ThemeVariantGray'
+  if (theme === 'stars') {
+    variant = 'ThemeVariantDark'
+  }
+  return variant
+})
+</script>
+
+<template>
+  <div
+    class="MetaPanelItems md:flex gap-10"
+    :class="{ 'justify-between': subjects && audience && time }"
+  >
+    <div
+      v-if="subjects"
+      class="MetaPanelItem"
+    >
+      <div
+        class="MetaPanelItem-icon"
+        :class="iconColor"
+      >
+        <IconSubject class="text-[2em] md:text-[2.4em]" />
+      </div>
+      <div>
+        <div
+          class="MetaPanelItem-heading"
+          :class="`${themeVariant} ${headingColor}`"
+        >
+          Subjects
+          <span class="sr-only">.</span>
+        </div>
+        <div
+          class="MetaPanelItem-content"
+          :class="textColor"
+        >
+          {{ subjects }}
+        </div>
+      </div>
+    </div>
+    <div
+      v-if="audience"
+      class="MetaPanelItem"
+    >
+      <div
+        class="MetaPanelItem-icon"
+        :class="iconColor"
+      >
+        <IconProfile class="text-[2.1em] md:text-[2.5em] mt-1 md:mt-0" />
+      </div>
+      <div>
+        <div
+          class="MetaPanelItem-heading"
+          :class="`${themeVariant} ${headingColor}`"
+        >
+          Grade Levels
+          <span class="sr-only">.</span>
+        </div>
+        <div
+          class="MetaPanelItem-content"
+          :class="textColor"
+        >
+          {{ audience }}
+        </div>
+      </div>
+    </div>
+    <div
+      v-if="time?.time"
+      class="MetaPanelItem"
+    >
+      <div
+        class="MetaPanelItem-icon"
+        :class="iconColor"
+      >
+        <IconTime class="text-[1.6em] md:text-[2em] ml-1 mt-1" />
+      </div>
+      <div>
+        <div
+          class="MetaPanelItem-heading"
+          :class="`${themeVariant} ${headingColor}`"
+        >
+          Time Required
+          <span class="sr-only">.</span>
+        </div>
+        <div
+          class="MetaPanelItem-content"
+          :class="textColor"
+        >
+          {{ time.time }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<style lang="scss">
+.MetaPanelItems {
+  .MetaPanelItem {
+    @apply flex w-full items-start mb-4 md:mb-0 w-auto;
+    &:last-of-type {
+      @apply mb-0;
+    }
+    .MetaPanelItem-icon {
+      @apply mr-1 w-10 md:w-12;
+    }
+    .MetaPanelItem-heading {
+      @apply text-subtitle text-base md:mb-[.2em] whitespace-nowrap;
+    }
+    .MetaPanelItem-content {
+      @apply font-primary font-bold lg:text-xl;
+    }
+  }
+}
+</style>

package/src/components/MetadataEduResource/MetadataEduResource.stories.js

@@ -7,10 +7,8 @@ export default {
   argTypes: {
     variant: {
       type: { name: 'string', required: false },
-      control: {
-        type: 'select',
-        options: ['primary', 'secondary']
-      }
+      control: { type: 'select' },
+      options: ['primary', 'secondary']
     }
   },
   excludeStories: /.*Data$/

package/src/components/MixinCarousel/MixinCarousel.vue

@@ -113,7 +113,7 @@ const MixinCarouselOptions = swiperOptions.MixinCarousel
 Swiper.use([Navigation, A11y])
 
 interface Variants {
-  [name: string]: string
+  [key: string]: string
 }
 
 export const variants: Variants = {
@@ -122,7 +122,7 @@ export const variants: Variants = {
 }
 
 interface Indents {
-  [name: string]: string
+  [key: string]: string
 }
 
 export const indents: Indents = {

package/src/components/NavJumpMenu/NavJumpMenu.vue

@@ -1,7 +1,7 @@
 <template>
   <NavSecondary
     v-if="enabled"
-    id="JumpMenuTop"
+    id="NavJumpMenu"
     ref="NavJumpMenuRef"
     class="NavJumpMenu -hide-until-threshold"
     :invert="invert"
@@ -78,11 +78,11 @@ const theJumpLinks = computed(() => {
       return b.blockType === 'HeadingBlock' && b.level === props.headingLevel
     })
     // map to the correct data shape
-    const links: BreadcrumbPathObject[] = filteredBlocks.map((l) => {
+    const links: BreadcrumbPathObject[] = filteredBlocks.map((h) => {
       return {
         // @ts-expect-error using parameter that was added to BlockData
-        path: '#' + getHeadingId(l.heading, l.index),
-        title: l.heading
+        path: '#' + getHeadingId(h.heading, h.blockId),
+        title: h.heading
       } as BreadcrumbPathObject
     })
     return links
@@ -95,11 +95,11 @@ const theBreadcrumbs = computed(() => {
   const rootItem = props.title
     ? {
         title: props.title,
-        path: '#JumpMenuTop'
+        path: '#siteTop'
       }
     : {
         title: 'Back to top',
-        path: '#JumpMenuTop'
+        path: '#siteTop'
       }
   const jumpMenu: BreadcrumbPathObject = {
     title: 'Jump to…',
@@ -111,12 +111,14 @@ const theBreadcrumbs = computed(() => {
   }
   return breadcrumb as BreadcrumbPathObject[] | undefined
 })
+
 defineExpose({
   NavJumpMenuRef
 })
 onMounted(() => {
   mixinUpdateSecondary(theBreadcrumbs.value, true)
 })
+
 const route = useRoute()
 
 // repopulate the store with the jump links since the store is cleared on route changes
@@ -131,10 +133,10 @@ watch(
 <style lang="scss">
 .NavJumpMenu {
   &.-hide-until-threshold {
-    @apply opacity-0 h-0 transition-none overflow-visible;
+    @apply opacity-0 h-0 transition-none overflow-visible pointer-events-none;
     &.-is-sticky,
     &.-is-sticky-offset {
-      @apply opacity-100 transition-opacity;
+      @apply opacity-100 transition-all pointer-events-auto;
     }
   }
 }

package/src/components/NavSecondary/NavSecondary.vue

@@ -81,9 +81,17 @@ export default defineComponent({
       default: false
     }
   },
-  data() {
+  data(): {
+    isSticky: boolean
+    stickyElement?: HTMLElement
+    observer?: IntersectionObserver
+    observerOffset?: IntersectionObserver
+  } {
     return {
-      isSticky: false
+      isSticky: false,
+      stickyElement: undefined,
+      observer: undefined,
+      observerOffset: undefined
     }
   },
   computed: {
@@ -119,6 +127,7 @@ export default defineComponent({
     ) {
       // intersection observer not supported
     } else if (this.enabled) {
+      this.initIntersectionObservers()
       this.checkSticky()
     }
   },
@@ -129,29 +138,31 @@ export default defineComponent({
       }
       return false
     },
-    checkSticky() {
-      const stickyElement = this.$refs.NavSecondary as HTMLElement
-      // we need both observers for when the global nav is/isn't showing
-      const observer = new IntersectionObserver(
+    initIntersectionObservers() {
+      this.stickyElement = this.$refs.NavSecondary as HTMLElement
+      this.observer = new IntersectionObserver(
         ([e]) => {
-          e.target.classList.toggle('-is-sticky', e.intersectionRatio < 1)
+          e.target.classList.toggle('-is-sticky', e.intersectionRatio === 0)
         },
         {
-          threshold: [1]
+          threshold: [0]
         }
       )
-      const observerOffset = new IntersectionObserver(
+      this.observerOffset = new IntersectionObserver(
         ([e]) => {
-          e.target.classList.toggle('-is-sticky-offset', e.intersectionRatio < 1)
+          e.target.classList.toggle('-is-sticky-offset', e.intersectionRatio === 0)
         },
         {
-          threshold: [1],
-          // would prefer to use rems but intersection observer only works with % or px
-          rootMargin: '-113px 0px 0px 0px'
+          threshold: [0],
+          rootMargin: this.themeStore.isEdu ? '-73px 0px 0px 0px' : '-113px 0px 0px 0px'
         }
       )
-      observer.observe(stickyElement)
-      observerOffset.observe(stickyElement)
+    },
+    checkSticky() {
+      if (this.stickyElement) {
+        if (this.observer) this.observer.observe(this.stickyElement)
+        if (this.observerOffset) this.observerOffset.observe(this.stickyElement)
+      }
     }
   }
 })

package/src/components/ShareButtonsEdu/ShareButtonsEdu.vue

@@ -89,7 +89,7 @@ const buttonClass = computed(() => {
 })
 </script>
 <template>
-  <div class="ShareButtonsEdu relative flex flex-row items-start border-collapse print:hidden">
+  <div class="ShareButtonsEdu relative z-30 flex flex-row items-start border-collapse print:hidden">
     <BaseButton
       variant="social"
       :class="buttonClass"