@repobit/dex-system-design 0.22.12 → 0.23.1

package/src/components/termsOfUse/terms.stories.js

@@ -1,15 +1,230 @@
 import { html } from 'lit';
-
 import './terms.js';
 
 export default {
-  title    : 'Components/TermsSection',
-  component: 'bd-terms-section',
-  tags     : ['autodocs']
+  title     : 'Components/TermsSection',
+  component : 'bd-terms-section',
+  tags      : ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+**TermsSection** is a Lit component that renders a Terms of Use section with a configurable FAQ/terms list.
+
+### Usage
+\`\`\`html
+<!-- Default terms (auto-renewal, cancellation, etc.) -->
+<bd-terms-section></bd-terms-section>
+
+<!-- Custom FAQ content -->
+<bd-terms-section .faqs="${'[{ question: "...", items: ["..."] }]'}"></bd-terms-section>
+\`\`\`
+
+### FAQ Item Structure
+Each item in the \`faqs\` array has:
+- \`question\` (string) — rendered as a bold paragraph heading
+- \`items\` (array) — list items rendered as \`<bd-list>\` with \`<bd-li>\` bullets. Items can be plain strings or Lit \`html\` template literals (for links).
+
+### Default FAQs
+1. Auto renewal terms
+2. What the Bitdefender Auto Renewal Plan means for you
+3. Affirmative consent
+4. How to cancel + email address cancelation support
+
+### Notes
+- Cancel/refund items use \`html\` template literals with \`<a>\` tags for clickable email links
+- Additional static legal paragraphs (Subscription Agreement, YouTube ToS) are always rendered below the FAQ list
+        `
+      }
+    }
+  },
+  argTypes: {
+    faqs: {
+      control    : 'object',
+      description: 'Array of FAQ objects with `question` (string) and `items` (string[] or html[]) properties',
+      table      : {
+        type        : { summary: 'Array<{ question: string, items: (string | TemplateResult)[] }>' },
+        defaultValue: { summary: 'Default auto-renewal terms' },
+        category    : 'Content'
+      }
+    }
+  }
+};
+
+const defaultFaqs = [
+  {
+    question: 'Auto renewal terms',
+    items   : [
+      'Your subscription automatically begins at the purchase date;',
+      'By subscribing, you are purchasing a recurring subscription which will automatically renew;',
+      'The Bitdefender Auto Renewal Plan is designed to save you time, effort, and minimize your vulnerability risk.'
+    ]
+  },
+  {
+    question: 'What the Bitdefender Auto Renewal Plan means for you',
+    items   : [
+      'Continuous protection so that you never have to worry about your subscription running out;',
+      'Free upgrades whenever a new version of Bitdefender comes out;',
+      'Peace of mind that your devices are always protected;',
+      '24/7 security all-subscription long without interruption.'
+    ]
+  },
+  {
+    question: 'Affirmative consent',
+    items   : [
+      'Your subscription automatically begins at the purchase date;',
+      'By subscribing, you are purchasing a recurring subscription which will automatically renew.'
+    ]
+  },
+  {
+    question: 'How to cancel + email address cancelation support',
+    items   : [
+      'You can cancel your subscription from Bitdefender Central or by contacting Customer Support.',
+      'You can request a refund by contacting refunds@bitdefender.com within 30 days of your initial purchase.'
+    ]
+  }
+];
+
+// ─── Stories ───────────────────────────────────────────────────────────────
+
+export const Default = {
+  name      : 'Default (All Terms)',
+  render    : () => html`<bd-terms-section></bd-terms-section>`,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Default terms section with all four FAQ items and static legal paragraphs at the bottom.'
+      }
+    }
+  }
+};
+
+export const SingleFaq = {
+  name  : 'Single FAQ Item',
+  render: () => html`
+    <bd-terms-section .faqs="${[defaultFaqs[0]]}"></bd-terms-section>
+  `,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Only the first FAQ item (Auto renewal terms) rendered.'
+      }
+    }
+  }
 };
 
