feat: integrate kennisartikel-category into overige api

frameless · Nov 25, 2024 · 9096c3d · 9096c3d
1 parent adf008a
commit 9096c3d
Show file tree

Hide file tree

Showing 15 changed files with 804 additions and 27 deletions.
diff --git a/.gitignore b/.gitignore
@@ -134,4 +134,5 @@ dist/
 ############################
 # overige-objecten-api
 ############################
-apps/overige-objecten-api/src/types
+apps/overige-objecten-api/src/types
+output-html
diff --git a/apps/overige-objecten-api/package.json b/apps/overige-objecten-api/package.json
@@ -27,7 +27,11 @@
     "js-yaml": "4.1.0",
     "swagger-ui-express": "5.0.1",
     "lodash.merge": "4.6.2",
-    "lodash.snakecase": "4.1.1"
+    "lodash.snakecase": "4.1.1",
+    "react": "18.2.0",
+    "@utrecht/web-component-library-react": "3.0.0",
+    "@utrecht/component-library-react": "7.3.5",
+    "@frameless/ui": "0.1.0"
   },
   "devDependencies": {
     "@types/cors": "2.8.17",

diff --git a/apps/overige-objecten-api/src/components/AccordionSection.tsx b/apps/overige-objecten-api/src/components/AccordionSection.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import { Markdown } from './Markdown';
+
+export interface AccordionSectionProps {
+  label: string;
+  body: string;
+  headingLevel: number;
+}
+export const AccordionSection = ({ body, headingLevel = 2, label }: AccordionSectionProps) => {
+  const CustomHeading = `h${headingLevel}` as keyof React.JSX.IntrinsicElements;
+  return (
+    <div>
+      <CustomHeading>{label}</CustomHeading>
+      <Markdown>{body}</Markdown>
+    </div>
+  );
+};
diff --git a/apps/overige-objecten-api/src/components/Markdown.tsx b/apps/overige-objecten-api/src/components/Markdown.tsx
@@ -0,0 +1,5 @@
+import React from 'react';
+import xss from 'xss';
+
+export const Markdown = ({ children }: { children: string }) =>
+  children ? <div dangerouslySetInnerHTML={{ __html: xss(children) }} /> : null;
diff --git a/apps/overige-objecten-api/src/queries/index.ts b/apps/overige-objecten-api/src/queries/index.ts
@@ -40,28 +40,127 @@ query getAllProducts(
           description
         }
         sections {
+          ... on ComponentComponentsInternalBlockContent {
+                component: __typename
+                internal_field {
+                  data {
+                    attributes {
+                      content {
+                        uuid
+                        contentBlock {
+                          content
+                          kennisartikelCategorie
+                        }
+                      }
+                    }
+                  }
+                }
+              }
           ... on ComponentComponentsUtrechtRichText {
             id
             content
             kennisartikelCategorie
             component: __typename
           }
-          ... on ComponentComponentsInternalBlockContent {
+          ... on ComponentComponentsUtrechtImage {
             component: __typename
-            internal_field {
+            categorie2:kennisartikelCategorie
+            imageData {
               data {
                 attributes {
-                  content {
-                    uuid
-                    contentBlock {
-                      content
-                      kennisartikelCategorie
-                    }
+                  name
+                  alternativeText
+                  caption
+                  width
+                  height
+                  formats
+                  url
+                }
+              }
+            }
+          }
+          ... on ComponentComponentsUtrechtLogoButton {
+            component: __typename
+            categorie3:kennisartikelCategorie
+            appearance
+            href
+            label
+            logo
+            openFormsEmbed
+            textContent
+          }
+          ... on ComponentComponentsUtrechtSpotlight {
+            component: __typename
+            categorie4:kennisartikelCategorie
+            content
+            type
+            logoButton {
+              id
+              label
+              href
+              textContent
+              logo
+              appearance
+              __typename
+            }
+          }
+          ... on ComponentComponentsUtrechtRichText {
+            component: __typename
+            categorie5:kennisartikelCategorie
+            content
+          }
+          ... on ComponentComponentsUtrechtMultiColumnsButton {
+            component: __typename
+            categorie6:kennisartikelCategorie
+            column {
+              id
+              title
+              logoButton {
+                component: __typename
+                appearance
+                href
+                label
+                logo
+                openFormsEmbed
+                textContent
+              }
+            }
+          }
+          ... on ComponentComponentsUtrechtLink {
+            component: __typename
+            categorie7:kennisartikelCategorie
+            href
+            textContent
+            icon
+            language
+          }
+          ... on ComponentComponentsFaq {
+            component: __typename
+            categorie8:kennisartikelCategorie
+            pdc_faq {
+              data {
+                attributes {
+                  title
+                  faq(pagination: { start: 0, limit: -1 }) {
+                    body
+                    headingLevel
+                    id
+                    label
                   }
                 }
               }
             }
           }
+          ... on ComponentComponentsUtrechtAccordion {
+            component: __typename
+            categorie9:kennisartikelCategorie
+            item(pagination: { start: 0, limit: -1 }) {
+              body
+              headingLevel
+              id
+              label
+            }
+          }
         }
         kennisartikelMetadata {
           uuid
@@ -83,7 +182,6 @@ query getAllProducts(
     }
   }
 }
-
 `);
 
 export const GET_PRODUCT_BY_UUID = gql(`
@@ -108,12 +206,6 @@ export const GET_PRODUCT_BY_UUID = gql(`
               description
             }
             sections {
-              ... on ComponentComponentsUtrechtRichText {
-                id
-                content
-                kennisartikelCategorie
-                component:__typename
-              }
               ... on ComponentComponentsInternalBlockContent {
                 component: __typename
                 internal_field {
@@ -130,6 +222,111 @@ export const GET_PRODUCT_BY_UUID = gql(`
                   }
                 }
               }
+          ... on ComponentComponentsUtrechtRichText {
+            id
+            content
+            kennisartikelCategorie
+            component: __typename
+          }
+          ... on ComponentComponentsUtrechtImage {
+            component: __typename
+            categorie2:kennisartikelCategorie
+            imageData {
+              data {
+                attributes {
+                  name
+                  alternativeText
+                  caption
+                  width
+                  height
+                  formats
+                  url
+                }
+              }
+            }
+          }
+          ... on ComponentComponentsUtrechtLogoButton {
+            component: __typename
+            categorie3:kennisartikelCategorie
+            appearance
+            href
+            label
+            logo
+            openFormsEmbed
+            textContent
+          }
+          ... on ComponentComponentsUtrechtSpotlight {
+            component: __typename
+            categorie4:kennisartikelCategorie
+            content
+            type
+            logoButton {
+              id
+              label
+              href
+              textContent
+              logo
+              appearance
+              __typename
+            }
+          }
+          ... on ComponentComponentsUtrechtRichText {
+            component: __typename
+            categorie5:kennisartikelCategorie
+            content
+          }
+          ... on ComponentComponentsUtrechtMultiColumnsButton {
+            component: __typename
+            categorie6:kennisartikelCategorie
+            column {
+              id
+              title
+              logoButton {
+                component: __typename
+                appearance
+                href
+                label
+                logo
+                openFormsEmbed
+                textContent
+              }
+            }
+          }
+          ... on ComponentComponentsUtrechtLink {
+            component: __typename
+            categorie7:kennisartikelCategorie
+            href
+            textContent
+            icon
+            language
+          }
+          ... on ComponentComponentsFaq {
+            component: __typename
+            categorie8:kennisartikelCategorie
+            pdc_faq {
+              data {
+                attributes {
+                  title
+                  faq(pagination: { start: 0, limit: -1 }) {
+                    body
+                    headingLevel
+                    id
+                    label
+                  }
+                }
+              }
+            }
+          }
+          ... on ComponentComponentsUtrechtAccordion {
+            component: __typename
+            categorie9:kennisartikelCategorie
+            item(pagination: { start: 0, limit: -1 }) {
+              body
+              headingLevel
+              id
+              label
+            }
+          }
             }
             kennisartikelMetadata {
                 uuid