feat(staples): A3/D3 — Pantry staples toggle UI #35

Merged
marcel merged 17 commits from feat/issue-20-pantry-staples into master 2026-04-03 09:35:03 +02:00
2 changed files with 9 additions and 1 deletions
Showing only changes of commit 73b33ee956 - Show all commits

View File

@@ -10,7 +10,7 @@
type="button"
aria-pressed={selected}
onclick={() => onToggle(!selected)}
class="inline-flex text-[12px] font-medium px-[12px] py-[6px] rounded-full border cursor-pointer
class="inline-flex font-sans text-[13px] font-medium tracking-[0.04em] px-[12px] py-[6px] rounded-full border cursor-pointer
focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--green-light)]
{selected
? 'bg-[var(--green-tint)] border-[var(--green-light)] text-[var(--green-dark)]'

View File

@@ -42,4 +42,12 @@ describe('StapleChip', () => {
const btn = screen.getByRole('button', { name: 'Olivenöl' });
expect(btn.className).toContain('focus-visible:outline');
});
it('uses design-system button text spec: 13px, tracking, font-sans', () => {
render(StapleChip, { props: { name: 'Olivenöl', selected: false, onToggle: vi.fn() } });
const btn = screen.getByRole('button', { name: 'Olivenöl' });
expect(btn.className).toContain('text-[13px]');
expect(btn.className).toContain('tracking-[0.04em]');
expect(btn.className).toContain('font-sans');
});
});