From 742989954194e87f29219da7c0ba7fc0d38ba00c Mon Sep 17 00:00:00 2001
From: personal <jamieolivermaguire@googlemail.com>
Date: Wed, 31 Jan 2024 10:08:23 +0000
Subject: [PATCH 1/8] update deps in next

---
 nextjs-app/package.json |  4 ++--
 nextjs-app/yarn.lock    | 22 +++++++++++-----------
 2 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/nextjs-app/package.json b/nextjs-app/package.json
index dc0e5e39..4777aaf0 100644
--- a/nextjs-app/package.json
+++ b/nextjs-app/package.json
@@ -13,14 +13,14 @@
   "dependencies": {
     "@justeattakeaway/pie-button": "0.45.2",
     "@justeattakeaway/pie-card": "0.17.2",
-    "@justeattakeaway/pie-cookie-banner": "0.16.1",
+    "@justeattakeaway/pie-cookie-banner": "0.17.0",
     "@justeattakeaway/pie-css": "0.10.0",
     "@justeattakeaway/pie-divider": "0.12.1",
     "@justeattakeaway/pie-form-label": "0.11.0",
     "@justeattakeaway/pie-icon-button": "0.27.2",
     "@justeattakeaway/pie-icons-webc": "0.17.2",
     "@justeattakeaway/pie-link": "0.15.0",
-    "@justeattakeaway/pie-modal": "0.38.3",
+    "@justeattakeaway/pie-modal": "0.38.4",
     "@justeattakeaway/pie-spinner": "0.5.2",
     "@justeattakeaway/pie-switch": "0.26.0",
     "@justeattakeaway/pie-tag": "0.5.0",
diff --git a/nextjs-app/yarn.lock b/nextjs-app/yarn.lock
index 61bb9da7..2d7eaba1 100644
--- a/nextjs-app/yarn.lock
+++ b/nextjs-app/yarn.lock
@@ -122,18 +122,18 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@justeattakeaway/pie-cookie-banner@npm:0.16.1":
-  version: 0.16.1
-  resolution: "@justeattakeaway/pie-cookie-banner@npm:0.16.1"
+"@justeattakeaway/pie-cookie-banner@npm:0.17.0":
+  version: 0.17.0
+  resolution: "@justeattakeaway/pie-cookie-banner@npm:0.17.0"
   dependencies:
     "@justeattakeaway/pie-button": 0.45.2
     "@justeattakeaway/pie-divider": 0.12.1
     "@justeattakeaway/pie-icon-button": 0.27.2
     "@justeattakeaway/pie-link": 0.15.0
-    "@justeattakeaway/pie-modal": 0.38.3
+    "@justeattakeaway/pie-modal": 0.38.4
     "@justeattakeaway/pie-switch": 0.26.0
     "@justeattakeaway/pie-webc-core": 0.17.1
-  checksum: 6f972a09b4407dfcd4bb4845a01b4cc81f8c4e61f8ac72fed1f232a83c1e74f75e8320a520b32deb34716156e092dcf9f5d84b0e7e0e72d3f1f96cfcb67765a8
+  checksum: e73263cc67d6b30342a035ab205878b5376f582349d80c46ac67545ab564cd5086b0978577e4806588fd52891b8c15dbc37cd2d53155216eb91e7a75092442c4
   languageName: node
   linkType: hard
 
@@ -191,9 +191,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@justeattakeaway/pie-modal@npm:0.38.3":
-  version: 0.38.3
-  resolution: "@justeattakeaway/pie-modal@npm:0.38.3"
+"@justeattakeaway/pie-modal@npm:0.38.4":
+  version: 0.38.4
+  resolution: "@justeattakeaway/pie-modal@npm:0.38.4"
   dependencies:
     "@justeattakeaway/pie-button": 0.45.2
     "@justeattakeaway/pie-icon-button": 0.27.2
@@ -202,7 +202,7 @@ __metadata:
     "@justeattakeaway/pie-webc-core": 0.17.1
     body-scroll-lock: 3.1.5
     dialog-polyfill: 0.5.6
-  checksum: 496eb304152920545803345379b9dcaa1b940246ef90ce1dedfd83eec7df862433496b691073d561a09781580f84502d04c4fdaa70eb179f579da1365360e0ba
+  checksum: 34137565dab1d80bf36c9abab2e6ffd4b61d4ad8cde3fa5e81acadec2cf90f60d35fc6a76ebc4172d52bcba483bc770c96eb5f79997d6a612ec20f78c6cac419
   languageName: node
   linkType: hard
 
@@ -3185,14 +3185,14 @@ __metadata:
   dependencies:
     "@justeattakeaway/pie-button": 0.45.2
     "@justeattakeaway/pie-card": 0.17.2
-    "@justeattakeaway/pie-cookie-banner": 0.16.1
+    "@justeattakeaway/pie-cookie-banner": 0.17.0
     "@justeattakeaway/pie-css": 0.10.0
     "@justeattakeaway/pie-divider": 0.12.1
     "@justeattakeaway/pie-form-label": 0.11.0
     "@justeattakeaway/pie-icon-button": 0.27.2
     "@justeattakeaway/pie-icons-webc": 0.17.2
     "@justeattakeaway/pie-link": 0.15.0
-    "@justeattakeaway/pie-modal": 0.38.3
+    "@justeattakeaway/pie-modal": 0.38.4
     "@justeattakeaway/pie-spinner": 0.5.2
     "@justeattakeaway/pie-switch": 0.26.0
     "@justeattakeaway/pie-tag": 0.5.0

From a7fea462191fe590f6a503790fc5c2f1f2518a44 Mon Sep 17 00:00:00 2001
From: personal <jamieolivermaguire@googlemail.com>
Date: Wed, 31 Jan 2024 10:08:57 +0000
Subject: [PATCH 2/8] update deps in vanilla

---
 vanilla-app/package.json |  4 ++--
 vanilla-app/yarn.lock    | 22 +++++++++++-----------
 2 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/vanilla-app/package.json b/vanilla-app/package.json
index c24af908..950aaf85 100644
--- a/vanilla-app/package.json
+++ b/vanilla-app/package.json
@@ -17,14 +17,14 @@
   "dependencies": {
     "@justeattakeaway/pie-button": "0.45.2",
     "@justeattakeaway/pie-card": "0.17.2",
-    "@justeattakeaway/pie-cookie-banner": "0.16.1",
+    "@justeattakeaway/pie-cookie-banner": "0.17.0",
     "@justeattakeaway/pie-css": "0.10.0",
     "@justeattakeaway/pie-divider": "0.12.1",
     "@justeattakeaway/pie-form-label": "0.11.0",
     "@justeattakeaway/pie-icon-button": "0.27.2",
     "@justeattakeaway/pie-icons-webc": "0.17.2",
     "@justeattakeaway/pie-link": "0.15.0",
-    "@justeattakeaway/pie-modal": "0.38.3",
+    "@justeattakeaway/pie-modal": "0.38.4",
     "@justeattakeaway/pie-spinner": "0.5.2",
     "@justeattakeaway/pie-switch": "0.26.0",
     "@justeattakeaway/pie-tag": "0.5.0",
diff --git a/vanilla-app/yarn.lock b/vanilla-app/yarn.lock
index 449dfcd3..e79cca9a 100644
--- a/vanilla-app/yarn.lock
+++ b/vanilla-app/yarn.lock
@@ -193,18 +193,18 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@justeattakeaway/pie-cookie-banner@npm:0.16.1":
-  version: 0.16.1
-  resolution: "@justeattakeaway/pie-cookie-banner@npm:0.16.1"
+"@justeattakeaway/pie-cookie-banner@npm:0.17.0":
+  version: 0.17.0
+  resolution: "@justeattakeaway/pie-cookie-banner@npm:0.17.0"
   dependencies:
     "@justeattakeaway/pie-button": 0.45.2
     "@justeattakeaway/pie-divider": 0.12.1
     "@justeattakeaway/pie-icon-button": 0.27.2
     "@justeattakeaway/pie-link": 0.15.0
-    "@justeattakeaway/pie-modal": 0.38.3
+    "@justeattakeaway/pie-modal": 0.38.4
     "@justeattakeaway/pie-switch": 0.26.0
     "@justeattakeaway/pie-webc-core": 0.17.1
-  checksum: 6f972a09b4407dfcd4bb4845a01b4cc81f8c4e61f8ac72fed1f232a83c1e74f75e8320a520b32deb34716156e092dcf9f5d84b0e7e0e72d3f1f96cfcb67765a8
+  checksum: e73263cc67d6b30342a035ab205878b5376f582349d80c46ac67545ab564cd5086b0978577e4806588fd52891b8c15dbc37cd2d53155216eb91e7a75092442c4
   languageName: node
   linkType: hard
 
@@ -262,9 +262,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@justeattakeaway/pie-modal@npm:0.38.3":
-  version: 0.38.3
-  resolution: "@justeattakeaway/pie-modal@npm:0.38.3"
+"@justeattakeaway/pie-modal@npm:0.38.4":
+  version: 0.38.4
+  resolution: "@justeattakeaway/pie-modal@npm:0.38.4"
   dependencies:
     "@justeattakeaway/pie-button": 0.45.2
     "@justeattakeaway/pie-icon-button": 0.27.2
@@ -273,7 +273,7 @@ __metadata:
     "@justeattakeaway/pie-webc-core": 0.17.1
     body-scroll-lock: 3.1.5
     dialog-polyfill: 0.5.6
-  checksum: 496eb304152920545803345379b9dcaa1b940246ef90ce1dedfd83eec7df862433496b691073d561a09781580f84502d04c4fdaa70eb179f579da1365360e0ba
+  checksum: 34137565dab1d80bf36c9abab2e6ffd4b61d4ad8cde3fa5e81acadec2cf90f60d35fc6a76ebc4172d52bcba483bc770c96eb5f79997d6a612ec20f78c6cac419
   languageName: node
   linkType: hard
 
@@ -1151,14 +1151,14 @@ __metadata:
   dependencies:
     "@justeattakeaway/pie-button": 0.45.2
     "@justeattakeaway/pie-card": 0.17.2
-    "@justeattakeaway/pie-cookie-banner": 0.16.1
+    "@justeattakeaway/pie-cookie-banner": 0.17.0
     "@justeattakeaway/pie-css": 0.10.0
     "@justeattakeaway/pie-divider": 0.12.1
     "@justeattakeaway/pie-form-label": 0.11.0
     "@justeattakeaway/pie-icon-button": 0.27.2
     "@justeattakeaway/pie-icons-webc": 0.17.2
     "@justeattakeaway/pie-link": 0.15.0
-    "@justeattakeaway/pie-modal": 0.38.3
+    "@justeattakeaway/pie-modal": 0.38.4
     "@justeattakeaway/pie-spinner": 0.5.2
     "@justeattakeaway/pie-switch": 0.26.0
     "@justeattakeaway/pie-tag": 0.5.0

From fa6dec8c978dce6881fef253eca8fd7709be6339 Mon Sep 17 00:00:00 2001
From: personal <jamieolivermaguire@googlemail.com>
Date: Wed, 31 Jan 2024 11:42:42 +0000
Subject: [PATCH 3/8] update vanilla and nextjs forms

---
 nextjs-app/src/pages/form.tsx   | 111 ++++++++++++++++++++++++++------
 nextjs-app/src/styles/main.scss |  31 +++++++++
 vanilla-app/form.html           |  58 +++++++++++++++--
 vanilla-app/form.js             |   3 +-
 vanilla-app/style.css           |  39 +++++++++--
 5 files changed, 214 insertions(+), 28 deletions(-)

diff --git a/nextjs-app/src/pages/form.tsx b/nextjs-app/src/pages/form.tsx
index 44efae77..83df4d7b 100644
--- a/nextjs-app/src/pages/form.tsx
+++ b/nextjs-app/src/pages/form.tsx
@@ -7,6 +7,27 @@ export default function Form() {
     const [notifications, setNotifications] = useState(false);
     const [formDataDisplay, setFormDataDisplay] = useState<string | null>(null);
 
+    const [username, setUsername] = useState('');
+    const [email, setEmail] = useState('');
+    const [password, setPassword] = useState('');
+    const [passwordConfirmation, setPasswordConfirmation] = useState('');
+
+    const handleUsernameChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        setUsername(event.target.value);   
+    };
+
+    const handleEmailChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        setEmail(event.target.value);   
+    }
+
+    const handlePasswordChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        setPassword(event.target.value);   
+    }
+
+    const handlePasswordConfirmationChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        setPasswordConfirmation(event.target.value);   
+    }
+
     const handleApproveSettingsChange = () => {
         setApproveSettings(current => !current);
     };
