Merge pull request #424 from OpenCatalogi/feature/OP-181/download-tem…

…plate feature/OP-181/download-template
OpenCatalogi · Dec 20, 2023 · 3e8c9b9 · 3e8c9b9
2 parents 57f88a0 + 85ef32c
commit 3e8c9b9
Show file tree

Hide file tree

Showing 19 changed files with 191 additions and 24 deletions.
diff --git a/pwa/package-lock.json b/pwa/package-lock.json
diff --git a/pwa/package.json b/pwa/package.json
@@ -23,8 +23,8 @@
     "prepare": "cd .. && husky install"
   },
   "dependencies": {
-    "@conduction/components": "2.2.41",
-    "@conduction/theme": "1.1.1",
+    "@conduction/components": "2.2.43",
+    "@conduction/theme": "1.1.4",
     "@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
@@ -36,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;
+}
diff --git a/pwa/src/components/categoryCard/CategoryCard.module.css b/pwa/src/components/categoryCard/CategoryCard.module.css
@@ -28,3 +28,7 @@
   overflow: hidden;
   text-overflow: ellipsis;
 }
+
+.container:hover .description {
+  color: var(--conduction-card-wrapper-hover-color, var(--conduction-card-wrapper-color)) !important;
+}
diff --git a/pwa/src/components/componentCard/ComponentCard.module.css b/pwa/src/components/componentCard/ComponentCard.module.css
@@ -24,6 +24,10 @@
   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);

diff --git a/pwa/src/components/organizationCard/OrganizationCard.module.css b/pwa/src/components/organizationCard/OrganizationCard.module.css
@@ -36,6 +36,10 @@
   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;

diff --git a/pwa/src/hooks/htmlParser/tableBody/getTableBody.module.css b/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);
+}
diff --git a/pwa/src/hooks/htmlParser/tableHeader/getTableHeader.module.css b/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);
+}
diff --git a/pwa/src/layout/Head.tsx b/pwa/src/layout/Head.tsx
@@ -14,7 +14,7 @@ export const Head: React.FC = () => {
     <Helmet
       title={window.sessionStorage.getItem("PAGE_TITLE") ?? "OpenCatalogi"}
       bodyAttributes={{
-        class: window.sessionStorage.getItem("NL_DESIGN_THEME_CLASSNAME") ?? "conduction-theme",
+        class: "sloterburg-theme" ?? "conduction-theme",
       }}
     />
   );

