Development to main, week 52

pwa/package.json

@@ -23,8 +23,8 @@
     "prepare": "cd .. && husky install"
   },
   "dependencies": {
-    "@conduction/components": "2.2.41",
-    "@conduction/theme": "1.0.61",
+    "@conduction/components": "2.2.44",
+    "@conduction/theme": "1.1.5",
     "@fortawesome/fontawesome-svg-core": "^6.4.2",
     "@fortawesome/free-brands-svg-icons": "6.4.2",
     "@fortawesome/free-regular-svg-icons": "6.4.2",

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;
@@ -35,3 +36,7 @@
 .tags > *:not(:last-child) {
   margin-inline-end: var(--web-app-size-xs);
 }
+
+.container:hover .description {
+  color: var(--conduction-card-wrapper-hover-color, var(--conduction-card-wrapper-color)) !important;
+}

pwa/src/components/breadcrumbs/Breadcrumbs.module.css

@@ -1,5 +1,5 @@
 .breadcrumbsContainer {
-  margin-block-start: var(--web-app-size-sm);
+  margin-block-start: var(--web-app-size-4xl);
   padding-block-start: var(--web-app-size-sm);
   padding-block-end: var(--web-app-size-sm);
 }
@@ -25,3 +25,11 @@
 .breadcrumbs > ol {
   align-items: baseline;
 }
+
+@media only screen and (min-width: 992px) {
+  .breadcrumbsContainer {
+    margin-block-start: var(--web-app-size-sm);
+    padding-block-start: var(--web-app-size-sm);
+    padding-block-end: var(--web-app-size-sm);
+  }
+}

pwa/src/components/categoryCard/CategoryCard.module.css

@@ -21,9 +21,14 @@
 }
 
 .description {
+  color: var(--conduction-card-wrapper-color) !important;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;
 }
+
+.container:hover .description {
+  color: var(--conduction-card-wrapper-hover-color, var(--conduction-card-wrapper-color)) !important;
+}

pwa/src/components/componentCard/ComponentCard.module.css

