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

add fact box block

Browse Source
This commit is contained in:
Jonas Braathen
2024-07-14 19:55:40 +02:00
parent 9b7b63f679
commit 55f8062f07
19 changed files with 617 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,6 +4,7 @@ import { ImageSliderBlock } from "./ImageSliderBlock";
import { HorizontalRuleBlock } from "./HorizontalRuleBlock";
import { FeaturedBlock } from "./FeaturedBlock";
import { AccordionBlock } from "./AccordionBlock";
import { FactBoxBlock } from "./FactBoxBlock";
import { PageSectionBlock, PageSectionNavigationBlock } from "./PageSection";
import { ContactSectionBlock, ContactSubsectionBlock } from "./ContactSection";
import { ContactListBlock } from "./ContactListBlock";
@ -11,7 +12,6 @@ import { ContactEntityBlock } from "./ContactEntityBlock";
import { NeufAddressSectionBlock } from "./NeufAddressSectionBlock";
import { OpeningHoursSectionBlock } from "./OpeningHoursSectionBlock";
export const Blocks = ({ blocks }: any) => {
const sections = blocks.filter(
(block: any) => block.__typename === "PageSectionBlock"
@ -37,6 +37,9 @@ export const Blocks = ({ blocks }: any) => {
case "AccordionBlock":
return <AccordionBlock block={block} />;
break;
case "FactBoxBlock":
return <FactBoxBlock block={block} />;
break;
case "PageSectionBlock":
return <PageSectionBlock block={block} />;
break;

20
web/src/components/blocks/FactBoxBlock.tsx Normal file
View File

@ -0,0 +1,20 @@
import { useId, useState } from "react";
import { FactBoxBlock as FactBoxBlockType } from "@/gql/graphql";
import styles from "./factBoxBlock.module.scss";
import { Blocks } from "./Blocks";
export const FactBoxBlock = ({ block }: { block: FactBoxBlockType }) => {
return (
<section
className={styles.factBox}
data-background-color={block.backgroundColor ?? ""}
>
<div className={styles.factBoxHeader}>
<span>{block.heading}</span>
</div>
<div className={styles.factBoxContent}>
<Blocks blocks={block.body} />
</div>
</section>
);
};

39
web/src/components/blocks/factBoxBlock.module.scss Normal file
View File

@ -0,0 +1,39 @@
.factBox {
/* TODO: default fact box color if none is chosen
background: var(--color-background-secondary);
*/
&[data-background-color="betongGray"] {
background-color: var(--color-betongGray);
}
&[data-background-color="deepBrick"] {
background-color: var(--color-deepBrick);
}
&[data-background-color="neufPink"] {
background-color: var(--color-neufPink);
}
&[data-background-color="goldenOrange"] {
background-color: var(--color-goldenOrange);
color: var(--color-deepBrick);
}
&[data-background-color="goldenBeige"] {
background-color: var(--color-goldenBeige);
}
&[data-background-color="chateauBlue"] {
background-color: var(--color-chateauBlue);
color: var(--color-betongGray);
}
}
.factBoxHeader {
}
.factBoxContent {
}

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

@ -37,7 +37,7 @@ const documents = {
"\n fragment VenueRentalIndex on VenueRentalIndex {\n ... on VenueRentalIndex {\n title\n lead\n body {\n ...Blocks\n }\n }\n }\n": types.VenueRentalIndexFragmentDoc,
"\n query venueRentalIndex {\n index: venueRentalIndex {\n ... on VenueRentalIndex {\n ...VenueRentalIndex\n }\n }\n venues: pages(contentType: \"venues.VenuePage\") {\n ... on VenuePage {\n ...Venue\n }\n }\n }\n ": types.VenueRentalIndexDocument,
"\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 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 Blocks on StreamFieldInterface {\n ... on AccordionBlock {\n heading\n body {\n ...OneLevelOfBlocks\n }\n }\n ... on FactBoxBlock {\n heading\n backgroundColor\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,
@ -164,7 +164,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 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"];
export function graphql(source: "\n fragment Blocks on StreamFieldInterface {\n ... on AccordionBlock {\n heading\n body {\n ...OneLevelOfBlocks\n }\n }\n ... on FactBoxBlock {\n heading\n backgroundColor\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 FactBoxBlock {\n heading\n backgroundColor\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.
*/

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

File diff suppressed because one or more lines are too long

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

@ -137,6 +137,13 @@ const BlockFragmentDefinition = graphql(`
...OneLevelOfBlocks
}
}
... on FactBoxBlock {
heading
backgroundColor
body {
...OneLevelOfBlocks
}
}
... on PageSectionBlock {
title
backgroundColor