-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
DSW-2632: Integrate radio group pages and SSR tests (#232)
* Add radio group pages to each app and SSR tests for group and radio * use snapshot release * add to visual tests and add focusable element below group * update deps * update deps * use latest deps
- Loading branch information
1 parent
9acfca3
commit a353252
Showing
17 changed files
with
241 additions
and
103 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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/>; | ||
} |
32 changes: 32 additions & 0 deletions
32
nextjs-app-v14/src/app/components/radio-group/radio-group.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
<load | ||
src="partials/page.html" | ||
title="Radio Group" | ||
module="../js/radio-group.js" | ||
/> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.