hb-faq-component

Category: content · Tags: content

Summary

hb-faq-component shows topic chips (Bootstrap Icons + labels) and an accordion FAQ list. Topics can narrow entries by topic key; a chip with catchAll clears the filter. Answer bodies use {@html} — only trusted HTML.

What it does

1. Parse: In $effect, string info / topics are JSON.parsed into arrays; invalid JSON is logged.
2. Topics: Renders a flex wrap of light buttons; catchAll sets filter to undefined, else sets filter to the chip key.
3. List: For each info item (optionally filtered by filter), a checkbox + label accordion row shows title and HTML text.
4. Icons: Loads Bootstrap Icons CSS in <svelte:head> for bi-{icon} classes.

Custom element

hb-faq-component

Attributes

Attributes are snake_case. From HTML, structured props are JSON strings.

| Attribute | Type (logical) | HTML / notes | | --- | --- | --- | | id | string (optional) | Host id. | | style | string (optional) | In typings; not read in the current script. | | info | string | FaqInfoItem[] | FAQ rows: title, text (HTML), optional topic for filtering. | | topics | string | FaqTopicChip[] | Chips: key, label, icon (Bootstrap icon name without bi-), optional catchAll, optional index (filled when parsing JSON). | | filter | string (optional) | Active topic key; chips update this; catch-all clears it. |

Custom events

None — Events is {} in types/webcomponent.type.d.ts.

Styling

CSS custom properties (extra/docs.ts)

| Variable | Role | | --- | --- | | --bulma-column-gap | Gap between topic buttons. | | --bulma-block-spacing | Vertical padding per FAQ row. | | --bulma-border | Divider between accordion items. | | --bulma-text | Expand “+” color. | | --bulma-size-4 | Question label size. | | --bulma-size-5 | Answer body size. |

CSS parts

None.

Slots

None — see extra/docs.ts (htmlSlots).

TypeScript

types/webcomponent.type.d.ts — Component, Events, FaqInfoItem, FaqTopicChip.

Behavior notes

• Accordion id / for use title with spaces removed — duplicate titles in the same list can collide.
• Bootstrap Icons font is loaded from jsDelivr in the document head.

Minimal HTML example

<hb-faq-component
  topics='[{"key":"general","label":"General","icon":"question-circle"}]'
  info='[{"topic":"general","title":"What is this?","text":"<p>Short <strong>HTML</strong> answer.</p>"}]'
></hb-faq-component>

Security

Only pass HTML you trust in info[].text, or sanitize before serializing JSON.