Skip to content

Commit

Permalink
Added accordion support
Browse files Browse the repository at this point in the history
  • Loading branch information
pookmish committed Nov 1, 2024
1 parent 769830c commit d564628
Show file tree
Hide file tree
Showing 18 changed files with 1,025 additions and 1,121 deletions.
20 changes: 10 additions & 10 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
"@mui/base": "5.0.0-beta.61",
"@next/third-parties": "15.0.2",
"@tailwindcss/container-queries": "^0.1.1",
"@types/node": "22.8.4",
"@types/node": "22.8.6",
"@types/react": "18.3.12",
"@types/react-dom": "19.0.0-rc.1",
"algoliasearch": "^5.12.0",
Expand All @@ -27,7 +27,7 @@
"decanter": "^7.3.0",
"drupal-jsonapi-params": "^2.3.2",
"graphql": "^16.9.0",
"graphql-request": "^7.1.0",
"graphql-request": "^7.1.1",
"graphql-tag": "^2.12.6",
"html-entities": "^2.5.2",
"html-react-parser": "^5.1.18",
Expand Down Expand Up @@ -58,13 +58,13 @@
"@graphql-codegen/typescript-graphql-request": "^6.2.0",
"@graphql-codegen/typescript-operations": "^4.3.1",
"@next/bundle-analyzer": "15.0.2",
"@storybook/addon-essentials": "^8.3.6",
"@storybook/addon-interactions": "^8.3.6",
"@storybook/addon-links": "^8.3.6",
"@storybook/addon-essentials": "^8.4.1",
"@storybook/addon-interactions": "^8.4.1",
"@storybook/addon-links": "^8.4.1",
"@storybook/addon-styling": "^1.3.7",
"@storybook/blocks": "^8.3.6",
"@storybook/nextjs": "^8.3.6",
"@storybook/react": "^8.3.6",
"@storybook/blocks": "^8.4.1",
"@storybook/nextjs": "^8.4.1",
"@storybook/react": "^8.4.1",
"@storybook/testing-library": "^0.2.2",
"@types/react-slick": "^0.23.13",
"concurrently": "^9.0.1",
Expand All @@ -73,11 +73,11 @@
"eslint-config-next": "15.0.2",
"eslint-config-prettier": "^9.1.0",
"eslint-plugin-prettier": "^5.2.1",
"eslint-plugin-storybook": "^0.10.1",
"eslint-plugin-storybook": "^0.10.2",
"prettier": "^3.3.3",
"prettier-plugin-tailwindcss": "^0.6.8",
"react-docgen": "^7.1.0",
"storybook": "^8.3.6",
"storybook": "^8.4.1",
"storybook-addon-module-mock": "^1.3.4",
"tsconfig-paths-webpack-plugin": "^4.1.0",
"typescript-eslint": "^8.12.2"
Expand Down
5 changes: 1 addition & 4 deletions src/components/elements/accordion.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -69,10 +69,7 @@ const Accordion = ({
<Heading>
<button
{...buttonProps}
className={twMerge(
"flex w-full items-center border-b border-transparent hocus:border-black-true",
buttonProps?.className
)}
className={twMerge("flex w-full items-center hocus-visible:underline", buttonProps?.className)}
id={`${id}-button`}
aria-expanded={isExpanded}
aria-controls={`${id}-panel`}
Expand Down
1 change: 1 addition & 0 deletions src/components/elements/wysiwyg.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -266,6 +266,7 @@ const WysiwygImage = ({
alt={alt ? alt.trim() : ""}
height={parseInt(`${height}`)}
width={parseInt(`${width}`)}
unoptimized
/>
)
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ const StanfordCourseMetadata = async ({node}: Props) => {
<>
<title>{pageTitle}</title>
<meta name="description" content={description} />
<meta property="og:title" content="Stanford Sites User Guide" />
<meta property="og:title" content={pageTitle} />
<meta property="og:description" content={description} />

<meta property="og:type" content="website" />
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ const StanfordEventSeriesMetadata = async ({node}: Props) => {
<>
<title>{pageTitle}</title>
<meta name="description" content={description} />
<meta property="og:title" content="Stanford Sites User Guide" />
<meta property="og:title" content={pageTitle} />
<meta property="og:description" content={description} />

<meta property="og:type" content="website" />
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ const StanfordEventMetadata = async ({node}: Props) => {
<>
<title>{pageTitle}</title>
<meta name="description" content={description} />
<meta property="og:title" content="Stanford Sites User Guide" />
<meta property="og:title" content={pageTitle} />
<meta property="og:description" content={description} />

<meta property="og:type" content="website" />
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ const StanfordNewsMetadata = async ({node}: Props) => {
<>
<title>{pageTitle}</title>
<meta name="description" content={description} />
<meta property="og:title" content="Stanford Sites User Guide" />
<meta property="og:title" content={pageTitle} />
<meta property="og:description" content={description} />
<meta property="og:type" content="article" />
{node.suNewsPublishingDate?.time && (
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ const StanfordPageMetadata = async ({node, isHome}: Props) => {
<>
<title>{pageTitle}</title>
<meta name="description" content={description} />
<meta property="og:title" content="Stanford Sites User Guide" />
<meta property="og:title" content={pageTitle} />
<meta property="og:description" content={description} />

{image && (
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ const StanfordPersonMetadata = async ({node}: Props) => {
<>
<title>{pageTitle}</title>
<meta name="description" content={description} />
<meta property="og:title" content="Stanford Sites User Guide" />
<meta property="og:title" content={pageTitle} />
<meta property="og:description" content={description} />
<meta property="og:type" content="profile" />
<meta property="profile:first_name" content={node.suPersonFirstName} />
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ const StanfordPolicyMetadata = async ({node}: Props) => {
<>
<title>{pageTitle}</title>
<meta name="description" content={description} />
<meta property="og:title" content="Stanford Sites User Guide" />
<meta property="og:title" content={pageTitle} />
<meta property="og:description" content={description} />

<meta property="og:type" content="website" />
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ const StanfordPublicationMetadata = async ({node}: Props) => {
<>
<title>{pageTitle}</title>
<meta name="description" content={description} />
<meta property="og:title" content="Stanford Sites User Guide" />
<meta property="og:title" content={pageTitle} />
<meta property="og:description" content={description} />

{image && (
Expand Down
3 changes: 3 additions & 0 deletions src/components/paragraphs/paragraph.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import {isPreviewMode} from "@lib/drupal/is-preview-mode"
import {ParagraphUnion} from "@lib/gql/__generated__/drupal.d"
import {Suspense} from "react"
import EditorAlert from "@components/elements/editor-alert"
import FaqParagraph from "@components/paragraphs/stanford-faq/faq-paragraph"

type Props = {
/**
Expand Down Expand Up @@ -42,6 +43,8 @@ const ParagraphComponent = async ({paragraph}: Props) => {
return <CardParagraph paragraph={paragraph} {...itemProps} />
case "ParagraphStanfordEntity":
return <EntityParagraph paragraph={paragraph} {...itemProps} />
case "ParagraphStanfordFaq":
return <FaqParagraph paragraph={paragraph} {...itemProps} />
case "ParagraphStanfordGallery":
return <GalleryParagraph paragraph={paragraph} {...itemProps} />
case "ParagraphStanfordMediaCaption":
Expand Down
35 changes: 35 additions & 0 deletions src/components/paragraphs/stanford-faq/faq-paragraph.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import {HtmlHTMLAttributes} from "react"
import {ParagraphStanfordFaq} from "@lib/gql/__generated__/drupal.d"
import {H2} from "@components/elements/headers"
import Wysiwyg from "@components/elements/wysiwyg"
import Accordion from "@components/elements/accordion"
import twMerge from "@lib/utils/twMerge"

type Props = HtmlHTMLAttributes<HTMLDivElement> & {
paragraph: ParagraphStanfordFaq
}

const FaqParagraph = ({paragraph, ...props}: Props) => {
return (
<div {...props} className={twMerge("space-y-10", props.className)}>
{paragraph.suFaqHeadline && <H2>{paragraph.suFaqHeadline}</H2>}
<Wysiwyg html={paragraph.suFaqDescription?.processed} />

<div>
{paragraph.suFaqQuestions?.map(question => (
<Accordion
className="border-t border-black-40 last:border-b"
buttonProps={{className: "mt-6"}}
key={question.id}
button={question.suAccordionTitle}
headingLevel={paragraph.suFaqHeadline ? "h3" : "h2"}
>
<Wysiwyg html={question.suAccordionBody.processed} />
</Accordion>
))}
</div>
</div>
)
}

export default FaqParagraph
Original file line number Diff line number Diff line change
@@ -1,8 +1,27 @@
import CardViewGrid from "@components/views/card-view-grid"
import {NodeStanfordPublication} from "@lib/gql/__generated__/drupal.d"
import {ViewDisplayProps} from "@components/views/view"
import LoadMoreList from "@components/elements/load-more-list"
import StanfordPublicationListItem from "@components/nodes/list-item/stanford-publication/stanford-publication-list-item"

const PublicationsApaView = async (props: ViewDisplayProps<NodeStanfordPublication>) => {
return <CardViewGrid {...props} />
const PublicationsApaView = async ({
items,
headingLevel,
totalItems,
loadPage,
}: ViewDisplayProps<NodeStanfordPublication>) => {
return (
<LoadMoreList
ulProps={{className: "list-unstyled mb-20"}}
liProps={{
className: "border-b border-black-20 last-of-type:border-0 pb-10 last:pb-0 pt-10 first:pt-0",
}}
totalItems={totalItems}
loadPage={loadPage}
>
{items.map(item => (
<StanfordPublicationListItem key={item.id} node={item} headingLevel={headingLevel} />
))}
</LoadMoreList>
)
}
export default PublicationsApaView
Loading

0 comments on commit d564628

Please sign in to comment.