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

add a button link component

Browse Source
This commit is contained in:
Jonas Braathen
2026-07-02 23:44:53 +02:00
parent 31453af238
commit b0698247b6
14 changed files with 371 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dnscms/associations/migrations/0028_alter_associationindex_body_and_more.py
+24
View File
File diff suppressed because one or more lines are too long
dnscms/contacts/migrations/0019_alter_contactindex_body.py
+19
View File
File diff suppressed because one or more lines are too long
dnscms/dnscms/blocks.py
+48
View File
@@ -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()),
]
dnscms/events/migrations/0057_alter_eventpage_body.py
+19
View File
File diff suppressed because one or more lines are too long
dnscms/generic/migrations/0029_alter_genericpage_body.py
+19
View File
File diff suppressed because one or more lines are too long
dnscms/news/migrations/0021_alter_newspage_body.py
+19
View File
File diff suppressed because one or more lines are too long
dnscms/sponsors/migrations/0003_alter_sponsorspage_body.py
+19
View File
File diff suppressed because one or more lines are too long
dnscms/studio/migrations/0004_alter_studiopage_body.py
+19
View File
File diff suppressed because one or more lines are too long
dnscms/venues/migrations/0027_alter_venueindex_body_alter_venuepage_body_and_more.py
+29
View File
File diff suppressed because one or more lines are too long
web/src/components/blocks/Blocks.tsx
+4
View File
@@ -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
+57
View File
@@ -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
+9 -3
View File
@@ -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/gql/graphql.ts
+83 -26
View File
File diff suppressed because one or more lines are too long
web/src/lib/common.ts
+3
View File
@@ -123,6 +123,9 @@ const LeafBlocksFragmentDefinition = graphql(`
... on ScheduleBlock {
...ScheduleBlock
}
... on ButtonLinkBlock {
...ButtonLinkBlock
}
}
`);