add a button link component

dnscms/dnscms/blocks.py

@@ -1,3 +1,4 @@
+from django.core.exceptions import ValidationError
 from grapple.helpers import register_streamfield_block
 from grapple.models import (
     GraphQLImage,
@@ -7,6 +8,7 @@ from grapple.models import (
     GraphQLString,
 )
 from wagtail import blocks
+from wagtail.blocks import StructBlockValidationError
 from wagtail.embeds.blocks import EmbedBlock
 from wagtail.images.blocks import ImageChooserBlock
 
@@ -281,6 +283,51 @@ class ScheduleBlock(blocks.StructBlock):
         label = "Timeplan"
 
 
+@register_streamfield_block
+class ButtonLinkBlock(blocks.StructBlock):
+    text = blocks.CharBlock(
+        max_length=64,
+        required=True,
+        label="Tekst",
+        help_text="Teksten som vises på knappen.",
+    )
+    page = blocks.PageChooserBlock(
+        required=False,
+        label="Intern side",
+        help_text="Velg en underside på denne nettsiden.",
+    )
+    anchor = blocks.CharBlock(
+        max_length=64,
+        required=False,
+        label="Anker",
+        help_text="Anker på siden, uten «#» (valgfritt)",
+    )
+    external_url = blocks.URLBlock(
+        required=False,
+        label="Ekstern lenke",
+    )
+
+    graphql_fields = [
+        GraphQLString("text", required=True),
+        GraphQLPage("page"),
+        GraphQLString("anchor"),
+        GraphQLString("external_url"),
+    ]
+
+    def clean(self, value):
+        result = super().clean(value)
+        if value.get("page") and value.get("external_url"):
+            error = ValidationError(
+                "Velg enten en intern side eller en ekstern lenke, ikke begge."
+            )
+            raise StructBlockValidationError(block_errors={"page": error, "external_url": error})
+        return result
+
+    class Meta:
+        icon = "link"
+        label = "Knapp med lenke"
+
+
 BASE_BLOCKS = [
     ("paragraph", blocks.RichTextBlock(label="Rik tekst")),
     ("image", ImageWithTextBlock()),
@@ -291,6 +338,7 @@ BASE_BLOCKS = [
     ("accordion", AccordionBlock()),
     ("fact_box", FactBoxBlock()),
     ("schedule", ScheduleBlock()),
+    ("button_link", ButtonLinkBlock()),
     ("embed", EmbedBlock()),
     ("raw_html", blocks.RawHTMLBlock()),
 ]

web/src/components/blocks/Blocks.tsx

@@ -11,6 +11,7 @@ import { AccordionBlock } from "./AccordionBlock";
 import { EmbedBlock } from "./EmbedBlock";
 import { FactBoxBlock } from "./FactBoxBlock";
 import { ScheduleBlock } from "./ScheduleBlock";
+import { ButtonLinkBlock } from "./ButtonLinkBlock";
 import { PageSectionBlock, PageSectionNavigationBlock } from "./PageSection";
 import { ContactSectionBlock, ContactSubsectionBlock } from "./ContactSection";
 import { ContactListBlock } from "./ContactListBlock";
@@ -52,6 +53,9 @@ export const Blocks = ({ blocks, pageContent }: { blocks: any, pageContent?: boo
       case "ScheduleBlock":
         return <ScheduleBlock key={block.id} block={block} />;
         break;
+      case "ButtonLinkBlock":
+        return <ButtonLinkBlock key={block.id} block={block} />;
+        break;
       case "PageSectionBlock":
         return <PageSectionBlock key={block.id} block={block} />;
         break;

web/src/components/blocks/ButtonLinkBlock.tsx

@@ -0,0 +1,57 @@
+import { graphql } from "@/gql";
+import { type ButtonLinkBlockFragment } from "@/gql/graphql";
+import Link from "next/link";
+import { Icon } from "@/components/general/Icon";
+
+export const ButtonLinkBlockFragmentDefinition = graphql(`
+  fragment ButtonLinkBlock on ButtonLinkBlock {
+    buttonText: text
+    buttonAnchor: anchor
+    buttonExternalUrl: externalUrl
+    buttonPage: page {
+      url
+    }
+  }
+`);
+
+export const ButtonLinkBlock = ({
+  block,
+}: {
+  block: ButtonLinkBlockFragment;
+}) => {
+  const anchor = block.buttonAnchor ? `#${block.buttonAnchor}` : "";
+  const pageUrl = block.buttonPage?.url;
+  const externalUrl = block.buttonExternalUrl;
+
+  let href = "#";
+  let isExternal = false;
+  if (pageUrl) {
+    href = `${pageUrl}${anchor}`;
+  } else if (externalUrl) {
+    href = `${externalUrl}${anchor}`;
+    isExternal = true;
+  } else if (anchor) {
+    href = anchor;
+  }
+
+  if (isExternal) {
+    return (
+      <a
+        href={href}
+        className="button"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        <span>{block.buttonText}</span>
+        <Icon type="externalLink" />
+      </a>
+    );
+  }
+
+  return (
+    <Link href={href} className="button">
+      <span>{block.buttonText}</span>
+      <Icon type="arrowRight" />
+    </Link>
+  );
+};

web/src/gql/gql.ts

@@ -26,6 +26,7 @@ type Documents = {
     "\n  query allAssociations {\n    index: associationIndex {\n      ... on AssociationIndex {\n        ...AssociationIndex\n      }\n    }\n    associations: pages(\n      contentType: \"associations.AssociationPage\"\n      limit: 1000\n    ) {\n      ... on AssociationPage {\n        ...Association\n      }\n    }\n  }\n": typeof types.AllAssociationsDocument,
     "\n  query associationBySlug($slug: String!) {\n    association: page(\n      contentType: \"associations.AssociationPage\"\n      slug: $slug\n    ) {\n      ... on AssociationPage {\n        ...Association\n      }\n    }\n  }\n": typeof types.AssociationBySlugDocument,
     "\n  fragment AccordionBlock on AccordionBlock {\n    heading\n    body {\n      id\n      blockType\n    }\n  }\n": typeof types.AccordionBlockFragmentDoc,
+    "\n  fragment ButtonLinkBlock on ButtonLinkBlock {\n    buttonText: text\n    buttonAnchor: anchor\n    buttonExternalUrl: externalUrl\n    buttonPage: page {\n      url\n    }\n  }\n": typeof types.ButtonLinkBlockFragmentDoc,
     "\n  fragment ContactEntityBlock on ContactEntityBlock {\n    contactEntity {\n      ...ContactEntity\n    }\n  }\n": typeof types.ContactEntityBlockFragmentDoc,
     "\n  fragment ContactListBlock on ContactListBlock {\n    items {\n      blockType\n      ... on ContactEntityBlock {\n        contactEntity {\n          ...ContactEntity\n        }\n      }\n    }\n  }\n": typeof types.ContactListBlockFragmentDoc,
     "\n  fragment ContactSectionBlock on ContactSectionBlock {\n    title\n    text\n    blocks {\n      id\n      blockType\n    }\n  }\n": typeof types.ContactSectionBlockFragmentDoc,
@@ -60,7 +61,7 @@ type Documents = {
     "\n  query venueBySlug($slug: String!) {\n    venue: page(contentType: \"venues.VenuePage\", slug: $slug) {\n      ... on VenuePage {\n        ...Venue\n      }\n    }\n  }\n": typeof types.VenueBySlugDocument,
     "\n  fragment VenueRentalIndex on VenueRentalIndex {\n    __typename\n    title\n    seoTitle\n    searchDescription\n    lead\n    body {\n      ...Blocks\n    }\n  }\n": typeof types.VenueRentalIndexFragmentDoc,
     "\n  query venueRentalIndex {\n    index: venueRentalIndex {\n      ... on VenueRentalIndex {\n        ...VenueRentalIndex\n      }\n    }\n    venues: pages(contentType: \"venues.VenuePage\", limit: 100) {\n      ... on VenuePage {\n        ...Venue\n      }\n    }\n  }\n": typeof types.VenueRentalIndexDocument,
-    "\n  fragment LeafBlocks on StreamFieldInterface {\n    id\n    blockType\n    field\n    ... on RichTextBlock {\n      ...RichTextBlock\n    }\n    ... on ImageWithTextBlock {\n      ...ImageWithTextBlock\n    }\n    ... on ImageSliderBlock {\n      ...ImageSliderBlock\n    }\n    ... on HorizontalRuleBlock {\n      ...HorizontalRuleBlock\n    }\n    ... on FeaturedBlock {\n      ...FeaturedBlock\n    }\n    ... on ContactListBlock {\n      ...ContactListBlock\n    }\n    ... on EmbedBlock {\n      ...EmbedBlock\n    }\n    ... on FactBoxBlock {\n      ...FactBoxBlock\n    }\n    ... on ScheduleBlock {\n      ...ScheduleBlock\n    }\n  }\n": typeof types.LeafBlocksFragmentDoc,
+    "\n  fragment LeafBlocks on StreamFieldInterface {\n    id\n    blockType\n    field\n    ... on RichTextBlock {\n      ...RichTextBlock\n    }\n    ... on ImageWithTextBlock {\n      ...ImageWithTextBlock\n    }\n    ... on ImageSliderBlock {\n      ...ImageSliderBlock\n    }\n    ... on HorizontalRuleBlock {\n      ...HorizontalRuleBlock\n    }\n    ... on FeaturedBlock {\n      ...FeaturedBlock\n    }\n    ... on ContactListBlock {\n      ...ContactListBlock\n    }\n    ... on EmbedBlock {\n      ...EmbedBlock\n    }\n    ... on FactBoxBlock {\n      ...FactBoxBlock\n    }\n    ... on ScheduleBlock {\n      ...ScheduleBlock\n    }\n    ... on ButtonLinkBlock {\n      ...ButtonLinkBlock\n    }\n  }\n": typeof types.LeafBlocksFragmentDoc,
     "\n  fragment OneLevelOfBlocks on StreamFieldInterface {\n    ...LeafBlocks\n    ... on AccordionBlock {\n      ...AccordionBlock\n      body {\n        ...LeafBlocks\n      }\n    }\n    ... on PageSectionBlock {\n      ...PageSectionBlock\n      body {\n        ...LeafBlocks\n      }\n    }\n  }\n": typeof types.OneLevelOfBlocksFragmentDoc,
     "\n  fragment Blocks on StreamFieldInterface {\n    ...OneLevelOfBlocks\n    ... on AccordionBlock {\n      ...AccordionBlock\n      body {\n        ...OneLevelOfBlocks\n      }\n    }\n    ... on PageSectionBlock {\n      ...PageSectionBlock\n      body {\n        ...OneLevelOfBlocks\n      }\n    }\n    ... on ContactSectionBlock {\n      ...ContactSectionBlock\n      blocks {\n        ...OneLevelOfBlocks\n        ... on ContactSubsectionBlock {\n          ...ContactSubsectionBlock\n          blocks {\n            ...OneLevelOfBlocks\n          }\n        }\n      }\n    }\n  }\n": typeof types.BlocksFragmentDoc,
     "\n  fragment Image on CustomImage {\n    id\n    url\n    width\n    height\n    alt\n    attribution\n  }\n": typeof types.ImageFragmentDoc,
@@ -96,6 +97,7 @@ const documents: Documents = {
     "\n  query allAssociations {\n    index: associationIndex {\n      ... on AssociationIndex {\n        ...AssociationIndex\n      }\n    }\n    associations: pages(\n      contentType: \"associations.AssociationPage\"\n      limit: 1000\n    ) {\n      ... on AssociationPage {\n        ...Association\n      }\n    }\n  }\n": types.AllAssociationsDocument,
     "\n  query associationBySlug($slug: String!) {\n    association: page(\n      contentType: \"associations.AssociationPage\"\n      slug: $slug\n    ) {\n      ... on AssociationPage {\n        ...Association\n      }\n    }\n  }\n": types.AssociationBySlugDocument,
     "\n  fragment AccordionBlock on AccordionBlock {\n    heading\n    body {\n      id\n      blockType\n    }\n  }\n": types.AccordionBlockFragmentDoc,
+    "\n  fragment ButtonLinkBlock on ButtonLinkBlock {\n    buttonText: text\n    buttonAnchor: anchor\n    buttonExternalUrl: externalUrl\n    buttonPage: page {\n      url\n    }\n  }\n": types.ButtonLinkBlockFragmentDoc,
     "\n  fragment ContactEntityBlock on ContactEntityBlock {\n    contactEntity {\n      ...ContactEntity\n    }\n  }\n": types.ContactEntityBlockFragmentDoc,
     "\n  fragment ContactListBlock on ContactListBlock {\n    items {\n      blockType\n      ... on ContactEntityBlock {\n        contactEntity {\n          ...ContactEntity\n        }\n      }\n    }\n  }\n": types.ContactListBlockFragmentDoc,
     "\n  fragment ContactSectionBlock on ContactSectionBlock {\n    title\n    text\n    blocks {\n      id\n      blockType\n    }\n  }\n": types.ContactSectionBlockFragmentDoc,
@@ -130,7 +132,7 @@ const documents: Documents = {
     "\n  query venueBySlug($slug: String!) {\n    venue: page(contentType: \"venues.VenuePage\", slug: $slug) {\n      ... on VenuePage {\n        ...Venue\n      }\n    }\n  }\n": types.VenueBySlugDocument,
     "\n  fragment VenueRentalIndex on VenueRentalIndex {\n    __typename\n    title\n    seoTitle\n    searchDescription\n    lead\n    body {\n      ...Blocks\n    }\n  }\n": types.VenueRentalIndexFragmentDoc,
     "\n  query venueRentalIndex {\n    index: venueRentalIndex {\n      ... on VenueRentalIndex {\n        ...VenueRentalIndex\n      }\n    }\n    venues: pages(contentType: \"venues.VenuePage\", limit: 100) {\n      ... on VenuePage {\n        ...Venue\n      }\n    }\n  }\n": types.VenueRentalIndexDocument,
-    "\n  fragment LeafBlocks on StreamFieldInterface {\n    id\n    blockType\n    field\n    ... on RichTextBlock {\n      ...RichTextBlock\n    }\n    ... on ImageWithTextBlock {\n      ...ImageWithTextBlock\n    }\n    ... on ImageSliderBlock {\n      ...ImageSliderBlock\n    }\n    ... on HorizontalRuleBlock {\n      ...HorizontalRuleBlock\n    }\n    ... on FeaturedBlock {\n      ...FeaturedBlock\n    }\n    ... on ContactListBlock {\n      ...ContactListBlock\n    }\n    ... on EmbedBlock {\n      ...EmbedBlock\n    }\n    ... on FactBoxBlock {\n      ...FactBoxBlock\n    }\n    ... on ScheduleBlock {\n      ...ScheduleBlock\n    }\n  }\n": types.LeafBlocksFragmentDoc,
+    "\n  fragment LeafBlocks on StreamFieldInterface {\n    id\n    blockType\n    field\n    ... on RichTextBlock {\n      ...RichTextBlock\n    }\n    ... on ImageWithTextBlock {\n      ...ImageWithTextBlock\n    }\n    ... on ImageSliderBlock {\n      ...ImageSliderBlock\n    }\n    ... on HorizontalRuleBlock {\n      ...HorizontalRuleBlock\n    }\n    ... on FeaturedBlock {\n      ...FeaturedBlock\n    }\n    ... on ContactListBlock {\n      ...ContactListBlock\n    }\n    ... on EmbedBlock {\n      ...EmbedBlock\n    }\n    ... on FactBoxBlock {\n      ...FactBoxBlock\n    }\n    ... on ScheduleBlock {\n      ...ScheduleBlock\n    }\n    ... on ButtonLinkBlock {\n      ...ButtonLinkBlock\n    }\n  }\n": types.LeafBlocksFragmentDoc,
     "\n  fragment OneLevelOfBlocks on StreamFieldInterface {\n    ...LeafBlocks\n    ... on AccordionBlock {\n      ...AccordionBlock\n      body {\n        ...LeafBlocks\n      }\n    }\n    ... on PageSectionBlock {\n      ...PageSectionBlock\n      body {\n        ...LeafBlocks\n      }\n    }\n  }\n": types.OneLevelOfBlocksFragmentDoc,
     "\n  fragment Blocks on StreamFieldInterface {\n    ...OneLevelOfBlocks\n    ... on AccordionBlock {\n      ...AccordionBlock\n      body {\n        ...OneLevelOfBlocks\n      }\n    }\n    ... on PageSectionBlock {\n      ...PageSectionBlock\n      body {\n        ...OneLevelOfBlocks\n      }\n    }\n    ... on ContactSectionBlock {\n      ...ContactSectionBlock\n      blocks {\n        ...OneLevelOfBlocks\n        ... on ContactSubsectionBlock {\n          ...ContactSubsectionBlock\n          blocks {\n            ...OneLevelOfBlocks\n          }\n        }\n      }\n    }\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,
@@ -216,6 +218,10 @@ export function graphql(source: "\n  query associationBySlug($slug: String!) {\n
  * 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 AccordionBlock on AccordionBlock {\n    heading\n    body {\n      id\n      blockType\n    }\n  }\n"): (typeof documents)["\n  fragment AccordionBlock on AccordionBlock {\n    heading\n    body {\n      id\n      blockType\n    }\n  }\n"];
+/**
+ * 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 ButtonLinkBlock on ButtonLinkBlock {\n    buttonText: text\n    buttonAnchor: anchor\n    buttonExternalUrl: externalUrl\n    buttonPage: page {\n      url\n    }\n  }\n"): (typeof documents)["\n  fragment ButtonLinkBlock on ButtonLinkBlock {\n    buttonText: text\n    buttonAnchor: anchor\n    buttonExternalUrl: externalUrl\n    buttonPage: page {\n      url\n    }\n  }\n"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
@@ -355,7 +361,7 @@ export function graphql(source: "\n  query venueRentalIndex {\n    index: venueR
 /**
  * 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 LeafBlocks on StreamFieldInterface {\n    id\n    blockType\n    field\n    ... on RichTextBlock {\n      ...RichTextBlock\n    }\n    ... on ImageWithTextBlock {\n      ...ImageWithTextBlock\n    }\n    ... on ImageSliderBlock {\n      ...ImageSliderBlock\n    }\n    ... on HorizontalRuleBlock {\n      ...HorizontalRuleBlock\n    }\n    ... on FeaturedBlock {\n      ...FeaturedBlock\n    }\n    ... on ContactListBlock {\n      ...ContactListBlock\n    }\n    ... on EmbedBlock {\n      ...EmbedBlock\n    }\n    ... on FactBoxBlock {\n      ...FactBoxBlock\n    }\n    ... on ScheduleBlock {\n      ...ScheduleBlock\n    }\n  }\n"): (typeof documents)["\n  fragment LeafBlocks on StreamFieldInterface {\n    id\n    blockType\n    field\n    ... on RichTextBlock {\n      ...RichTextBlock\n    }\n    ... on ImageWithTextBlock {\n      ...ImageWithTextBlock\n    }\n    ... on ImageSliderBlock {\n      ...ImageSliderBlock\n    }\n    ... on HorizontalRuleBlock {\n      ...HorizontalRuleBlock\n    }\n    ... on FeaturedBlock {\n      ...FeaturedBlock\n    }\n    ... on ContactListBlock {\n      ...ContactListBlock\n    }\n    ... on EmbedBlock {\n      ...EmbedBlock\n    }\n    ... on FactBoxBlock {\n      ...FactBoxBlock\n    }\n    ... on ScheduleBlock {\n      ...ScheduleBlock\n    }\n  }\n"];
+export function graphql(source: "\n  fragment LeafBlocks on StreamFieldInterface {\n    id\n    blockType\n    field\n    ... on RichTextBlock {\n      ...RichTextBlock\n    }\n    ... on ImageWithTextBlock {\n      ...ImageWithTextBlock\n    }\n    ... on ImageSliderBlock {\n      ...ImageSliderBlock\n    }\n    ... on HorizontalRuleBlock {\n      ...HorizontalRuleBlock\n    }\n    ... on FeaturedBlock {\n      ...FeaturedBlock\n    }\n    ... on ContactListBlock {\n      ...ContactListBlock\n    }\n    ... on EmbedBlock {\n      ...EmbedBlock\n    }\n    ... on FactBoxBlock {\n      ...FactBoxBlock\n    }\n    ... on ScheduleBlock {\n      ...ScheduleBlock\n    }\n    ... on ButtonLinkBlock {\n      ...ButtonLinkBlock\n    }\n  }\n"): (typeof documents)["\n  fragment LeafBlocks on StreamFieldInterface {\n    id\n    blockType\n    field\n    ... on RichTextBlock {\n      ...RichTextBlock\n    }\n    ... on ImageWithTextBlock {\n      ...ImageWithTextBlock\n    }\n    ... on ImageSliderBlock {\n      ...ImageSliderBlock\n    }\n    ... on HorizontalRuleBlock {\n      ...HorizontalRuleBlock\n    }\n    ... on FeaturedBlock {\n      ...FeaturedBlock\n    }\n    ... on ContactListBlock {\n      ...ContactListBlock\n    }\n    ... on EmbedBlock {\n      ...EmbedBlock\n    }\n    ... on FactBoxBlock {\n      ...FactBoxBlock\n    }\n    ... on ScheduleBlock {\n      ...ScheduleBlock\n    }\n    ... on ButtonLinkBlock {\n      ...ButtonLinkBlock\n    }\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

@@ -123,6 +123,9 @@ const LeafBlocksFragmentDefinition = graphql(`
     ... on ScheduleBlock {
       ...ScheduleBlock
     }
+    ... on ButtonLinkBlock {
+      ...ButtonLinkBlock
+    }
   }
 `);