diff --git a/pwa/src/styling/index.css b/pwa/src/styling/index.css
@@ -21,6 +21,7 @@
 @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";
 
 /* 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.module.css b/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);

diff --git a/...plateParts/OrganizationDisplayTemplates/table/TableOrganizationDisplayTemplate.module.css b/...plateParts/OrganizationDisplayTemplates/table/TableOrganizationDisplayTemplate.module.css
@@ -32,3 +32,60 @@
   display: flex;
   justify-content: space-evenly;
 }
+
+.table {
+  background-color: var(--utrecht-table-background-color);
+  border-collapse: var(--utrecht-table-border-collapse);
+}
+
+.tableHeader > * {
+  border-block-end: var(--utrecht-table-header-border-block-end-width) solid var(--utrecht-table-header-border-block-end-color);
+}
+
+.tableHeader {
+  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;
+}
+
+.tableRow:hover {
+  cursor: pointer;
+  background-color: var(--utrecht-table-row-hover-background-color);
+}
+
+.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);
+}
+
+.tableBody .tableRow:nth-child(odd) {
+  background-color: var(--utrecht-table-row-alternate-odd-background-color);
+  color: var(--utrecht-table-row-alternate-odd-color);
+}
+
+.tableBody .tableRow:nth-child(odd):hover {
+  background-color: var(--utrecht-table-row-hover-background-color);
+  color: var(--utrecht-table-row-hover-color);
+}
+
+.tableBody .tableRow:nth-child(even) {
+  background-color: var(--utrecht-table-row-alternate-even-background-color);
+  color: var(--utrecht-table-row-alternate-even-color);
+}
+.tableBody .tableRow:nth-child(even):hover {
+  background-color: var(--utrecht-table-row-hover-background-color);
+  color: var(--utrecht-table-row-hover-color);
+}
diff --git a/...tes/templateParts/OrganizationDisplayTemplates/table/TableOrganizationDisplayTemplate.tsx b/...tes/templateParts/OrganizationDisplayTemplates/table/TableOrganizationDisplayTemplate.tsx
@@ -36,9 +36,9 @@ export const TableOrganizationDisplayTemplate: React.FC<TableOrganizationDisplay
     <HorizontalOverflowWrapper
       ariaLabels={{ scrollLeftButton: t("Scroll left"), scrollRightButton: t("Scroll right") }}
     >
-      <Table>
+      <Table className={styles.table}>
         {!hideTableHead && (
-          <TableHeader>
+          <TableHeader className={styles.tableHeader}>
             <TableRow>
               <TableHeaderCell>{t("Name")}</TableHeaderCell>
               <TableHeaderCell>{t("Sources")}</TableHeaderCell>
@@ -57,7 +57,7 @@ export const TableOrganizationDisplayTemplate: React.FC<TableOrganizationDisplay
           </TableHeader>
         )}
 
-        <TableBody>
+        <TableBody className={styles.tableBody}>
           {organizations.length > 0 &&
             organizations.map((organization) => (
               <TableRow

diff --git a/pwa/src/templates/templateParts/download/DownloadTemplate.tsx b/pwa/src/templates/templateParts/download/DownloadTemplate.tsx
@@ -29,9 +29,14 @@ export const DownloadTemplate: React.FC<DownloadTemplateProps> = ({ downloads, b
 
   const NotificationPopUp = _NotificationPopUp.NotificationPopUp;
 
+  const getSize = (size: number): string => {
+    if (size < 0) return t("Unknown size");
+    return `${size / 1000}kB`;
+  };
+
   const convertedDownloads: TDownloadableItem[] = downloads.map((download: any) => ({
     label: download.naam,
-    size: download.grootte,
+    size: getSize(download.grootte),
     type: download.type,
     downloadLink: download.url,
   }));

diff --git a/pwa/src/templates/templateParts/ratingOverview/RatingOverview.module.css b/pwa/src/templates/templateParts/ratingOverview/RatingOverview.module.css
@@ -2,14 +2,65 @@
   display: block;
   max-height: 60vh;
   overflow-y: scroll;
+  background-color: var(--utrecht-table-background-color);
+  border-collapse: var(--utrecht-table-border-collapse);
 }
 
-.header {
+.statusBadge {
+  user-select: none;
+}
+
+.tableHeader > * {
+  border-block-end: var(--utrecht-table-header-border-block-end-width) solid var(--utrecht-table-header-border-block-end-color);
+}
+
+.tableHeader {
   top: 0;
   position: sticky;
   background-color: var(--web-app-color-grey) !important;
+  font-family: var(--utrecht-table-header-font-family);
 }
 
-.statusBadge {
-  user-select: none;
+.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;
+}
+
+.tableRow:hover {
+  cursor: pointer;
+  background-color: var(--utrecht-table-row-hover-background-color);
+}
+
+.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);
+}
+
+.tableBody .tableRow:nth-child(odd) {
+  background-color: var(--utrecht-table-row-alternate-odd-background-color);
+  color: var(--utrecht-table-row-alternate-odd-color);
+}
+
+.tableBody .tableRow:nth-child(odd):hover {
+  background-color: var(--utrecht-table-row-hover-background-color);
+  color: var(--utrecht-table-row-hover-color);
+}
+
+.tableBody .tableRow:nth-child(even) {
+  background-color: var(--utrecht-table-row-alternate-even-background-color);
+  color: var(--utrecht-table-row-alternate-even-color);
+}
+.tableBody .tableRow:nth-child(even):hover {
+  background-color: var(--utrecht-table-row-hover-background-color);
+  color: var(--utrecht-table-row-hover-color);
 }
diff --git a/pwa/src/templates/templateParts/ratingOverview/RatingOverview.tsx b/pwa/src/templates/templateParts/ratingOverview/RatingOverview.tsx
@@ -25,17 +25,17 @@ export const RatingOverview: React.FC<RatingOverviewProps> = ({ rating }) => {
 
   return (
     <Table className={styles.container}>
-      <TableHeader className={styles.header}>
+      <TableHeader className={styles.tableHeader}>
         <TableRow>
           <TableHeaderCell>Status</TableHeaderCell>
           <TableHeaderCell>Message</TableHeaderCell>
           <TableHeaderCell>Points</TableHeaderCell>
         </TableRow>
       </TableHeader>
 
-      <TableBody>
+      <TableBody className={styles.tableBody}>
         {acceptedRatings.map((acceptedRating, idx) => (
-          <TableRow key={idx}>
+          <TableRow className={styles.tableRow} key={idx}>
             <TableCell>
               <StatusBadge status="safe" className={styles.statusBadge}>
                 Passed
@@ -47,7 +47,7 @@ export const RatingOverview: React.FC<RatingOverviewProps> = ({ rating }) => {
         ))}
 
         {rejectedRatings.map((rejectedRating, idx) => (
-          <TableRow key={idx}>
+          <TableRow className={styles.tableRow} key={idx}>
             <TableCell>
               <StatusBadge status="danger" className={styles.statusBadge}>
                 Failed

diff --git a/pwa/src/templates/templateParts/resultsTemplates/table/TableResultTemplate.module.css b/pwa/src/templates/templateParts/resultsTemplates/table/TableResultTemplate.module.css
@@ -11,6 +11,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;
 }
@@ -25,6 +31,12 @@
   border-block-end: var(--utrecht-table-body-border-block-end-width) solid var(--utrecht-table-body-border-block-end-color);
 }
 
+.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);

diff --git a/pwa/src/translations/en.ts b/pwa/src/translations/en.ts
@@ -148,4 +148,5 @@ export const en = {
   "Results per page": "Results per page",
   "Select result limit": "Select result limit",
   "Type of support": "Type of support",
+  "Unknown size": "Unknown size",
 };
diff --git a/pwa/src/translations/nl.ts b/pwa/src/translations/nl.ts
@@ -150,4 +150,5 @@ export const nl = {
   "Select result limit": "Selecteer resultaten limiet",
   "Business function": "Bedrijfsfunctie",
   "Type of support": "Type ondersteuning",
+  "Unknown size": "Onbekende grootte",
 };