feat(pie-form-label): DSW-1585 update pie-form-label to work with for…

…m components (#74) * Update form pages * Use updated PIE packages
justeattakeaway · Feb 16, 2024 · 65229d9 · 65229d9
1 parent 429d190
commit 65229d9
Show file tree

Hide file tree

Showing 5 changed files with 239 additions and 67 deletions.
diff --git a/nextjs-app/package.json b/nextjs-app/package.json
@@ -13,22 +13,22 @@
     "upgrade-pie-packages": "npx npm-check-updates \"@justeattakeaway/pie-*\" -u"
   },
   "dependencies": {
-    "@justeattakeaway/pie-assistive-text": "0.2.0",
-    "@justeattakeaway/pie-button": "0.45.3",
-    "@justeattakeaway/pie-card": "0.17.2",
-    "@justeattakeaway/pie-chip": "0.1.0",
-    "@justeattakeaway/pie-cookie-banner": "0.17.1",
+    "@justeattakeaway/pie-assistive-text": "0.2.1",
+    "@justeattakeaway/pie-button": "0.45.4",
+    "@justeattakeaway/pie-card": "0.17.3",
+    "@justeattakeaway/pie-chip": "0.1.1",
+    "@justeattakeaway/pie-cookie-banner": "0.17.2",
     "@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.3",
-    "@justeattakeaway/pie-icons-webc": "0.17.2",
-    "@justeattakeaway/pie-input": "0.11.0",
-    "@justeattakeaway/pie-link": "0.15.1",
-    "@justeattakeaway/pie-modal": "0.38.5",
-    "@justeattakeaway/pie-spinner": "0.5.2",
-    "@justeattakeaway/pie-switch": "0.26.0",
-    "@justeattakeaway/pie-tag": "0.6.1",
+    "@justeattakeaway/pie-divider": "0.12.2",
+    "@justeattakeaway/pie-form-label": "0.12.0",
+    "@justeattakeaway/pie-icon-button": "0.27.4",
+    "@justeattakeaway/pie-icons-webc": "0.17.3",
+    "@justeattakeaway/pie-input": "0.12.0",
+    "@justeattakeaway/pie-link": "0.15.2",
+    "@justeattakeaway/pie-modal": "0.38.6",
+    "@justeattakeaway/pie-spinner": "0.5.3",
+    "@justeattakeaway/pie-switch": "0.27.0",
+    "@justeattakeaway/pie-tag": "0.6.2",
     "@lit-labs/nextjs": "0.1.4",
     "@lit/react": "1.0.2",
     "next": "13.5.6",

diff --git a/nextjs-app/src/pages/form.tsx b/nextjs-app/src/pages/form.tsx
@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import { PieFormLabel } from '@justeattakeaway/pie-form-label/dist/react';
 import { PieSwitch } from '@justeattakeaway/pie-switch/dist/react';
 import { PieButton } from '@justeattakeaway/pie-button/dist/react';
 import { PieInput } from '@justeattakeaway/pie-input/dist/react';
@@ -55,9 +56,9 @@ export default function Form() {
         <>
             <h1>NextJS - PIE Form Test Page</h1>
             <form className="form" id="testForm" onSubmit={handleSubmit}>
-                <label htmlFor="username">
+                <PieFormLabel for="username">
                     Username:
-                </label>
+                </PieFormLabel>
                 <PieInput
                     className="form-field"
                     id="username"
@@ -101,8 +102,10 @@ export default function Form() {
                     type="password" />
 
                 <div className="form-controls">
+                    <PieFormLabel for="approveSettings">
+                        Approve settings
+                    </PieFormLabel>
                     <PieSwitch
-                        label="Approve settings"
                         id="approveSettings"
                         data-test-id="approveSettings"
                         name="approveSettings"

diff --git a/nuxt-app/package.json b/nuxt-app/package.json
@@ -20,22 +20,22 @@
     "vue-router": "4.2.5"
   },
   "dependencies": {
-    "@justeattakeaway/pie-assistive-text": "0.2.0",
-    "@justeattakeaway/pie-button": "0.45.3",
-    "@justeattakeaway/pie-card": "0.17.2",
-    "@justeattakeaway/pie-chip": "0.1.0",
-    "@justeattakeaway/pie-cookie-banner": "0.17.1",
+    "@justeattakeaway/pie-assistive-text": "0.2.1",
+    "@justeattakeaway/pie-button": "0.45.4",
+    "@justeattakeaway/pie-card": "0.17.3",
+    "@justeattakeaway/pie-chip": "0.1.1",
+    "@justeattakeaway/pie-cookie-banner": "0.17.2",
     "@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.3",
-    "@justeattakeaway/pie-icons-webc": "0.17.2",
-    "@justeattakeaway/pie-input": "0.11.0",
-    "@justeattakeaway/pie-link": "0.15.1",
-    "@justeattakeaway/pie-modal": "0.38.5",
-    "@justeattakeaway/pie-spinner": "0.5.2",
-    "@justeattakeaway/pie-switch": "0.26.0",
-    "@justeattakeaway/pie-tag": "0.6.1",
+    "@justeattakeaway/pie-divider": "0.12.2",
+    "@justeattakeaway/pie-form-label": "0.12.0",
+    "@justeattakeaway/pie-icon-button": "0.27.4",
+    "@justeattakeaway/pie-icons-webc": "0.17.3",
+    "@justeattakeaway/pie-input": "0.12.0",
+    "@justeattakeaway/pie-link": "0.15.2",
+    "@justeattakeaway/pie-modal": "0.38.6",
+    "@justeattakeaway/pie-spinner": "0.5.3",
+    "@justeattakeaway/pie-switch": "0.27.0",
+    "@justeattakeaway/pie-tag": "0.6.2",
     "nuxt-ssr-lit": "1.6.10"
   },
   "installConfig": {

diff --git a/nuxt-app/pages/form.vue b/nuxt-app/pages/form.vue
@@ -2,9 +2,9 @@
     <div>
         <h1>Nuxt - PIE Form Test Page</h1>
         <form class="form" id="testForm" @submit="handleSubmit">
-            <label for="username">
+            <pie-form-label for="username">
                 Username:
-            </label>
+            </pie-form-label>
             <pie-input
                 :value="username"
                 @input="handleUsernameInput"
@@ -48,8 +48,10 @@
                 type="password" />
 
             <div class="form-controls">
+                <pie-form-label for="approveSettings">
+                    Approve settings
+                </pie-form-label>
                 <pie-switch
-                    label="Approve settings"
                     id="approveSettings"
                     data-test-id="approveSettings"
                     name="approveSettings"
@@ -79,8 +81,9 @@
 
 <script setup lang="ts">
 import { PieButton } from '@justeattakeaway/pie-button';
-import { PieSwitch } from '@justeattakeaway/pie-switch';
+import { PieFormLabel } from '@justeattakeaway/pie-form-label';
 import { PieInput } from '@justeattakeaway/pie-input';
+import { PieSwitch } from '@justeattakeaway/pie-switch';
 import { defineModel } from 'vue';
 
 const username = defineModel('username', { default: '' });