Skip to content

Commit

Permalink
fixing hydration errors in Student Project and Lesson templates
Browse files Browse the repository at this point in the history
  • Loading branch information
@stephiescastle
stephiescastle committed Sep 10, 2024
1 parent a8b4eae commit 2443179
Show file tree
Hide file tree
Showing 6 changed files with 86 additions and 67 deletions.
91 changes: 48 additions & 43 deletions packages/vue/src/components/MetaPanel/MetaPanel.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,7 @@ interface SortedStandards {
const sortedStandards = computed((): SortedStandards | undefined => {
if (standards) {
const sorted = standards.reduce<SortedStandards>((acc, item) => {
const type = item.standard.type
const type = item.standard?.type
// Initialize array for type if it doesn't exist
if (!acc[type]) {
acc[type] = []
Expand Down Expand Up @@ -164,61 +164,66 @@ const standardsIste = computed(() => {
</div>
</div>
<div
v-if="standards"
v-if="standards || $slots.metaInfo"
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="borderClass">
<div v-if="$slots.metaInfo">
<slot name="metaInfo" />
</div>
<div
class="text-subtitle mb-5"
:class="headingClass"
v-if="standards"
class="pt-6 lg:pt-7"
>
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 (CCSS - ELA)
</div>
<div
class="text-subtitle mb-5"
:class="headingClass"
>
Standards
<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">
Math Standards (CCSS - Math)
<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 (CCSS - ELA)
</div>
<span class="sr-only">.</span>
<MetaPanelAccordion
:standards="standardsEla"
class="mb-6"
/>
</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">
Science Standards (NGSS)
<div v-if="standardsMath">
<div class="text-base font-semibold text-gray-dark mb-4">
Math Standards (CCSS - Math)
</div>
<span class="sr-only">.</span>
<MetaPanelAccordion
:standards="standardsMath"
class="mb-6"
/>
</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 v-if="standardsNgss">
<div class="text-base font-semibold text-gray-dark mb-4">
Science Standards (NGSS)
</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>
<span class="sr-only">.</span>
<MetaPanelAccordion :standards="standardsIste" />
</div>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion packages/vue/src/templates/edu/PageEduLesson/PageEduLesson.stories.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ export const BaseStory = {

studentProject: {
title: 'Student Project',
urlPath: '/path-to-student-project'
url: '/path-to-student-project'
},

primarySubject: {
Expand Down
8 changes: 4 additions & 4 deletions packages/vue/src/templates/edu/PageEduLesson/PageEduLesson.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ interface PageEduLessonObject extends PageEduResourcesObject {
[key: string]: any
studentProject: {
title: string
urlPath: string
url: string
}
overview: StreamfieldBlockData[]
overviewHeading: string
Expand Down Expand Up @@ -273,19 +273,19 @@ const consolidatedSections = computed((): EduLessonSectionObject[] => {
:title="data.title"
:image="data.thumbnailImage?.original"
/>
<p
<div
v-if="data.studentProject"
class="mt-8 font-bold text-body-lg"
>
Find out what’s involved for students:
<BaseLink
class="font-normal inline text-action underline hover:text-action-dark cursor-pointer"
variant="none"
:to="data.studentProject.urlPath"
:to="data.studentProject.url"
>
View the Project Steps
</BaseLink>
</p>
</div>
</LayoutHelper>
<MetaPanel
button="View Standards"
Expand Down
6 changes: 1 addition & 5 deletions packages/vue/src/templates/edu/PageEduLesson/PageEduLessonSection.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,18 +29,14 @@ const props = withDefaults(defineProps<PageEduLessonSectionProps>(), {
})
const { heading, blocks, image, procedures, text } = reactive(props)
const anchorId = computed(() => {
return 'lesson_' + camelCase(heading?.heading)
})
</script>
<template>
<section
:id="anchorId"
class="PageEduLessonSection"
:aria-label="heading?.heading"
>
<LayoutHelper
v-if="heading"
indent="col-3"
class="lg:mb-8 mb-5"
>
Expand Down
34 changes: 28 additions & 6 deletions packages/vue/src/templates/edu/PageEduStudentProject/PageEduStudentProject.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import ShareButtonsEdu from './../../../components/ShareButtonsEdu/ShareButtonsE
import BlockStreamfield from './../../../components/BlockStreamfield/BlockStreamfield.vue'
import BlockRelatedLinks from '../../../components/BlockRelatedLinks/BlockRelatedLinks.vue'
import MetaPanel from '../../../components/MetaPanel/MetaPanel.vue'
import MetaPanelItems from '../../../components/MetaPanelItems/MetaPanelItems.vue'
import PageEduStudentProjectSection, {
type PageEduStudentProjectSectionProps
} from './PageEduStudentProjectSection.vue'
Expand Down Expand Up @@ -235,6 +236,7 @@ const consolidatedSections = computed((): EduStudentProjectSectionObject[] => {
class="mb-10"
>
<DetailHeadline
v-if="data.title"
:title="data.title"
label="Student Project"
pill
Expand All @@ -247,19 +249,19 @@ const consolidatedSections = computed((): EduStudentProjectSectionObject[] => {
:title="data.title"
:image="data.thumbnailImage?.original"
/>
<p
v-if="data.lesson"
<div
v-if="data?.lesson?.url"
class="mt-8 font-bold text-body-lg"
>
Want to teach this?
{{ 'Want to teach this?' }}
<BaseLink
class="font-normal inline text-action underline hover:text-action-dark cursor-pointer"
variant="none"
:to="data.lesson.url"
>
View the Lesson Plan
</BaseLink>
</p>
</div>
</LayoutHelper>
<!-- hero media -->
Expand All @@ -285,10 +287,30 @@ const consolidatedSections = computed((): EduStudentProjectSectionObject[] => {
:primary-subject="data.primarySubject"
:additional-subjects="data.additionalSubjects"
:time="data.time"
:grade-levels="data.gradeLevels"
:standards="data.standards"
:negative-top="heroInline || data?.hero?.length !== 0"
/>
>
<template #metaInfo>
<div :class="data?.standards ? 'border-b border-gray-light-mid' : ''">
<div class="py-6 lg:py-8">
<MetaPanelItems :grade-levels="data?.gradeLevels" />
<div
v-if="data.lesson"
class="mt-8 font-bold text-body-s"
>
Want to teach this?
<BaseLink
class="font-normal inline text-action underline hover:text-action-dark cursor-pointer"
variant="none"
:to="data.lesson.url"
>
View the Lesson Plan
</BaseLink>
</div>
</div>
</div>
</template>
</MetaPanel>
<!-- TODO: put this in a component (exclude layout though) -->
<LayoutHelper
Expand Down
12 changes: 4 additions & 8 deletions packages/vue/src/templates/edu/PageEduStudentProject/PageEduStudentProjectSection.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export interface PageEduStudentProjectSectionProps {
heading?: BlockHeadingObject
blocks?: StreamfieldBlockData[]
steps?: EduStudentProjectStep[]
stepsNumbering: boolean
stepsNumbering?: boolean
text?: string
image?: ImageObject
}
Expand All @@ -32,18 +32,14 @@ const props = withDefaults(defineProps<PageEduStudentProjectSectionProps>(), {
})
const { heading, blocks, image, steps, stepsNumbering, text } = reactive(props)
const anchorId = computed(() => {
return 'lesson_' + camelCase(heading?.heading)
})
</script>
<template>
<section
:id="anchorId"
class="PageEduStudentProjectSection"
:aria-label="heading?.heading"
>
<LayoutHelper
v-if="heading"
indent="col-3"
class="lg:mb-8 mb-5"
>
Expand Down Expand Up @@ -86,7 +82,7 @@ const anchorId = computed(() => {
<!-- split 50/50 -->
<div class="lg:grid grid-cols-2 gap-6 lg:gap-10">
<div
:class="index % 2 === 1 ? 'order-1' : 'order-2'"
:class="index % 2 === 0 ? 'order-1' : 'order-2'"
class="mb-6 lg:mb-0"
>
<BaseHeading
Expand All @@ -110,7 +106,7 @@ const anchorId = computed(() => {
</div>
<HeroInlineMedia
:hero-blocks="step.media"
:class="index % 2 === 0 ? 'order-1' : 'order-2'"
:class="index % 2 === 1 ? 'order-1' : 'order-2'"
constrain
/>
</div>
Expand Down

0 comments on commit 2443179

Please sign in to comment.