@@ -16,13 +16,18 @@
 }
 
 .description {
+  color: var(--conduction-card-wrapper-color) !important;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
+.container:hover .description {
+  color: var(--conduction-card-wrapper-hover-color, var(--conduction-card-wrapper-color)) !important;
+}
+
 .layerTags {
   display: flex;
   margin-block-end: var(--web-app-size-xs);

pwa/src/components/organizationCard/OrganizationCard.module.css

@@ -28,13 +28,18 @@
 }
 
 .description {
+  color: var(--conduction-card-wrapper-color) !important;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
+.container:hover .description {
+  color: var(--conduction-card-wrapper-hover-color, var(--conduction-card-wrapper-color)) !important;
+}
+
 .tagsContainer {
   display: flex;
   flex-wrap: wrap;

pwa/src/hooks/htmlParser/tableBody/getTableBody.module.css

@@ -1,3 +1,9 @@
 .tableBody {
   border: var(--utrecht-table-body-border);
 }
+
+.tableBody > tr > td {
+  border-inline-end-width: var(--utrecht-table-cell-border-inline-end-width);
+  border-inline-end-style: var(--utrecht-table-cell-border-inline-end-style);
+  border-inline-end-color: var(--utrecht-table-cell-border-inline-end-color);
+}

pwa/src/hooks/htmlParser/tableHeader/getTableHeader.module.css

@@ -3,8 +3,7 @@
 }
 
 .tableHeader > * {
-  border-block-end: var(--utrecht-table-header-border-block-end-width) solid
-    var(--utrecht-table-header-border-block-end-color);
+  border-block-end: var(--utrecht-table-header-border-block-end-width) solid var(--utrecht-table-header-border-block-end-color);
 }
 
 .tableHeader > tr:nth-child(odd) {
@@ -26,3 +25,9 @@
   background-color: inherit;
   color: inherit;
 }
+
+.tableHeader > tr > th {
+  border-inline-end-width: var(--utrecht-table-header-cell-border-inline-end-width);
+  border-inline-end-style: var(--utrecht-table-header-cell-border-inline-end-style);
+  border-inline-end-color: var(--utrecht-table-header-cell-border-inline-end-color);
+}

pwa/src/hooks/useEnvironment.ts

@@ -32,6 +32,7 @@ export const useEnvironment = () => {
     window.sessionStorage.setItem("API_URL", process.env.GATSBY_API_URL ?? "");
     window.sessionStorage.setItem("BASE_URL", process.env.GATSBY_BASE_URL ?? "");
     window.sessionStorage.setItem("NL_DESIGN_THEME_CLASSNAME", process.env.GATSBY_NL_DESIGN_THEME_CLASSNAME ?? "");
+    window.sessionStorage.setItem("GITHUB_ORGANIZATION_URL", process.env.GATSBY_GITHUB_ORGANIZATION_URL ?? "");
     window.sessionStorage.setItem("FAVICON_URL", process.env.GATSBY_FAVICON_URL ?? "");
     window.sessionStorage.setItem("PAGE_TITLE", process.env.GATSBY_PAGE_TITLE ?? "");
     window.sessionStorage.setItem("HEADER_LOGO_URL", process.env.GATSBY_HEADER_LOGO_URL ?? "");
@@ -68,6 +69,7 @@ export const useEnvironment = () => {
     window.sessionStorage.setItem("API_URL", config.GATSBY_API_URL ?? "");
     window.sessionStorage.setItem("BASE_URL", config.GATSBY_BASE_URL ?? "");
     window.sessionStorage.setItem("NL_DESIGN_THEME_CLASSNAME", config.GATSBY_NL_DESIGN_THEME_CLASSNAME ?? "");
+    window.sessionStorage.setItem("GITHUB_ORGANIZATION_URL", config.GATSBY_GITHUB_ORGANIZATION_URL ?? "");
     window.sessionStorage.setItem("FAVICON_URL", config.GATSBY_FAVICON_URL ?? "");
     window.sessionStorage.setItem("PAGE_TITLE", config.GATSBY_PAGE_TITLE ?? "");
     window.sessionStorage.setItem("HEADER_LOGO_URL", config.GATSBY_HEADER_LOGO_URL ?? "");

pwa/src/services/getConfig.ts

@@ -9,6 +9,8 @@ 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";
+import Gouda from "./../../static/configFiles/gouda.json";
 
 export const getConfig = (themeOrDomainName: string): Record<string, any> | undefined => {
   switch (themeOrDomainName) {
@@ -33,6 +35,10 @@ export const getConfig = (themeOrDomainName: string): Record<string, any> | unde
       return Dimpact;
     case "open-webconcept-theme":
       return OpenWebconcept;
+    case "zutphen-theme":
+      return Zutphen;
+    case "gouda-theme":
+      return Gouda;
 
     default:
       return CommonGround;
@@ -41,17 +47,24 @@ 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: "Gouda", value: "gouda-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" },
     ],
   },
 ];

pwa/src/styling/index.css

@@ -20,6 +20,9 @@
 @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";
+@import "../../node_modules/@conduction/theme/municipalities/sloterburg-design-tokens/dist/index.css";
+@import "../../node_modules/@conduction/theme/municipalities/gouda-design-tokens/dist/index.css";
 
 /* Design Tokens maintained by Frameless */
 @import "../../node_modules/@nl-design-system-unstable/rotterdam-design-tokens/dist/index.css";

pwa/src/templates/componentDetail/ComponentsDetailTemplate.module.css

@@ -187,6 +187,12 @@
   font-family: var(--utrecht-table-header-font-family);
 }
 
+.tableHeader > tr > th {
+  border-inline-end-width: var(--utrecht-table-header-cell-border-inline-end-width);
+  border-inline-end-style: var(--utrecht-table-header-cell-border-inline-end-style);
+  border-inline-end-color: var(--utrecht-table-header-cell-border-inline-end-color);
+}
+
 .tableRow > * {
   vertical-align: middle !important;
 }
@@ -200,6 +206,12 @@
   border: var(--utrecht-table-body-border);
 }
 
+.tableBody > tr > td {
+  border-inline-end-width: var(--utrecht-table-cell-border-inline-end-width);
+  border-inline-end-style: var(--utrecht-table-cell-border-inline-end-style);
+  border-inline-end-color: var(--utrecht-table-cell-border-inline-end-color);
+}
+
 .tableBody .tableRow:nth-child(odd) {
   background-color: var(--utrecht-table-row-alternate-odd-background-color);
   color: var(--utrecht-table-row-alternate-odd-color);

pwa/src/templates/componentDetail/ComponentsDetailTemplate.tsx

@@ -389,7 +389,7 @@ export const ComponentsDetailTemplate: React.FC<ComponentsDetailTemplateProps> =
               </TabList>
               <TabPanel>
                 <div className={styles.components}>
-                  {_getComponent.data.embedded?.dependsOn?.embedded.open && (
+                  {_getComponent.data.embedded?.dependsOn?.embedded?.open && (
                     <DisplaySwitch
                       buttons={displaySwitchButtons}
                       layoutClassName={styles.dependenciesDisplaySwitchButtons}
@@ -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) => (

pwa/src/templates/landing/LandingTemplate.module.css

@@ -17,11 +17,6 @@
   max-width: 800px;
 }
 
-.landingDisplaySwitchButtons {
-  align-items: center;
-  justify-content: flex-end;
-}
-
 .filtersAndResultsContainer {
   display: flex;
   gap: var(--web-app-size-lg);
@@ -35,4 +30,9 @@
   .cards {
     grid-template-columns: 1fr 1fr;
   }
+
+  .landingDisplaySwitchButtons {
+    align-items: center;
+    justify-content: flex-end;
+  }
 }

pwa/src/templates/organizationDetail/OrganizationDetailTemplate.module.css

@@ -7,6 +7,7 @@
 }
 
 .container > .backButton {
+  display: none;
   margin-block-start: var(--web-app-size-2xl);
   margin-block-end: var(--web-app-size-sm);
 }