DSW-2632: Integrate radio group pages and SSR tests

nextjs-app-v14/package.json

@@ -16,7 +16,7 @@
   "dependencies": {
     "@justeattakeaway/pie-css": "0.13.1",
     "@justeattakeaway/pie-icons-webc": "1.1.0",
-    "@justeattakeaway/pie-webc": "0.5.56",
+    "@justeattakeaway/pie-webc": "0.5.59",
     "@lit-labs/nextjs": "0.2.0",
     "@lit/react": "1.0.6",
     "next": "14.2.18",

nextjs-app-v14/src/app/components/home-page.tsx

@@ -31,6 +31,7 @@ export default function HomePage() {
       <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/radio-group')} tag="button">Radio Group</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>

nextjs-app-v14/src/app/components/radio-group/page.tsx

@@ -0,0 +1,10 @@
+import RadioGroup from './radio-group';
+import { type Metadata } from 'next';
+
+export const metadata: Metadata = {
+    title: 'Radio Group',
+}
+
+export default function RadioGroupComponent() {
+    return <RadioGroup/>;
+}

nextjs-app-v14/src/app/components/radio-group/radio-group.tsx

@@ -0,0 +1,32 @@
+'use client';
+
+import NavigationLayout from "@/app/layout/navigation";
+import { PieRadio } from "@justeattakeaway/pie-webc/react/radio.js";
+import { PieRadioGroup } from "@justeattakeaway/pie-webc/react/radio-group.js";
+import { PieFormLabel } from "@justeattakeaway/pie-webc/react/form-label.js";
+import { PieButton } from "@justeattakeaway/pie-webc/react/button.js";
+
+import { useState } from "react";
+
+export default function RadioGroup() {
+    const [favouriteTakeaway, setFavouriteTakeaway] = useState('');
+
+
+    const handleFavouriteTakeaway = (event: InputEvent) => {
+        const newFavourite = (event.target as HTMLInputElement).value;
+        setFavouriteTakeaway(newFavourite);
+    }
+
+    return (
+        <NavigationLayout title="Radio Group">
+            <PieRadioGroup name="favouriteTakeaway" onChange={handleFavouriteTakeaway as any}>
+                <PieFormLabel slot="label">Your favourite takeaway: { favouriteTakeaway }</PieFormLabel>
+                <PieRadio value="chinese">Chinese</PieRadio>
+                <PieRadio value="shawarma">Shawarma</PieRadio>
+                <PieRadio value="pizza">Pizza</PieRadio>
+            </PieRadioGroup>
+
+            <PieButton>Some focusable element</PieButton>
+        </NavigationLayout>
+    );
+}

nextjs-app-v14/src/app/integrations/form/form.tsx

@@ -27,7 +27,6 @@ export default function Form() {
     const [contactByEmail, setContactByEmail] = useState(false);
     const [favouriteNumber, setFavouriteNumber] = useState('');
     const [favouriteNumberValidationMessage, setFavouriteNumberValidationMessage] = useState('');
-    const [radioValue, setRadioValue] = useState('');
     const [favouriteTakeaway, setFavouriteTakeaway] = useState('');
 
     const [formDataDisplay, setFormDataDisplay] = useState<string | null>(null);
@@ -78,10 +77,6 @@ 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);
     };

nextjs-app-v14/test/visual/nextjs.spec.js

@@ -20,6 +20,7 @@ describe('NextJS Aperture App', () => {
         { url: '/components/modal', name: 'Modal' },
         { url: '/components/notification', name: 'Notification' },
         { url: '/components/radio', name: 'Radio' },
+        { url: '/components/radio-group', name: 'Radio Group' },
         { url: '/components/spinner', name: 'Spinner' },
         { url: '/components/switch', name: 'Switch' },
         { url: '/components/tag', name: 'Tag' },

nuxt-app/package.json

@@ -21,7 +21,7 @@
   "dependencies": {
     "@justeattakeaway/pie-css": "0.13.1",
     "@justeattakeaway/pie-icons-webc": "1.1.0",
-    "@justeattakeaway/pie-webc": "0.5.56",
+    "@justeattakeaway/pie-webc": "0.5.59",
     "just-kebab-case": "4.2.0",
     "nuxt-ssr-lit": "1.6.27"
   },

nuxt-app/pages/components/radio-group.vue

@@ -0,0 +1,38 @@
+<template>
+    <div>
+        <pie-radio-group name="favouriteTakeaway" @change="favouriteTakeaway = $event.target.value">
+            <pie-form-label>
+            Your favourite takeaway is: {{ favouriteTakeaway }}
+            </pie-form-label>
+            <pie-radio
+                value="chinese">
+                Chinese
+            </pie-radio>
+            <pie-radio
+                value="shawarma">
+                Shawarma
+            </pie-radio>
+            <pie-radio
+                value="pizza">
+                Pizza
+            </pie-radio>
+        </pie-radio-group>
+
+        <pie-button>Some focusable element</pie-button>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { definePageMeta } from '#imports';
+import '@justeattakeaway/pie-webc/components/radio.js';
+import '@justeattakeaway/pie-webc/components/radio-group.js';
+import '@justeattakeaway/pie-webc/components/form-label.js';
+import '@justeattakeaway/pie-webc/components/button.js';
+
+definePageMeta({
+    title: 'Radio Group',
+});
+
+const favouriteTakeaway = ref('');
+</script>

nuxt-app/pages/index.vue

@@ -21,6 +21,7 @@
       <li><pie-link href="/components/modal">Modal</pie-link></li>
       <li><pie-link href="/components/notification">Notification</pie-link></li>
       <li><pie-link href="/components/radio">Radio</pie-link></li>
+      <li><pie-link href="/components/radio-group">Radio Group</pie-link></li>
       <li><pie-link href="/components/spinner">Spinner</pie-link></li>
       <li><pie-link href="/components/switch">Switch</pie-link></li>
       <li><pie-link href="/components/tag">Tag</pie-link></li>

nuxt-app/test/visual/nuxt.spec.js

@@ -20,6 +20,7 @@ describe('Nuxt Aperture App', () => {
         { url: '/components/modal', name: 'Modal' },
         { url: '/components/notification', name: 'Notification' },
         { url: '/components/radio', name: 'Radio' },
+        { url: '/components/radio-group', name: 'Radio Group' },
         { url: '/components/spinner', name: 'Spinner' },
         { url: '/components/switch', name: 'Switch' },
         { url: '/components/tag', name: 'Tag' },

test/ssr/ssr.spec.ts

@@ -23,6 +23,8 @@ const components = [
     'link',
     'lottie-player',
     'modal',
+    'radio',
+    'radio-group',
     'spinner',
     'switch',
     'tag',

vanilla-app/components/radio-group.html

@@ -0,0 +1,5 @@
+<load
+    src="partials/page.html"
+    title="Radio Group"
+    module="../js/radio-group.js"
+/>

vanilla-app/js/index.js

@@ -23,6 +23,7 @@ document.querySelector('#navigation').innerHTML = `
         <li><pie-link href="/components/modal.html">Modal</pie-link></li>
         <li><pie-link href="/components/notification.html">Notification</pie-link></li>
         <li><pie-link href="/components/radio.html">Radio</pie-link></li>
+        <li><pie-link href="/components/radio-group.html">Radio Group</pie-link></li>
         <li><pie-link href="/components/spinner.html">Spinner</pie-link></li>
         <li><pie-link href="/components/switch.html">Switch</pie-link></li>
         <li><pie-link href="/components/tag.html">Tag</pie-link></li>

vanilla-app/js/radio-group.js

@@ -0,0 +1,31 @@
+import '@justeattakeaway/pie-webc/components/radio.js';
+import '@justeattakeaway/pie-webc/components/radio-group.js';
+import '@justeattakeaway/pie-webc/components/form-label.js';
+import '@justeattakeaway/pie-webc/components/button.js';
+
+import './shared.js';
+import './utils/navigation.js';
+
+let checked = false;
+
+function handleRadioChange() {
+    const radioGroup = document.querySelector('pie-radio-group');
+    const formLabel = document.querySelector('pie-form-label');
+
+    formLabel.innerHTML = `Your favourite takeaway: ${radioGroup.value}`;
+}
+
+// Set initial HTML structure
+document.querySelector('#app').innerHTML = `
+    <pie-radio-group>
+        <pie-form-label slot="label">Your favourite takeaway:</pie-form-label>
+        <pie-radio name="favouriteTakeaway" value="chinese">Chinese</pie-radio>
+        <pie-radio name="favouriteTakeaway" value="shawarma">Shawarma</pie-radio>
+        <pie-radio name="favouriteTakeaway" value="pizza">Pizza</pie-radio>
+    </pie-radio-group>
+
+    <pie-button>Some focusable element</pie-button>
+`;
+
+// Add event listener to pie-radio for change events
+document.querySelector('pie-radio-group').addEventListener('change', handleRadioChange);

vanilla-app/package.json

@@ -20,7 +20,7 @@
   "dependencies": {
     "@justeattakeaway/pie-css": "0.13.1",
     "@justeattakeaway/pie-icons-webc": "1.1.0",
-    "@justeattakeaway/pie-webc": "0.5.56"
+    "@justeattakeaway/pie-webc": "0.5.59"
   },
   "installConfig": {
     "hoistingLimits": "workspaces"

vanilla-app/test/visual/vanilla.spec.js

@@ -20,6 +20,7 @@ describe('Vanilla Aperture App', () => {
         { url: '/components/modal.html', name: 'Modal' },
         { url: '/components/notification.html', name: 'Notification' },
         { url: '/components/radio.html', name: 'Radio' },
+        { url: '/components/radio-group.html', name: 'Radio Group' },
         { url: '/components/spinner.html', name: 'Spinner' },
         { url: '/components/switch.html', name: 'Switch' },
         { url: '/components/tag.html', name: 'Tag' },