updated theme page with zutphen

ConductionNL · Dec 18, 2023 · edb7baa · edb7baa
1 parent 0724e18
commit edb7baa
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 12 deletions.
diff --git a/pwa/package-lock.json b/pwa/package-lock.json
diff --git a/pwa/package.json b/pwa/package.json
@@ -4,7 +4,9 @@
   "private": true,
   "description": "Product Website Template",
   "author": "Conduction",
-  "keywords": ["gatsby"],
+  "keywords": [
+    "gatsby"
+  ],
   "scripts": {
     "develop": "gatsby develop",
     "start": "gatsby develop",
@@ -23,7 +25,7 @@
   },
   "dependencies": {
     "@conduction/components": "2.2.41",
-    "@conduction/theme": "1.0.60",
+    "@conduction/theme": "file:../../conduction-theme",
     "@fortawesome/fontawesome-svg-core": "^6.5.0",
     "@fortawesome/free-brands-svg-icons": "6.5.0",
     "@fortawesome/free-regular-svg-icons": "6.5.0",

diff --git a/pwa/src/styling/index.css b/pwa/src/styling/index.css
@@ -15,7 +15,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/@utrecht/design-tokens/dist/theme.css";

diff --git a/pwa/src/templates/templateParts/footer/FooterTemplate.module.css b/pwa/src/templates/templateParts/footer/FooterTemplate.module.css
@@ -7,6 +7,17 @@
   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;

diff --git a/pwa/src/templates/theme/ThemeTemplate.module.css b/pwa/src/templates/theme/ThemeTemplate.module.css
@@ -185,6 +185,8 @@
 
 .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/theme/ThemeTemplate.tsx b/pwa/src/templates/theme/ThemeTemplate.tsx
@@ -165,6 +165,11 @@ export const ThemeTemplate: React.FC = () => {
           <BadgeCounter>1</BadgeCounter>
         </div>
 
+        <div>
+          <h3 className={styles.header}>Badge / DataBadge:</h3>
+          <DataBadge className={styles.tagWidth}>DataBadge</DataBadge>
+        </div>
+
         <div>
           <h3 className={styles.header}>Blockquote:</h3>
           <span>No preview/component</span>
@@ -207,7 +212,7 @@ export const ThemeTemplate: React.FC = () => {
         </div>
 
         <div>
-          <h3 className={styles.header}>Breadcumbs:</h3>
+          <h3 className={styles.header}>Buttons:</h3>
           <section className={styles.section}>
             <button onClick={() => setButtonsDisabled(!buttonsDisabled)}>toggle disabled</button>:{" "}
             <span>{buttonsDisabled.toString()}</span>
@@ -252,11 +257,6 @@ export const ThemeTemplate: React.FC = () => {
           <CodeBlock>helm install [my-opencatalogi] open-catalogi/opencatalogi </CodeBlock>
         </div>
 
-        <div>
-          <h3 className={styles.header}>DataBadge / Badge:</h3>
-          <DataBadge className={styles.tagWidth}>DataBadge</DataBadge>
-        </div>
-
         <div>
           <h3 className={styles.header}>Document:</h3>
           <p>ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
@@ -707,7 +707,6 @@ export const ThemeTemplate: React.FC = () => {
                   <TableCell>TableCell</TableCell>
                   <TableCell>TableCell</TableCell>
                   <TableCell>TableCell</TableCell>
-                  <TableCell>TableCell</TableCell>
                 </TableRow>
               </TableBody>
             </Table>