@repobit/dex-system-design 0.22.12 → 0.23.2

package/src/components/highlight/highlight.stories.js

@@ -1,53 +1,168 @@
-import { html } from "lit";
-import "./highlight.js";
+import { html } from 'lit';
+import './highlight.js';
 
 export default {
-  title    : "Atoms/Highlight",
-  component: "highlight",
-  tags     : ["autodocs"],
-  argTypes : {
-    highlightText: { control: "text" },
-    defaultSlot  : { control: "text", name: "Text Content" }
+  title     : 'Components/Highlight',
+  tags      : ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+**BdHighlightSection** renders a styled headline paragraph with optional decorative highlighting around a specific word or phrase.
+
+### Usage
+\`\`\`html
+<bd-highlight highlight-text="family member">
+  Customized protection for each family member
+</bd-highlight>
+
+<bd-highlight highlight-text="award-winning" sub-title="Why Bitdefender">
+  Trusted award-winning security
+</bd-highlight>
+\`\`\`
+
+### Behavior
+- The component reads \`this.textContent\` and splits it on \`highlight-text\`
+- If \`highlight-text\` is not found in the text, the full slot content is rendered without decoration
+- If found, the highlighted word gets a \`<span class="highlight">\` wrapper with decorative SVG elements (ellipses + rectangles) added on both sides
+- The right-side decoration is injected via \`updated()\` using direct DOM manipulation
+
+### Notes
+- \`sub-title\` renders an \`<h6>\` above the headline
+- SVG decorations are injected via \`anchor.appendChild()\` in \`updated()\` — not re-injected on re-render if already present
+        `
+      }
+    }
+  },
+  argTypes: {
+    highlightText: {
+      control    : 'text',
+      description: 'The word or phrase to highlight within the slotted text. Must exactly match a substring of the text content.',
+      table      : { type: { summary: 'string' }, defaultValue: { summary: '' }, category: 'Content' }
+    },
+    subTitle: {
+      control    : 'text',
+      description: 'Optional subtitle rendered as `<h6>` above the headline',
+      table      : { type: { summary: 'string' }, defaultValue: { summary: '' }, category: 'Content' }
+    }
   }
 };
 
-const Template = ({ highlightText, defaultSlot }) => html`
-  <bd-highlight highlight-text="${highlightText}">
-    ${defaultSlot}
-  </bd-highlight>
-`;
+// ─── Stories ───────────────────────────────────────────────────────────────
+
+export const Default = {
+  name  : 'Default — With Highlight',
+  render: () => html`
+    <bd-highlight highlight-text="family member">
+      Customized online protection for each family member - Smart, Private & Safe
+    </bd-highlight>
+  `,
+  parameters: { docs: { description: { story: 'The phrase "family member" is found in the text and wrapped with decorative SVG highlight elements.' } } }
+};
+
+export const WithSubTitle = {
+  name  : 'With Sub-Title',
+  render: () => html`
+    <bd-highlight highlight-text="award-winning" sub-title="Why Bitdefender">
+      Trusted award-winning cybersecurity since 2001
+    </bd-highlight>
+  `,
+  parameters: { docs: { description: { story: '`sub-title` renders an `<h6>` label above the highlighted headline.' } } }
+};
+
+export const NoHighlight = {
+  name  : 'No Highlight Match',
+  render: () => html`
+    <bd-highlight highlight-text="nonexistent phrase">
+      World-class security software you can trust
+    </bd-highlight>
+  `,
+  parameters: { docs: { description: { story: '`highlight-text` does not match any substring in the text — full content is rendered via `<slot>` without decoration.' } } }
+};
+
+export const EmptyHighlightText = {
+  name  : 'Empty highlight-text',
+  render: () => html`
+    <bd-highlight highlight-text="">
+      Protect what matters most to you and your family
+    </bd-highlight>
+  `,
+  parameters: { docs: { description: { story: '`highlight-text` is empty string — the condition `!highlightText` triggers the fallback, rendering the full slot without any decoration.' } } }
+};
+
+export const NoSubTitle = {
+  name  : 'No Sub-Title',
+  render: () => html`
+    <bd-highlight highlight-text="devices">
+      Complete protection for all your devices
+    </bd-highlight>
+  `,
+  parameters: { docs: { description: { story: 'No `sub-title` prop — the `<h6>` is conditionally omitted.' } } }
+};
 
