add icon selection for page sections

dnscms/dnscms/blocks.py

@@ -241,12 +241,28 @@ BASE_BLOCKS = [
 
 @register_streamfield_block
 class PageSectionBlock(blocks.StructBlock):
+    ICON_CHOICES = (
+        ("pigHeadLogo", "Grisehodelogo"),
+        ("key", "Nøkkel"),
+        ("ticket", "Billett"),
+        ("shield", "Skjold"),
+        ("lostProperty", "hittegods"),
+        ("pigsty", "Grisebinge"),
+        ("wheelchair", "Rullestol"),
+        ("clock", "Klokke"),
+    )
+
     title = blocks.CharBlock(max_length=64, required=True, label="Tittel")
     background_color = blocks.ChoiceBlock(
         label="Bakgrunnsfarge",
         required=False,
         choices=BACKGROUND_COLOR_CHOICES,
     )
+    icon = blocks.ChoiceBlock(
+        label="Ikon",
+        required=False,
+        choices=ICON_CHOICES,
+    )
     body = blocks.StreamBlock(
         [block for block in BASE_BLOCKS if block[0] != "page_section_navigation"]
         + [
@@ -258,6 +274,7 @@ class PageSectionBlock(blocks.StructBlock):
     graphql_fields = [
         GraphQLString("title", required=True),
         GraphQLString("background_color", required=False),
+        GraphQLString("icon", required=False),
         GraphQLStreamfield("body", required=True),
     ]
 

dnscms/generic/migrations/0023_alter_genericpage_body.py

@@ -0,0 +1,19 @@
+# Generated by Django 5.0.7 on 2024-08-09 14:49
+
+import wagtail.fields
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('generic', '0022_alter_genericpage_body'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='genericpage',
+            name='body',
+            field=wagtail.fields.StreamField([('paragraph', 0), ('image', 4), ('image_slider', 8), ('horizontal_rule', 10), ('featured', 18), ('page_section_navigation', 19), ('accordion', 23), ('fact_box', 26), ('embed', 27), ('raw_html', 28), ('page_section', 33)], block_lookup={0: ('wagtail.blocks.RichTextBlock', (), {'label': 'Rik tekst'}), 1: ('wagtail.images.blocks.ImageChooserBlock', (), {'label': 'Bilde'}), 2: ('wagtail.blocks.ChoiceBlock', [], {'choices': [('fullwidth', 'Fullbredde'), ('bleed', 'Utfallende'), ('original', 'Uendret størrelse')], 'icon': 'cup', 'label': 'Bildeformat'}), 3: ('wagtail.blocks.CharBlock', (), {'label': 'Bildetekst', 'max_length': 512, 'required': False}), 4: ('wagtail.blocks.StructBlock', [[('image', 1), ('image_format', 2), ('text', 3)]], {}), 5: ('wagtail.blocks.CharBlock', (), {'label': 'Tekst', 'max_length': 512, 'required': False}), 6: ('wagtail.blocks.StructBlock', [[('image', 1), ('text', 5)]], {}), 7: ('wagtail.blocks.ListBlock', (6,), {'label': 'Bilder', 'min_num': 1}), 8: ('wagtail.blocks.StructBlock', [[('images', 7)]], {}), 9: ('wagtail.blocks.ChoiceBlock', [], {'choices': [('deepBrick', 'Dyp tegl'), ('neufPink', 'Griserosa'), ('goldenOrange', 'Gyllen oransje'), ('goldenBeige', 'Gyllen beige'), ('chateauBlue', 'Slottsblå')], 'label': 'Farge', 'required': False}), 10: ('wagtail.blocks.StructBlock', [[('color', 9)]], {}), 11: ('wagtail.blocks.CharBlock', (), {'label': 'Tittel', 'max_length': 64, 'required': True}), 12: ('wagtail.blocks.RichTextBlock', (), {'features': ['bold', 'italic', 'link'], 'label': 'Tekst', 'required': True}), 13: ('wagtail.blocks.PageChooserBlock', (), {'header': 'Fremhevet side', 'required': True}), 14: ('wagtail.blocks.CharBlock', (), {'default': 'Les mer', 'help_text': 'Lenketeksten som tar deg videre til siden. Tips: Ikke start med "Trykk her"', 'label': 'Lenketekst', 'max_length': 64, 'required': True}), 15: ('wagtail.blocks.ChoiceBlock', [], {'choices': [('betongGray', 'Betonggrå'), ('deepBrick', 'Dyp tegl'), ('neufPink', 'Griserosa'), ('goldenOrange', 'Gyllen oransje'), ('goldenBeige', 'Gyllen beige'), ('chateauBlue', 'Slottsblå')], 'label': 'Bakgrunnsfarge'}), 16: ('wagtail.blocks.ChoiceBlock', [], {'choices': [('left', 'Venstre'), ('right', 'Høyre')], 'label': 'Bildeplassering'}), 17: ('wagtail.images.blocks.ImageChooserBlock', (), {'header': 'Overstyr bilde', 'help_text': 'Bildet som er tilknyttet undersiden du vil fremheve, vil automatisk brukes. Om det mangler eller du vil overstyre hvilket bilde som et brukes, kan du velge et her.', 'required': False}), 18: ('wagtail.blocks.StructBlock', [[('title', 11), ('text', 12), ('featured_page', 13), ('link_text', 14), ('background_color', 15), ('image_position', 16), ('featured_image_override', 17)]], {}), 19: ('dnscms.blocks.PageSectionNavigationBlock', (), {}), 20: ('wagtail.blocks.CharBlock', (), {'label': 'Overskrift', 'max_length': 64, 'required': True}), 21: ('wagtail.blocks.StructBlock', [[('image', 1), ('image_format', 2), ('text', 3)]], {'label': 'Bilde'}), 22: ('wagtail.blocks.StreamBlock', [[('paragraph', 0), ('image', 21)]], {}), 23: ('wagtail.blocks.StructBlock', [[('heading', 20), ('body', 22)]], {}), 24: ('wagtail.blocks.ChoiceBlock', [], {'choices': [('betongGray', 'Betonggrå'), ('deepBrick', 'Dyp tegl'), ('neufPink', 'Griserosa'), ('goldenOrange', 'Gyllen oransje'), ('goldenBeige', 'Gyllen beige'), ('chateauBlue', 'Slottsblå')], 'label': 'Bakgrunnsfarge', 'required': False}), 25: ('wagtail.blocks.RichTextBlock', (), {'features': ['bold', 'italic', 'link', 'ol', 'ul', 'h2', 'h3'], 'label': 'Innhold'}), 26: ('wagtail.blocks.StructBlock', [[('background_color', 24), ('body', 25)]], {}), 27: ('wagtail.embeds.blocks.EmbedBlock', (), {}), 28: ('wagtail.blocks.RawHTMLBlock', (), {}), 29: ('wagtail.blocks.ChoiceBlock', [], {'choices': [('pigHeadLogo', 'Grisehodelogo'), ('key', 'Nøkkel'), ('ticket', 'Billett'), ('shield', 'Skjold'), ('lostProperty', 'hittegods'), ('pigsty', 'Grisebinge'), ('wheelchair', 'Rullestol'), ('clock', 'Klokke')], 'label': 'Ikon', 'required': False}), 30: ('dnscms.blocks.NeufAddressSectionBlock', (), {}), 31: ('dnscms.blocks.OpeningHoursSectionBlock', (), {}), 32: ('wagtail.blocks.StreamBlock', [[('paragraph', 0), ('image', 4), ('image_slider', 8), ('horizontal_rule', 10), ('featured', 18), ('accordion', 23), ('fact_box', 26), ('embed', 27), ('raw_html', 28), ('neuf_address', 30), ('opening_hours', 31)]], {}), 33: ('wagtail.blocks.StructBlock', [[('title', 11), ('background_color', 24), ('icon', 29), ('body', 32)]], {})}),
+        ),
+    ]

web/src/components/blocks/PageSection.tsx

@@ -8,18 +8,16 @@ export const PageSectionBlock = ({
 }: {
   block: PageSectionBlockType;
 }) => {
-  // TODO: add icon selection to model
-  // TODO: there's a block.backgroundColor
-
   const anchor = slugify(block.title);
 
   return (
-    <section className={styles.pageSection}>
+    <section
+      className={styles.pageSection}
+      data-background-color={block.backgroundColor}
+    >
       <div className={styles.anchor} id={anchor}></div>
       <div className={styles.sectionHeader}>
-        <div className={styles.icon}>
+        <div className={styles.icon} data-icon={block.icon ?? "none"} />
-          <img src="/assets/icons/neufneuf.svg" />
-        </div>
         <h2>{block.title}</h2>
       </div>
       <Blocks blocks={block.body} />

web/src/gql/gql.ts

@@ -38,7 +38,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\", limit: 100) {\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    ... on EmbedBlock {\n      url\n      embed\n      rawEmbed\n    }\n    ... on FactBoxBlock {\n      backgroundColor\n      factBoxBody: body\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 PageSectionBlock {\n      title\n      backgroundColor\n      icon\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    subtitle\n    lead\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,
@@ -169,7 +169,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 PageSectionBlock {\n      title\n      backgroundColor\n      icon\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      icon\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

@@ -159,6 +159,7 @@ const BlockFragmentDefinition = graphql(`
     ... on PageSectionBlock {
       title
       backgroundColor
+      icon
       body {
         ...OneLevelOfBlocks
       }