feat: dsw-2023-rename-text-input integration (#137)

* feat: dsw-2023-rename-text-input * update input imports * update webc version * lock update --------- Co-authored-by: personal <jamieolivermaguire@googlemail.com>
justeattakeaway · May 23, 2024 · cabde7f · cabde7f
1 parent 07dc371
commit cabde7f
Show file tree

Hide file tree

Showing 8 changed files with 259 additions and 45 deletions.
diff --git a/nextjs-app-v13/package.json b/nextjs-app-v13/package.json
@@ -16,7 +16,7 @@
     "@justeattakeaway/pie-cookie-banner": "0.19.6",
     "@justeattakeaway/pie-css": "0.11.0",
     "@justeattakeaway/pie-icons-webc": "0.23.1",
-    "@justeattakeaway/pie-webc": "0.4.0",
+    "@justeattakeaway/pie-webc": "0.5.0",
     "@lit-labs/nextjs": "0.1.4",
     "@lit/react": "1.0.2",
     "next": "13.5.6",

diff --git a/nextjs-app-v13/src/pages/integrations/form.tsx b/nextjs-app-v13/src/pages/integrations/form.tsx
@@ -3,7 +3,7 @@ import NavigationLayout from '@/layout/navigation';
 import { PieFormLabel } from '@justeattakeaway/pie-webc/react/form-label.js';
 import { PieSwitch } from '@justeattakeaway/pie-webc/react/switch.js';
 import { PieButton } from '@justeattakeaway/pie-webc/react/button.js';
-import { PieInput } from '@justeattakeaway/pie-webc/react/input.js';
+import { PieTextInput } from '@justeattakeaway/pie-webc/react/text-input.js';
 import { IconEmail } from '@justeattakeaway/pie-icons-webc/dist/react/IconEmail.js';
 import { IconLaptop } from '@justeattakeaway/pie-icons-webc/dist/react/IconLaptop.js';
 import { IconPhone } from '@justeattakeaway/pie-icons-webc/dist/react/IconPhone.js';
@@ -94,7 +94,7 @@ export default function Form() {
                 <PieFormLabel for="username">
                     Username:
                 </PieFormLabel>
-                <PieInput
+                <PieTextInput
                     className="form-field"
                     id="username"
                     data-test-id="username"
@@ -103,12 +103,12 @@ export default function Form() {
                     onInput={handleUsernameInput as any}
                     type="text">
                     <IconUser slot="leading"></IconUser>
-                </PieInput>
+                </PieTextInput>
 
                 <PieFormLabel for="favouriteNumber">
                     Favourite Number:
                 </PieFormLabel>
-                <PieInput
+                <PieTextInput
                     className="form-field"
                     id="favouriteNumber"
                     data-test-id="favouriteNumber"
@@ -122,12 +122,12 @@ export default function Form() {
                     status={favouriteNumberValidationMessage ? 'error' : undefined}
                 >
                     <IconNumberSymbol slot="leading"></IconNumberSymbol>
-                </PieInput>
+                </PieTextInput>
 
                 <PieFormLabel for="email">
                     Email:
                 </PieFormLabel>
-                <PieInput
+                <PieTextInput
                     className="form-field"
                     id="email"
                     data-test-id="email"
@@ -136,12 +136,12 @@ export default function Form() {
                     onInput={handleEmailInput as any}
                     type="email">
                     <IconEmail slot="leading"></IconEmail>
-                </PieInput>
+                </PieTextInput>
 
                 <PieFormLabel for="url">
                     Website:
                 </PieFormLabel>
-                <PieInput
+                <PieTextInput
                     className="form-field"
                     id="url"
                     data-test-id="url"
@@ -150,12 +150,12 @@ export default function Form() {
                     onInput={handleUrlInput as any}
                     type="url">
                     <IconLaptop slot="leading"></IconLaptop>
-                </PieInput>
+                </PieTextInput>
 
                 <PieFormLabel for="tel">
                     Telephone:
                 </PieFormLabel>
-                <PieInput
+                <PieTextInput
                     className="form-field"
                     id="tel"
                     data-test-id="tel"
@@ -164,12 +164,12 @@ export default function Form() {
                     onInput={handleTelInput as any}
                     type="tel">
                     <IconPhone slot="leading"></IconPhone>
-                </PieInput>
+                </PieTextInput>
 
                 <PieFormLabel for="password">
                     Password:
                 </PieFormLabel>
-                <PieInput
+                <PieTextInput
                     className="form-field"
                     id="password"
                     data-test-id="password"
@@ -178,7 +178,7 @@ export default function Form() {
                     onInput={handlePasswordInput as any}
                     type="password">
                     <IconKey slot="leading"></IconKey>
-                </PieInput>
+                </PieTextInput>
 
                 <div className="form-controls">
                     <PieFormLabel for="approveSettings">

diff --git a/nuxt-app/package.json b/nuxt-app/package.json
@@ -24,7 +24,7 @@
     "@justeattakeaway/pie-cookie-banner": "0.19.6",
     "@justeattakeaway/pie-css": "0.11.0",
     "@justeattakeaway/pie-icons-webc": "0.23.1",
-    "@justeattakeaway/pie-webc": "0.4.0",
+    "@justeattakeaway/pie-webc": "0.5.0",
     "just-kebab-case": "4.2.0",
     "nuxt-ssr-lit": "1.6.16"
   },

diff --git a/nuxt-app/pages/integrations/form.vue b/nuxt-app/pages/integrations/form.vue
@@ -4,7 +4,7 @@
             <pie-form-label for="username">
                 Username:
             </pie-form-label>
-            <pie-input
+            <pie-text-input
                 :value="username"
                 @input="username = $event.target.value"
                 class="form-field"
@@ -13,12 +13,12 @@
                 name="username"
                 type="text">
                 <icon-user slot="leading"></icon-user>
-            </pie-input>
+            </pie-text-input>
 
             <pie-form-label for="favouriteNumber">
                 Favourite Number:
             </pie-form-label>
-            <pie-input
+            <pie-text-input
                 :value="favouriteNumber"
                 @input="handleFavouriteNumberInput"
                 :assistiveText="favouriteNumberValidationMessage"
@@ -31,12 +31,12 @@
                 :max="200"
                 type="number">
                 <icon-number-symbol slot="leading"></icon-number-symbol>
-            </pie-input>
+            </pie-text-input>
 
             <pie-form-label for="email">
                 Email:
             </pie-form-label>
-            <pie-input
+            <pie-text-input
                 :value="email"
                 @input="email = $event.target.value"
                 class="form-field"
@@ -45,12 +45,12 @@
                 name="email"
                 type="email">
                 <icon-email slot="leading"></icon-email>
-            </pie-input>
+            </pie-text-input>
 
             <pie-form-label for="url">
                 Website:
             </pie-form-label>
-            <pie-input
+            <pie-text-input
                 :value="url"
                 @input="url = $event.target.value"
                 class="form-field"
@@ -59,12 +59,12 @@
                 name="url"
                 type="url">
                 <icon-laptop slot="leading"></icon-laptop>
-            </pie-input>
+            </pie-text-input>
 
             <pie-form-label for="tel">
                 Telephone:
             </pie-form-label>
-            <pie-input
+            <pie-text-input
                 :value="tel"
                 @input="tel = $event.target.value"
                 class="form-field"
@@ -73,12 +73,12 @@
                 name="tel"
                 type="tel">
                 <icon-phone slot="leading"></icon-phone>
-            </pie-input>
+            </pie-text-input>
 
             <pie-form-label for="password">
                 Password:
             </pie-form-label>
-            <pie-input
+            <pie-text-input
                 :value="password"
                 @input="password = $event.target.value"
                 class="form-field"
@@ -87,7 +87,7 @@
                 name="password"
                 type="password">
                 <icon-key slot="leading"></icon-key>
-            </pie-input>
+            </pie-text-input>
 
             <div class="form-controls">
                 <pie-form-label for="approveSettings">
@@ -125,7 +125,7 @@
 import { ref } from 'vue';
 import '@justeattakeaway/pie-webc/components/button.js';
 import '@justeattakeaway/pie-webc/components/form-label.js';
-import '@justeattakeaway/pie-webc/components/input.js';
+import '@justeattakeaway/pie-webc/components/text-input.js';
 import '@justeattakeaway/pie-webc/components/switch.js';
 import '@justeattakeaway/pie-icons-webc/dist/IconEmail.js';
 import '@justeattakeaway/pie-icons-webc/dist/IconLaptop.js';

diff --git a/vanilla-app/integrations/form.html b/vanilla-app/integrations/form.html
@@ -16,34 +16,34 @@ <h1>Vanilla - PIE Form Test Page</h1>
     <pie-divider></pie-divider>
     <form class="form" id="testForm">
         <pie-form-label for="username">Username:</pie-form-label>
-        <pie-input class="form-field" id="username" data-test-id="username" name="username" type="text">
+        <pie-text-input class="form-field" id="username" data-test-id="username" name="username" type="text">
             <icon-user slot="leading"></icon-user>
-        </pie-input>
+        </pie-text-input>
 
         <pie-form-label for="favouriteNumber">Favourite Number:</pie-form-label>
-        <pie-input class="form-field" id="favouriteNumber" data-test-id="favouriteNumber" name="favouriteNumber" type="number" min="-5" max="200" assistive-text="" state="">
+        <pie-text-input class="form-field" id="favouriteNumber" data-test-id="favouriteNumber" name="favouriteNumber" type="number" min="-5" max="200" assistive-text="" state="">
             <icon-number-symbol slot="leading"></icon-number-symbol>
-        </pie-input>
+        </pie-text-input>
 
         <pie-form-label for="email">Email:</pie-form-label>
-        <pie-input class="form-field" id="email" data-test-id="email" name="email" type="email">
+        <pie-text-input class="form-field" id="email" data-test-id="email" name="email" type="email">
             <icon-email slot="leading"></icon-email>
-        </pie-input>
+        </pie-text-input>
 
         <pie-form-label for="url">Website:</pie-form-label>
-        <pie-input class="form-field" id="url" data-test-id="url" name="url" type="url">
+        <pie-text-input class="form-field" id="url" data-test-id="url" name="url" type="url">
             <icon-laptop slot="leading"></icon-laptop>
-        </pie-input>
+        </pie-text-input>
 
         <pie-form-label for="tel">Telephone:</pie-form-label>
-        <pie-input class="form-field" id="tel" data-test-id="tel" name="tel" type="tel">
+        <pie-text-input class="form-field" id="tel" data-test-id="tel" name="tel" type="tel">
             <icon-phone slot="leading"></icon-phone>
-        </pie-input>
+        </pie-text-input>
 
         <pie-form-label for="password">Password:</pie-form-label>
-        <pie-input class="form-field" id="password" data-test-id="password" name="password" type="password">
+        <pie-text-input class="form-field" id="password" data-test-id="password" name="password" type="password">
             <icon-key slot="leading"></icon-key>
-        </pie-input>
+        </pie-text-input>
 
         <div class="form-controls">
             <pie-switch label="Approve settings" id="approveSettings" data-test-id="approveSettings"

diff --git a/vanilla-app/js/form.js b/vanilla-app/js/form.js
@@ -1,5 +1,5 @@
 import '@justeattakeaway/pie-webc/components/button.js';
-import '@justeattakeaway/pie-webc/components/input.js';
+import '@justeattakeaway/pie-webc/components/text-input.js';
 import '@justeattakeaway/pie-webc/components/switch.js';
 import '@justeattakeaway/pie-webc/components/form-label.js';
 import '@justeattakeaway/pie-icons-webc/dist/IconEmail.js';

diff --git a/vanilla-app/package.json b/vanilla-app/package.json
@@ -21,7 +21,7 @@
     "@justeattakeaway/pie-cookie-banner": "0.19.6",
     "@justeattakeaway/pie-css": "0.11.0",
     "@justeattakeaway/pie-icons-webc": "0.23.1",
-    "@justeattakeaway/pie-webc": "0.4.0"
+    "@justeattakeaway/pie-webc": "0.5.0"
   },
   "installConfig": {
     "hoistingLimits": "workspaces"