added opencatalogi theme

ConductionNL · Dec 12, 2023 · d69bf80 · d69bf80
1 parent 9567476
commit d69bf80
Show file tree

Hide file tree

Showing 5 changed files with 109 additions and 19 deletions.
diff --git a/pwa/package-lock.json b/pwa/package-lock.json
diff --git a/pwa/package.json b/pwa/package.json
@@ -22,8 +22,8 @@
     "prepare": "cd .. && husky install"
   },
   "dependencies": {
-    "@conduction/components": "2.2.40",
-    "@conduction/theme": "1.0.57",
+    "@conduction/components": "2.2.41",
+    "@conduction/theme": "1.0.60",
     "@fortawesome/fontawesome-svg-core": "^6.5.0",
     "@fortawesome/free-brands-svg-icons": "6.5.0",
     "@fortawesome/free-regular-svg-icons": "6.5.0",
@@ -82,10 +82,10 @@
     "react-hot-toast": "^2.4.1",
     "react-i18next": "^13.5.0",
     "react-loading-skeleton": "^3.3.1",
+    "react-minimal-pie-chart": "^8.4.0",
     "react-paginate": "^8.2.0",
     "react-query": "^3.39.3",
     "react-select": "^5.8.0",
-    "react-minimal-pie-chart": "^8.4.0",
     "showdown": "^2.1.0"
   },
   "devDependencies": {
@@ -94,9 +94,9 @@
     "@types/dedent": "^0.7.2",
     "@types/node": "^20.10.0",
     "@types/react-helmet": "^6.1.9",
+    "@types/showdown": "2.0.6",
     "@typescript-eslint/eslint-plugin": "^6.13.1",
     "@typescript-eslint/parser": "^6.13.1",
-    "@types/showdown": "2.0.6",
     "eslint": "^8.54.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-react": "^7.33.2",

diff --git a/pwa/src/styling/index.css b/pwa/src/styling/index.css
@@ -14,6 +14,8 @@
 @import "../../node_modules/@conduction/theme/municipalities/open-webconcept-design-tokens/dist/index.css";
 @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";
+
 
 /* Design Tokens maintained by Frameless */
 @import "../../node_modules/@utrecht/design-tokens/dist/theme.css";

diff --git a/pwa/src/templates/theme/ThemeTemplate.module.css b/pwa/src/templates/theme/ThemeTemplate.module.css
@@ -285,3 +285,23 @@
   display: flex;
   gap: 4px;
 }
