OpenCatalogi · remko48 · Dec 18, 2023 · Dec 18, 2023
diff --git a/pwa/package-lock.json b/pwa/package-lock.json
diff --git a/pwa/package.json b/pwa/package.json
@@ -24,7 +24,7 @@
   },
   "dependencies": {
     "@conduction/components": "2.2.41",
-    "@conduction/theme": "1.0.61",
+    "@conduction/theme": "1.1.1",
     "@fortawesome/fontawesome-svg-core": "^6.4.2",
     "@fortawesome/free-brands-svg-icons": "6.4.2",
     "@fortawesome/free-regular-svg-icons": "6.4.2",

diff --git a/pwa/src/components/applicationCard/ApplicationCard.module.css b/pwa/src/components/applicationCard/ApplicationCard.module.css
@@ -16,6 +16,7 @@
 }
 
 .description {
+  color: var(--conduction-card-wrapper-color) !important;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;

diff --git a/pwa/src/components/categoryCard/CategoryCard.module.css b/pwa/src/components/categoryCard/CategoryCard.module.css
@@ -21,6 +21,7 @@
 }
 
 .description {
+  color: var(--conduction-card-wrapper-color) !important;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;

diff --git a/pwa/src/components/componentCard/ComponentCard.module.css b/pwa/src/components/componentCard/ComponentCard.module.css
@@ -16,6 +16,7 @@
 }
 
 .description {
+  color: var(--conduction-card-wrapper-color) !important;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;

diff --git a/pwa/src/components/organizationCard/OrganizationCard.module.css b/pwa/src/components/organizationCard/OrganizationCard.module.css
@@ -28,6 +28,7 @@
 }
 
 .description {
+  color: var(--conduction-card-wrapper-color) !important;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;

diff --git a/pwa/src/services/getConfig.ts b/pwa/src/services/getConfig.ts
@@ -9,6 +9,7 @@ import Leiden from "./../../static/configFiles/leiden.json";
 import Dimpact from "./../../static/configFiles/dimpact.json";
 import OpenWebconcept from "./../../static/configFiles/open-webconcept.json";
 import OpenCatalogi from "./../../static/configFiles/opencatalogi.json";
+import Zutphen from "./../../static/configFiles/zutphen.json";
 
 export const getConfig = (themeOrDomainName: string): Record<string, any> | undefined => {
   switch (themeOrDomainName) {
@@ -33,6 +34,8 @@ export const getConfig = (themeOrDomainName: string): Record<string, any> | unde
       return Dimpact;
     case "open-webconcept-theme":
       return OpenWebconcept;
+    case "zutphen-theme":
+      return Zutphen;
 
     default:
       return CommonGround;
@@ -41,17 +44,23 @@ export const getConfig = (themeOrDomainName: string): Record<string, any> | unde
 
 export const availableThemes: TGroupedSelectOption[] = [
   {
-    label: "Alle overheidsorganisaties",
+    label: "Alle organisaties",
     options: [
       { label: "OpenCatalogi", value: "opencatalogi-theme" },
       { label: "Common Ground", value: "commonground-theme" },
       { label: "Conduction", value: "conduction-theme" },
-      { label: "Rotterdam", value: "rotterdam-theme" },
+      { label: "OpenWebconcept", value: "open-webconcept-theme" },
+      { label: "Dimpact", value: "dimpact-theme" },
+    ],
+  },
+  {
+    label: "Gemeenten",
+    options: [
       { label: "Epe", value: "epe-theme" },
-      { label: "Noordwijk", value: "noordwijk-theme" },
       { label: "Leiden", value: "leiden-theme" },
-      { label: "Dimpact", value: "dimpact-theme" },
-      { label: "OpenWebconcept", value: "open-webconcept-theme" },
+      { label: "Noordwijk", value: "noordwijk-theme" },
+      { label: "Rotterdam", value: "rotterdam-theme" },
+      { label: "Zutphen", value: "zutphen-theme" },
     ],
   },
 ];
diff --git a/pwa/src/styling/index.css b/pwa/src/styling/index.css
@@ -20,6 +20,7 @@
 @import "../../node_modules/@conduction/theme/municipalities/dimpact-design-tokens/dist/index.css";
 @import "../../node_modules/@conduction/theme/municipalities/commonground-design-tokens/dist/index.css";
 @import "../../node_modules/@conduction/theme/municipalities/opencatalogi-design-tokens/dist/index.css";
+@import "../../node_modules/@conduction/theme/municipalities/zutphen-design-tokens/dist/index.css";
 
 /* Design Tokens maintained by Frameless */
 @import "../../node_modules/@nl-design-system-unstable/rotterdam-design-tokens/dist/index.css";

diff --git a/pwa/src/templates/componentDetail/ComponentsDetailTemplate.tsx b/pwa/src/templates/componentDetail/ComponentsDetailTemplate.tsx
@@ -551,51 +551,51 @@ export const ComponentsDetailTemplate: React.FC<ComponentsDetailTemplateProps> =
               <h2 className={styles.title}>Meer informatie</h2>
 
               <Table>
-                <TableBody>
+                <TableBody className={styles.tableBody}>
                   {gemma?.applicatiefunctie && (
-                    <TableRow>
-                      <TableCell className={styles.title}>Applicatiefunctie</TableCell>
+                    <TableRow className={styles.tableRow}>
+                      <TableCell className={styles.title}>Applicatiefunctie:</TableCell>
                       <TableCell className={styles.description}>{gemma.applicatiefunctie}</TableCell>
                     </TableRow>
                   )}
 
                   {gemma?.bedrijfsfuncties && (
-                    <TableRow>
-                      <TableCell className={styles.title}>Bedrijfsfuncties</TableCell>
+                    <TableRow className={styles.tableRow}>
+                      <TableCell className={styles.title}>Bedrijfsfuncties:</TableCell>
                       <TableCell className={styles.description}>{gemma.bedrijfsfuncties.join(", ")}</TableCell>
                     </TableRow>
                   )}
 
                   {gemma?.bedrijfsservices && (
-                    <TableRow>
-                      <TableCell className={styles.title}>Bedrijfsservices</TableCell>
+                    <TableRow className={styles.tableRow}>
+                      <TableCell className={styles.title}>Bedrijfsservices:</TableCell>
                       <TableCell className={styles.description}>{gemma.bedrijfsservices.join(", ")}</TableCell>
                     </TableRow>
                   )}
 
                   {gemma?.model && (
-                    <TableRow>
-                      <TableCell className={styles.title}>Model</TableCell>
+                    <TableRow className={styles.tableRow}>
+                      <TableCell className={styles.title}>Model:</TableCell>
                       <TableCell className={styles.description}>{gemma.model}</TableCell>
                     </TableRow>
                   )}
 
                   {gemma?.referentieComponenten?.length > 0 && (
-                    <TableRow>
-                      <TableCell className={styles.title}>Referentie componenten</TableCell>
+                    <TableRow className={styles.tableRow}>
+                      <TableCell className={styles.title}>Referentie componenten:</TableCell>
                       <TableCell className={styles.description}>{gemma.referentieComponenten.join(", ")}</TableCell>
                     </TableRow>
                   )}
 
                   {legal?.license && (
-                    <TableRow>
-                      <TableCell className={styles.title}>Licentie</TableCell>
+                    <TableRow className={styles.tableRow}>
+                      <TableCell className={styles.title}>Licentie:</TableCell>
                       <TableCell className={styles.description}>{legal.license}</TableCell>
                     </TableRow>
                   )}
 
                   {_getComponent.data.embedded?.nl?.upl?.length > 0 && (
-                    <TableRow>
+                    <TableRow className={styles.tableRow}>
                       <TableCell className={styles.title}>{t("Products")}</TableCell>
                       <TableCell>
                         {_getComponent.data.embedded?.nl?.upl.map((product: string, idx: number) => (

diff --git a/pwa/src/templates/templateParts/footer/FooterTemplate.module.css b/pwa/src/templates/templateParts/footer/FooterTemplate.module.css
@@ -7,6 +7,11 @@
   padding-inline-end: var(--utrecht-page-margin-inline-end);
 }
 
+.container > * {
+  font-size: var(--utrecht-page-footer-font-size, var(--utrecht-document-font-size));
+  font-family: var(--utrecht-page-footer-font-family, var(--utrecht-document-font-family));
+}
+
 .footer {
   display: flex;
   align-items: center;
@@ -115,7 +120,7 @@
   .contentGrid {
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
-  
+
   .logoAndConduction {
     margin-top: 38px;
     display: flex;

diff --git a/pwa/src/templates/templateParts/header/HeaderTemplate.module.css b/pwa/src/templates/templateParts/header/HeaderTemplate.module.css
@@ -1,9 +1,11 @@
 .headerTopBar {
   display: none;
 }
+
 .headerMiddleBar {
   background-color: var(--conduction-primary-top-nav-background-color, inherit);
   box-shadow: 0px 10px 13px -14px #000000;
+  margin-block-end: 20px;
 }
 
 .secondaryNavContainer {

diff --git a/pwa/src/templates/templateParts/resultsTemplates/table/TableResultTemplate.module.css b/pwa/src/templates/templateParts/resultsTemplates/table/TableResultTemplate.module.css
@@ -22,6 +22,7 @@
 
 .tableBody {
   border: var(--utrecht-table-body-border);
+  border-block-end: var(--utrecht-table-body-border-block-end-width) solid var(--utrecht-table-body-border-block-end-color);
 }
 
 .tableBody .tableRow:nth-child(odd) {

diff --git a/pwa/src/templates/templateParts/themeSwitcherTopBar/ThemeSwitcherTopBar.tsx b/pwa/src/templates/templateParts/themeSwitcherTopBar/ThemeSwitcherTopBar.tsx
@@ -46,7 +46,7 @@ export const ThemeSwitcherTopBar: React.FC = () => {
     return (
       <section className={clsx(styles.container, "open-webconcept-theme")}>
         <div>
-          <Heading3>Open Catalogi organisatie switcher</Heading3>
+          <Heading3>OpenCatalogi organisatie switcher</Heading3>
 
           <Paragraph>Verander van overheidsorganisatie om andere catalogi te bekijken</Paragraph>
         </div>

diff --git a/pwa/static/.env.development b/pwa/static/.env.development
@@ -17,7 +17,7 @@ GATSBY_PAGE_TITLE=
 
 
 # Header
-GATSBY_HEADER_LOGO_URL=https://www.rotterdam.nl/images/logo-base.svg
+GATSBY_HEADER_LOGO_URL=https://dev.opencatalogi.nl/static/logo_OpenCatalogi-8b1b0a001c3f37dae4d3f69b5964ec72.png
 GATSBY_HEADER_SHOW_LOGIN="false"
 GATSBY_HEADER_CONTENT=https://raw.githubusercontent.com/OpenCatalogi/web-app/main/pwa/src/templates/templateParts/header/HeaderContent.json
 

diff --git a/pwa/static/configFiles/zutphen.json b/pwa/static/configFiles/zutphen.json
@@ -0,0 +1,35 @@
+{
+  "GATSBY_SHOW_THEME_SWITCHER": "false",
+
+  "GATSBY_GITHUB_REPOSITORY_NAME": "web-app",
+  "GATSBY_USE_GITHUB_REPOSITORY_NAME_AS_PATH_PREFIX": "false",
+
+  "GATSBY_API_URL": "https://api.opencatalogi.nl/api",
+  "GATSBY_BASE_URL": "https://api.opencatalogi.nl",
+
+  "GATSBY_NL_DESIGN_THEME_CLASSNAME": "zutphen-theme",
+
+  "GATSBY_FAVICON_URL": "https://zutphen.nl/themes/zutphen/favicon.ico",
+
+  "GATSBY_PAGE_TITLE": "Zutphen's Catalogi",
+
+  "GATSBY_HEADER_LOGO_URL": "",
+  "GATSBY_HEADER_SHOW_LOGIN": "false",
+  "GATSBY_HEADER_CONTENT": "https://raw.githubusercontent.com/OpenCatalogi/web-app/main/pwa/src/templates/templateParts/header/HeaderContent.json",
+
+  "GATSBY_JUMBOTRON_TITLE": "",
+  "GATSBY_JUMBOTRON_SUBTITLE": "",
+  "GATSBY_JUMBOTRON_IMAGE_PLACEMENT": "false",
+  "GATSBY_JUMBOTRON_IMAGE_URL": "",
+  "GATSBY_JUMBOTRON_DESCRIPTION": "",
+  "GATSBY_JUMBOTRON_ISCARD": "false",
+  "GATSBY_JUMBOTRON_SEARCHFORM": "true",
+  "GATSBY_JUMBOTRON_CONTAINER": "true",
+
+  "GATSBY_FOOTER_SHOW_CREATOR": "false",
+  "GATSBY_FOOTER_LOGO_URL": "false",
+  "GATSBY_FOOTER_CONTENT": "https://raw.githubusercontent.com/OpenCatalogi/web-app/25995205e1dbb043822d1c58c5c23f8e6f77ff7e/pwa/src/templates/templateParts/footer/FooterContent.json",
+  "GATSBY_FOOTER_CONTENT_HEADER": "heading-2",
+
+  "GATSBY_OPTIONAL_START_PAGE": ""
+}