Amsterdam/theme

pwa/package.json

@@ -62,8 +62,10 @@
     "vis-network": "^9.1.2"
   },
   "devDependencies": {
+    "@amsterdam/asc-assets": "0.38.0",
     "@material-ui/core": "^4.12.4",
     "@material-ui/lab": "^4.11.3-deprecations.1",
+    "@nl-design-system-unstable/amsterdam-design-tokens": "1.0.0-alpha.100",
     "@nl-design-system-unstable/rotterdam-design-tokens": "1.0.0-alpha.88",
     "@types/dateformat": "^5.0.0",
     "@types/dedent": "^0.7.0",

pwa/src/data/themes.ts

@@ -1,4 +1,5 @@
 export const themes = [
   { label: "Rotterdam", value: "rotterdam", className: "rotterdam-theme" },
   { label: "Utrecht", value: "utrecht", className: "utrecht-theme" },
+  { label: "Amsterdam", value: "amsterdam", className: "amsterdam-theme amsterdam-theme--responsive" },
 ];

pwa/src/styling/index.css

@@ -4,6 +4,8 @@
 /* TODO: Load themes on-demand */
 @import "../../node_modules/@nl-design-system-unstable/rotterdam-design-tokens/dist/index.css";
 @import "../../node_modules/@utrecht/design-tokens/dist/theme.css";
+@import "../../node_modules/@nl-design-system-unstable/amsterdam-design-tokens/dist/index.css";
+@import "../../node_modules/@nl-design-system-unstable/amsterdam-design-tokens/dist/font.css";
 
 /* Package includes */
 @import "react-loading-skeleton/dist/skeleton.css";

pwa/src/styling/themeProvider/ThemeProvider.tsx

@@ -4,9 +4,9 @@ import "./../../styling/design-tokens/component-overrides.css";
 import { useForm } from "react-hook-form";
 import { themes } from "../../data/themes";
 import { FormFieldInput } from "@gemeente-denhaag/form-field";
-import { SelectSingle } from "@conduction/components";
 import { Document } from "@utrecht/component-library-react/dist/css-module";
 import { FormField, FormLabel } from "@utrecht/component-library-react/dist/css-module";
+import { Select, SelectOption } from "@utrecht/component-library-react";
 
 export const ThemeProvider = ({ children }: React.PropsWithChildren<object>): JSX.Element => {
   const [theme, setTheme] = React.useState<string>("rotterdam");
@@ -48,17 +48,16 @@ const ThemeSwitcher: React.FC<ThemeSwitcherProps> = ({ setTheme }) => {
   const {
     register,
     watch,
-    control,
     formState: { errors },
   } = useForm();
 
   React.useEffect(() => {
     const subscription = watch(({ themeSwitcher }) => {
-      setTheme(themeSwitcher?.value);
+      setTheme(themeSwitcher);
     });
 
     return () => subscription.unsubscribe();
-  });
+  }, [watch]);
 
   return (
     <div className={styles.themeSwitcherContainer}>
@@ -68,13 +67,18 @@ const ThemeSwitcher: React.FC<ThemeSwitcherProps> = ({ setTheme }) => {
             <span className={styles.label}>Thema aanpasssen:</span>
           </FormLabel>
           <div className={styles.selectBorder}>
-            <SelectSingle
+            <Select
               id="themeChangerForm"
-              name="themeSwitcher"
-              defaultValue={themes[0]}
-              options={themes}
-              {...{ errors, control, register }}
-            />
+              defaultValue={themes[0].value}
+              invalid={errors["themeSwitcher"]}
+              {...register("themeSwitcher")}
+            >
+              {themes.map(({ label, value }) => (
+                <SelectOption value={value} key={label}>
+                  {label}
+                </SelectOption>
+              ))}
+            </Select>
           </div>
         </FormFieldInput>
       </FormField>