@repobit/dex-system-design 0.22.12 → 0.23.1

package/src/components/modal/modal.stories.js

@@ -1,40 +1,186 @@
-// src/stories/Modal.stories.js
-import { html } from "lit";
-import "../../components/modal/modal.js";
+import { html } from 'lit';
+import './modal.js';
 
 export default {
-  title    : "Components/Modal",
-  component: "bd-modal",
-  argTypes : {
-    open     : { control: "boolean" },
-    title    : { control: "text" },
-    icon     : { control: "text" },
-    modalText: { control: "text" },
-    onClose  : { action: "close-modal" }
+  title     : 'Components/Modal',
+  tags      : ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+**BdModal** is a Lit modal dialog component with icon, title, and description support.
+
+### Usage
+\`\`\`html
+<bd-modal
+  .open="${true}"
+  title="VPN Protection"
+  icon="/assets/vpn.svg"
+  modalText="Our VPN encrypts your connection."
+  @close-modal="${() => {}}"
+></bd-modal>
+\`\`\`
+
+### Behavior
+- Clicking the backdrop (\`.bd-modal\`) fires \`close-modal\` event
+- Clicking inside \`.bd-modal-content\` stops propagation (does not close)
+- The Close button also fires \`close-modal\`
+- \`aria-hidden\` is set to \`"false"\` when open, \`"true"\` when closed
+
+### Events
+- \`close-modal\` — CustomEvent, bubbles and composed, fired on backdrop click or close button click
+
+### Accessibility
+- \`aria-labelledby="modal-title"\` links to the \`<bd-h>\` heading
+- \`aria-describedby="modal-description"\` links to the \`<bd-p>\` text
+        `
+      }
+    }
+  },
+  argTypes: {
+    open: {
+      control    : 'boolean',
+      description: 'Controls visibility. Sets `aria-hidden` on the modal wrapper.',
+      table      : { type: { summary: 'boolean' }, defaultValue: { summary: 'false' }, category: 'State' }
+    },
+    title: {
+      control    : 'text',
+      description: 'Modal title rendered as `<bd-h as="h2">`',
+      table      : { type: { summary: 'string' }, defaultValue: { summary: '' }, category: 'Content' }
+    },
+    modalText: {
+      control    : 'text',
+      description: 'Modal body text rendered as `<bd-p kind="regular">`',
+      table      : { type: { summary: 'string' }, defaultValue: { summary: '' }, category: 'Content' }
+    },
+    icon: {
+      control    : 'text',
+      description: 'Optional icon image URL shown above the title',
+      table      : { type: { summary: 'string' }, defaultValue: { summary: '' }, category: 'Content' }
+    }
   }
 };
 
-const Template = ({ open, title, icon, modalText, onClose }) => html`
+const defaultArgs = {
+  open     : true,
+  title    : 'VPN Protection',
+  modalText: 'Our VPN encrypts your internet traffic and hides your IP address, keeping you safe on public networks.',
+  icon     : '/assets/vpn.svg'
+};
+
+const render = (args) => html`
   <bd-modal