@@ -17,30 +38,84 @@ export default function Form() {
 
     const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
         event.preventDefault();
-        const data = { approveSettings, notifications };
+        const data = { 
+            approveSettings, 
+            notifications, 
+            username, 
+            email, 
+            password, 
+            passwordConfirmation
+        };
+        
         setFormDataDisplay(JSON.stringify(data, null, 2));
     };
 
     return (
         <>
             <h1>PIE Form Test Page</h1>
-            <form id="testForm" onSubmit={handleSubmit}>
-                <PieSwitch
-                    label="Approve settings"
-                    id="approveSettings"
-                    name="approveSettings"
-                    checked={approveSettings}
-                    required
-                    onChange={handleApproveSettingsChange}
-                />
-                <PieSwitch
-                    label="Enable Notifications"
-                    id="notifications"
-                    name="notifications"
-                    checked={notifications}
-                    onChange={handleNotificationsChange}
-                />
-                <PieButton type="submit">Submit</PieButton>
+            <form className="form" id="testForm" onSubmit={handleSubmit}>
+                <label htmlFor="username">
+                    Username:
+                </label>
+                <input
+                    className="form__field"
+                    id="username"
+                    name="username"
+                    value={username}
+                    onChange={handleUsernameChange}
+                    type="text" />
+
+                <label htmlFor="email">
+                    Email:
+                </label>
+                <input
+                    className="form__field"
+                    id="email"
+                    name="email"
+                    onChange={handleEmailChange}
+                    type="email" />
+                
+                <label htmlFor="password">
+                    Password:
+                </label>
+                <input
+                    className="form__field"
+                    id="password"
+                    name="password"
+                    onChange={handlePasswordChange}
+                    type="password" />
+
+                <label htmlFor="passwordConfirmation">
+                    Confirm Password:
+                </label>
+                <input
+                    className="form__field"
+                    id="passwordConfirmation"
+                    name="passwordConfirmation"
+                    onChange={handlePasswordConfirmationChange}
+                    type="password" />
+
+                <div className="form__controls">
+                    <PieSwitch
+                        label="Approve settings"
+                        id="approveSettings"
+                        name="approveSettings"
+                        checked={approveSettings}
+                        required
+                        onChange={handleApproveSettingsChange}
+                    />
+                    <PieSwitch
+                        label="Enable Notifications"
+                        id="notifications"
+                        name="notifications"
+                        checked={notifications}
+                        onChange={handleNotificationsChange}
+                    />
+                </div>
+                <div className='form__btns'>
+                    <PieButton className="form__btn" variant="secondary" type="reset">Reset</PieButton>
+                    <PieButton className="form__btn" type="submit">Submit</PieButton>
+                </div>
             </form>
             {formDataDisplay && (
                 <div id="output">
diff --git a/nextjs-app/src/styles/main.scss b/nextjs-app/src/styles/main.scss
index 487d4290..a88afea7 100644
--- a/nextjs-app/src/styles/main.scss
+++ b/nextjs-app/src/styles/main.scss
@@ -29,4 +29,35 @@ body {
 pie-divider {
   display: block;
   margin-block: 2em;
+}
+
+// Form Styles
+.form {
+  display: flex;
+  flex-direction: column;
+}
+
+.form__field {
+  margin-bottom: var(--dt-spacing-b);
+}
+
+.form__controls {
+  margin-top: var(--dt-spacing-e);
+  > * {
+    display: block;
+  }
+
+  > * + * {
+    margin-top: var(--dt-spacing-b);
+  }
+}
+
+.form__btns {
+  margin-top: var(--dt-spacing-c);
+  display: flex;
+  gap: var(--dt-spacing-a)
+}
+
+.form__btns > .form__btn:first-of-type {
+  margin-left: auto;
 }
\ No newline at end of file
diff --git a/vanilla-app/form.html b/vanilla-app/form.html
index 71a4c3b5..a460c587 100644
--- a/vanilla-app/form.html
+++ b/vanilla-app/form.html
@@ -29,12 +29,60 @@
     </head>
     <body>
         <h1>PIE Form Test Page</h1>
-        <form id="testForm">
-            <pie-switch label="Approve settings" id="approveSettings" name="approveSettings" value="foo" required></pie-switch>
-            <pie-switch label="Enable Notifications" id="notifications" name="notifications"></pie-switch>
-            <pie-divider style="margin-block: 1em; display: block;"></pie-divider>
-            <pie-button type="submit">Submit</pie-button>
+        <form class="form" id="testForm">
+            <label for="username">
+                Username:
+            </label>
+            <input
+                class="form__field"
+                id="username"
+                name="username"
+                type="text" />
+        
+            <label for="email">
+                Email:
+            </label>
+            <input
+                class="form__field"
+                id="email"
+                name="email"
+                type="email" />
+            
+            <label for="password">
+                Password:
+            </label>
+            <input
+                class="form__field"
+                id="password"
+                name="password"
+                type="password" />
+        
+            <label for="passwordConfirmation">
+                Confirm Password:
+            </label>
+            <input
+                class="form__field"
+                id="passwordConfirmation"
+                name="passwordConfirmation"
+                type="password" />
+        
+            <div class="form__controls">
+                <pie-switch
+                    label="Approve settings"
+                    id="approveSettings"
+                    name="approveSettings"
+                    required></pie-switch>
+                <pie-switch
+                    label="Enable Notifications"
+                    id="notifications"
+                    name="notifications"></pie-switch>
+            </div>
+            <div class="form__btns">
+                <pie-button class="form__btn" variant="secondary" type="reset">Reset</pie-button>
+                <pie-button class="form__btn" type="submit">Submit</pie-button>
+            </div>
         </form>
+        
         <div id="output"></div>
         <script type="module" src="/form.js"></script>
     </body>
diff --git a/vanilla-app/form.js b/vanilla-app/form.js
index 5173d40f..afc1d8f6 100644
--- a/vanilla-app/form.js
+++ b/vanilla-app/form.js
@@ -2,6 +2,7 @@ import '@justeattakeaway/pie-css';
 import '@justeattakeaway/pie-button';
 import '@justeattakeaway/pie-switch';
 import '@justeattakeaway/pie-divider';
+import './style.css';
 
 const form = document.querySelector('#testForm');
 const output = document.querySelector('#output');
@@ -13,6 +14,6 @@ form.addEventListener('submit', (e) => {
 
     output.innerHTML = `
         <h2>Form Data</h2>
-        <p>${JSON.stringify(data)}</p>
+        <pre>${JSON.stringify(data, null, 2)}</pre>
     `;
 });
\ No newline at end of file
diff --git a/vanilla-app/style.css b/vanilla-app/style.css
index fe2d6f94..e071e3c0 100644
--- a/vanilla-app/style.css
+++ b/vanilla-app/style.css
@@ -4,14 +4,45 @@ html {
 
 body {
     font-family: JetSansDigital;
-    margin: 0;
-    display: grid;
-    justify-content: center;
-    place-content: center;
+    margin: auto;
     min-height: 100%;
+    padding: 16px;
+    max-width: 720px;
 }
 
 pie-divider {
     display: block;
     margin-block: 2em;
+}
+
+/* Form Styles */
+.form {
+    display: flex;
+    flex-direction: column;
+}
+
+.form__field {
+    margin-bottom: var(--dt-spacing-b);
+}
+
+.form__controls {
+    margin-top: var(--dt-spacing-e);
+
+    >* {
+        display: block;
+    }
+
+    >*+* {
+        margin-top: var(--dt-spacing-b);
+    }
+}
+
+.form__btns {
+    margin-top: var(--dt-spacing-c);
+    display: flex;
+    gap: var(--dt-spacing-a)
+}
+
+.form__btns>.form__btn:first-of-type {
+    margin-left: auto;
 }
\ No newline at end of file

From df4e6a47000cc79c8456cc7b089e8214ccf7c26f Mon Sep 17 00:00:00 2001
From: personal <jamieolivermaguire@googlemail.com>
Date: Wed, 31 Jan 2024 11:57:51 +0000
Subject: [PATCH 4/8] add nuxt form without logic

---
 nuxt-app/app.vue        |  38 +++-
 nuxt-app/nuxt.config.ts |  12 +-
 nuxt-app/package.json   |   8 +
 nuxt-app/pages/form.vue |  96 +++++++++
 nuxt-app/yarn.lock      | 460 +++++++++++++++++++++++++++++++++++++++-
 5 files changed, 608 insertions(+), 6 deletions(-)
 create mode 100644 nuxt-app/pages/form.vue

diff --git a/nuxt-app/app.vue b/nuxt-app/app.vue
index a495b757..3795df7e 100644
--- a/nuxt-app/app.vue
+++ b/nuxt-app/app.vue
@@ -1,5 +1,41 @@
 <template>
   <div>
-    <NuxtWelcome />
+    <!-- Markup shared across all pages, ex: NavBar -->
+    <NuxtPage />
   </div>
 </template>
+
+<style lang="scss">
+  html {
+    height: 100%;
+
+    @font-face {
+      font-family: JETSansDigital;
+      src: url('https://d30v2pzvrfyzpo.cloudfront.net/fonts/JETSansDigital-Regular-optimised.woff2') format("woff2"),
+        url('https://d30v2pzvrfyzpo.cloudfront.net/fonts/JETSansDigital-Regular-optimised.woff') format("woff");
+      font-weight: 400;
+      font-display: swap;
+    }
+
+    @font-face {
+      font-family: JETSansDigital;
+      src: url('https://d30v2pzvrfyzpo.cloudfront.net/fonts/JETSansDigital-Bold-optimised.woff2') format("woff2"),
+        url('https://d30v2pzvrfyzpo.cloudfront.net/fonts/JETSansDigital-Bold-optimised.woff') format("woff");
+      font-weight: 700;
+      font-display: swap;
+    }
+  }
+
+  body {
+    font-family: JetSansDigital;
+    margin: auto;
+    min-height: 100%;
+    padding: 16px;
+    max-width: 720px;
+  }
+
+  pie-divider {
+    display: block;
+    margin-block: 2em;
+  }
+</style>
\ No newline at end of file
diff --git a/nuxt-app/nuxt.config.ts b/nuxt-app/nuxt.config.ts
index 41e95e6e..eacaefda 100644
--- a/nuxt-app/nuxt.config.ts
+++ b/nuxt-app/nuxt.config.ts
@@ -1,7 +1,17 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
+  ssr: true,
+  modules: [
+    ['nuxt-ssr-lit', { litElementPrefix: ['pie-', 'icon-'] }]
+  ],
+  imports: {
+    transform: {
+      exclude: [/\bpie-\b/, /\bicon-\b/],
+    },
+  },
+  css: ['@justeattakeaway/pie-css'],
   devtools: { enabled: true },
   devServer: {
     port: 3002
   }
-})
\ No newline at end of file
+});
\ No newline at end of file
diff --git a/nuxt-app/package.json b/nuxt-app/package.json
index 6d13a305..4f57b364 100644
--- a/nuxt-app/package.json
+++ b/nuxt-app/package.json
@@ -13,7 +13,15 @@
   "devDependencies": {
     "deepmerge": "4.3.1",
     "nuxt": "^3.9.1",
+    "sass": "^1.70.0",
     "vue": "^3.4.10",
     "vue-router": "^4.2.5"
+  },
+  "dependencies": {
+    "@justeattakeaway/pie-button": "^0.45.2",
+    "@justeattakeaway/pie-css": "^0.10.0",
+    "@justeattakeaway/pie-switch": "^0.26.0",
+    "lit": "^3.1.1",
+    "nuxt-ssr-lit": "^1.6.10"
   }
 }
