feat(pie-aperture): DSW-1581 sync form pages across apps

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",

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">

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"

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;
 }

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

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>

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
   }
-})
+});

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"
   }
 }