DSW-2307: Add new pages for pie-radio (#211)

* feat: dsw-2307-pie-radio * Add new pages for radio component * Linting fixes * Form pages * Add default value for radio to form tests * Use input event on next 13 --------- Co-authored-by: pie-design-system-bot <[email protected]>
justeattakeaway · Oct 1, 2024 · ea84b12 · ea84b12
1 parent e2b1e8e
commit ea84b12
Show file tree

Hide file tree

Showing 44 changed files with 279 additions and 143 deletions.
diff --git a/nextjs-app-v13/package.json b/nextjs-app-v13/package.json
@@ -13,10 +13,10 @@
     "upgrade-pie-packages": "npx npm-check-updates \"@justeattakeaway/pie-*\" -u"
   },
   "dependencies": {
-    "@justeattakeaway/pie-cookie-banner": "0.26.3",
-    "@justeattakeaway/pie-css": "0.12.1",
+    "@justeattakeaway/pie-cookie-banner": "0.26.5",
+    "@justeattakeaway/pie-css": "0.13.0",
     "@justeattakeaway/pie-icons-webc": "0.25.1",
-    "@justeattakeaway/pie-webc": "0.5.32",
+    "@justeattakeaway/pie-webc": "0.5.37",
     "@lit-labs/nextjs": "0.1.4",
     "@lit/react": "1.0.2",
     "next": "13.5.6",

diff --git a/nextjs-app-v13/src/pages/components/radio.tsx b/nextjs-app-v13/src/pages/components/radio.tsx
@@ -0,0 +1,22 @@
+import NavigationLayout from "@/layout/navigation";
+import { PieRadio } from "@justeattakeaway/pie-webc/react/radio.js";
+import { useState } from "react";
+
+export default function Radio() {
+    const [isRadioChecked, setIsRadioCheck] = useState(false);
+
+    const handleRadioInput = () => {
+        setIsRadioCheck(current => !current);
+    };
+
+    return (
+        <NavigationLayout title="Radio">
+            <PieRadio
+                checked={isRadioChecked}
+                value="value"
+                onInput={handleRadioInput}>
+                {`checked: ${isRadioChecked}`}
+            </PieRadio>
+        </NavigationLayout>
+    );
+}
diff --git a/nextjs-app-v13/src/pages/index.tsx b/nextjs-app-v13/src/pages/index.tsx
@@ -28,6 +28,7 @@ export default function Home() {
       <li><PieLink onClick={() => router.push('/components/lottie-player')} tag="button">Lottie Player</PieLink></li>
       <li><PieLink onClick={() => router.push('/components/modal')} tag="button">Modal</PieLink></li>
       <li><PieLink onClick={() => router.push('/components/notification')} tag="button">Notification</PieLink></li>
+      <li><PieLink onClick={() => router.push('/components/radio')} tag="button">Radio</PieLink></li>
       <li><PieLink onClick={() => router.push('/components/spinner')} tag="button">Spinner</PieLink></li>
       <li><PieLink onClick={() => router.push('/components/switch')} tag="button">Switch</PieLink></li>
       <li><PieLink onClick={() => router.push('/components/tag')} tag="button">Tag</PieLink></li>

diff --git a/nextjs-app-v13/src/pages/integrations/form.tsx b/nextjs-app-v13/src/pages/integrations/form.tsx
@@ -1,12 +1,14 @@
-import React, { useState } from 'react';
+import { type ChangeEvent, type FormEvent} from 'react';
+import { useState } from 'react';
 import NavigationLayout from '@/layout/navigation';
+import { PieButton } from '@justeattakeaway/pie-webc/react/button.js';
+import { PieCheckbox } from '@justeattakeaway/pie-webc/react/checkbox.js';
+import { PieCheckboxGroup } from "@justeattakeaway/pie-webc/react/checkbox-group.js";
 import { PieFormLabel } from '@justeattakeaway/pie-webc/react/form-label.js';
+import { PieRadio } from '@justeattakeaway/pie-webc/react/radio.js';
 import { PieSwitch } from '@justeattakeaway/pie-webc/react/switch.js';
-import { PieButton } from '@justeattakeaway/pie-webc/react/button.js';
 import { PieTextInput } from '@justeattakeaway/pie-webc/react/text-input.js';
 import { PieTextarea } from '@justeattakeaway/pie-webc/react/textarea.js';
-import { PieCheckbox } from '@justeattakeaway/pie-webc/react/checkbox.js';
-import { PieCheckboxGroup } from "@justeattakeaway/pie-webc/react/checkbox-group.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';
@@ -32,6 +34,7 @@ export default function Form() {
     const [email, setEmail] = useState('');
     const [password, setPassword] = useState('');
     const [description, setDescription] = useState('');
+    const [radioValue, setRadioValue] = useState('');
 
     const handleUsernameInput = (event: InputEvent) => {
         setUsername((event.target as HTMLInputElement).value);
@@ -95,7 +98,11 @@ export default function Form() {
         setContactByEmail(current => !current);
     };
 
-    const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+    const handleRadioInput = (event: InputEvent) => {
+        setRadioValue((event.target as HTMLInputElement).value);
+    }
+
+    const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
         event.preventDefault();
 
         const data = {
@@ -110,6 +117,7 @@ export default function Form() {
             url,
             tel,
             password,
+            radioValue,
             description
         };
 
@@ -147,7 +155,7 @@ export default function Form() {
                     onInput={handleFavouriteNumberInput as any} // Ensure type compatibility
                     type="number"
                     assistiveText={favouriteNumberValidationMessage}
-                    status={favouriteNumberValidationMessage ? 'error' : undefined}
+                    status={favouriteNumberValidationMessage ? 'error' : 'default'}
                 >
                     <IconNumberSymbol slot="leadingIcon"></IconNumberSymbol>
                 </PieTextInput>
@@ -267,6 +275,11 @@ export default function Form() {
                             Contact By Phone
                         </PieCheckbox>
                     </PieCheckboxGroup>
+
+                    <fieldset>
+                        <PieRadio value="radio-1" name="radio-group" onInput={handleRadioInput as any}>Radio 1</PieRadio>
+                        <PieRadio value="radio-2" name="radio-group" onInput={handleRadioInput as any}>Radio 2</PieRadio>
+                    </fieldset>
                 </div>
                 <div className="form-btns">
                     <PieButton className="form-btn" data-test-id="reset-btn" variant="secondary" type="reset">Reset</PieButton>

diff --git a/nextjs-app-v14/package.json b/nextjs-app-v14/package.json
@@ -14,10 +14,10 @@
     "upgrade-pie-packages": "npx npm-check-updates \"@justeattakeaway/pie-*\" -u"
   },
   "dependencies": {
-    "@justeattakeaway/pie-cookie-banner": "0.26.3",
-    "@justeattakeaway/pie-css": "0.12.1",
+    "@justeattakeaway/pie-cookie-banner": "0.26.5",
+    "@justeattakeaway/pie-css": "0.13.0",
     "@justeattakeaway/pie-icons-webc": "0.25.1",
-    "@justeattakeaway/pie-webc": "0.5.32",
+    "@justeattakeaway/pie-webc": "0.5.37",
     "@lit-labs/nextjs": "0.2.0",
     "@lit/react": "1.0.5",
     "next": "14.2.3",

diff --git a/nextjs-app-v14/src/app/components/assistive-text/page.tsx b/nextjs-app-v14/src/app/components/assistive-text/page.tsx
@@ -1,5 +1,5 @@
-import  AssistiveText  from './assistive-text';
-import { Metadata } from 'next'
+import AssistiveText from './assistive-text';
+import { type Metadata } from 'next';
 
 export const metadata: Metadata = {
     title: 'Assistive Text',

diff --git a/nextjs-app-v14/src/app/components/button/page.tsx b/nextjs-app-v14/src/app/components/button/page.tsx
@@ -1,5 +1,5 @@
-import  Button  from './button';
-import { Metadata } from 'next'
+import Button from './button';
+import { type Metadata } from 'next';
 
 export const metadata: Metadata = {
     title: 'Button',

diff --git a/nextjs-app-v14/src/app/components/card/page.tsx b/nextjs-app-v14/src/app/components/card/page.tsx
@@ -1,5 +1,5 @@
-import  Card  from './card';
-import { Metadata } from 'next'
+import Card from './card';
+import { type Metadata } from 'next';
 
 export const metadata: Metadata = {
     title: 'Card',

diff --git a/nextjs-app-v14/src/app/components/checkbox-group/page.tsx b/nextjs-app-v14/src/app/components/checkbox-group/page.tsx
@@ -1,5 +1,5 @@
-import  CheckboxGroup  from './checkbox-group';
-import { Metadata } from 'next'
+import CheckboxGroup from './checkbox-group';
+import { type Metadata } from 'next';
 
 export const metadata: Metadata = {
     title: 'Checkbox Group',

diff --git a/nextjs-app-v14/src/app/components/checkbox/page.tsx b/nextjs-app-v14/src/app/components/checkbox/page.tsx
@@ -1,5 +1,5 @@
-import  Checkbox  from './checkbox';
-import { Metadata } from 'next'
+import Checkbox from './checkbox';
+import { type Metadata } from 'next';
 
 export const metadata: Metadata = {
     title: 'Checkbox',

diff --git a/nextjs-app-v14/src/app/components/chip/page.tsx b/nextjs-app-v14/src/app/components/chip/page.tsx
@@ -1,5 +1,5 @@
-import  Chip  from './chip';
-import { Metadata } from 'next'
+import Chip from './chip';
+import { type Metadata } from 'next';
 
 export const metadata: Metadata = {
     title: 'Chip',

diff --git a/nextjs-app-v14/src/app/components/cookie-banner/page.tsx b/nextjs-app-v14/src/app/components/cookie-banner/page.tsx
@@ -1,5 +1,5 @@
-import  CookieBanner  from './cookie-banner';
-import { Metadata } from 'next'
+import CookieBanner from './cookie-banner';
+import { type Metadata } from 'next';
 
 export const metadata: Metadata = {
     title: 'Cookie Banner',

diff --git a/nextjs-app-v14/src/app/components/form-label/page.tsx b/nextjs-app-v14/src/app/components/form-label/page.tsx
@@ -1,5 +1,5 @@
-import  FormLabel  from './form-label';
-import { Metadata } from 'next'
+import FormLabel from './form-label';
+import { type Metadata } from 'next';
 
 export const metadata: Metadata = {
     title: 'Form Label',

diff --git a/nextjs-app-v14/src/app/components/home-page.tsx b/nextjs-app-v14/src/app/components/home-page.tsx
@@ -30,6 +30,7 @@ export default function HomePage() {
       <li><PieLink onClick={() => router.push('/components/lottie-player')} tag="button">Lottie Player</PieLink></li>
       <li><PieLink onClick={() => router.push('/components/modal')} tag="button">Modal</PieLink></li>
       <li><PieLink onClick={() => router.push('/components/notification')} tag="button">Notification</PieLink></li>
+      <li><PieLink onClick={() => router.push('/components/radio')} tag="button">Radio</PieLink></li>
       <li><PieLink onClick={() => router.push('/components/spinner')} tag="button">Spinner</PieLink></li>
       <li><PieLink onClick={() => router.push('/components/switch')} tag="button">Switch</PieLink></li>
       <li><PieLink onClick={() => router.push('/components/tag')} tag="button">Tag</PieLink></li>

diff --git a/nextjs-app-v14/src/app/components/icon-button/page.tsx b/nextjs-app-v14/src/app/components/icon-button/page.tsx
@@ -1,5 +1,5 @@
-import  IconButton  from './icon-button';
-import { Metadata } from 'next'
+import IconButton from './icon-button';
+import { type Metadata } from 'next';
 
 export const metadata: Metadata = {
     title: 'Icon Button',

diff --git a/nextjs-app-v14/src/app/components/icon/page.tsx b/nextjs-app-v14/src/app/components/icon/page.tsx
@@ -1,5 +1,5 @@
-import  IconDemo  from './iconDemo';
-import { Metadata } from 'next'
+import IconDemo from './iconDemo';
+import { type Metadata } from 'next';
 
 export const metadata: Metadata = {
     title: 'Icon',

diff --git a/nextjs-app-v14/src/app/components/link/page.tsx b/nextjs-app-v14/src/app/components/link/page.tsx
@@ -1,5 +1,5 @@
-import  Link  from './link';
-import { Metadata } from 'next'
+import Link from './link';
+import { type Metadata } from 'next';
 
 export const metadata: Metadata = {
     title: 'Link',

diff --git a/nextjs-app-v14/src/app/components/lottie-player/page.tsx b/nextjs-app-v14/src/app/components/lottie-player/page.tsx
@@ -1,6 +1,6 @@
 import NavigationLayout from "@/app/layout/navigation";
-import  LottiePlayer  from './lottie-player';
-import { Metadata } from 'next'
+import LottiePlayer from './lottie-player';
+import { type Metadata } from 'next';
 
 const title = 'Lottie Player'
 export const metadata: Metadata = {

diff --git a/nextjs-app-v14/src/app/components/modal/page.tsx b/nextjs-app-v14/src/app/components/modal/page.tsx
@@ -1,5 +1,5 @@
-import  Modal  from './modal';
-import { Metadata } from 'next'
+import Modal from './modal';
+import { type Metadata } from 'next';
 
 export const metadata: Metadata = {
     title: 'Modal',

diff --git a/nextjs-app-v14/src/app/components/notification/page.tsx b/nextjs-app-v14/src/app/components/notification/page.tsx
@@ -1,5 +1,5 @@
-import  Notification  from './notification';
-import { Metadata } from 'next'
+import Notification from './notification';
+import { type Metadata } from 'next';
 
 export const metadata: Metadata = {
     title: 'Notification',

diff --git a/nextjs-app-v14/src/app/components/radio/page.tsx b/nextjs-app-v14/src/app/components/radio/page.tsx
@@ -0,0 +1,10 @@
+import Radio from './radio';
+import { type Metadata } from 'next';
+
+export const metadata: Metadata = {
+    title: 'Radio',
+}
+
+export default function RadioComponent() {
+    return <Radio/>;
+}
diff --git a/nextjs-app-v14/src/app/components/radio/radio.tsx b/nextjs-app-v14/src/app/components/radio/radio.tsx
@@ -0,0 +1,24 @@
+'use client';
+
+import NavigationLayout from "@/app/layout/navigation";
+import { PieRadio } from "@justeattakeaway/pie-webc/react/radio.js";
+import { useState } from "react";
+
+export default function Radio() {
+    const [isRadioChecked, setIsRadioCheck] = useState(false);
+
+    const handleRadioInput = () => {
+        setIsRadioCheck(current => !current);
+    };
+
+    return (
+        <NavigationLayout title="Radio">
+            <PieRadio
+                checked={isRadioChecked}
+                value="value"
+                onInput={handleRadioInput}>
+                {`checked: ${isRadioChecked}`}
+            </PieRadio>
+        </NavigationLayout>
+    );
+}
diff --git a/nextjs-app-v14/src/app/components/spinner/page.tsx b/nextjs-app-v14/src/app/components/spinner/page.tsx
@@ -1,5 +1,5 @@
-import  Spinner  from './spinner';
-import { Metadata } from 'next'
+import Spinner from './spinner';
+import { type Metadata } from 'next';
 
 export const metadata: Metadata = {
     title: 'Spinner',

diff --git a/nextjs-app-v14/src/app/components/switch/page.tsx b/nextjs-app-v14/src/app/components/switch/page.tsx
@@ -1,5 +1,5 @@
-import  Switch  from './switch';
-import { Metadata } from 'next'
+import Switch from './switch';
+import { type Metadata } from 'next';
 
 export const metadata: Metadata = {
     title: 'Switch',

diff --git a/nextjs-app-v14/src/app/components/switch/switch.tsx b/nextjs-app-v14/src/app/components/switch/switch.tsx
@@ -5,7 +5,7 @@ import { PieSwitch } from '@justeattakeaway/pie-webc/react/switch.js';
 import { useState } from "react";
 
 export default function Switch() {
-    const [isSwitchChecked, setIsSwitchCheck] = useState(false)
+    const [isSwitchChecked, setIsSwitchCheck] = useState(false);
 
     const handleSwitchChange = () => {
       setIsSwitchCheck(current => !current);

diff --git a/nextjs-app-v14/src/app/components/tag/page.tsx b/nextjs-app-v14/src/app/components/tag/page.tsx
@@ -1,5 +1,5 @@
-import  Tag  from './tag';
-import { Metadata } from 'next'
+import Tag from './tag';
+import { type Metadata } from 'next';
 
 export const metadata: Metadata = {
     title: 'Tag',

diff --git a/nextjs-app-v14/src/app/components/text-input/page.tsx b/nextjs-app-v14/src/app/components/text-input/page.tsx
@@ -1,5 +1,5 @@
-import  TextInput  from './text-input';
-import { Metadata } from 'next'
+import TextInput from './text-input';
+import { type Metadata } from 'next';
 
 export const metadata: Metadata = {
     title: 'Text Input',

diff --git a/nextjs-app-v14/src/app/components/textarea/page.tsx b/nextjs-app-v14/src/app/components/textarea/page.tsx
@@ -1,5 +1,5 @@
-import  Textarea  from './textarea';
-import { Metadata } from 'next'
+import Textarea from './textarea';
+import { type Metadata } from 'next';
 
 export const metadata: Metadata = {
     title: 'Textarea',

diff --git a/nextjs-app-v14/src/app/integrations/form/form.tsx b/nextjs-app-v14/src/app/integrations/form/form.tsx
@@ -3,6 +3,7 @@
 import React, { useState } from 'react';
 import NavigationLayout from '@/app/layout/navigation';
 import { PieFormLabel } from '@justeattakeaway/pie-webc/react/form-label.js';
+import { PieRadio } from '@justeattakeaway/pie-webc/react/radio.js';
 import { PieSwitch } from '@justeattakeaway/pie-webc/react/switch.js';
 import { PieButton } from '@justeattakeaway/pie-webc/react/button.js';
 import { PieTextInput } from '@justeattakeaway/pie-webc/react/text-input.js';
@@ -25,6 +26,7 @@ export default function Form() {
     const [contactByEmail, setContactByEmail] = useState(false);
     const [favouriteNumber, setFavouriteNumber] = useState('');
     const [favouriteNumberValidationMessage, setFavouriteNumberValidationMessage] = useState('');
+    const [radioValue, setRadioValue] = useState('');
 
     const [formDataDisplay, setFormDataDisplay] = useState<string | null>(null);
 
@@ -74,6 +76,10 @@ export default function Form() {
         setPassword((event.target as HTMLInputElement).value);
     }
 
+    const handleRadioInput = (event: InputEvent) => {
+        setRadioValue((event.target as HTMLInputElement).value);
+    };
+
     const handleApproveSettingsChange = () => {
         setApproveSettings(current => !current);
     };
@@ -112,7 +118,8 @@ export default function Form() {
             url,
             tel,
             password,
-            description
+            radioValue,
+            description,
         };
 
         setFormDataDisplay(JSON.stringify(data, null, 2));
@@ -149,7 +156,7 @@ export default function Form() {
                     onInput={handleFavouriteNumberInput as any} // Ensure type compatibility
                     type="number"
                     assistiveText={favouriteNumberValidationMessage}
-                    status={favouriteNumberValidationMessage ? 'error' : undefined}
+                    status={favouriteNumberValidationMessage ? 'error' : 'default'}
                 >
                     <IconNumberSymbol slot="leadingIcon"></IconNumberSymbol>
                 </PieTextInput>
@@ -268,6 +275,11 @@ export default function Form() {
                             Contact By Phone
                         </PieCheckbox>
                     </PieCheckboxGroup>
+
+                    <fieldset>
+                        <PieRadio value="radio-1" name="radio-group" onInput={handleRadioInput as any}>Radio 1</PieRadio>
+                        <PieRadio value="radio-2" name="radio-group" onInput={handleRadioInput as any}>Radio 2</PieRadio>
+                    </fieldset>
                 </div>
                 <div className='form-btns'>
                     <PieButton className="form-btn" data-test-id="reset-btn" variant="secondary" type="reset">Reset</PieButton>

diff --git a/nextjs-app-v14/src/app/integrations/form/page.tsx b/nextjs-app-v14/src/app/integrations/form/page.tsx
@@ -1,5 +1,5 @@
-import  Form  from './form';
-import { Metadata } from 'next'
+import Form from './form';
+import { type Metadata } from 'next';
 
 export const metadata: Metadata = {
     title: 'Form',