edb/neuf-www
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add accordion block

Browse Source
This commit is contained in:
Jonas Braathen
2024-07-14 17:46:08 +02:00
parent 2dd94b3d1d
commit fb95bb9694
7 changed files with 222 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
dnscms/dnscms/blocks.py
View File

@ -176,6 +176,25 @@ class OpeningHoursSectionBlock(blocks.StaticBlock):
admin_text = "Viser gjeldende åpningstider."
@register_streamfield_block
class AccordionBlock(blocks.StructBlock):
heading = blocks.CharBlock(max_length=64, required=True, label="Overskrift")
body = blocks.StreamBlock(
[
("paragraph", blocks.RichTextBlock(label="Rik tekst")),
("image", ImageWithTextBlock(label="Bilde")),
]
)
graphql_fields = [
GraphQLString("heading", required=True),
GraphQLStreamfield("body", required=True),
]
class Meta:
icon = "folder-open-1"
BASE_BLOCKS = [
("paragraph", blocks.RichTextBlock(label="Rik tekst")),
("image", ImageWithTextBlock(label="Bilde")),
@ -183,6 +202,7 @@ BASE_BLOCKS = [
("horizontal_rule", HorizontalRuleBlock(label="Skillelinje")),
("featured", FeaturedBlock(label="Fremhevet underside")),
("page_section_navigation", PageSectionNavigationBlock()),
("accordion", AccordionBlock()),
]

2
web/src/app/utleie/page.tsx
View File

@ -32,8 +32,6 @@ export default async function Page() {
/>
<section>
<p>Her kommer mer om utleiereglement etc.</p>
<Accordion heading="Utleiereglement" />
<Accordion heading="Test trekkspill" />
</section>
<br />
<br />

4
web/src/components/blocks/Accordion.tsx
View File

@ -2,7 +2,7 @@
import { useId, useState } from "react";
import styles from "./accordion.module.scss";
export const Accordion = ({ heading }: any) => {
export const Accordion = ({ heading, children }: any) => {
const labelId = useId();
const contentId = useId();
const [showContent, setShowContent] = useState(false);
@ -25,7 +25,7 @@ export const Accordion = ({ heading }: any) => {
className={styles.accordionContent}
aria-labelledby={labelId}
>
<p>Åpent trekkspill!</p>
{children}
</div>
</section>
);

4
web/src/components/blocks/Blocks.tsx
View File

@ -3,6 +3,7 @@ import { ImageWithTextBlock } from "./ImageWithTextBlock";
import { ImageSliderBlock } from "./ImageSliderBlock";
import { HorizontalRuleBlock } from "./HorizontalRuleBlock";
import { FeaturedBlock } from "./FeaturedBlock";
import { AccordionBlock } from "./AccordionBlock";
import { PageSectionBlock, PageSectionNavigationBlock } from "./PageSection";
import { ContactSectionBlock, ContactSubsectionBlock } from "./ContactSection";
import { ContactListBlock } from "./ContactListBlock";
@ -33,6 +34,9 @@ export const Blocks = ({ blocks }: any) => {
case "FeaturedBlock":
return <FeaturedBlock block={block} />;
break;
case "AccordionBlock":
return <AccordionBlock block={block} />;
break;
case "PageSectionBlock":
return <PageSectionBlock block={block} />;
break;

4
web/src/gql/gql.ts
View File

@ -34,7 +34,7 @@ const documents = {
"\n fragment Home on HomePage {\n ... on HomePage {\n featuredEvents {\n id\n }\n }\n }\n": types.HomeFragmentDoc,
"\n query home {\n events: eventIndex {\n ... on EventIndex {\n futureEvents {\n ... on EventPage {\n ...Event\n }\n }\n }\n }\n home: page(contentType: \"home.HomePage\", urlPath: \"/home/\") {\n ... on HomePage {\n ...Home\n }\n }\n news: pages(contentType: \"news.newsPage\", order: \"-first_published_at\", limit: 4) {\n ... on NewsPage {\n ...News\n }\n }\n }\n ": types.HomeDocument,
"\n fragment OneLevelOfBlocks on StreamFieldInterface {\n id\n blockType\n field\n ... on RichTextBlock {\n rawValue\n value\n }\n ... on ImageWithTextBlock {\n image {\n ...Image\n }\n imageFormat\n text\n }\n ... on ImageSliderBlock {\n images {\n ... on ImageSliderItemBlock {\n image {\n ...Image\n }\n text\n }\n }\n }\n ... on HorizontalRuleBlock {\n color\n }\n ... on FeaturedBlock {\n title\n featuredBlockText: text\n linkText\n imagePosition\n backgroundColor\n featuredPage {\n contentType\n pageType\n url\n ... on EventPage {\n featuredImage {\n ...Image\n }\n }\n ... on NewsPage {\n featuredImage {\n ...Image\n }\n }\n }\n featuredImageOverride {\n ...Image\n }\n }\n ... on ContactListBlock {\n items {\n blockType\n ... on ContactEntityBlock {\n contactEntity {\n ...ContactEntity\n }\n }\n }\n }\n }\n": types.OneLevelOfBlocksFragmentDoc,
"\n fragment Blocks on StreamFieldInterface {\n ... on PageSectionBlock {\n title\n backgroundColor\n body {\n ...OneLevelOfBlocks\n }\n }\n ... on ContactSectionBlock {\n title\n text\n blocks {\n ... on ContactSubsectionBlock {\n title\n text\n blocks {\n ...OneLevelOfBlocks\n }\n }\n ...OneLevelOfBlocks\n }\n }\n ...OneLevelOfBlocks\n }\n": types.BlocksFragmentDoc,
"\n fragment Blocks on StreamFieldInterface {\n ... on AccordionBlock {\n heading\n body {\n ...OneLevelOfBlocks\n }\n }\n ... on PageSectionBlock {\n title\n backgroundColor\n body {\n ...OneLevelOfBlocks\n }\n }\n ... on ContactSectionBlock {\n title\n text\n blocks {\n ... on ContactSubsectionBlock {\n title\n text\n blocks {\n ...OneLevelOfBlocks\n }\n }\n ...OneLevelOfBlocks\n }\n }\n ...OneLevelOfBlocks\n }\n": types.BlocksFragmentDoc,
"\n fragment Image on CustomImage {\n id\n url\n width\n height\n alt\n attribution\n }\n": types.ImageFragmentDoc,
"\n fragment ContactEntity on ContactEntity {\n id\n name\n contactType\n title\n email\n phoneNumber\n image {\n ...Image\n }\n }\n": types.ContactEntityFragmentDoc,
"\n fragment Event on EventPage {\n __typename\n id\n slug\n title\n body {\n id\n blockType\n field\n ... on RichTextBlock {\n rawValue\n value\n }\n }\n featuredImage {\n ...Image\n }\n pig\n facebookUrl\n ticketUrl\n free\n priceRegular\n priceMember\n priceStudent\n categories {\n ... on EventCategory {\n name\n slug\n pig\n }\n }\n occurrences {\n ... on EventOccurrence {\n __typename\n id\n start\n end\n venue {\n __typename\n id\n slug\n title\n preposition\n url\n }\n }\n }\n organizers {\n ... on EventOrganizer {\n id\n name\n slug\n externalUrl\n association {\n ... on AssociationPage {\n url\n }\n }\n }\n }\n }\n": types.EventFragmentDoc,
@ -149,7 +149,7 @@ export function graphql(source: "\n fragment OneLevelOfBlocks on StreamFieldInt
/**
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
*/
export function graphql(source: "\n fragment Blocks on StreamFieldInterface {\n ... on PageSectionBlock {\n title\n backgroundColor\n body {\n ...OneLevelOfBlocks\n }\n }\n ... on ContactSectionBlock {\n title\n text\n blocks {\n ... on ContactSubsectionBlock {\n title\n text\n blocks {\n ...OneLevelOfBlocks\n }\n }\n ...OneLevelOfBlocks\n }\n }\n ...OneLevelOfBlocks\n }\n"): (typeof documents)["\n fragment Blocks on StreamFieldInterface {\n ... on PageSectionBlock {\n title\n backgroundColor\n body {\n ...OneLevelOfBlocks\n }\n }\n ... on ContactSectionBlock {\n title\n text\n blocks {\n ... on ContactSubsectionBlock {\n title\n text\n blocks {\n ...OneLevelOfBlocks\n }\n }\n ...OneLevelOfBlocks\n }\n }\n ...OneLevelOfBlocks\n }\n"];
export function graphql(source: "\n fragment Blocks on StreamFieldInterface {\n ... on AccordionBlock {\n heading\n body {\n ...OneLevelOfBlocks\n }\n }\n ... on PageSectionBlock {\n title\n backgroundColor\n body {\n ...OneLevelOfBlocks\n }\n }\n ... on ContactSectionBlock {\n title\n text\n blocks {\n ... on ContactSubsectionBlock {\n title\n text\n blocks {\n ...OneLevelOfBlocks\n }\n }\n ...OneLevelOfBlocks\n }\n }\n ...OneLevelOfBlocks\n }\n"): (typeof documents)["\n fragment Blocks on StreamFieldInterface {\n ... on AccordionBlock {\n heading\n body {\n ...OneLevelOfBlocks\n }\n }\n ... on PageSectionBlock {\n title\n backgroundColor\n body {\n ...OneLevelOfBlocks\n }\n }\n ... on ContactSectionBlock {\n title\n text\n blocks {\n ... on ContactSubsectionBlock {\n title\n text\n blocks {\n ...OneLevelOfBlocks\n }\n }\n ...OneLevelOfBlocks\n }\n }\n ...OneLevelOfBlocks\n }\n"];
/**
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
*/

217
web/src/gql/graphql.ts
View File

File diff suppressed because one or more lines are too long

6
web/src/lib/common.ts
View File

@ -131,6 +131,12 @@ const OneLevelOfBlocksFragmentDefinition = graphql(`
const BlockFragmentDefinition = graphql(`
fragment Blocks on StreamFieldInterface {
... on AccordionBlock {
heading
body {
...OneLevelOfBlocks
}
}
... on PageSectionBlock {
title
backgroundColor