diff --git a/nuxt-app/pages/form.vue b/nuxt-app/pages/form.vue
new file mode 100644
index 00000000..ed5b480b
--- /dev/null
+++ b/nuxt-app/pages/form.vue
@@ -0,0 +1,96 @@
+<template>
+    <div>
+        <h1>PIE Form Test Page</h1>
+        <form class="form" id="testForm">
+            <label for="username">
+                Username:
+            </label>
+            <input
+                class="form__field"
+                id="username"
+                name="username"
+                type="text" />
+        
+            <label for="email">
+                Email:
+            </label>
+            <input
+                class="form__field"
+                id="email"
+                name="email"
+                type="email" />
+            
+            <label for="password">
+                Password:
+            </label>
+            <input
+                class="form__field"
+                id="password"
+                name="password"
+                type="password" />
+        
+            <label for="passwordConfirmation">
+                Confirm Password:
+            </label>
+            <input
+                class="form__field"
+                id="passwordConfirmation"
+                name="passwordConfirmation"
+                type="password" />
+        
+            <div class="form__controls">
+                <pie-switch
+                    label="Approve settings"
+                    id="approveSettings"
+                    name="approveSettings"
+                    required></pie-switch>
+                <pie-switch
+                    label="Enable Notifications"
+                    id="notifications"
+                    name="notifications"></pie-switch>
+            </div>
+            <div class="form__btns">
+                <pie-button class="form__btn" variant="secondary" type="reset">Reset</pie-button>
+                <pie-button class="form__btn" type="submit">Submit</pie-button>
+            </div>
+        </form>
+    </div>
+</template>
+
+<script setup>
+import { PieButton } from '@justeattakeaway/pie-button'
+import { PieSwitch } from '@justeattakeaway/pie-switch'
+</script>
+
+<style scoped>
+     /* Form Styles */
+    .form {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .form__field {
+        margin-bottom: var(--dt-spacing-b);
+    }
+
+    .form__controls {
+        margin-top: var(--dt-spacing-e);
+        > * {
+            display: block;
+        }
+
+        > * + * {
+            margin-top: var(--dt-spacing-b);
+        }
+    }
+
+    .form__btns {
+        margin-top: var(--dt-spacing-c);
+        display: flex;
+        gap: var(--dt-spacing-a)
+    }
+
+    .form__btns > .form__btn:first-of-type {
+        margin-left: auto;
+    }
+</style>
\ No newline at end of file
diff --git a/nuxt-app/yarn.lock b/nuxt-app/yarn.lock
index bbed4d0d..dbe42287 100644
--- a/nuxt-app/yarn.lock
+++ b/nuxt-app/yarn.lock
@@ -62,6 +62,29 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/core@npm:^7.23.7":
+  version: 7.23.9
+  resolution: "@babel/core@npm:7.23.9"
+  dependencies:
+    "@ampproject/remapping": ^2.2.0
+    "@babel/code-frame": ^7.23.5
+    "@babel/generator": ^7.23.6
+    "@babel/helper-compilation-targets": ^7.23.6
+    "@babel/helper-module-transforms": ^7.23.3
+    "@babel/helpers": ^7.23.9
+    "@babel/parser": ^7.23.9
+    "@babel/template": ^7.23.9
+    "@babel/traverse": ^7.23.9
+    "@babel/types": ^7.23.9
+    convert-source-map: ^2.0.0
+    debug: ^4.1.0
+    gensync: ^1.0.0-beta.2
+    json5: ^2.2.3
+    semver: ^6.3.1
+  checksum: 634a511f74db52a5f5a283c1121f25e2227b006c095b84a02a40a9213842489cd82dc7d61cdc74e10b5bcd9bb0a4e28bab47635b54c7e2256d47ab57356e2a76
+  languageName: node
+  linkType: hard
+
 "@babel/generator@npm:^7.23.6":
   version: 7.23.6
   resolution: "@babel/generator@npm:7.23.6"
@@ -262,6 +285,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helpers@npm:^7.23.9":
+  version: 7.23.9
+  resolution: "@babel/helpers@npm:7.23.9"
+  dependencies:
+    "@babel/template": ^7.23.9
+    "@babel/traverse": ^7.23.9
+    "@babel/types": ^7.23.9
+  checksum: 2678231192c0471dbc2fc403fb19456cc46b1afefcfebf6bc0f48b2e938fdb0fef2e0fe90c8c8ae1f021dae5012b700372e4b5d15867f1d7764616532e4a6324
+  languageName: node
+  linkType: hard
+
 "@babel/highlight@npm:^7.23.4":
   version: 7.23.4
   resolution: "@babel/highlight@npm:7.23.4"
@@ -282,6 +316,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/parser@npm:^7.23.9":
+  version: 7.23.9
+  resolution: "@babel/parser@npm:7.23.9"
+  bin:
+    parser: ./bin/babel-parser.js
+  checksum: e7cd4960ac8671774e13803349da88d512f9292d7baa952173260d3e8f15620a28a3701f14f709d769209022f9e7b79965256b8be204fc550cfe783cdcabe7c7
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-proposal-decorators@npm:^7.23.0":
   version: 7.23.7
   resolution: "@babel/plugin-proposal-decorators@npm:7.23.7"
@@ -371,6 +414,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/standalone@npm:^7.23.8":
+  version: 7.23.10
+  resolution: "@babel/standalone@npm:7.23.10"
+  checksum: a2aedc61b902907814f00757ba17e04ee92c4b4ff39b985e93820abfaf2b18df2d5235dd8f9d875a5063d78438067aff1f460c605889b9ed57ae42f542c99433
+  languageName: node
+  linkType: hard
+
 "@babel/template@npm:^7.22.15":
   version: 7.22.15
   resolution: "@babel/template@npm:7.22.15"
@@ -382,6 +432,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/template@npm:^7.23.9":
+  version: 7.23.9
+  resolution: "@babel/template@npm:7.23.9"
+  dependencies:
+    "@babel/code-frame": ^7.23.5
+    "@babel/parser": ^7.23.9
+    "@babel/types": ^7.23.9
+  checksum: 6e67414c0f7125d7ecaf20c11fab88085fa98a96c3ef10da0a61e962e04fdf3a18a496a66047005ddd1bb682a7cc7842d556d1db2f3f3f6ccfca97d5e445d342
+  languageName: node
+  linkType: hard
+
 "@babel/traverse@npm:^7.23.7":
   version: 7.23.7
   resolution: "@babel/traverse@npm:7.23.7"
@@ -400,6 +461,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/traverse@npm:^7.23.9":
+  version: 7.23.9
+  resolution: "@babel/traverse@npm:7.23.9"
+  dependencies:
+    "@babel/code-frame": ^7.23.5
+    "@babel/generator": ^7.23.6
+    "@babel/helper-environment-visitor": ^7.22.20
+    "@babel/helper-function-name": ^7.23.0
+    "@babel/helper-hoist-variables": ^7.22.5
+    "@babel/helper-split-export-declaration": ^7.22.6
+    "@babel/parser": ^7.23.9
+    "@babel/types": ^7.23.9
+    debug: ^4.3.1
+    globals: ^11.1.0
+  checksum: a932f7aa850e158c00c97aad22f639d48c72805c687290f6a73e30c5c4957c07f5d28310c9bf59648e2980fe6c9d16adeb2ff92a9ca0f97fa75739c1328fc6c3
+  languageName: node
+  linkType: hard
+
 "@babel/types@npm:^7.22.15, @babel/types@npm:^7.22.19, @babel/types@npm:^7.22.5, @babel/types@npm:^7.23.0, @babel/types@npm:^7.23.5, @babel/types@npm:^7.23.6, @babel/types@npm:^7.8.3":
   version: 7.23.6
   resolution: "@babel/types@npm:7.23.6"
@@ -411,6 +490,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/types@npm:^7.23.9":
+  version: 7.23.9
+  resolution: "@babel/types@npm:7.23.9"
+  dependencies:
+    "@babel/helper-string-parser": ^7.23.4
+    "@babel/helper-validator-identifier": ^7.22.20
+    to-fast-properties: ^2.0.0
+  checksum: 0a9b008e9bfc89beb8c185e620fa0f8ed6c771f1e1b2e01e1596870969096fec7793898a1d64a035176abf1dd13e2668ee30bf699f2d92c210a8128f4b151e65
+  languageName: node
+  linkType: hard
+
 "@cloudflare/kv-asset-handler@npm:^0.3.0":
   version: 0.3.0
   resolution: "@cloudflare/kv-asset-handler@npm:0.3.0"
@@ -661,6 +751,74 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@justeattakeaway/pie-button@npm:^0.45.2":
+  version: 0.45.2
+  resolution: "@justeattakeaway/pie-button@npm:0.45.2"
+  dependencies:
+    "@justeattakeaway/pie-spinner": 0.5.2
+    "@justeattakeaway/pie-webc-core": 0.17.1
+    element-internals-polyfill: 1.3.10
+  checksum: d9973784e14006f08292fa0653871a83eb4dc02612b471b9087d21403bafe40d606f5f8df07c362b122d1a46aaf537c6c70fa3d28037a216feb69b7c50b05fc6
+  languageName: node
+  linkType: hard
+
+"@justeattakeaway/pie-css@npm:^0.10.0":
+  version: 0.10.0
+  resolution: "@justeattakeaway/pie-css@npm:0.10.0"
+  checksum: b9438f2a327f887b692883b64540c6d513f9f9a2f7c349bb93a0d24d6d61a3dd3c4980f46afe705849a62f56fbac1b905b53fac296031de56b6020975bbde8e0
+  languageName: node
+  linkType: hard
+
+"@justeattakeaway/pie-icons-webc@npm:0.17.2":
+  version: 0.17.2
+  resolution: "@justeattakeaway/pie-icons-webc@npm:0.17.2"
+  dependencies:
+    "@justeattakeaway/pie-webc-core": 0.17.1
+  checksum: fa1f339e85cd222d39fad391b4102046589323475c7576ff5ff059d8c413cdf20f08fc5486e6e1173b10fc14c3f7050675a93a206c3be7b9e73875028fce7604
+  languageName: node
+  linkType: hard
+
+"@justeattakeaway/pie-spinner@npm:0.5.2":
+  version: 0.5.2
+  resolution: "@justeattakeaway/pie-spinner@npm:0.5.2"
+  dependencies:
+    "@justeattakeaway/pie-webc-core": 0.17.1
+  checksum: 5b69a7422eb4d597481b87fd99ca88b371b4b48ae42cf378b5e624aa1418f8db5490b92c7b22cdddde2ef76c96e69be6cb996440613f06f04fd8621a7ee110ee
+  languageName: node
+  linkType: hard
+
+"@justeattakeaway/pie-switch@npm:^0.26.0":
+  version: 0.26.0
+  resolution: "@justeattakeaway/pie-switch@npm:0.26.0"
+  dependencies:
+    "@justeattakeaway/pie-icons-webc": 0.17.2
+    "@justeattakeaway/pie-webc-core": 0.17.1
+    "@justeattakeaway/pie-wrapper-react": 0.14.0
+    element-internals-polyfill: 1.3.10
+  checksum: 48a3821889fccc3af05580ec4a802b0faca685c76c9639895f2198c7d1c89e617810d0290e773f662ed6187d403c8dfbba98d6dfe861414781408d839fac182c
+  languageName: node
+  linkType: hard
+
+"@justeattakeaway/pie-webc-core@npm:0.17.1":
+  version: 0.17.1
+  resolution: "@justeattakeaway/pie-webc-core@npm:0.17.1"
+  dependencies:
+    lit: 3.1.1
+  checksum: 207df65a61fd071eeba8913217c10459324c3b625d1aca10cc1f67673cfce2f244534c82834d0b7fd327df04e4fcb653befb4940019b6ebcfc822b4abdadc889
+  languageName: node
+  linkType: hard
+
+"@justeattakeaway/pie-wrapper-react@npm:0.14.0":
+  version: 0.14.0
+  resolution: "@justeattakeaway/pie-wrapper-react@npm:0.14.0"
+  dependencies:
+    fs-extra: 9.1.0
+  bin:
+    build-react-wrapper: index.js
+  checksum: e86f71e357884f2fcbe5ee9908cb814c469c19f5a2f8ed3a116858f58a0391247c222faad94401fe9bb8160557632c940af0cbcb0fbb5ef109cc73204c9f1003
+  languageName: node
+  linkType: hard
+
 "@kwsites/file-exists@npm:^1.1.1":
   version: 1.1.1
   resolution: "@kwsites/file-exists@npm:1.1.1"
@@ -677,6 +835,52 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@lit-labs/ssr-client@npm:^1.1.4":
+  version: 1.1.6
+  resolution: "@lit-labs/ssr-client@npm:1.1.6"
+  dependencies:
+    "@lit/reactive-element": ^1.6.1 || ^2.0.0
+    lit: ^2.7.0 || ^3.0.0
+    lit-html: ^2.7.0 || ^3.0.0
+  checksum: 5724098bdc9bd32bece53cb966f17b89d6096c8ddada042d76c2241e3774e6c1c3be820a91e706519133a0149c07f04358625d18b4b0818a7d8b758db32f9e36
+  languageName: node
+  linkType: hard
+
+"@lit-labs/ssr-dom-shim@npm:^1.1.2":
+  version: 1.1.2
+  resolution: "@lit-labs/ssr-dom-shim@npm:1.1.2"
+  checksum: 73fd787893851d4ec4aaa5c775405ed2aae4ca0891b2dd3c973b32c2f4bf70ada5481dd0224e52b786d037aa8a00052186ad1623c44551affd66f6409cca8da6
+  languageName: node
+  linkType: hard
+
+"@lit-labs/ssr@npm:^3.2.1":
+  version: 3.2.1
+  resolution: "@lit-labs/ssr@npm:3.2.1"
+  dependencies:
+    "@lit-labs/ssr-client": ^1.1.4
+    "@lit-labs/ssr-dom-shim": ^1.1.2
+    "@lit/reactive-element": ^1.6.1 || ^2.0.0
+    "@parse5/tools": ^0.3.0
+    "@types/node": ^16.0.0
+    enhanced-resolve: ^5.10.0
+    lit: ^3.1.0
+    lit-element: ^3.3.0 || ^4.0.0
+    lit-html: ^3.1.0
+    node-fetch: ^3.2.8
+    parse5: ^7.1.1
+  checksum: c2ba70bb3795ecab138b8c58aa9a578d6de43a655d29732a8f9d38516743bf2a71f14a1a1cc8736badff78c77f602766a5b259bb8d1828b4d32e251f6aae0717
+  languageName: node
+  linkType: hard
+
+"@lit/reactive-element@npm:^1.6.1 || ^2.0.0, @lit/reactive-element@npm:^2.0.0":
+  version: 2.0.3
+  resolution: "@lit/reactive-element@npm:2.0.3"
+  dependencies:
+    "@lit-labs/ssr-dom-shim": ^1.1.2
+  checksum: 0da8311bfbe025670f098496a55a727db47fd99443d4d43dbf343f3a6087d92bcf506df5167b036ad1effe1a159ebf24dc5bd2c5f9eb532ee00fc6db5d549037
+  languageName: node
+  linkType: hard
+
 "@mapbox/node-pre-gyp@npm:^1.0.5":
   version: 1.0.11
   resolution: "@mapbox/node-pre-gyp@npm:1.0.11"
@@ -943,6 +1147,51 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@nuxt/kit@npm:^3.9.3":
+  version: 3.10.0
+  resolution: "@nuxt/kit@npm:3.10.0"
+  dependencies:
+    "@nuxt/schema": 3.10.0
+    c12: ^1.6.1
+    consola: ^3.2.3
+    defu: ^6.1.4
+    globby: ^14.0.0
+    hash-sum: ^2.0.0
+    ignore: ^5.3.0
+    jiti: ^1.21.0
+    knitwork: ^1.0.0
+    mlly: ^1.5.0
+    pathe: ^1.1.2
+    pkg-types: ^1.0.3
+    scule: ^1.2.0
+    semver: ^7.5.4
+    ufo: ^1.3.2
+    unctx: ^2.3.1
+    unimport: ^3.7.1
+    untyped: ^1.4.2
+  checksum: a8db90f08ce89a56efd2f8d67404e537bd7fd7a6f789be3a60db1d4513bb0b2a64bd5cf503200f458120770490e3e1e53acfa16bbf18f2967434515d96571f02
+  languageName: node
+  linkType: hard
+
+"@nuxt/schema@npm:3.10.0":
+  version: 3.10.0
+  resolution: "@nuxt/schema@npm:3.10.0"
+  dependencies:
+    "@nuxt/ui-templates": ^1.3.1
+    consola: ^3.2.3
+    defu: ^6.1.4
+    hookable: ^5.5.3
+    pathe: ^1.1.2
+    pkg-types: ^1.0.3
+    scule: ^1.2.0
+    std-env: ^3.7.0
+    ufo: ^1.3.2
+    unimport: ^3.7.1
+    untyped: ^1.4.2
+  checksum: 3b1f01c303e6e004fef1e058dafdffc04e1c2f21a4ceb1c8360a93b281bf6058b860ae5c7b09b1e62664bcb1ebd2410db20b01bb24b4bd6fae8b801388f920c9
+  languageName: node
+  linkType: hard
+
 "@nuxt/schema@npm:3.9.2, @nuxt/schema@npm:^3.9.1":
   version: 3.9.2
   resolution: "@nuxt/schema@npm:3.9.2"
@@ -1184,6 +1433,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@parse5/tools@npm:^0.3.0":
+  version: 0.3.0
+  resolution: "@parse5/tools@npm:0.3.0"
+  dependencies:
+    parse5: ^7.0.0
+  checksum: 11cdf896fe798c9bf80648a87920f1332047f1d1bcac413ddc0ac6dd457df53d435208c18ddf19150a596af2dab17b4db2c446ba27a64dc1c0bcf5b5b9b3313d
+  languageName: node
+  linkType: hard
+
 "@pkgjs/parseargs@npm:^0.11.0":
   version: 0.11.0
   resolution: "@pkgjs/parseargs@npm:0.11.0"
@@ -1554,6 +1812,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/node@npm:^16.0.0":
+  version: 16.18.77
+  resolution: "@types/node@npm:16.18.77"
+  checksum: 37f900c86f9745e91124d9bf347939966015241d3aebaec3dcea634980724a27a05e3c1cca20bedc0eeba41d8f3480bd9288aa15d25e815045ae20b1cbe5bd82
+  languageName: node
+  linkType: hard
+
 "@types/resolve@npm:1.20.2":
   version: 1.20.2
   resolution: "@types/resolve@npm:1.20.2"
@@ -1561,6 +1826,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/trusted-types@npm:^2.0.2":
+  version: 2.0.7
+  resolution: "@types/trusted-types@npm:2.0.7"
+  checksum: 8e4202766a65877efcf5d5a41b7dd458480b36195e580a3b1085ad21e948bc417d55d6f8af1fd2a7ad008015d4117d5fdfe432731157da3c68678487174e4ba3
+  languageName: node
+  linkType: hard
+
 "@unhead/dom@npm:1.8.10, @unhead/dom@npm:^1.8.10":
   version: 1.8.10
   resolution: "@unhead/dom@npm:1.8.10"
@@ -1813,6 +2085,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@webcomponents/template-shadowroot@npm:^0.2.1":
+  version: 0.2.1
+  resolution: "@webcomponents/template-shadowroot@npm:0.2.1"
+  checksum: c9a0ac8524e8923ee2d62f904769be6a59185b99ee42f36b11b84f0520f3e19803d7fcda90d2f95bfc8470e926ea469f04e728f8cd1724c78618154d7c423775
+  languageName: node
+  linkType: hard
+
 "abbrev@npm:1":
   version: 1.1.1
   resolution: "abbrev@npm:1.1.1"
@@ -2028,6 +2307,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"at-least-node@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "at-least-node@npm:1.0.0"
+  checksum: 463e2f8e43384f1afb54bc68485c436d7622acec08b6fad269b421cb1d29cebb5af751426793d0961ed243146fe4dc983402f6d5a51b720b277818dbf6f2e49e
+  languageName: node
+  linkType: hard
+
 "autoprefixer@npm:^10.4.16":
   version: 10.4.16
   resolution: "autoprefixer@npm:10.4.16"
@@ -2287,7 +2573,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"chokidar@npm:^3.5.1, chokidar@npm:^3.5.3":
+"chokidar@npm:>=3.0.0 <4.0.0, chokidar@npm:^3.5.1, chokidar@npm:^3.5.3":
   version: 3.5.3
   resolution: "chokidar@npm:3.5.3"
   dependencies:
@@ -2673,6 +2959,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"data-uri-to-buffer@npm:^4.0.0":
+  version: 4.0.1
+  resolution: "data-uri-to-buffer@npm:4.0.1"
+  checksum: 0d0790b67ffec5302f204c2ccca4494f70b4e2d940fea3d36b09f0bb2b8539c2e86690429eb1f1dc4bcc9e4df0644193073e63d9ee48ac9fce79ec1506e4aa4c
+  languageName: node
+  linkType: hard
+
 "debug@npm:2.6.9":
   version: 2.6.9
   resolution: "debug@npm:2.6.9"
@@ -2891,6 +3184,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"element-internals-polyfill@npm:1.3.10":
+  version: 1.3.10
+  resolution: "element-internals-polyfill@npm:1.3.10"
+  checksum: b49ad685f23aa7c64e3a8fdffba35bb60d99e729636bc2954266979092bffe3694ae7c0b3d219a66879346d19bb1c53a0431c9100c1e35fb91b1041f47aeb3c2
+  languageName: node
+  linkType: hard
+
 "emoji-regex@npm:^8.0.0":
   version: 8.0.0
   resolution: "emoji-regex@npm:8.0.0"
@@ -2921,7 +3221,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"enhanced-resolve@npm:^5.14.1":
+"enhanced-resolve@npm:^5.10.0, enhanced-resolve@npm:^5.14.1":
   version: 5.15.0
   resolution: "enhanced-resolve@npm:5.15.0"
   dependencies:
@@ -2931,7 +3231,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"entities@npm:^4.2.0, entities@npm:^4.5.0":
+"entities@npm:^4.2.0, entities@npm:^4.4.0, entities@npm:^4.5.0":
   version: 4.5.0
   resolution: "entities@npm:4.5.0"
   checksum: 853f8ebd5b425d350bffa97dd6958143179a5938352ccae092c62d1267c4e392a039be1bae7d51b6e4ffad25f51f9617531fedf5237f15df302ccfb452cbf2d7
@@ -3189,6 +3489,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"fetch-blob@npm:^3.1.2, fetch-blob@npm:^3.1.4":
+  version: 3.2.0
+  resolution: "fetch-blob@npm:3.2.0"
+  dependencies:
+    node-domexception: ^1.0.0
+    web-streams-polyfill: ^3.0.3
+  checksum: f19bc28a2a0b9626e69fd7cf3a05798706db7f6c7548da657cbf5026a570945f5eeaedff52007ea35c8bcd3d237c58a20bf1543bc568ab2422411d762dd3d5bf
+  languageName: node
+  linkType: hard
+
 "file-uri-to-path@npm:1.0.0":
   version: 1.0.0
   resolution: "file-uri-to-path@npm:1.0.0"
@@ -3231,6 +3541,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"formdata-polyfill@npm:^4.0.10":
+  version: 4.0.10
+  resolution: "formdata-polyfill@npm:4.0.10"
+  dependencies:
+    fetch-blob: ^3.1.2
+  checksum: 82a34df292afadd82b43d4a740ce387bc08541e0a534358425193017bf9fb3567875dc5f69564984b1da979979b70703aa73dee715a17b6c229752ae736dd9db
+  languageName: node
+  linkType: hard
+
 "fraction.js@npm:^4.3.6":
   version: 4.3.7
   resolution: "fraction.js@npm:4.3.7"
@@ -3245,6 +3564,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"fs-extra@npm:9.1.0":
+  version: 9.1.0
+  resolution: "fs-extra@npm:9.1.0"
+  dependencies:
+    at-least-node: ^1.0.0
+    graceful-fs: ^4.2.0
+    jsonfile: ^6.0.1
+    universalify: ^2.0.0
+  checksum: ba71ba32e0faa74ab931b7a0031d1523c66a73e225de7426e275e238e312d07313d2da2d33e34a52aa406c8763ade5712eb3ec9ba4d9edce652bcacdc29e6b20
+  languageName: node
+  linkType: hard
+
 "fs-extra@npm:^11.1.0, fs-extra@npm:^11.1.1, fs-extra@npm:^11.2.0":
   version: 11.2.0
   resolution: "fs-extra@npm:11.2.0"
@@ -3693,6 +4024,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"immutable@npm:^4.0.0":
+  version: 4.3.5
+  resolution: "immutable@npm:4.3.5"
+  checksum: 0e25dd5c314421faede9e1122ab26cdb638cc3edc8678c4a75dee104279b12621a30c80a480fae7f68bc7e81672f1e672e454dc0fdc7e6cf0af10809348387b8
+  languageName: node
+  linkType: hard
+
 "imurmurhash@npm:^0.1.4":
   version: 0.1.4
   resolution: "imurmurhash@npm:0.1.4"
@@ -4161,6 +4499,37 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lit-element@npm:^3.3.0 || ^4.0.0, lit-element@npm:^4.0.0":
+  version: 4.0.3
+  resolution: "lit-element@npm:4.0.3"
+  dependencies:
+    "@lit-labs/ssr-dom-shim": ^1.1.2
+    "@lit/reactive-element": ^2.0.0
+    lit-html: ^3.1.0
+  checksum: 78e7789c33bdedca6a9d9883976b597e0cb9826e10b24fbf6874df41a96d855bd264aa037998d8b450775285f206887c5b205a6311c325a3bebeb2f829f2e5ea
+  languageName: node
+  linkType: hard
+
+"lit-html@npm:^2.7.0 || ^3.0.0, lit-html@npm:^3.1.0":
+  version: 3.1.1
+  resolution: "lit-html@npm:3.1.1"
+  dependencies:
+    "@types/trusted-types": ^2.0.2
+  checksum: 66dba5a736b426e6d202a2145018b8ae2cf1e0b1399dec2239f43c9ec5505b55e9bfda34b93baffa9c5f05837227248054530741f8705f8cadca989687787a1f
+  languageName: node
+  linkType: hard
+
+"lit@npm:3.1.1, lit@npm:^2.7.0 || ^3.0.0, lit@npm:^3.1.0, lit@npm:^3.1.1":
+  version: 3.1.1
+  resolution: "lit@npm:3.1.1"
+  dependencies:
+    "@lit/reactive-element": ^2.0.0
+    lit-element: ^4.0.0
+    lit-html: ^3.1.0
+  checksum: 1c145e074f89483b5115a200b6963e75eb180393856bdb2eb5641fb5641e086e41a132f97478c5a1e5a88fc243a11a5306c1dbed64f51853f7833a65e21d4534
+  languageName: node
+  linkType: hard
+
 "local-pkg@npm:^0.4.3":
   version: 0.4.3
   resolution: "local-pkg@npm:0.4.3"
@@ -4677,6 +5046,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"node-domexception@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "node-domexception@npm:1.0.0"
+  checksum: ee1d37dd2a4eb26a8a92cd6b64dfc29caec72bff5e1ed9aba80c294f57a31ba4895a60fd48347cf17dd6e766da0ae87d75657dfd1f384ebfa60462c2283f5c7f
+  languageName: node
+  linkType: hard
+
 "node-fetch-native@npm:^1.4.0, node-fetch-native@npm:^1.4.1, node-fetch-native@npm:^1.6.1":
   version: 1.6.1
   resolution: "node-fetch-native@npm:1.6.1"
@@ -4698,6 +5074,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"node-fetch@npm:^3.2.8":
+  version: 3.3.2
+  resolution: "node-fetch@npm:3.3.2"
+  dependencies:
+    data-uri-to-buffer: ^4.0.0
+    fetch-blob: ^3.1.4
+    formdata-polyfill: ^4.0.10
+  checksum: 06a04095a2ddf05b0830a0d5302699704d59bda3102894ea64c7b9d4c865ecdff2d90fd042df7f5bc40337266961cb6183dcc808ea4f3000d024f422b462da92
+  languageName: node
+  linkType: hard
+
 "node-forge@npm:^1.3.1":
   version: 1.3.1
   resolution: "node-forge@npm:1.3.1"
@@ -4924,13 +5311,32 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "nuxt-app@workspace:."
   dependencies:
+    "@justeattakeaway/pie-button": ^0.45.2
+    "@justeattakeaway/pie-css": ^0.10.0
+    "@justeattakeaway/pie-switch": ^0.26.0
     deepmerge: 4.3.1
+    lit: ^3.1.1
     nuxt: ^3.9.1
+    nuxt-ssr-lit: ^1.6.10
+    sass: ^1.70.0
     vue: ^3.4.10
     vue-router: ^4.2.5
   languageName: unknown
   linkType: soft
 
+"nuxt-ssr-lit@npm:^1.6.10":
+  version: 1.6.10
+  resolution: "nuxt-ssr-lit@npm:1.6.10"
+  dependencies:
+    "@lit-labs/ssr": ^3.2.1
+    "@nuxt/kit": ^3.9.3
+    "@webcomponents/template-shadowroot": ^0.2.1
+    ufo: ^1.3.2
+    ultrahtml: ^1.5.2
+  checksum: ed287d28267640daddc860c402948c10847594761e18bf8ca6eb1d86c0b1bf371f7331525e12c30e006092154227ca415ab556fbb5d006f99f66679a3d7f7a84
+  languageName: node
+  linkType: hard
+
 "nuxt@npm:^3.9.1":
   version: 3.9.2
   resolution: "nuxt@npm:3.9.2"
@@ -5184,6 +5590,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"parse5@npm:^7.0.0, parse5@npm:^7.1.1":
+  version: 7.1.2
+  resolution: "parse5@npm:7.1.2"
+  dependencies:
+    entities: ^4.4.0
+  checksum: 59465dd05eb4c5ec87b76173d1c596e152a10e290b7abcda1aecf0f33be49646ea74840c69af975d7887543ea45564801736356c568d6b5e71792fd0f4055713
+  languageName: node
+  linkType: hard
+
 "parseurl@npm:~1.3.3":
   version: 1.3.3
   resolution: "parseurl@npm:1.3.3"
@@ -5969,6 +6384,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"sass@npm:^1.70.0":
+  version: 1.70.0
+  resolution: "sass@npm:1.70.0"
+  dependencies:
+    chokidar: ">=3.0.0 <4.0.0"
+    immutable: ^4.0.0
+    source-map-js: ">=0.6.2 <2.0.0"
+  bin:
+    sass: sass.js
+  checksum: fd1b622cf9b7fa699a03ec634611997552ece45eb98ac365fef22f42bdcb8ed63b326b64173379c966830c8551ae801e44e4a00d2de16fdadda2dc8f35400bbb
+  languageName: node
+  linkType: hard
+
 "scule@npm:^1.0.0, scule@npm:^1.1.0, scule@npm:^1.1.1, scule@npm:^1.2.0":
   version: 1.2.0
   resolution: "scule@npm:1.2.0"
@@ -6190,7 +6618,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"source-map-js@npm:^1.0.1, source-map-js@npm:^1.0.2":
+"source-map-js@npm:>=0.6.2 <2.0.0, source-map-js@npm:^1.0.1, source-map-js@npm:^1.0.2":
   version: 1.0.2
   resolution: "source-map-js@npm:1.0.2"
   checksum: c049a7fc4deb9a7e9b481ae3d424cc793cb4845daa690bc5a05d428bf41bf231ced49b4cf0c9e77f9d42fdb3d20d6187619fc586605f5eabe995a316da8d377c
@@ -6841,6 +7269,23 @@ __metadata:
   languageName: node
   linkType: hard
 
+"untyped@npm:^1.4.2":
+  version: 1.4.2
+  resolution: "untyped@npm:1.4.2"
+  dependencies:
+    "@babel/core": ^7.23.7
+    "@babel/standalone": ^7.23.8
+    "@babel/types": ^7.23.6
+    defu: ^6.1.4
+    jiti: ^1.21.0
+    mri: ^1.2.0
+    scule: ^1.2.0
+  bin:
+    untyped: dist/cli.mjs
+  checksum: 3e46096c8c20cd3a25234da718825f8a8ed66f9c5e7a19a81089e195dc00c8d15a1acb30159d989772fbe94b515e4fc89e6402c970451b3ed43e93bcc9103fc8
+  languageName: node
+  linkType: hard
+
 "update-browserslist-db@npm:^1.0.13":
   version: 1.0.13
   resolution: "update-browserslist-db@npm:1.0.13"
@@ -7147,6 +7592,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"web-streams-polyfill@npm:^3.0.3":
+  version: 3.3.2
+  resolution: "web-streams-polyfill@npm:3.3.2"
+  checksum: 0292f4113c1bda40d8e8ecebee39eb14cc2e2e560a65a6867980e394537a2645130e2c73f5ef6e641fd3697d2f71720ccf659aebaf69a9d5a773f653a0fdf39d
+  languageName: node
+  linkType: hard
+
 "webidl-conversions@npm:^3.0.0":
   version: 3.0.1
   resolution: "webidl-conversions@npm:3.0.1"

From 07bbd13ceb8cbc6895865cb6bf40b94eca6c1469 Mon Sep 17 00:00:00 2001
From: personal <jamieolivermaguire@googlemail.com>
Date: Wed, 31 Jan 2024 14:17:14 +0000
Subject: [PATCH 5/8] add logic to nuxt form

---
 nuxt-app/pages/form.vue | 56 ++++++++++++++++++++++++++++++++++++++---
 1 file changed, 52 insertions(+), 4 deletions(-)

diff --git a/nuxt-app/pages/form.vue b/nuxt-app/pages/form.vue
index ed5b480b..fc45f224 100644
--- a/nuxt-app/pages/form.vue
+++ b/nuxt-app/pages/form.vue
@@ -1,7 +1,7 @@
 <template>
     <div>
         <h1>PIE Form Test Page</h1>
-        <form class="form" id="testForm">
+        <form class="form" id="testForm" @submit="handleSubmit">
             <label for="username">
                 Username:
             </label>
@@ -9,6 +9,7 @@
                 class="form__field"
                 id="username"
                 name="username"
+                v-model="username"
                 type="text" />
         
             <label for="email">
@@ -18,6 +19,7 @@
                 class="form__field"
                 id="email"
                 name="email"
+                v-model="email"
                 type="email" />
             
             <label for="password">
@@ -27,6 +29,7 @@
                 class="form__field"
                 id="password"
                 name="password"
+                v-model="password"
                 type="password" />
         
             <label for="passwordConfirmation">
@@ -36,6 +39,7 @@
                 class="form__field"
                 id="passwordConfirmation"
                 name="passwordConfirmation"
+                v-model="passwordConfirmation"
                 type="password" />
         
             <div class="form__controls">
@@ -43,23 +47,67 @@
                     label="Approve settings"
                     id="approveSettings"
                     name="approveSettings"
+                    @change="handleApproveSettingsChange"
+                    :checked="approveSettings"
                     required></pie-switch>
                 <pie-switch
                     label="Enable Notifications"
                     id="notifications"
-                    name="notifications"></pie-switch>
+                    name="notifications"
+                    @change="handleNotificationsChange"
+                    :checked="notifications"></pie-switch>
             </div>
             <div class="form__btns">
                 <pie-button class="form__btn" variant="secondary" type="reset">Reset</pie-button>
                 <pie-button class="form__btn" type="submit">Submit</pie-button>
             </div>
         </form>
+        <div id="output">
+            <h2>Form Data</h2>
+            <pre>
+                {{ formDataDisplay }}
+            </pre>
+        </div>
     </div>
 </template>
 
 <script setup>
-import { PieButton } from '@justeattakeaway/pie-button'
-import { PieSwitch } from '@justeattakeaway/pie-switch'
+import { PieButton } from '@justeattakeaway/pie-button';
+import { PieSwitch } from '@justeattakeaway/pie-switch';
+
+import { defineModel } from 'vue';
+
+const username = defineModel('username');
+const email = defineModel('email');
+const password = defineModel('password');
+const passwordConfirmation = defineModel('passwordConfirmation');
+const approveSettings = defineModel('approveSettings', { default: true });
+const notifications = defineModel('notifications', { default: false });
+
+const formDataDisplay = defineModel('formDataDisplay');
+
+function handleSubmit(event) {
+    event.preventDefault();
+    formDataDisplay.value = JSON.stringify({
+        username: username.value,
+        email: email.value,
+        password: password.value,
+        passwordConfirmation: passwordConfirmation.value,
+        approveSettings: approveSettings.value,
+        notifications: notifications.value
+    }, null, 2);
+}
+
+function handleNotificationsChange(event) {
+    console.log(event.target.checked)
+    notifications.value = event.target.checked;
+}
+
+function handleApproveSettingsChange(event) {
+    console.log(event.target.checked)
+    approveSettings.value = event.target.checked;
+}
+
 </script>
 
 <style scoped>

From 7f2ca62e8214f3c9ca17bb4d97d8d60e3067fce0 Mon Sep 17 00:00:00 2001
From: personal <jamieolivermaguire@googlemail.com>
Date: Wed, 31 Jan 2024 15:24:41 +0000
Subject: [PATCH 6/8] add cookie banner prefs and remove console logs

---
 nextjs-app/src/pages/index.tsx | 1 +
 nuxt-app/pages/form.vue        | 2 --
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/nextjs-app/src/pages/index.tsx b/nextjs-app/src/pages/index.tsx
index 7d374249..22282bbc 100644
--- a/nextjs-app/src/pages/index.tsx
+++ b/nextjs-app/src/pages/index.tsx
@@ -71,6 +71,7 @@ export default function Home() {
       <PieDivider />
 
       <PieCookieBanner
+        defaultPreferences={{functional: true, personalized: true, analytical: true}}
         locale={locales.enGB}
         hasPrimaryActionsOnly={true}
         cookieTechnologiesLink="https://justeattakeaway.com"
diff --git a/nuxt-app/pages/form.vue b/nuxt-app/pages/form.vue
index fc45f224..ed209d45 100644
--- a/nuxt-app/pages/form.vue
+++ b/nuxt-app/pages/form.vue
@@ -99,12 +99,10 @@ function handleSubmit(event) {
 }
 
 function handleNotificationsChange(event) {
-    console.log(event.target.checked)
     notifications.value = event.target.checked;
 }
 
 function handleApproveSettingsChange(event) {
-    console.log(event.target.checked)
     approveSettings.value = event.target.checked;
 }
 

From 4d69f456bb197e1bcbc3b3983e2442af85af3cf3 Mon Sep 17 00:00:00 2001
From: personal <jamieolivermaguire@googlemail.com>
Date: Wed, 31 Jan 2024 15:59:06 +0000
Subject: [PATCH 7/8] remove BEM

---
 nextjs-app/src/pages/form.tsx   | 16 ++++++++--------
 nextjs-app/src/styles/main.scss |  8 ++++----
 nuxt-app/pages/form.vue         | 24 ++++++++++++------------
 vanilla-app/form.html           | 16 ++++++++--------
 vanilla-app/style.css           |  8 ++++----
 5 files changed, 36 insertions(+), 36 deletions(-)

diff --git a/nextjs-app/src/pages/form.tsx b/nextjs-app/src/pages/form.tsx
index 83df4d7b..53f821ef 100644
--- a/nextjs-app/src/pages/form.tsx
+++ b/nextjs-app/src/pages/form.tsx
@@ -58,7 +58,7 @@ export default function Form() {
                     Username:
                 </label>
                 <input
-                    className="form__field"
+                    className="form-field"
                     id="username"
                     name="username"
                     value={username}
@@ -69,7 +69,7 @@ export default function Form() {
                     Email:
                 </label>
                 <input
-                    className="form__field"
+                    className="form-field"
                     id="email"
                     name="email"
                     onChange={handleEmailChange}
@@ -79,7 +79,7 @@ export default function Form() {
                     Password:
                 </label>
                 <input
-                    className="form__field"
+                    className="form-field"
                     id="password"
                     name="password"
                     onChange={handlePasswordChange}
@@ -89,13 +89,13 @@ export default function Form() {
                     Confirm Password:
                 </label>
                 <input
-                    className="form__field"
+                    className="form-field"
                     id="passwordConfirmation"
                     name="passwordConfirmation"
                     onChange={handlePasswordConfirmationChange}
                     type="password" />
 
-                <div className="form__controls">
+                <div className="form-controls">
                     <PieSwitch
                         label="Approve settings"
                         id="approveSettings"
@@ -112,9 +112,9 @@ export default function Form() {
                         onChange={handleNotificationsChange}
                     />
                 </div>
-                <div className='form__btns'>
-                    <PieButton className="form__btn" variant="secondary" type="reset">Reset</PieButton>
-                    <PieButton className="form__btn" type="submit">Submit</PieButton>
+                <div className='form-btns'>
+                    <PieButton className="form-btn" variant="secondary" type="reset">Reset</PieButton>
+                    <PieButton className="form-btn" type="submit">Submit</PieButton>
                 </div>
             </form>
             {formDataDisplay && (
diff --git a/nextjs-app/src/styles/main.scss b/nextjs-app/src/styles/main.scss
index a88afea7..85e1aac5 100644
--- a/nextjs-app/src/styles/main.scss
+++ b/nextjs-app/src/styles/main.scss
@@ -37,11 +37,11 @@ pie-divider {
   flex-direction: column;
 }
 
-.form__field {
+.form-field {
   margin-bottom: var(--dt-spacing-b);
 }
 
-.form__controls {
+.form-controls {
   margin-top: var(--dt-spacing-e);
   > * {
     display: block;
@@ -52,12 +52,12 @@ pie-divider {
   }
 }
 
-.form__btns {
+.form-btns {
   margin-top: var(--dt-spacing-c);
   display: flex;
   gap: var(--dt-spacing-a)
 }
 
-.form__btns > .form__btn:first-of-type {
+.form-btns > .form-btn:first-of-type {
   margin-left: auto;
 }
\ No newline at end of file
diff --git a/nuxt-app/pages/form.vue b/nuxt-app/pages/form.vue
index ed209d45..277dc394 100644
--- a/nuxt-app/pages/form.vue
+++ b/nuxt-app/pages/form.vue
@@ -6,7 +6,7 @@
                 Username:
             </label>
             <input
-                class="form__field"
+                class="form-field"
                 id="username"
                 name="username"
                 v-model="username"
@@ -16,7 +16,7 @@
                 Email:
             </label>
             <input
-                class="form__field"
+                class="form-field"
                 id="email"
                 name="email"
                 v-model="email"
@@ -26,7 +26,7 @@
                 Password:
             </label>
             <input
-                class="form__field"
+                class="form-field"
                 id="password"
                 name="password"
                 v-model="password"
@@ -36,13 +36,13 @@
                 Confirm Password:
             </label>
             <input
-                class="form__field"
+                class="form-field"
                 id="passwordConfirmation"
                 name="passwordConfirmation"
                 v-model="passwordConfirmation"
                 type="password" />
         
-            <div class="form__controls">
+            <div class="form-controls">
                 <pie-switch
                     label="Approve settings"
                     id="approveSettings"
@@ -57,9 +57,9 @@
                     @change="handleNotificationsChange"
                     :checked="notifications"></pie-switch>
             </div>
-            <div class="form__btns">
-                <pie-button class="form__btn" variant="secondary" type="reset">Reset</pie-button>
-                <pie-button class="form__btn" type="submit">Submit</pie-button>
+            <div class="form-btns">
+                <pie-button class="form-btn" variant="secondary" type="reset">Reset</pie-button>
+                <pie-button class="form-btn" type="submit">Submit</pie-button>
             </div>
         </form>
         <div id="output">
@@ -115,11 +115,11 @@ function handleApproveSettingsChange(event) {
         flex-direction: column;
     }
 
-    .form__field {
+    .form-field {
         margin-bottom: var(--dt-spacing-b);
     }
 
-    .form__controls {
+    .form-controls {
         margin-top: var(--dt-spacing-e);
         > * {
             display: block;
@@ -130,13 +130,13 @@ function handleApproveSettingsChange(event) {
         }
     }
 
-    .form__btns {
+    .form-btns {
         margin-top: var(--dt-spacing-c);
         display: flex;
         gap: var(--dt-spacing-a)
     }
 
-    .form__btns > .form__btn:first-of-type {
+    .form-btns > .form-btn:first-of-type {
         margin-left: auto;
     }
 </style>
\ No newline at end of file
diff --git a/vanilla-app/form.html b/vanilla-app/form.html
index a460c587..9efa93fe 100644
--- a/vanilla-app/form.html
+++ b/vanilla-app/form.html
@@ -34,7 +34,7 @@ <h1>PIE Form Test Page</h1>
                 Username:
             </label>
             <input
-                class="form__field"
+                class="form-field"
                 id="username"
                 name="username"
                 type="text" />
@@ -43,7 +43,7 @@ <h1>PIE Form Test Page</h1>
                 Email:
             </label>
             <input
-                class="form__field"
+                class="form-field"
                 id="email"
                 name="email"
                 type="email" />
@@ -52,7 +52,7 @@ <h1>PIE Form Test Page</h1>
                 Password:
             </label>
             <input
-                class="form__field"
+                class="form-field"
                 id="password"
                 name="password"
                 type="password" />
@@ -61,12 +61,12 @@ <h1>PIE Form Test Page</h1>
                 Confirm Password:
             </label>
             <input
-                class="form__field"
+                class="form-field"
                 id="passwordConfirmation"
                 name="passwordConfirmation"
                 type="password" />
         
-            <div class="form__controls">
+            <div class="form-controls">
                 <pie-switch
                     label="Approve settings"
                     id="approveSettings"
@@ -77,9 +77,9 @@ <h1>PIE Form Test Page</h1>
                     id="notifications"
                     name="notifications"></pie-switch>
             </div>
-            <div class="form__btns">
-                <pie-button class="form__btn" variant="secondary" type="reset">Reset</pie-button>
-                <pie-button class="form__btn" type="submit">Submit</pie-button>
+            <div class="form-btns">
+                <pie-button class="form-btn" variant="secondary" type="reset">Reset</pie-button>
+                <pie-button class="form-btn" type="submit">Submit</pie-button>
             </div>
         </form>
         
diff --git a/vanilla-app/style.css b/vanilla-app/style.css
index e071e3c0..e323cdbc 100644
--- a/vanilla-app/style.css
+++ b/vanilla-app/style.css
@@ -21,11 +21,11 @@ pie-divider {
     flex-direction: column;
 }
 
-.form__field {
+.form-field {
     margin-bottom: var(--dt-spacing-b);
 }
 
-.form__controls {
+.form-controls {
     margin-top: var(--dt-spacing-e);
 
     >* {
@@ -37,12 +37,12 @@ pie-divider {
     }
 }
 
-.form__btns {
+.form-btns {
     margin-top: var(--dt-spacing-c);
     display: flex;
     gap: var(--dt-spacing-a)
 }
 
-.form__btns>.form__btn:first-of-type {
+.form-btns>.form-btn:first-of-type {
     margin-left: auto;
 }
\ No newline at end of file

From 55968a4beef6e95597e2a79bc7421a6a496cf54d Mon Sep 17 00:00:00 2001
From: personal <jamieolivermaguire@googlemail.com>
Date: Thu, 1 Feb 2024 16:41:15 +0000
Subject: [PATCH 8/8] comment out generate script and browser tests for nuxt

---
 .github/workflows/ci-nuxtjs.yml | 76 ++++++++++++++++-----------------
 1 file changed, 38 insertions(+), 38 deletions(-)

diff --git a/.github/workflows/ci-nuxtjs.yml b/.github/workflows/ci-nuxtjs.yml
index 488c08f9..b3a8689b 100644
--- a/.github/workflows/ci-nuxtjs.yml
+++ b/.github/workflows/ci-nuxtjs.yml
@@ -23,7 +23,7 @@ jobs:
     name: Windows - Node 16
     uses: ./.github/workflows/build.yml
     with:
-        build-script: 'generate'
+        # build-script: 'generate'
         deploy: false
         node-version: 16
         os: 'windows-latest'
@@ -34,7 +34,7 @@ jobs:
     name: Windows - Node 18
     uses: ./.github/workflows/build.yml
     with:
-        build-script: 'generate'
+        # build-script: 'generate'
         deploy: false
         node-version: 18
         os: 'windows-latest'
@@ -45,7 +45,7 @@ jobs:
     name: Windows - Node 20
     uses: ./.github/workflows/build.yml
     with:
-        build-script: 'generate'
+        # build-script: 'generate'
         deploy: false
         node-version: 20
         os: 'windows-latest'
@@ -56,7 +56,7 @@ jobs:
     name: Ubuntu - Node 16
     uses: ./.github/workflows/build.yml
     with:
-        build-script: 'generate'
+        # build-script: 'generate'
         deploy: false
         node-version: 16
         os: 'ubuntu-latest'
@@ -67,7 +67,7 @@ jobs:
     name: Ubuntu - Node 18
     uses: ./.github/workflows/build.yml
     with:
-        build-script: 'generate'
+        # build-script: 'generate'
         deploy: false
         node-version: 18
         os: 'ubuntu-latest'
@@ -78,8 +78,8 @@ jobs:
       name: Ubuntu - Node 20
       uses: ./.github/workflows/build.yml
       with:
-          build-script: 'generate'
-          deploy: true
+          # build-script: 'generate'
+          deploy: false
           node-version: 20
           os: 'ubuntu-latest'
           amplify-app-id: 'd36dan3bxjue8c'
@@ -89,38 +89,38 @@ jobs:
           bucket-name-main: 'pie-aperture'
       secrets: inherit
 
-  browser-tests:
-    needs: 'build-deploy-nuxt-app-ubuntu-node20'
-    name: Run WebDriverIO Tests
-    runs-on: ubuntu-latest
-    steps:
-      # Checkout the Repo
-      - name: Checkout
-        uses: actions/checkout@v3
+  # browser-tests:
+  #   needs: 'build-deploy-nuxt-app-ubuntu-node20'
+  #   name: Run WebDriverIO Tests
+  #   runs-on: ubuntu-latest
+  #   steps:
+  #     # Checkout the Repo
+  #     - name: Checkout
+  #       uses: actions/checkout@v3
 
-      # Setup Node
-      - name: Setup Node
-        uses: actions/setup-node@v4
-        with:
-          node-version: 20
-          cache: "yarn"
+  #     # Setup Node
+  #     - name: Setup Node
+  #       uses: actions/setup-node@v4
+  #       with:
+  #         node-version: 20
+  #         cache: "yarn"
 
-      - name: Install Dependencies - Root
-        shell: bash
-        run: yarn
+  #     - name: Install Dependencies - Root
+  #       shell: bash
+  #       run: yarn
 
-      - name: Install Dependencies - Nuxt App
-        shell: bash
-        working-directory: ./nuxt-app
-        run: yarn
+  #     - name: Install Dependencies - Nuxt App
+  #       shell: bash
+  #       working-directory: ./nuxt-app
+  #       run: yarn
 
-      - name: Run Percy Tests
-        shell: bash
-        working-directory: ./nuxt-app
-        run: yarn test:visual
-    env:
-      BROWSERSTACK_USERNAME: ${{ secrets.BROWSERSTACK_USERNAME }}
-      BROWSERSTACK_ACCESS_KEY: ${{ secrets.BROWSERSTACK_ACCESS_KEY }}
-      NUXT_AMPLIFY_ID: d36dan3bxjue8c
-      PERCY_TOKEN_PIE_APERTURE_NUXT: ${{ secrets.PERCY_TOKEN_PIE_APERTURE_NUXT }}
-      PR_NUMBER: ${{ github.event.number }}
\ No newline at end of file
+  #     - name: Run Percy Tests
+  #       shell: bash
+  #       working-directory: ./nuxt-app
+  #       run: yarn test:visual
+  #   env:
+  #     BROWSERSTACK_USERNAME: ${{ secrets.BROWSERSTACK_USERNAME }}
+  #     BROWSERSTACK_ACCESS_KEY: ${{ secrets.BROWSERSTACK_ACCESS_KEY }}
+  #     NUXT_AMPLIFY_ID: d36dan3bxjue8c
+  #     PERCY_TOKEN_PIE_APERTURE_NUXT: ${{ secrets.PERCY_TOKEN_PIE_APERTURE_NUXT }}
+  #     PR_NUMBER: ${{ github.event.number }}
\ No newline at end of file