+
+.radioButton {
+  min-block-size: var(--utrecht-radio-button-min-block-size) !important;
+  min-inline-size: var(--utrecht-radio-button-min-inline-size) !important;
+}
+
+input[type="radio"]:disabled:checked {
+  --_utrecht-radio-button-border-color: var(
+    --utrecht-radio-button-checked-disabled-border-color
+  ) !important;
+  --_utrecht-radio-button-border-width: var(
+    --utrecht-radio-button-checked-disabled-border-width
+  ) !important;
+  --_utrecht-radio-button-background-color: var(
+    --utrecht-radio-button-checked-disabled-background-color
+  ) !important;
+  --_utrecht-radio-button-color: var(
+    --utrecht-radio-button-checked-disabled-color
+  ) !important;
+}
diff --git a/pwa/src/templates/theme/ThemeTemplate.tsx b/pwa/src/templates/theme/ThemeTemplate.tsx
@@ -353,7 +353,11 @@ export const ThemeTemplate: React.FC = () => {
               onChange={() => setRadioButtonChecked(radioButton.value)}
               key={radioButton.value}
             >
-              <RadioButton value={radioButton.value} checked={radioButtonChecked === radioButton.value} />
+              <RadioButton
+                className={styles.radioButton}
+                value={radioButton.value}
+                checked={radioButtonChecked === radioButton.value}
+              />
               <span className={styles.radioLabel} onClick={() => setRadioButtonChecked(radioButton.value)}>
                 {radioButton.label}
               </span>
@@ -518,15 +522,23 @@ export const ThemeTemplate: React.FC = () => {
         <div>
           <h3 className={styles.header}>Checkbox</h3>
           <DownloadCard
-            label={"Download png"}
+            label={"Download.png"}
+            labelTooltip={{
+              id: TOOLTIP_ID,
+              tooltip: "https://google.com/download.png",
+            }}
             type={"PNG"}
             size="428"
             handleClick={() => {
               console.log("click");
             }}
           />
           <DownloadCard
-            label={"https://github.com/CommonGateway/ZGWBundle/archive/refs/heads/main.zip"}
+            label={"main.zip"}
+            labelTooltip={{
+              id: TOOLTIP_ID,
+              tooltip: "https://github.com/CommonGateway/ZGWBundle/archive/refs/heads/main.zip",
+            }}
             type={"ZIP"}
             size="111"
             handleClick={() => {
@@ -647,7 +659,59 @@ export const ThemeTemplate: React.FC = () => {
         </div>
         <div>
           <h3 className={styles.header}>TableWrapper:</h3>
-          <span>No preview/component</span>
+          <HorizontalOverflowWrapper
+            ariaLabels={{ scrollLeftButton: t("Left scroll button"), scrollRightButton: t("Right scroll button") }}
+          >
+            <Table className={styles.table}>
+              <TableHeader className={styles.tableHeader}>
+                <TableRow>
+                  <TableHeaderCell>{t("TableHeader")}</TableHeaderCell>
+                  <TableHeaderCell>{t("TableHeader")}</TableHeaderCell>
+                  <TableHeaderCell>{t("TableHeader")}</TableHeaderCell>
+                  <TableHeaderCell>{t("TableHeader")}</TableHeaderCell>
+                  <TableHeaderCell>{t("TableHeader")}</TableHeaderCell>
+                  <TableHeaderCell>{t("TableHeader")}</TableHeaderCell>
+                  <TableHeaderCell>{t("TableHeader")}</TableHeaderCell>
+                  <TableHeaderCell>{t("TableHeader")}</TableHeaderCell>
+                  <TableHeaderCell>{t("TableHeader")}</TableHeaderCell>
+                  <TableHeaderCell>{t("TableHeader")}</TableHeaderCell>
+                  <TableHeaderCell>{t("TableHeader")}</TableHeaderCell>
+                  <TableHeaderCell>{t("TableHeader")}</TableHeaderCell>
+                </TableRow>
+              </TableHeader>
+              <TableBody className={styles.tableBody}>
+                <TableRow className={styles.tableRow}>
+                  <TableCell>TableCell</TableCell>
+                  <TableCell>TableCell</TableCell>
+                  <TableCell>TableCell</TableCell>
+                  <TableCell>TableCell</TableCell>
+                  <TableCell>TableCell</TableCell>
+                  <TableCell>TableCell</TableCell>
+                  <TableCell>TableCell</TableCell>
+                  <TableCell>TableCell</TableCell>
+                  <TableCell>TableCell</TableCell>
+                  <TableCell>TableCell</TableCell>
+                  <TableCell>TableCell</TableCell>
+                  <TableCell>TableCell</TableCell>
+                </TableRow>
+                <TableRow className={styles.tableRow}>
+                  <TableCell>TableCell</TableCell>
+                  <TableCell>TableCell</TableCell>
+                  <TableCell>TableCell</TableCell>
+                  <TableCell>TableCell</TableCell>
+                  <TableCell>TableCell</TableCell>
+                  <TableCell>TableCell</TableCell>
+                  <TableCell>TableCell</TableCell>
+                  <TableCell>TableCell</TableCell>
+                  <TableCell>TableCell</TableCell>
+                  <TableCell>TableCell</TableCell>
+                  <TableCell>TableCell</TableCell>
+                  <TableCell>TableCell</TableCell>
+                  <TableCell>TableCell</TableCell>
+                </TableRow>
+              </TableBody>
+            </Table>
+          </HorizontalOverflowWrapper>
         </div>
 
         <div>