Skip to content

feat: dsw-4058-switch-labels integration #514

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
pie-design-system-app wants to merge 2 commits into
base: main
Choose a base branch
from
Draft

feat: dsw-4058-switch-labels integration #514

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
23c397b
feat: dsw-4058-switch-labels
pie-design-system-app[bot] Jul 3, 2026
e562466
add external labels
raoufswe Jul 2, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions nextjs-app-v14/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,8 @@
},
"dependencies": {
"@justeattakeaway/pie-css": "1.2.0",
"@justeattakeaway/pie-icons-webc": "1.25.1",
"@justeattakeaway/pie-webc": "0.10.21",
"@justeattakeaway/pie-icons-webc": "0.0.0-snapshot-release-20260703135516",
"@justeattakeaway/pie-webc": "0.0.0-snapshot-release-20260703135516",
"@lit-labs/nextjs": "0.2.3",
"@lit/react": "1.0.7",
"next": "14.2.33",
Expand Down
60 changes: 51 additions & 9 deletions nextjs-app-v14/src/app/components/switch/switch.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,24 +1,66 @@
'use client';

import NavigationLayout from "@/app/layout/navigation";
import { PieDivider } from '@justeattakeaway/pie-webc/react/divider.js';
import { PieSwitch } from '@justeattakeaway/pie-webc/react/switch.js';
import { useState } from "react";

export default function Switch() {
const [isSwitchChecked, setIsSwitchCheck] = useState(false);
const [switchStates, setSwitchStates] = useState<Record<string, boolean>>({
'story-switch': false,
'external-switch': false,
'wrapping-switch': false,
'multi-label-switch': false,
});

const handleSwitchChange = () => {
setIsSwitchCheck(current => !current);
console.log(isSwitchChecked);
const handleSwitchChange = (event: CustomEvent) => {
const switchId = (event.currentTarget as HTMLElement).id;

setSwitchStates(current => ({
...current,
[switchId]: !current[switchId],
}));
};

return (
<NavigationLayout title="Switch">
<PieSwitch
label={`checked: ${isSwitchChecked}`}
checked={isSwitchChecked}
onChange={handleSwitchChange}>
</PieSwitch>
<PieSwitch
id="story-switch"
label={`checked: ${switchStates['story-switch']}`}
checked={switchStates['story-switch']}
onChange={handleSwitchChange}>
</PieSwitch>

<PieDivider label="External labels" />


<label className="switch-label" htmlFor="external-switch">Toggle via for attribute</label>
<PieSwitch
id="external-switch"
checked={switchStates['external-switch']}
onChange={handleSwitchChange}>
</PieSwitch>

<PieDivider />

<label style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
<span className="switch-label">Toggle via wrapping label</span>
<PieSwitch
id="wrapping-switch"
checked={switchStates['wrapping-switch']}
onChange={handleSwitchChange}>
</PieSwitch>
</label>

<PieDivider />

<label className="switch-label" htmlFor="multi-label-switch">First label</label>
<label className="switch-label" htmlFor="multi-label-switch">Second label</label>
<PieSwitch
id="multi-label-switch"
checked={switchStates['multi-label-switch']}
onChange={handleSwitchChange}>
</PieSwitch>
</NavigationLayout>
);
}
4 changes: 2 additions & 2 deletions nextjs-app-v15/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,8 @@
},
"dependencies": {
"@justeattakeaway/pie-css": "1.2.0",
"@justeattakeaway/pie-icons-webc": "1.25.1",
"@justeattakeaway/pie-webc": "0.10.21",
"@justeattakeaway/pie-icons-webc": "0.0.0-snapshot-release-20260703135516",
"@justeattakeaway/pie-webc": "0.0.0-snapshot-release-20260703135516",
"@lit-labs/nextjs": "0.2.4",
"@lit/react": "1.0.8",
"next": "15.5.7",
Expand Down
60 changes: 51 additions & 9 deletions nextjs-app-v15/src/app/components/switch/switch.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,24 +1,66 @@
'use client';

import NavigationLayout from "@/app/layout/navigation";
import { PieDivider } from '@justeattakeaway/pie-webc/react/divider.js';
import { PieSwitch } from '@justeattakeaway/pie-webc/react/switch.js';
import { useState } from "react";

export default function Switch() {
const [isSwitchChecked, setIsSwitchCheck] = useState(false);
const [switchStates, setSwitchStates] = useState<Record<string, boolean>>({
'story-switch': false,
'external-switch': false,
'wrapping-switch': false,
'multi-label-switch': false,
});

const handleSwitchChange = () => {
setIsSwitchCheck(current => !current);
console.log(isSwitchChecked);
const handleSwitchChange = (event: CustomEvent) => {
const switchId = (event.currentTarget as HTMLElement).id;

setSwitchStates(current => ({
...current,
[switchId]: !current[switchId],
}));
};

return (
<NavigationLayout title="Switch">
<PieSwitch
label={`checked: ${isSwitchChecked}`}
checked={isSwitchChecked}
onChange={handleSwitchChange}>
</PieSwitch>
<PieSwitch
id="story-switch"
label={`checked: ${switchStates['story-switch']}`}
checked={switchStates['story-switch']}
onChange={handleSwitchChange}>
</PieSwitch>

<PieDivider label="External labels" />


<label className="switch-label" htmlFor="external-switch">Toggle via for attribute</label>
<PieSwitch
id="external-switch"
checked={switchStates['external-switch']}
onChange={handleSwitchChange}>
</PieSwitch>

<PieDivider />

<label style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
<span className="switch-label">Toggle via wrapping label</span>
<PieSwitch
id="wrapping-switch"
checked={switchStates['wrapping-switch']}
onChange={handleSwitchChange}>
</PieSwitch>
</label>

<PieDivider />

<label className="switch-label" htmlFor="multi-label-switch">First label</label>
<label className="switch-label" htmlFor="multi-label-switch">Second label</label>
<PieSwitch
id="multi-label-switch"
checked={switchStates['multi-label-switch']}
onChange={handleSwitchChange}>
</PieSwitch>
</NavigationLayout>
);
}
4 changes: 2 additions & 2 deletions nuxt-app/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,8 @@
},
"dependencies": {
"@justeattakeaway/pie-css": "1.2.0",
"@justeattakeaway/pie-icons-webc": "1.25.1",
"@justeattakeaway/pie-webc": "0.10.21",
"@justeattakeaway/pie-icons-webc": "0.0.0-snapshot-release-20260703135516",
"@justeattakeaway/pie-webc": "0.0.0-snapshot-release-20260703135516",
"just-kebab-case": "4.2.0",
"nuxt-ssr-lit": "1.6.27"
},
Expand Down
38 changes: 33 additions & 5 deletions nuxt-app/pages/components/switch.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,51 @@
<template>
<div>
<pie-switch :label="`checked: ${checked}`" :checked="checked" @change="handleSwitchChange">
<pie-switch id="story-switch" :label="`checked: ${switchStates['story-switch']}`" :checked="switchStates['story-switch']" @change="handleSwitchChange">
</pie-switch>

<pie-divider label="External labels"></pie-divider>

<label class="switch-label" for="external-switch">Toggle via for attribute</label>
<pie-switch id="external-switch" :checked="switchStates['external-switch']" @change="handleSwitchChange">
</pie-switch>

<pie-divider></pie-divider>

<label style="display: flex; flex-direction: column; gap: 4px;">
<span class="switch-label">Toggle via wrapping label</span>
<pie-switch id="wrapping-switch" :checked="switchStates['wrapping-switch']" @change="handleSwitchChange">
</pie-switch>
</label>

<pie-divider></pie-divider>

<label class="switch-label" for="multi-label-switch">First label</label>
<label class="switch-label" for="multi-label-switch">Second label</label>
<pie-switch id="multi-label-switch" :checked="switchStates['multi-label-switch']" @change="handleSwitchChange">
</pie-switch>
</div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { reactive } from 'vue';
import { definePageMeta } from '#imports';
import '@justeattakeaway/pie-webc/components/switch.js';

definePageMeta({
title: 'Switch',
});

let checked = ref(false);
const switchStates = reactive<Record<string, boolean>>({
'story-switch': false,
'external-switch': false,
'wrapping-switch': false,
'multi-label-switch': false,
});

function handleSwitchChange(event: Event) {
const switchId = (event.currentTarget as HTMLElement).id;

function handleSwitchChange() {
checked.value = !checked.value;
switchStates[switchId] = !switchStates[switchId];
}

</script>
49 changes: 40 additions & 9 deletions vanilla-app/js/switch.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,20 +2,51 @@ import '@justeattakeaway/pie-webc/components/switch.js';
import './shared.js';
import './utils/navigation.js';

let checked = false;
const state = {
'story-switch': false,
'external-switch': false,
'wrapping-switch': false,
'multi-label-switch': false,
};

function handleSwitchChange() {
checked = !checked;
function handleSwitchChange(event) {
const switchId = event.currentTarget.id;
state[switchId] = !state[switchId];

const pieSwitch = document.querySelector('pie-switch');
pieSwitch.setAttribute('label', `checked: ${checked}`);
pieSwitch.checked = checked;
const pieSwitch = document.querySelector(`#${switchId}`);

if (switchId === 'story-switch') {
pieSwitch.setAttribute('label', `checked: ${state[switchId]}`);
}

pieSwitch.checked = state[switchId];
}

// Set initial HTML structure
document.querySelector('#app').innerHTML = `
<pie-switch label="checked: ${checked}"></pie-switch>
<pie-switch id="story-switch" label="checked: ${state['story-switch']}"></pie-switch>

<pie-divider label="External labels"></pie-divider>

<label class="switch-label" for="external-switch">Toggle via for attribute</label>
<pie-switch id="external-switch"></pie-switch>

<pie-divider></pie-divider>

<label style="display: flex; flex-direction: column; gap: 4px;">
<span class="switch-label">Toggle via wrapping label</span>
<pie-switch id="wrapping-switch"></pie-switch>
</label>

<pie-divider></pie-divider>

<label class="switch-label" for="multi-label-switch">First label</label>
<label class="switch-label" for="multi-label-switch">Second label</label>
<pie-switch id="multi-label-switch"></pie-switch>
`;

// Add event listener to pie-switch for change events
document.querySelector('pie-switch').addEventListener('change', handleSwitchChange);
Object.keys(state).forEach((key) => {
const pieSwitch = document.querySelector(`#${key}`);
pieSwitch.checked = state[key];
pieSwitch.addEventListener('change', handleSwitchChange);
});
4 changes: 2 additions & 2 deletions vanilla-app/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,8 @@
},
"dependencies": {
"@justeattakeaway/pie-css": "1.2.0",
"@justeattakeaway/pie-icons-webc": "1.25.1",
"@justeattakeaway/pie-webc": "0.10.21"
"@justeattakeaway/pie-icons-webc": "0.0.0-snapshot-release-20260703135516",
"@justeattakeaway/pie-webc": "0.0.0-snapshot-release-20260703135516"
},
"installConfig": {
"hoistingLimits": "workspaces"
Expand Down
Loading
Loading