-const Template = () => html`
-  <bd-terms-section></bd-terms-section>
-`;
+export const TwoFaqs = {
+  name  : 'Two FAQ Items',
+  render: () => html`
+    <bd-terms-section .faqs="${defaultFaqs.slice(0, 2)}"></bd-terms-section>
+  `,
+  parameters: {
+    docs: {
+      description: {
+        story: 'First two FAQ items: auto renewal terms and what the plan means.'
+      }
+    }
+  }
+};
+
+export const CancellationOnly = {
+  name  : 'Cancellation Section Only',
+  render: () => html`
+    <bd-terms-section .faqs="${[defaultFaqs[3]]}"></bd-terms-section>
+  `,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Only the cancellation and refund FAQ item — the one that contains email links as html template literals.'
+      }
+    }
+  }
+};
+
+export const CustomFaqs = {
+  name  : 'Custom FAQ Content',
+  render: () => html`
+    <bd-terms-section .faqs="${[
+      {
+        question: 'Money-back guarantee',
+        items   : [
+          'Bitdefender offers a 30-day money-back guarantee on all new purchases;',
+          'Refund requests must be submitted within 30 days of the purchase date;',
+          'Renewals are eligible for a refund within 30 days of the renewal billing date.'
+        ]
+      },
+      {
+        question: 'Supported platforms',
+        items   : [
+          'Windows 10 / 11 (32-bit and 64-bit);',
+          'macOS 12 Monterey or later;',
+          'Android 8.0 or later;',
+          'iOS 14.0 or later.'
+        ]
+      }
+    ]}"></bd-terms-section>
+  `,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Custom `faqs` array with money-back guarantee and platform support content.'
+      }
+    }
+  }
+};
+
+export const EmptyFaqs = {
+  name      : 'Empty FAQs (edge case)',
+  render    : () => html`<bd-terms-section .faqs="${[]}"></bd-terms-section>`,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Edge case: empty `faqs` array. Only the static legal paragraphs at the bottom are rendered.'
+      }
+    }
+  }
+};
+
+export const SingleItemPerFaq = {
+  name  : 'Single Item Per FAQ',
+  render: () => html`
+    <bd-terms-section .faqs="${[
+      { question: 'Auto-renewal', items: ['Your subscription renews automatically each year.'] },
+      { question: 'Cancellation', items: ['Cancel anytime from Bitdefender Central.'] },
+      { question: 'Refunds',      items: ['30-day money-back guarantee on all purchases.'] }
+    ]}"></bd-terms-section>
+  `,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Three FAQ items each with only one bullet point.'
+      }
+    }
+  }
+};
+
+export const MobileView = {
+  name      : 'Mobile View (375px)',
+  render    : () => html`<bd-terms-section></bd-terms-section>`,
+  parameters: {
+    viewport: { defaultViewport: 'mobile1' },
+    docs    : {
+      description: {
+        story: 'Terms section at 375px mobile viewport. Tests text wrap, list indentation, and link layout on small screens.'
+      }
+    }
+  }
+};
 
-export const Default = Template.bind({});
+export const Playground = {
+  name      : '🛝 Playground',
+  args      : { faqs: defaultFaqs },
+  render    : (args) => html`<bd-terms-section .faqs="${args.faqs}"></bd-terms-section>`,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Interactive playground. Edit the `faqs` array in Controls to customize questions and items.'
+      }
+    }
+  }
+};

package/src/tokens/tokens.js

@@ -278,6 +278,7 @@ export const tokens = css`
         --typography-label-small-fontFamily: var(--typography-fontFamily-sans);
 
         --typography-label-extra-small-fontSize: var(--typography-fontSize-xxs);
+        --typography-label-xsmall-fontSize: var(--typography-fontSize-xs);
 
         --typography-label-large-fontSize: var(--typography-fontSize-base);
         --typography-label-large-fontWeight: var(--typography-fontWeight-medium);