KeywordHighlight

Highlights every case-insensitive keyword match inside a text run with the price-yellow <mark> background — used by ProductCardSimple search results.

Filters & Search

No keyword

Single match

Multiple matches

Case-insensitive match

/** @jsxRuntime automatic */ /** @jsxImportSource preact */ // Story for KeywordHighlight — new coverage (epic #1647, wave 6 / #1660). import { defineStory } from '@lib/styleguide/story-contract'; import type { StoryMeta } from '@lib/styleguide/story-contract'; import { KeywordHighlight } from './keyword-highlight'; const meta: StoryMeta = { title: 'KeywordHighlight', category: 'Filters & Search', description: 'Highlights every case-insensitive keyword match inside a text run with the price-yellow <mark> background — used by ProductCardSimple search results.', usage: `import { KeywordHighlight } from '@/src/components/products/keyword-highlight';\n\n<KeywordHighlight text="OXI Coral" keyword="coral" />`, }; export default meta; export const NoKeyword = defineStory({ name: 'No keyword', render: () => <KeywordHighlight text="OXI Coral 8-voice polysynth module" keyword="" />, }); export const SingleMatch = defineStory({ name: 'Single match', render: () => <KeywordHighlight text="OXI Coral 8-voice polysynth module" keyword="coral" />, }); export const MultipleMatches = defineStory({ name: 'Multiple matches', render: () => ( <KeywordHighlight text="ADDAC104 VC Chorus is one of ADDAC's most flexible filter modules" keyword="ADDAC" /> ), }); export const CaseInsensitiveMatch = defineStory({ name: 'Case-insensitive match', render: () => <KeywordHighlight text="Weston Precision Audio MIDI interface" keyword="MIDI" />, });