add colored horizontal rule block

dnscms/dnscms/blocks.py

@@ -68,3 +68,25 @@ class ImageSliderBlock(blocks.StructBlock):
 
     class Meta:
         icon = "image"
+
+
+@register_streamfield_block
+class HorizontalRuleBlock(blocks.StructBlock):
+    COLOR_CHOICES = (
+        ("deepBrick", "Dyp tegl"),
+        ("neufPink", "Griserosa"),
+        ("goldenOrange", "Gyllen oransje"),
+        ("goldenBeige", "Gyllen beige"),
+        ("chateauBlue", "Slottsblå"),
+    )
+
+    color = blocks.ChoiceBlock(
+        label="Farge",
+        required=False,
+        choices=COLOR_CHOICES,
+    )
+
+    graphql_fields = [GraphQLString("color", required=False)]
+
+    class Meta:
+        icon = "minus"

dnscms/dnscms/fields.py

@@ -1,13 +1,14 @@
 from wagtail import blocks
 from wagtail.fields import StreamField
 
-from dnscms.blocks import ImageSliderBlock, ImageWithTextBlock
+from dnscms.blocks import HorizontalRuleBlock, ImageSliderBlock, ImageWithTextBlock
 
 CommonStreamField = StreamField(
     [
         ("paragraph", blocks.RichTextBlock(label="Rik tekst")),
         ("image", ImageWithTextBlock(label="Bilde")),
         ("image_slider", ImageSliderBlock(label="Bildegalleri")),
+        ("horizontal_rule", HorizontalRuleBlock(label="Skillelinje")),
     ],
     default=[("paragraph", "")],
 )

web/src/components/blocks/Blocks.tsx

@@ -1,6 +1,7 @@
 import { RichTextBlock } from "./RichTextBlock";
 import { ImageWithTextBlock } from "./ImageWithTextBlock";
 import { ImageSliderBlock } from "./ImageSliderBlock";
+import { HorizontalRuleBlock } from "./HorizontalRuleBlock";
 
 export const Blocks = ({ blocks }: any) => {
   return blocks.map((block: any) => {
@@ -14,6 +15,9 @@ export const Blocks = ({ blocks }: any) => {
       case "ImageSliderBlock":
         return <ImageSliderBlock block={block} />;
         break;
+      case "HorizontalRuleBlock":
+        return <HorizontalRuleBlock block={block} />;
+        break;
       default:
         return <div>Unsupported block type {block.blockType}</div>;
         console.log("unsupported block", block);

web/src/components/blocks/HorizontalRuleBlock.tsx

@@ -0,0 +1,24 @@
+import { HorizontalRuleBlock as HorizontalRuleBlockType } from "@/gql/graphql";
+import Image from "../general/Image";
+import styles from "./imageWithTextBlock.module.scss";
+
+export const HorizontalRuleBlock = ({
+  block,
+}: {
+  block: HorizontalRuleBlockType;
+}) => {
+  const knownColors = [
+    "deepBrick",
+    "neufPink",
+    "goldenOrange",
+    "goldenBeige",
+    "chateauBlue",
+  ];
+  const defaultColor = "chateauBlue";
+  const color =
+    typeof block?.color === "string" && knownColors.includes(block.color)
+      ? block.color
+      : defaultColor;
+
+  return <hr attr-color={color} />;
+};

web/src/gql/gql.ts

@@ -31,7 +31,7 @@ const documents = {
     "\n    query allVenues {\n      venues: pages(contentType: \"venues.VenuePage\") {\n        ... on VenuePage {\n          ...Venue\n        }\n      }\n    }\n  ": types.AllVenuesDocument,
     "\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\", limit: 3) {\n        ... on NewsPage {\n          ...News\n        }\n      }\n    }\n  ": types.HomeDocument,
-    "\n  fragment Blocks 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  }\n": types.BlocksFragmentDoc,
+    "\n  fragment Blocks 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  }\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 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    facebookUrl\n    ticketUrl\n    priceRegular\n    priceMember\n    priceStudent\n    categories {\n      ... on EventCategory {\n        name\n        slug\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        }\n      }\n    }\n  }\n": types.EventFragmentDoc,
     "\n  query futureEvents {\n    events: eventIndex {\n      ... on EventIndex {\n        futureEvents {\n          ... on EventPage {\n            ...Event\n          }\n        }\n      }\n    }\n    eventCategories: eventCategories {\n      ... on EventCategory {\n        name\n        slug\n        showInFilters\n      }\n    }\n  }\n": types.FutureEventsDocument,
@@ -129,7 +129,7 @@ export function graphql(source: "\n    query home {\n      events: eventIndex {\
 /**
  * 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    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  }\n"): (typeof documents)["\n  fragment Blocks 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  }\n"];
+export function graphql(source: "\n  fragment Blocks 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  }\n"): (typeof documents)["\n  fragment Blocks 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  }\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

@@ -26,6 +26,9 @@ const BlockFragmentDefinition = graphql(`
         }
       }
     }
+    ... on HorizontalRuleBlock {
+      color
+    }
   }
 `);