-    ?open=${open}
-    title=${title}
-    icon=${icon}
-    modalText=${modalText}
-    @close-modal=${onClose}
+    .open="${args.open}"
+    title="${args.title}"
+    modalText="${args.modalText}"
+    icon="${args.icon}"
   ></bd-modal>
 `;
 
-export const Default = Template.bind({});
-Default.args = {
-  open     : true,
-  title    : "Example Modal",
-  icon     : "https://via.placeholder.com/40",
-  modalText: "This is a simple modal component."
+// ─── Stories ───────────────────────────────────────────────────────────────
+
+export const Default = {
+  name  : 'Default (Open)',
+  render: () => html`
+    <bd-modal
+      .open="${true}"
+      title="VPN Protection"
+      modalText="Our VPN encrypts your internet traffic and hides your IP address, keeping you safe on public Wi-Fi networks and preventing tracking."
+      icon="/assets/vpn.svg"
+    ></bd-modal>
+  `,
+  parameters: { docs: { description: { story: 'Modal rendered in the open state with icon, title, and body text.' } } }
+};
+
+export const Closed = {
+  name  : 'Closed State',
+  render: () => html`
+    <p style="font-size:14px;">The modal below is closed — it has <code>aria-hidden="true"</code> but is still in the DOM.</p>
+    <bd-modal
+      .open="${false}"
+      title="VPN Protection"
+      modalText="This modal is closed."
+      icon="/assets/vpn.svg"
+    ></bd-modal>
+  `,
+  parameters: { docs: { description: { story: 'Modal with `open=false` — renders in the DOM with `aria-hidden="true"`. Visibility depends on CSS handling of the open state.' } } }
 };
 
-export const Closed = Template.bind({});
-Closed.args = {
-  open     : false,
-  title    : "Closed Modal",
-  modalText: "You should not see this modal because it is closed."
+export const NoIcon = {
+  name  : 'No Icon',
+  render: () => html`
+    <bd-modal
+      .open="${true}"
+      title="Antivirus Protection"
+      modalText="Real-time detection and removal of viruses, malware, ransomware, and other threats."
+    ></bd-modal>
+  `,
+  parameters: { docs: { description: { story: 'Modal without an `icon` prop — the `<img>` is conditionally omitted.' } } }
 };
+
+export const LongText = {
+  name  : 'Long Modal Text',
+  render: () => html`
+    <bd-modal
+      .open="${true}"
+      title="Behavioral Analysis"
+      icon="/assets/analysis.svg"
+      modalText="Bitdefender's behavioral detection technology monitors active applications in real time for suspicious activity. Unlike traditional signature-based detection, behavioral analysis can identify zero-day threats and novel malware variants by observing what a program does, not just what it looks like. When suspicious behavior is detected — such as a process attempting to encrypt files, modify system registries, or communicate with known malicious servers — Bitdefender immediately quarantines the threat before damage can occur."
+    ></bd-modal>
+  `,
+  parameters: { docs: { description: { story: 'Modal with a long `modalText` paragraph. Tests content overflow and scroll behavior.' } } }
+};
+
+export const DifferentTitles = {
+  name  : 'Various Content Types',
+  render: () => html`
+    <div style="display:flex; flex-direction:column; gap:32px;">
+      <bd-modal .open="${true}" title="VPN Protection" icon="/assets/vpn.svg" modalText="Unlimited encrypted VPN traffic across 200+ servers."></bd-modal>
+      <bd-modal .open="${true}" title="Password Manager" modalText="Store and autofill passwords securely across all your devices."></bd-modal>
+      <bd-modal .open="${true}" title="Parental Controls" icon="/assets/parental.svg" modalText="Monitor your children's online activity and set screen time limits."></bd-modal>
+    </div>
+  `,
+  parameters: { docs: { description: { story: 'Three modals stacked for visual comparison of different content configurations.' } } }
+};
+
+export const CloseInteraction = {
+  name  : 'Close Interaction Demo',
+  render: () => {
+    let modalEl;
+    const handleClose = () => { if (modalEl) modalEl.open = false; };
+    return html`
+      <button @click="${() => { if (modalEl) modalEl.open = true; }}" style="margin-bottom:16px; padding:8px 16px;">Open Modal</button>
+      <bd-modal
+        .open="${false}"
+        title="Interactive Modal"
+        modalText="Click the backdrop or the Close button to dismiss this modal. The close-modal event is dispatched."
+        @close-modal="${handleClose}"
+        ${(el) => { modalEl = el; }}
+      ></bd-modal>
+    `;
+  },
+  parameters: { docs: { description: { story: 'Interactive demo: click the button to open, then click backdrop or Close button to dismiss via the `close-modal` event.' } } }
+};
+
+export const MobileView = {
+  name  : 'Mobile View (375px)',
+  render: () => html`
+    <bd-modal
+      .open="${true}"
+      title="VPN Protection"
+      modalText="Unlimited encrypted VPN traffic and IP masking."
+      icon="/assets/vpn.svg"
+    ></bd-modal>
+  `,
+  parameters: {
+    viewport: { defaultViewport: 'mobile1' },
+    docs    : { description: { story: 'Modal at 375px. Tests content padding, font scaling, and button layout on small screens.' } }
+  }
+};
+
+export const Playground = {
+  name      : '🛝 Playground',
+  args      : { ...defaultArgs },
+  render,
+  parameters: { docs: { description: { story: 'Fully interactive. Toggle `open`, change title, modalText, and icon via Controls.' } } }
+};

package/src/components/paragraph/paragraph.css.js

@@ -34,11 +34,20 @@ export default css`
     line-height: var(--typography-body-small-lineHeight);
     letter-spacing: var(--typography-body-small-letterSpacing);
   }
-
+  :host([kind="xsmall"]) p {
+    font-size: var(--typography-label-xsmall-fontSize);
+    font-weight: var(--typography-body-small-fontWeight);
+    line-height: var(--typography-body-small-lineHeight);
+    letter-spacing: var(--typography-body-small-letterSpacing);
+  }
   :host([kind="lead"]) p {
     font-size: var(--typography-body-lead-fontSize);
     font-weight: var(--typography-body-lead-fontWeight);
     line-height: var(--typography-body-lead-lineHeight);
     letter-spacing: var(--typography-body-lead-letterSpacing);
   }
+
+
+  
+
 `;