add accordion block

dnscms/dnscms/blocks.py

@@ -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()),
 ]
 
 

web/src/app/utleie/page.tsx

@@ -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 />

web/src/components/blocks/Accordion.tsx

@@ -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>
   );

web/src/components/blocks/Blocks.tsx

@@ -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;

web/src/gql/gql.ts

@@ -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.
  */

web/src/lib/common.ts

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