-export const Default = Template.bind({});
-Default.args = {
-  highlightText: "next generation of digital security",
-  defaultSlot:
-    "Introducing the next generation of digital security: your personalized shield for a worry-free online experience."
+export const HighlightFirstWord = {
+  name  : 'Highlight First Word',
+  render: () => html`
+    <bd-highlight highlight-text="Complete">
+      Complete protection for all your devices
+    </bd-highlight>
+  `,
+  parameters: { docs: { description: { story: 'The highlighted phrase appears at the very start of the text — `before` is empty string.' } } }
 };
 
-export const LongText = Template.bind({});
-LongText.args = {
-  highlightText: "next generation of digital security test test testtest123",
-  defaultSlot:
-    "Introducing the next generation of digital security test test testtest123: your personalized shield for a worry-free online experience."
+export const HighlightLastWord = {
+  name  : 'Highlight Last Word',
+  render: () => html`
+    <bd-highlight highlight-text="devices">
+      Complete protection for all your devices
+    </bd-highlight>
+  `,
+  parameters: { docs: { description: { story: 'The highlighted phrase appears at the very end of the text — `after` is empty string.' } } }
 };
 
-export const ShortText = Template.bind({});
-ShortText.args = {
-  highlightText: "Introducing",
-  defaultSlot:
-    "Introducing the next generation of digital security: your personalized shield for a worry-free online experience."
+export const HighlightMultiWord = {
+  name  : 'Highlight Multi-Word Phrase',
+  render: () => html`
+    <bd-highlight highlight-text="all your devices">
+      Complete protection for all your devices and accounts
+    </bd-highlight>
+  `,
+  parameters: { docs: { description: { story: 'A multi-word phrase is highlighted. The decoration spans the entire phrase.' } } }
 };
 
-export const MissingHighlight = Template.bind({});
-MissingHighlight.args = {
-  highlightText: "something not in the text",
-  defaultSlot:
-    "Introducing the next generation of digital security: your personalized shield for a worry-free online experience."
+export const WithSubTitleAndHighlight = {
+  name  : 'Sub-Title + Highlight Combined',
+  render: () => html`
+    <bd-highlight highlight-text="family" sub-title="Designed for families">
+      Smart security made for every family member
+    </bd-highlight>
+  `,
+  parameters: { docs: { description: { story: 'Both `sub-title` and `highlight-text` props active at the same time.' } } }
 };
 
-export const MultipleOccurrences = Template.bind({});
-MultipleOccurrences.args = {
-  highlightText: "security",
-  defaultSlot:
-    "This security system improves your security and brings peace of mind to your digital experience."
+export const MobileView = {
+  name  : 'Mobile View (375px)',
+  render: () => html`
+    <bd-highlight highlight-text="family member" sub-title="Family Protection">
+      Customized online protection for each family member - Smart, Private & Safe
+    </bd-highlight>
+  `,
+  parameters: {
+    viewport: { defaultViewport: 'mobile1' },
+    docs    : { description: { story: 'Highlight component at 375px. Tests text wrap and SVG decoration alignment on small screens.' } }
+  }
 };
+
+export const Playground = {
+  name: '🛝 Playground',
+  args: {
+    highlightText: 'family member',
+    subTitle     : 'Why Bitdefender'
+  },
+  render: (args) => html`
+    <bd-highlight highlight-text="${args.highlightText}" sub-title="${args.subTitle}">
+      Customized online protection for each family member - Smart, Private & Safe
+    </bd-highlight>
+  `,
+  parameters: { docs: { description: { story: 'Interactive playground. Change `highlight-text` to any substring of the content to see it highlighted, or set it to a non-matching string to see the fallback.' } } }
+};